wip: css adjustments

Author: olzzon

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

@@ -22,7 +22,7 @@ $hold-status-color: $liveline-timecode-color;
 		top: 0;
 		left: 0;
 		right: 0;
-		height: 16vh;
+		height: 19vh;
 		padding-left: 10px;
 		display: flex;
 		flex-direction: row;
@@ -51,7 +51,7 @@ $hold-status-color: $liveline-timecode-color;
 
 	.director-screen__body {
 		position: fixed;
-		top: 16vh;
+		top: 19vh;
 		bottom: 0;
 		left: 0;
 		right: 0;
@@ -68,8 +68,8 @@ $hold-status-color: $liveline-timecode-color;
 			display: grid;
 			grid-template:
 				24em
-				60em
-				30em / min(13vw, 27vh) auto;
+				70em
+				20em / min(13vw, 27vh) auto;
 			white-space: nowrap;
 
 			.director-screen__body__segment-name {
@@ -83,7 +83,8 @@ $hold-status-color: $liveline-timecode-color;
 				position: relative;
 				font-weight: 700;
 				font-size: 90px;
-				line-height: 100%;
+				line-height: 110%;
+				height: 11vh;
 				/* or 110px */
 				letter-spacing: 0.01em;
 				font-feature-settings: 'pnum' on, 'lnum' on;

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

@@ -4,11 +4,10 @@
 .counter-component__over-under {
 	font-family: 'Roboto Flex';
 	font-style: normal;
-	font-size: 90px;
+	font-size: 120px;
 	font-weight: 500;
 	line-height: 100%;
 	font-feature-settings: 'liga' off;
-	margin-top: 4px;
 	margin-bottom: 4px;
 }
 
@@ -47,7 +46,7 @@
 	color: #ffffff;
 	font-stretch: 70;
 	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
-		'YTUC' 712, 'slnt' -7, 'opsz' 44;
+		'YTUC' 712, 'slnt' -7, 'opsz' 100, 'wdth' 80;
 }
 
 .counter-component__time-to-planned-end {

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

@@ -402,7 +402,7 @@ function DirectorScreenRender({
 								label={currentSegment?.name || ''}
 								width={'80vw'}
 								fontFamily="Roboto Flex"
-								fontSize="0.7em"
+								fontSize="0.9em"
 								minFontWidth={70}
 								maxFontWidth={100}
 								defaultWidth={90}
@@ -491,7 +491,7 @@ function DirectorScreenRender({
 									label={nextSegment?.name || ''}
 									width={'80vw'}
 									fontFamily="Roboto Flex"
-									fontSize="0.7em"
+									fontSize="0.9em"
 									minFontWidth={70}
 									maxFontWidth={100}
 									defaultWidth={90}