fix: inactive playlist top bar readability (#84)

Author: justandras

packages/webui/src/client/ui/RundownView/RundownHeader/RundownHeader.scss

@@ -34,6 +34,12 @@
 		background-color: $color-header-on-air;
 		border-bottom: 1px solid #256b91;
 
+		.rundown-header__clocks {
+			.timing-clock {
+				color: #40b8fa;
+			}
+		}
+
 		.rundown-header__timers-segment-remaining,
 		.rundown-header__timers-onair-remaining,
 		.rundown-header__show-timers-countdown {
@@ -96,7 +102,7 @@
 		flex: none;
 		min-width: 0;
 		.timing-clock {
-			color: #40b8fa;
+			color: #ffffff;
 			font-size: 1.4em;
 			letter-spacing: 0em;
 			transition: color 0.2s;
@@ -211,8 +217,6 @@
 		.rundown-header__clocks-diff__label {
 			@extend %hoverable-label;
 			font-size: 0.75em;
-			//opacity: 0.6;
-			color: #999;
 			font-variation-settings:
 				'wdth' 25,
 				'wght' 500,
@@ -374,16 +378,15 @@
 	.rundown-header__menu-btn {
 		background: none;
 		border: none;
-		color: #40b8fa99;
+		color: rgba(255, 255, 255, 0.7);
 		cursor: pointer;
 		padding: 0 1em;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		height: 100%;
 		font-size: 1.2em;
-		transition:
-			color 0.2s;
+		transition: color 0.2s;
 
 		svg,
 		i {
@@ -516,19 +519,19 @@
 			font-size: 1.3em;
 			letter-spacing: 0em;
 			font-variation-settings:
-			'wdth' 60,
-			'wght' 550,
-			'slnt' 0,
-			'GRAD' 0,
-			'opsz' 40,
-			'XOPQ' 96,
-			'XTRA' 468,
-			'YOPQ' 79,
-			'YTAS' 750,
-			'YTFI' 738,
-			'YTLC' 548,
-			'YTDE' -203,
-			'YTUC' 712;
+				'wdth' 60,
+				'wght' 550,
+				'slnt' 0,
+				'GRAD' 0,
+				'opsz' 40,
+				'XOPQ' 96,
+				'XTRA' 468,
+				'YOPQ' 79,
+				'YTAS' 750,
+				'YTFI' 738,
+				'YTLC' 548,
+				'YTDE' -203,
+				'YTUC' 712;
 		}
 
 		.countdown__timeofday {
@@ -537,19 +540,19 @@
 			font-variant-numeric: tabular-nums;
 			letter-spacing: 0.02em;
 			font-variation-settings:
-			'wdth' 70,
-			'wght' 400,
-			'slnt' -5,
-			'GRAD' 0,
-			'opsz' 40,
-			'XOPQ' 96,
-			'XTRA' 468,
-			'YOPQ' 79,
-			'YTAS' 750,
-			'YTFI' 738,
-			'YTLC' 548,
-			'YTDE' -203,
-			'YTUC' 712;
+				'wdth' 70,
+				'wght' 400,
+				'slnt' -5,
+				'GRAD' 0,
+				'opsz' 40,
+				'XOPQ' 96,
+				'XTRA' 468,
+				'YOPQ' 79,
+				'YTAS' 750,
+				'YTFI' 738,
+				'YTLC' 548,
+				'YTDE' -203,
+				'YTUC' 712;
 		}
 	}
 
@@ -592,11 +595,10 @@
 		align-items: center;
 		margin-right: 0.75em;
 		cursor: pointer;
-		color: #40b8fa;
+		color: rgba(255, 255, 255, 0.7);
 		opacity: 0;
 		flex-shrink: 0;
-		transition:
-			opacity 0.2s;
+		transition: opacity 0.2s;
 
 		svg,
 		i {
@@ -625,11 +627,12 @@
 
 	&:hover {
 		.rundown-header__menu-btn:not(:disabled) {
-			color: #40b8fa;
+			color: rgba(255, 255, 255, 0.8);
 		}
 
 		.rundown-header__hoverable-label,
-		.countdown__label {
+		.countdown__label,
+		.rundown-header__clocks-diff__label {
 			opacity: 1;
 			color: #fff;
 		}

packages/webui/src/client/ui/RundownView/RundownHeader/_shared.scss

@@ -20,6 +20,6 @@
 	letter-spacing: 0.01em;
 	text-transform: uppercase;
 	opacity: 1;
-	color: #888;
+	color: rgba(255, 255, 255, 0.6); // same transparency as `.countdown__digit--dimmed`
 	transition: color 0.2s;
 }