fix: css adjustments

Author: olzzon

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

@@ -69,7 +69,7 @@ $hold-status-color: $liveline-timecode-color;
 			display: grid;
 			grid-template:
 				24em
-				70em
+				80em
 				20em / min(13vw, 27vh) auto;
 			white-space: nowrap;
 
@@ -109,8 +109,8 @@ $hold-status-color: $liveline-timecode-color;
 				}
 				&.notext {
 					background: $general-next-color;
-					height: 20px;
-					margin-top: 8vh;
+					height: 2.2vh;
+					margin-top: 8.7vh;
 					text-shadow: 0px 0px 6px #000000;
 				}
 				.director-screen__body__segment__countdown {
@@ -123,21 +123,23 @@ $hold-status-color: $liveline-timecode-color;
 					align-items: center;
 					font-size: 110px;
 					padding-left: 8vw;
-					padding-top: 6px;
+					padding-top: vh;
 					color: #ff0;
 					font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
-						'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 100, 'wght' 550;
+						'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
 
 					background: linear-gradient(
 						90deg,
 						rgba(223, 0, 0, 0) 0%,
-						#df0000 7.86%,
+						#df000000 7.86%,
 						rgba(116, 0, 0, 0.808) 16.21%,
-						rgba(0, 0, 0, 0.6) 24.94%
+						rgba(0, 0, 0, 0.8) 24.94%
 					);
 					.overtime {
 						color: $general-fast-color;
-						text-shadow: 0px 0px 6px $general-fast-color--shadow;
+						//text-shadow: 0px 0px 6px $general-fast-color--shadow;
+						font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
+							'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
 					}
 				}
 			}
@@ -205,17 +207,18 @@ $hold-status-color: $liveline-timecode-color;
 				.director-screen__body__part__piece-countdown {
 					grid-row: inherit;
 					text-align: left;
-					font-size: 20em;
+					font-size: 25em;
 					font-weight: 500;
-					font-stretch: 57;
+					font-feature-settings: 'liga' off, 'tnum' on;
 					font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
-						'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 44;
+						'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
 					padding: 0 0.2em;
 					line-height: 1em;
-					margin-top: 10px;
 
 					> .overtime {
 						color: $general-late-color;
+						font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
+							'YTLC' 514, 'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
 					}
 
 					.freeze-counter {

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

@@ -8,7 +8,8 @@
 	font-weight: 500;
 	line-height: 100%;
 	font-feature-settings: 'liga' off, 'tnum' on;
-	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
+	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514,
+		'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
 	margin-bottom: 4px;
 }
 
@@ -17,7 +18,6 @@
 	text-align: right;
 
 	letter-spacing: 0.01em;
-	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
 
 	.under {
 		background-color: #ff0;
@@ -39,11 +39,12 @@
 		min-width: 240px;
 		padding-left: 22px;
 		padding-right: 22px;
-		padding-top: 0px;
+		padding-top: 3px;
 		padding-bottom: 0px;
 		display: inline-block;
 
-		font-variation-settings: 'GRAD' 100, 'wdth' 70, 'wght' 600;
+		font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514,
+			'YTUC' 712, 'opsz' 100, 'slnt' 0, 'wdth' 70, 'wght' 600;
 	}
 }
 
@@ -63,7 +64,8 @@
 	margin-left: 1.2vw;
 
 	letter-spacing: 0.01em;
-	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
+	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514,
+		'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 500;
 }
 
 .counter-component__time-since-planned-end {
@@ -72,6 +74,6 @@
 	margin-left: 1.2vw;
 
 	letter-spacing: 0.01em;
-	font-variation-settings: 'GRAD' 100, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 600;
-
+	font-variation-settings: 'GRAD' 100, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514,
+		'YTUC' 712, 'opsz' 120, 'slnt' 0, 'wdth' 70, 'wght' 600;
 }