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;
  }

  &__header-actions {
    border: none;
    background: none;
    padding: 0;
  }

  &__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;
    }

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

  &__cell-content {
    font-family: globals.$font-family-data;

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

    &--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;
    }
  }

  &__inserter {
    grid-area: inserter;
    margin-bottom: 2rem;

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

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

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

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