refactor: allow overriding progress bar phases

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss

@@ -53,3 +53,6 @@ $progress-bar-br: 3px;
 .multiprogress-bar__bg-danger {
   flex-shrink: 0;
 }
+.multiprogress-bar__bg-danger--overtime {
+  background: var(--timer-overtime-color-override, $timer-finished-color);
+}

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -14,6 +14,7 @@ interface MultiPartProgressBar {
   danger?: MaybeNumber;
   dangerColor: string;
   hidden?: boolean;
+  hideOvertime?: boolean;
   ignoreCssOverride?: boolean;
   className?: string;
 }
@@ -28,6 +29,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
     danger,
     dangerColor,
     hidden,
+    hideOvertime,
     ignoreCssOverride,
     className = '',
   } = props;
@@ -35,6 +37,8 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
   const percentRemaining = 100 - getProgress(now, complete);
   const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
   const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
+  const isOvertime = now !== null && now < 0;
+  const showOvertime = isOvertime && !hideOvertime;
 
   return (
     <div
@@ -54,8 +58,8 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
               style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
             />
             <div
-              className='multiprogress-bar__bg-danger'
-              style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+              className={cx(['multiprogress-bar__bg-danger', showOvertime && 'multiprogress-bar__bg-danger--overtime'])}
+              style={{ width: `${dangerWidth}%`, backgroundColor: showOvertime ? undefined : dangerColor }}
             />
           </div>
           <div className='multiprogress-bar__indicator'>

apps/client/src/views/timer/Timer.scss

@@ -18,7 +18,7 @@
   flex-direction: column;
 
   &--finished {
-    outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
+    outline: clamp(4px, 1vw, 16px) solid var(--timer-overtime-color-override, $timer-finished-color);
     outline-offset: calc(clamp(4px, 1vw, 16px) * -1);
     transition: $viewer-transition-time;
   }
@@ -95,7 +95,7 @@
       font-size: 11.5vw;
       line-height: 0.9em;
       font-weight: 600;
-      color: $timer-finished-color;
+      color: var(--timer-overtime-color-override, $timer-finished-color);
       padding: 0;
     }
 
@@ -116,8 +116,16 @@
         transition: $viewer-transition-time;
       }
 
+      // use a class instead of a phase, to allow suppressing overtime style
       &--finished {
-        color: $timer-finished-color;
+        color: var(--timer-overtime-color-override, $timer-finished-color);
+      }
+
+      &[data-phase="warning"] {
+        color: var(--timer-warning-color-override, var(--phase-color));
+      }
+      &[data-phase="danger"] {
+        color: var(--timer-danger-color-override, var(--phase-color));
       }
     }
   }

apps/client/src/views/timer/Timer.tsx

@@ -153,6 +153,7 @@ export default function Timer(props: TimerProps) {
               fontSize: `${timerFontSize}vw`,
               '--phase-color': timerColour,
             }}
+            data-phase={time.phase}
           >
             {display}
           </div>
@@ -175,6 +176,7 @@ export default function Timer(props: TimerProps) {
           warningColor={viewSettings.warningColor}
           danger={eventNow?.timeDanger}
           dangerColor={viewSettings.dangerColor}
+          hideOvertime={!showFinished}
         />
       )}
 

apps/server/src/user/styles/override.css

@@ -5,60 +5,62 @@
  */
 
 :root {
-    /** Background colour for the views */
-    --background-color-override: #ececec;
-    
-    /** Main text colour for the views */
-    --color-override: #101010;
-    
-    /** Text colour for the views */
-    --secondary-color-override: #404040;
+  /** Background colour for the views */
+  --background-color-override: #ececec;
 
-    /** Accent text colour, used on active elements */
-    --accent-color-override: #fa5656;
+  /** Main text colour for the views */
+  --color-override: #101010;
 
-    /** Label text colour, used on active elements */
-    --label-color-override: #6c6c6c;
+  /** Text colour for the views */
+  --secondary-color-override: #404040;
 
-    /** Timer text colour */
-    --timer-color-override: #202020;
+  /** Accent text colour, used on active elements */
+  --accent-color-override: #fa5656;
 
-    /** Background for card elements on background */
-    --card-background-color-override: #fff;
+  /** Label text colour, used on active elements */
+  --label-color-override: #6c6c6c;
 
-    /** Background highlight for blink behaviour, used only in /backstage */
-    --card-background-color-blink-override: #339e4e;
-    
-    /** Font used for all text in views */
-    --font-family-override: "Open Sans";
+  /** Timer text colour */
+  --timer-color-override: #202020;
+  --timer-warning-color-override: #ffbc56;
+  --timer-danger-color-override: #e69000;
+  --timer-overtime-color-override: #fa5656;
 
-    /** Font used for clock in /minimal and /clock views */
-    --font-family-bold-override: "Arial Black";
+  /** Background for card elements on background */
+  --card-background-color-override: #fff;
 
-    /** Colour used for progress bar background */
-    --timer-progress-bg-override: #fff;
+  /** Font used for all text in views */
+  --font-family-override: 'Open Sans';
 
-    /** Colour used for progress bar progress */
-    --timer-progress-override: #202020;
-    
-    /** Colour used for external message and aux timer in /timer */
-    --external-color-override: #161616;
-        
-    /** View specific features: /studio */
-    --studio-active: #101010;
-    --studio-idle: #cfcfcf;
-    --studio-active-label: #101010;
-    --studio-idle-label: #595959;
-    --studio-overtime: #101010;
-    
-    /** View specific features: /lower */
-    --lowerThird-font-family-override: 'Courier New';
-    --lowerThird-top-font-weight-override: bold;
-    --lowerThird-bottom-font-weight-override: bold;
-    --lowerThird-top-font-style-override: normal;
-    --lowerThird-bottom-font-style-override: italic;
-    --lowerThird-line-height-override: 1vh;
-    --lowerThird-text-align-override: end;
+  /** Font used for clock in /minimal and /clock views */
+  --font-family-bold-override: 'Arial Black';
+
+  /** Colour used for external message and aux timer in /timer */
+  --external-color-override: #161616;
+
+  /** View specific features: /backstage */
+  /** ---- Background highlight for blink behaviour */
+  --card-background-color-blink-override: #339e4e;
+  /** ---- Colour used for progress bar background */
+  --timer-progress-bg-override: #fff;
+  /** ---- Colour used for progress bar progress */
+  --timer-progress-override: #202020;
+
+  /** View specific features: /studio */
+  --studio-active: #101010;
+  --studio-idle: #cfcfcf;
+  --studio-active-label: #101010;
+  --studio-idle-label: #595959;
+  --studio-overtime: #101010;
+
+  /** View specific features: /lower */
+  --lowerThird-font-family-override: 'Courier New';
+  --lowerThird-top-font-weight-override: bold;
+  --lowerThird-bottom-font-weight-override: bold;
+  --lowerThird-top-font-style-override: normal;
+  --lowerThird-bottom-font-style-override: italic;
+  --lowerThird-line-height-override: 1vh;
+  --lowerThird-text-align-override: end;
 }
 
 /** 
@@ -66,5 +68,5 @@
  * In the below example, we change the colour of the overlay message in the stage-timer view.
  */
 .stage-timer > .message-overlay--active > div {
-    color: red;
+  color: red;
 }