ontime/client/src/features/table/Table.module.scss

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

.tableWrapper,
.tableWrapper__dark {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;

  width: 100%;
  height: 100vh;
  padding: 2rem;
  display: grid;

  grid-template-columns: calc(100vw - 4rem);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
          'header'
          'settings'
          'table';
  gap: 1rem;
  overflow: scroll;

  & > * {
    width: 100%;
    border: 1px solid $ontime-pink;
    border-radius: 4px;
  }

  .header {
    grid-area: header;
    display: grid;
    height: max-content;
    grid-template-areas:
      'name playback running time actions'
      'now playback running time actions';
    grid-template-columns: 1fr auto 10em 12.5em auto;
    align-items: center;
    padding: 0.25em 1em;

    .headerName {
      grid-area: name;
      font-size: 1.5em;
    }

    .headerName:after {
      content: '\200b';
    }

    .headerNow {
      grid-area: now;
      font-size: 1.25em;
    }

    .headerNow:after {
      content: '\200b';
    }

    .headerPlayback {
      grid-area: playback;
      color: $ontime-pink;
      text-align: center;

      svg {
        font-size: 2em;
      }
    }

    .headerRunning {
      grid-area: running;
      text-align: center;
    }

    .headerClock {
      grid-area: time;
      text-align: center;
    }

    .headerActions {
      grid-area: actions;
      display: flex;
      gap: 8px;
      font-size: 1.5em;
      padding-left: 10vw;
      color: darken($ontime-pink, 8%);
    }
  }

  .tableSettings {
    grid-area: settings;
    padding: 1rem;

    .options,
    .buttonRow {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      gap: 2rem;
    }

    .options {
      padding-left: 0.5em;
    }

    .buttonRow {
      padding-top: 2em;
    }
  }

  .ontimeTable {
    grid-area: table;

    border-collapse: separate;
    border-spacing: 16px;
    padding: 1rem;

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;

    th, td {
      touch-action: auto;
      padding: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    td {
      border-radius: 4px;
    }

    .tableHeader {
      position: sticky;
      top: -1em;
      z-index: 10;

      th {
        font-size: 0.9em;
        font-weight: 200;
        text-align: left;

        .resizer {
          display: inline-block;
          width: 10px;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          transform: translateX(50%);
          z-index: 1;
          touch-action: none;
        }
      }
    }

    .tableBody {
      tr {
        td:hover {
          background-color: lighten($ontime-pink, 10%) !important;
          color: black;
        }
      }

      .selected > td {
        background-color: rgba($ontime-accent, 0.8);
      }
    }

    .indexColumn {
      font-weight: 200;
      text-align: right;
      width: 2.5em;
      background: transparent;
    }

    .blockCell,
    .delayCell {
      width: 100%;
      font-weight: 400;
      font-size: 0.9em;
      text-align: center;
      color: black;
    }

    .delayCell {
      background-color: $block-delay-color;
    }

    .blockCell {
      background-color: $block-block-color;
    }
  }
}

$bg-theme-light: #fcfcfc;
$cell-theme-light: #ececec;
$text-theme-light: #202020;
$bg-theme-dark: #121212;
$bg2-theme-dark: #1c1c1c;
$cell-theme-dark: #2d2d2d;
$text-theme-dark: white;

.tableWrapper {
  background-color: $bg-theme-light;
  color: black;

  * {
    background-color: $bg-theme-light;
    scrollbar-color: $ontime-pink rgba(0, 0, 0, 0.13);
  }

  *::-webkit-scrollbar {
    background-color: rgba(0, 0, 0, 0.07);
  }

  *::-webkit-scrollbar-thumb {
    background-color: lighten($ontime-pink, 15%);
  }

  td {
    background-color: $cell-theme-light;
    border: 1px solid $bg-theme-light;
    color: #121212;
  }
  .actionText:hover,
  .actionIcon:hover,
  .actionDisabled:hover {
    color: black;
    transition: 300ms;
  }
}

.tableWrapper__dark {
  background-color: $bg-theme-dark;
  color: white;

  * {
    background-color: $bg-theme-dark;
    scrollbar-color: $ontime-pink rgba(255, 255, 255, 0.13);
  }

  td {
    background-color: $cell-theme-dark;
    border: 1px solid $bg-theme-dark;
    color: #ececec;
  }
  .actionText:hover,
  .actionIcon:hover,
  .actionDisabled:hover {
    color: white;
    transition: 300ms;
  }
}

.timer {
  font-size: 1.7em;
  letter-spacing: 1px;
  line-height: 1.2em;
  font-weight: 200;
}

.label {
  color: $ontime-pink;
  font-size: 0.8em;
  font-weight: 200;
  line-height: 0.75em;
}

svg {
  background-color: inherit !important;
}

@mixin action-element() {
  cursor: pointer;
}

.actionIcon {
  @include action-element();
}

.actionText {
  @include action-element();
  font-size: 0.65em;
}

.actionDisabled {
  @include action-element();
  opacity: 0.6;
}

.dragging {
  border: 1px solid $ontime-pink;
  z-index: 10;
}

.check {
  font-size: 1.5em;
  background-color: transparent !important;
  margin: 0 auto;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}