phonograph/sass/viewer.scss

@use 'globals';
@use 'sass:color';

$table-border-color: #ccc;

.lens-grid {
  display: grid;
  grid-template:
    'table' 1fr
    'editor' max-content;
  height: 100%;
  width: 100%;
}

.lens-table {
  display: grid;
  grid-area: table;
  grid-template:
    'headers' max-content
    'main' 1fr
    'inserter' max-content;
  height: 100%;
  outline: none;
  overflow: auto;
  width: 100%;

  &__headers {
    display: flex;
    grid-area: headers;
    align-items: stretch;
  }

  &__header {
    display: flex;
    flex: none;
    align-items: center;
    border: solid 1px #ccc;
    border-top: none;
    border-left: none;
    font-family: "Funnel Sans";
    background: #0001;
    padding: 0.5rem;
    text-align: left;
  }

  &__main {
    grid-area: main;
    overflow-y: auto;
  }

  &__row {
    align-items: stretch;
    display: flex;
  }

  &__cell {
    flex: none;
    border: solid 1px $table-border-color;
    border-left: none;
    border-top: none;
    padding: 0;

    &--insertable {
      border-style: dashed;
    }
  }

  &__inserter {
    align-items: stretch;
    display: flex;
    grid-area: inserter;
    justify-items: flex-start;
    margin-bottom: 2rem;
  }
}

.lens-cell {
  &__container {
    align-items: center;
    display: flex;

    &--selected {
      outline: 3px solid #37f;
      outline-offset: -2px;
    }
  }

  &__content {
    flex: 1;
    font-family: globals.$font-family-data;

    &--text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0.5rem;
    }

    &--uuid {
      font-family: globals.$font-family-mono;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0.5rem;
    }

    &--null {
      color: color.scale(#000, $lightness: 50%, $space: hsl);
      font-family: globals.$font-family-data;
      font-style: oblique;
      text-align: center;
      padding: 0.5rem;
    }
  }

  &__notice {
    align-items: center;
    color: color.scale(#000, $lightness: 50%, $space: hsl);
    display: flex;
    padding: 0 0.25rem;

    svg path {
      stroke: currentColor;
    }
  }
}

.lens-inserter {
  &__rows {
    .lens-table__cell {
      border: dashed 1px $table-border-color;
      border-left: none;
      border-top: none;

      &:last-child {
        border-right: none;
      }
    }

    .lens-table__row:first-child .lens-table__cell {
      border-top: dashed 1px $table-border-color;
    }
  }

  &__submit {
    @include globals.reset-button;
    align-items: center;
    border: dashed 1px globals.$button-primary-background;
    border-bottom-right-radius: globals.$border-radius-rounded-sm;
    border-top-right-radius: globals.$border-radius-rounded-sm;
    color: globals.$button-primary-background;
    display: flex;
    justify-content: center;
    padding: 0 1rem;

    svg path {
      stroke: currentColor;
    }
  }
}

.lens-editor {
  align-items: stretch;
  border-top: globals.$default-border;
  display: flex;
  grid-area: editor;

  &__input {
    @include globals.reset_input;
    padding: 0.75rem 0.5rem;
    font-family: globals.$font-family-data;
    flex: 1;
  }
}