chore: directory restructure

2026-08-19 22:24:11 +00:00 · 2025-01-18 14:29:41 +01:00
parent 0ea00ff6be
commit b5cf6c4bd1
4 changed files with 20 additions and 15 deletions
@@ -0,0 +1,205 @@
+@use '../../theme/viewerDefs' as *;
+
+.stage-timer {
+  margin: 0;
+  box-sizing: border-box; /* reset */
+  overflow: hidden;
+  width: 100%; /* restrict the page width to viewport */
+  height: 100vh;
+  transition: opacity 0.5s ease-in-out;
+
+  font-family: var(--font-family-override, $viewer-font-family);
+  background: var(--background-color-override, $viewer-background-color);
+  color: var(--color-override, $viewer-color);
+  gap: min(2vh, 16px);
+  padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
+
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: auto 1fr auto auto auto;
+  grid-template-areas:
+    'clock'
+    'timer'
+    'progress'
+    'now'
+    'next';
+
+  &--finished {
+    outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
+    outline-offset: calc(clamp(4px, 1vw, 16px) * -1);
+    transition: $viewer-transition-time;
+  }
+
+  .blackout {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000;
+    z-index: 2;
+    opacity: 0;
+    transition: opacity $viewer-transition-time;
+    &--active {
+      opacity: 1;
+    }
+  }
+
+  /* =================== CLOCK ===================*/
+
+  .clock-container {
+    grid-area: clock;
+    margin-left: auto;
+    font-weight: 600;
+    transition: opacity $viewer-transition-time;
+
+    .label {
+      font-size: clamp(16px, 1.5vw, 24px);
+      color: var(--label-color-override, $viewer-label-color);
+      text-transform: uppercase;
+    }
+
+    .clock {
+      font-size: clamp(32px, 3.5vw, 50px);
+      color: var(--secondary-color-override, $viewer-secondary-color);
+      letter-spacing: 0.05em;
+      line-height: 0.95em;
+    }
+
+    &--hidden {
+      opacity: 0;
+    }
+  }
+
+  /* =================== TITLES ===================*/
+
+  .event {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+    padding: 16px 24px;
+    border-radius: 8px;
+
+    &.now {
+      grid-area: now;
+    }
+
+    &.next {
+      grid-area: next;
+    }
+  }
+
+  /* =================== MAIN ===================*/
+
+  .timer-container {
+    grid-area: timer;
+    justify-self: center;
+    align-self: center;
+
+    width: 100%;
+    overflow: hidden;
+
+    .end-message {
+      text-align: center;
+      font-size: 11.5vw;
+      line-height: 0.9em;
+      font-weight: 600;
+      color: $timer-finished-color;
+      padding: 0;
+    }
+
+    .timer {
+      opacity: 1;
+      font-family: var(--font-family-override, $viewer-font-family);
+      color: var(--timer-color-override, var(--phase-color));
+      line-height: 0.9em;
+      text-align: center;
+      letter-spacing: 0.05em;
+      font-weight: 600;
+
+      transition-property: font-size;
+      transition-duration: $viewer-transition-time;
+
+      &--paused {
+        opacity: $viewer-opacity-disabled;
+        transition: $viewer-transition-time;
+      }
+
+      &--finished {
+        color: $timer-finished-color;
+      }
+    }
+  }
+
+  .secondary {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    margin-top: 0.25em;
+    padding-block: 0.25em;
+
+    font-weight: 600;
+    text-align: center;
+    color: var(--external-color-override, $external-color);
+    letter-spacing: 0.5px;
+    line-height: 0.9em;
+    transition-property: opacity, height;
+    transition-duration: $viewer-transition-time;
+    border-top: 1px solid color-mix(in srgb, var(--external-color-override, $external-color) 10%, transparent);
+
+    &--hidden {
+      opacity: 0;
+      height: 0;
+    }
+  }
+
+  .progress-container {
+    grid-area: progress;
+    width: 100%;
+    margin: 0 auto;
+    opacity: 1;
+    transition: $viewer-transition-time;
+
+    &--paused {
+      opacity: $viewer-opacity-disabled;
+      transition: $viewer-transition-time;
+    }
+  }
+
+  /* =================== OVERLAY ===================*/
+
+  .message-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 2vw;
+    background: var(--background-color-override, $viewer-background-color);
+    opacity: 0;
+    transition: opacity $viewer-transition-time;
+    z-index: 2;
+
+    &--active {
+      opacity: 1;
+    }
+  }
+
+  .message {
+    display: grid;
+    place-content: center;
+    height: 100%;
+    width: 100%;
+
+    color: var(--color-override, $viewer-color);
+    text-align: center;
+    font-weight: 600;
+  }
+
+  .logo {
+    position: absolute;
+    top: 2vw;
+    left: 2vw;
+    max-width: min(200px, 20vw);
+    max-height: min(100px, 20vh);
+  }
+}