wip: css adjustments

Author: olzzon

packages/webui/src/client/lib/Components/CounterComponents.tsx

@@ -26,15 +26,15 @@ export const PlannedEndComponent = (props: OverUnderProps): JSX.Element => {
 export const TimeToPlannedEndComponent = (props: OverUnderProps): JSX.Element => {
 	return (
 		<span className="counter-component__time-to-planned-end">
-			{RundownUtils.formatDiffToTimecode(props.value, true, true, true)}
+			{RundownUtils.formatDiffToTimecode(props.value, true, false, true, true, true, undefined, true, true)}
 		</span>
 	)
 }
 
 export const TimeSincePlannedEndComponent = (props: OverUnderProps): JSX.Element => {
 	return (
 		<span className="counter-component__time-since-planned-end">
-			{RundownUtils.formatDiffToTimecode(props.value, true, true, true)}
+			{RundownUtils.formatDiffToTimecode(props.value, true, false, true, true, true, undefined, true, true)}
 		</span>
 	)
 }

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

@@ -202,7 +202,11 @@ $hold-status-color: $liveline-timecode-color;
 				.director-screen__body__part__piece-countdown {
 					grid-row: inherit;
 					text-align: left;
-					font-size: 16em;
+					font-size: 20em;
+					font-weight: 500;
+					font-stretch: 57;
+					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;
 					padding: 0 0.2em;
 					line-height: 1em;
 					margin-top: 10px;

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

@@ -59,6 +59,7 @@
 	color: #ff0;
 	letter-spacing: 0%;
 	text-align: right;
+	margin-left: 1.2vw;
 
 	font-stretch: 57;
 	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,
@@ -68,6 +69,7 @@
 .counter-component__time-since-planned-end {
 	color: #ff5218;
 	text-align: right;
+	margin-left: 1.2vw;
 
 	font-stretch: 57;
 	font-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 548,