fix: css adjustments

Author: olzzon

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

@@ -82,26 +82,20 @@ $hold-status-color: $liveline-timecode-color;
 				vertical-align: middle;
 				color: #fff;
 				position: relative;
-				//font-weight: 700;
 				font-size: 100px;
-				line-height: 110%;
+				line-height: 117%;
 				height: 11vh;
-				/* or 110px */
 				letter-spacing: 0.01em;
 				font-feature-settings: 'tnum' on, 'liga' off;
 
 				color: #ffffff;
-				//font-stretch: 100;
 
 				// Default Roboto Flex settings:
-				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;
-
-				text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
-				box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+				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;
+
+				text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+				box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);
 				z-index: 1;
 
 				&.live {
@@ -131,12 +125,8 @@ $hold-status-color: $liveline-timecode-color;
 					padding-left: 8vw;
 					padding-top: 6px;
 					color: #ff0;
-					//font-stretch: 40;
-					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;
+					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;
 
 					background: linear-gradient(
 						90deg,
@@ -169,6 +159,7 @@ $hold-status-color: $liveline-timecode-color;
 				grid-column: 1;
 				padding: 0em;
 				margin-left: 10px;
+				margin-top: 1.4vh;
 
 				text-align: center;
 				display: flex;
@@ -193,7 +184,7 @@ $hold-status-color: $liveline-timecode-color;
 					overflow: hidden;
 					white-space: nowrap;
 					padding-left: 0.2em;
-					margin-top: 12px;
+					margin-top: 2.95vh;
 					display: flex;
 					align-items: top;
 				}
@@ -272,21 +263,15 @@ $hold-status-color: $liveline-timecode-color;
 				clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
 				// font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
 				// 	'YTLC' 548, 'YTUC' 712, 'slnt' 0, 'opsz' 3;
-				font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 
-					'opsz' 30,
-					'slnt' 0, 
-					'wdth' 50, 
-					'wght' 700;
+				font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
+					'YTLC' 514, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 50, 'wght' 700;
 			}
 			.director-screen__body__part__auto-icon {
 				border-radius: 0 25px 25px 0;
 				// font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
 				// 	'YTLC' 548, 'YTUC' 712, 'slnt' -7, 'opsz' 3;
-				font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712, 
-				'opsz' 30,
-				'slnt' 0, 
-				'wdth' 50, 
-				'wght' 700;
+				font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
+					'YTLC' 514, 'YTUC' 712, 'opsz' 30, 'slnt' 0, 'wdth' 50, 'wght' 700;
 			}
 			.director-screen__body__part__next-icon,
 			.director-screen__body__part__auto-icon {