Merge remote-tracking branch 'superfly/fix/directors-screen-icon-color-and-size' into bbc-release53

Author: PeterC89

packages/webui/src/client/styles/countdown/director.scss

@@ -227,7 +227,7 @@ $hold-status-color: $liveline-timecode-color;
 					overflow: hidden;
 					white-space: nowrap;
 					padding-left: 0.2em;
-					margin-top: 2.95vh;
+					margin-top: 2.55vh;
 					display: flex;
 					align-items: top;
 				}

packages/webui/src/client/ui/ClockView/ClockView.tsx

@@ -44,7 +44,7 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
 						<DirectorScreen playlistId={playlist._id} studioId={studioId} />
 					</RundownTimingProvider>
 				) : (
-					<StudioScreenSaver studioId={studioId} ownBackground={true} screenName={t('Director Screen')} />
+					<StudioScreenSaver studioId={studioId} ownBackground={true} screenName={t("Director's Screen")} />
 				)}
 			</Route>
 			<Route path="/countdowns/:studioId/overlay">

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewPieceIcons.scss

@@ -2,10 +2,22 @@
 
 // Variables
 $text-color: #ffffff;
-$font-size-base: 21em;
+$font-size-base: 19.5em;
 $text-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
 $letter-spacing: 0.03em;
 
+$background-live-speak: linear-gradient(
+	to bottom,
+	$segment-layer-background-live-speak-1 74%,
+	$segment-layer-background-live-speak-2 74%
+);
+
+$background-remote-speak: linear-gradient(
+	to bottom,
+	$segment-layer-background-remote-speak-1 74%,
+	$segment-layer-background-remote-speak-2 74%
+);
+
 @mixin layer-type-backgrounds {
 	@each $layer-type in $layer-types {
 		&.#{$layer-type} {
@@ -81,15 +93,19 @@ $letter-spacing: 0.03em;
 	}
 
 	.live-speak {
-		--vt-color-light: color-mix(in srgb, var(--segment-layer-background-#{'vt'}) 90%, white);
-		--camera-color-light: color-mix(in srgb, var(--segment-layer-background-#{'camera'}) 90%, white);
-
-		background-image: linear-gradient(to bottom, var(--vt-color-light) 50%, var(--camera-color-light) 50%);
+		background-image: $background-live-speak;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}
 
+	.remote-speak {
+			background-image: $background-remote-speak;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+	}
+
 	// Split view container and layers
 	.split-view {
 		position: absolute;

packages/webui/src/client/ui/ClockView/ClockViewPieceIcons/ClockViewRenderers/RemoteSpeakInputIcon.tsx

@@ -1,11 +1,6 @@
 export function RemoteSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
 	return (
 		<div className="clock-view-piece-icon">
-			<rect width="126.5" height="89" className="remote-speak" />
-			<linearGradient id="background-gradient" gradientTransform="rotate(90)">
-				<stop className="stop1" offset={0.5} />
-				<stop className="stop2" offset={0.5} />
-			</linearGradient>
 			<span className="remote-speak">{abbreviation !== undefined ? abbreviation : 'RSK'}</span>
 		</div>
 	)