V2 monorepo (#285)

* refactor(project structure): UI * refactor(project structure): extract utilities * refactor(project structure): remove unused * refactor(project structure): electron * refactor(project structure): server refactor: migrate to vitest refactor: monorepo config * refactor: extract application menu * refactor: exit process * refactor: extract tray menu * chore: electron build * Added Seconds in studio clock #282 --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> --------- Co-authored-by: Fabian Posenau <fabian.p99@gmx.de> Co-authored-by: Fabian Posenau <fabian@fphome.de>
2026-08-17 21:24:11 +00:00 · 2023-02-14 22:02:15 +01:00
parent 3918758d32
commit de9a7a87fd
439 changed files with 11381 additions and 14294 deletions
@@ -0,0 +1,142 @@
+@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;
+
+  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: auto;
+  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;
+  }
+
+  /* =================== CLOCK ===================*/
+
+  .clock-container {
+    grid-area: clock;
+    margin-left: auto;
+    font-weight: 600;
+
+    .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;
+    }
+  }
+
+  /* =================== 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;
+    color: var(--timer-color-override, $timer-color);
+
+    .end-message {
+      text-align: center;
+      font-size: 12vw;
+      line-height: 0.9em;
+      font-weight: 600;
+      color: $timer-finished-color;
+      padding: 0;
+    }
+
+    .timer {
+      opacity: 1;
+    }
+  }
+
+  .progress-container {
+    grid-area: progress;
+    width: 100%;
+    margin: 0 auto;
+    opacity: 1;
+    transition: $viewer-transition-time;
+  }
+
+  .timer--paused,
+  .progress-container--paused {
+    opacity: $viewer-opacity-disabled;
+    transition: $viewer-transition-time;
+  }
+
+
+  /* =================== OVERLAY ===================*/
+
+  .message-overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $viewer-overlay-bg-color;
+    z-index: -1;
+    opacity: 0;
+    transition: $viewer-transition-time;
+
+    &--active {
+      opacity: 1;
+      transition: $viewer-transition-time;
+      transition-property: opacity;
+      z-index: 2;
+    }
+  }
+
+  .message {
+    width: inherit;
+    padding: 2vw;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: $viewer-color;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    font-size: 15vw;
+    line-height: 30vh;
+    text-align: center;
+    font-weight: 600;
+  }
+}