ontime/apps/client/src/features/viewers/timer/Timer.scss

@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: 11.5vw;
      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;
  }
}