ontime/client/src/styles/_viewers.scss

@use './main' as *;

@mixin viewer-container {
  margin: 0;
  box-sizing: border-box; /* reset */
  overflow: hidden;
  width: 100%; /* restrict the page width to viewport */
  background: $bg-black;
  height: 100vh;
  color: $title-white;
  font-weight: 300;
}

@mixin viewer-event-title {
  font-size: 3vw;
  font-weight: 600;
  text-decoration: underline $ontime-pink 0.5vh;
  padding-top: 0.2vh;
  padding-left: 1vw;
}

@mixin viewer-info-messages {
  font-size: 1.5vw;
  line-height: 2vw;
  white-space: pre-line;
}

////////////////////////////// Specifics

.label {
  font-size: 1.3vw;
  color: $ontime-pink;
}

.infoContainer > div {
  overflow: hidden;
}

.nextContainer > div,
.nowContainer > div {
  @include ellipsis;
}

.nowContainer,
.nextContainer,
.todayContainer {
  background-color: $bg-gray-1000;
  padding: 1vh 2vw;
  overflow: hidden;
}

.clockContainer,
.countdownContainer,
.publicContainer,
.publicContainerHidden {
  background-color: $bg-gray-1000;
  padding: 1vh 1vw;
}

.publicContainer {
  opacity: 1;
  transition: 0.5s;
  transition-property: opacity;
}

.publicContainerHidden {
  opacity: 0;
  transition: 0.5s;
  transition-property: opacity;
}

.todayContainer,
.infoContainer {
  background-color: $bg-gray-1100;
  padding: 2.5vh 2vw;
}

.infoContainer,
.todayContainer,
.publicContainer,
.publicContainerHidden {
  border-radius: 1vw;
}

.nowContainer,
.nextContainer {
  margin-left: -1vw;
}

.qr {
  align-self: center;
  justify-self: center;
  grid-area: qr;
}

.clock {
  font-family: 'Open Sans', sans-serif;
  font-size: 3vw;
  line-height: 3vw;
  text-align: center;
  letter-spacing: 0.25vw;
  color: $clocks;
}

.infoContainer {
  grid-area: info;
  display: grid;

  grid-template-rows: 3vh minmax(0, 1fr);
  grid-template-columns: 3fr 1fr;
  grid-template-areas:
    'titl .'
    'binf qr';
  gap: 0.5vw;
}

.infoMessages {
  grid-area: binf;
  font-size: 1.5vw;
  line-height: 2vw;
  white-space: pre-line;
}

.clockContainer {
  grid-area: time;
  border-radius: 1vw;
}

.message {
  font-size: 3vw;
  line-height: 3vw;
  padding: 0.5vh 0 0.5vh 1vw;
}

.todayContainer {
  margin-top: 3vh;
  height: 95%;

  .todayHeaderBlock {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5vh;

    .navItem,
    .navItemSelected {
      background-color: $bg-gray-700;
      width: 0.7vw;
      height: 0.7vw;
      border-radius: 0.35vw;
    }

    .navItemSelected {
      background-color: $bg-gray-100;
    }

    .nav {
      align-self: center;
      justify-content: flex-end;
      display: flex;
      margin-bottom: 2.5vh;
    }

    .nav > div {
      margin-left: 0.5vw;
    }
  }
}

.infoContainer {
  display: grid;

  grid-template-rows: 3vh minmax(0, 1fr);
  grid-template-columns: 3fr 1fr;
  grid-template-areas:
    'titl .'
    'binf qr';
  gap: 0.5vw;

  .infoMessages {
    grid-area: binf;
    font-size: 1.5vw;
    line-height: 2vw;
    white-space: pre-line;
  }

  .clockContainer {
    grid-area: time;
    border-radius: 1vw;
  }
}