ontime/apps/client/src/features/viewers/studio/StudioClock.scss

@use '../../../theme/viewerDefs' as *;

@font-face {
  font-family: 'seven-seg';
  src:
    local('DSEG7'),
    url('./../../../assets/fonts/DSEG7ClassicMini-Regular.ttf') format('truetype');
}

/* =============== CLOCK STUFF ==================*/

$size-hours: clamp(12px, 2.5vmin, 22px);
$half-hours: calc($size-hours / 2);
$size-min: clamp(10px, 2vmin, 18px);
$half-min: calc($size-min / 2);

$red-active: $red-700;
$red-idle: $red-1350;

$cyan-active: #0ff;
$cyan-idle: #0aa;

$orange-active: #f60;

.studio-clock {
  --clock-size: min(90vh, 90vw);
  --size-hours-gap: #{calc($size-hours * 1.5)};
  --half-size: calc(var(--clock-size) / 2);
  --smaller-half-size: calc(var(--half-size) - var(--size-hours-gap));

  overflow: hidden;
  width: 100%;
  height: 100vh;
  padding: 1vw;

  background: var(--background-color-override, #000);

  display: grid;
  // we use vh since we are dealing with a square and the smaller dimension is the height
  grid-template-columns: calc(var(--clock-size) + 5vw) 1fr;
  gap: 2.5vw;
  grid-template-areas: 'clock schedule';
  text-transform: uppercase;

  .clock-container {
    grid-area: clock;
    display: grid;
    place-content: center;
    justify-items: center;
    padding-top: 3em;
    gap: 0.5em;
    width: 100%;
    height: 100%;
    position: relative;
    font-family: seven-seg;
  }

  .clock-indicators {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;

    .min,
    .hours {
      border-radius: 50%;
      position: absolute;
      background: var(--studio-idle, $red-idle);

      &--active {
        background: var(--studio-active, $red-active);
      }
    }

    .min {
      min-height: $size-min;
      width: $size-min;
      top: calc(50% - #{$half_min});
      left: calc(50% - #{$half_min});
    }

    .hours {
      min-height: $size-hours;
      width: $size-hours;
      top: calc(50% - #{$half_hours});
      left: calc(50% - #{$half_hours});
    }
  }

  .studio-timer {
    font-size: calc(var(--clock-size) / 5);
    line-height: 1em;

    color: var(--studio-active, $red-active);

    &--with-seconds {
      font-size: calc(var(--clock-size) / 6.5);
    }

    &::before {
      content: '88:88';
      mix-blend-mode: hard-light;
      opacity: 0.1;
      position: absolute;
    }
  }

  .clock__ampm {
    font-family: monospace;
    font-size: calc(var(--clock-size) / 20);
    position: relative;
    top: -2em;
    margin-bottom: -2em;
    color: var(--studio-active, $red-active);
  }

  .next-title {
    font-family: monospace;
    font-weight: 400;
    color: var(--studio-active-label, $cyan-active);
    font-size: calc(var(--clock-size) / 10);
    text-align: center;
    overflow: clip hidden;
    white-space: nowrap;
  }

  .next-countdown {
    color: var(--studio-active, $red-active);
    font-size: calc(var(--clock-size) / 10);
    line-height: 1em;

    &--overtime {
      color: var(--studio-active, $red-active);
    }
    &--paused {
      color: var(--studio-overtime, $orange-active);
    }
  }

  .schedule-container {
    grid-area: schedule;
    font-family: monospace;
    margin-right: 2vw;
  }

  .onAir {
    font-size: 13vh;
    padding-top: 6vh;
    padding-bottom: 0.25em;
    line-height: 0.8em;
    color: var(--studio-active, $red-active);

    &--idle {
      color: var(--studio-idle, $red-idle);
    }
  }

  .schedule {
    color: var(--studio-idle-label, $red-idle);
    font-size: 3.5vh;
    line-height: 1.25em;
    list-style: none;
  }

  .schedule__item {
    margin-bottom: 1.5vh;
    padding-left: 0.25em;
    display: flex;
    align-items: start;
    gap: 0.5em;
    white-space: nowrap;

    &--now {
      color: var(--studio-active-label, $red-active);
    }

    &--next {
      color: var(--studio-active, $cyan-active);
      padding-bottom: 1em;
    }

    &--future {
      color: var(--studio-idle-label, $cyan-idle);
    }
  }

  .event {
    display: flex;
    align-items: center;
    gap: 0.25em;

    &__colour {
      width: 0.35em;
      height: 0.35em;
      aspect-ratio: 1;
      border-radius: 0.35em;
      background-color: var(--studio-idle, $red-idle);
    }
  }
}

@media only screen and (max-width: 1200px) {
  .studio-clock {
    grid-template-areas: 'clock';
    grid-template-columns: 100%;

    .schedule-container {
      display: none;
    }
  }
}