chore: Changed styling of the liveSpeak and remoteSpeak sourceLayer types so that main upper section of the pieces are made 20% taller, and lower green section of the pieces (representing audio) is made 20% smaller. Also added a 1 pixel high semi-transparent separator to aid color-deficient users in seeing the contrast, especially for the liveSpeak pieces with blue/green tones.

The justification for this change is to visually separate these pieces from split pieces.

Author: hummelstrand

packages/webui/src/client/styles/_itemTypeColors.scss

@@ -10,34 +10,39 @@ $segment-layer-background-graphics: #dc5c00;
 $segment-layer-background-graphics--second: darken($segment-layer-background-graphics, 10%);
 $segment-layer-border-live-speak: #2f74ff;
 /** Gradients need to be defined with each color separately, so that they can be applied in SVG **/
+$segment-layer-background-gradient-divider: rgba(0, 0, 0, 0.5) 1px;
 $segment-layer-background-live-speak-1: #2f74ff;
 $segment-layer-background-live-speak-2: #39762b;
 $segment-layer-background-live-speak: linear-gradient(
 	to bottom,
-	$segment-layer-background-live-speak-1 50%,
-	$segment-layer-background-live-speak-2 50%
+	$segment-layer-background-live-speak-1 70%,
+	$segment-layer-background-gradient-divider,
+	$segment-layer-background-live-speak-2 72%
 );
 $segment-layer-background-live-speak--second-1: darken(#2f74ff, 10%);
 $segment-layer-background-live-speak--second-2: darken(#39762b, 10%);
 $segment-layer-background-live-speak--second: linear-gradient(
 	to bottom,
-	$segment-layer-background-live-speak--second-1 50%,
-	$segment-layer-background-live-speak--second-2 50%
+	$segment-layer-background-live-speak--second-1 70%,
+	$segment-layer-background-gradient-divider,
+	$segment-layer-background-live-speak--second-2 72%
 );
 $segment-layer-border-remote-speak: #e80064;
 $segment-layer-background-remote-speak-1: #e80064;
 $segment-layer-background-remote-speak-2: #39762b;
 $segment-layer-background-remote-speak: linear-gradient(
 	to bottom,
-	$segment-layer-background-remote-speak-1 50%,
-	$segment-layer-background-remote-speak-2 50%
+	$segment-layer-background-remote-speak-1 70%,
+	$segment-layer-background-gradient-divider,
+	$segment-layer-background-remote-speak-2 72%
 );
 $segment-layer-background-remote-speak--second-1: darken(#e80064, 10%);
 $segment-layer-background-remote-speak--second-2: darken(#39762b, 10%);
 $segment-layer-background-remote-speak--second: linear-gradient(
 	to bottom,
-	$segment-layer-background-remote-speak--second-1 50%,
-	$segment-layer-background-remote-speak--second-2 50%
+	$segment-layer-background-remote-speak--second-1 70%,
+	$segment-layer-background-gradient-divider,
+	$segment-layer-background-remote-speak--second-2 72%
 );
 $segment-layer-background-remote: #e80064;
 $segment-layer-background-remote--second: darken($segment-layer-background-remote, 10%);