dev/scss/main/view/matchtable.scss

@use 'sass:math';
@use "../../util";
@use "../../base/colors";
@use "../../base/icons";
@use "../../base/lengths";
@use "../../base/mixins";

/**
 * Table view
 *
 * The table view is complicated, as the
 * first column has to be static.
 */
div.matchtable {

  > div {
    z-index:      20;
    margin-left:  lengths.$left-distance - math.div(lengths.$border-size,2);
    margin-right: lengths.$right-view-distance;
    padding:      0;
    overflow-x:   auto;
    overflow-y:   visible;
    width:        auto;
  }

  table {
    display:         table;
    border-collapse: separate;
    border-spacing:  0px;
  }

  th {
    color: colors.$nearly-white;
  }

  // Use matchinfo cells for query creation
  td,
  tbody th,
  thead th:not(:nth-child(1)):not(:nth-child(2)):not(.cutted) {
    cursor: pointer;
  }

  td {
    empty-cells: hide;
    &.not-empty:empty {
      cursor: default;
      // Fix for empty annotation lines:
      &::after {
        content:     " ";
        white-space: pre;
      }
    }

    // table for key-value pairs
    &.matchkeyvalues {
      padding: 0;
      > div {
        @include mixins.cell-info;
        > span {
          color:         colors.$darkest-orange;
          text-align:    right;
          padding-right: .5em;
          &::after {
            content: ":"
          }
        }
      }
    }
  }

  td, div {
    &.notinindex {
      background-color: colors.$ids-grey-2 !important;
      cursor: default;
    }
  }

  tr {
    outline: none;

    // equal to dd.chosen
    td.chosen,
    th.chosen,
    div.chosen {
      background-color: colors.$light-green !important;
      color:            colors.$nearly-white;
    }

    /**
     * The first two columns.
     */
    > th:nth-of-type(1),
    > th:nth-of-type(2) {
      @include mixins.matchinfo-head;
      position:       absolute;
      z-index:        80;
      vertical-align: middle;
      left:           0px;
    }

    > th:nth-of-type(2) {
      left: math.div(lengths.$left-width,2) + lengths.$border-size;
    }

    // Includes header line as well
    > * {
      @include mixins.cell-info;
      border: math.div(lengths.$border-size,2) solid colors.$dark-orange;
    }

    > td {
      background-color: colors.$middle-orange;
      white-space:      nowrap;
      vertical-align:   top;
      text-align:       center;
      &.mark {
        background-color: colors.$light-orange;
      }
    }

    &:nth-child(even) > td {
      background-color: colors.$light-orange;
      &.mark {
        background-color: colors.$middle-orange;
      }
    }
  }

  thead th {
    border-top-width: 0px !important;
    text-align:       center;

    &:not(.no-anno) {
      background-color: colors.$darker-orange;
    }

    &:nth-of-type(1),
    &:nth-of-type(2) {
	    text-align: left;
    }

    &.mark {
      background-color: colors.$darkest-orange;
    }
    
    &.cutted {
      background-color: colors.$light-orange;

      &::after {
        @include mixins.icon-font;
        content: icons.$fa-cut;
        color:   colors.$light-green;
        padding: {
          left:  4pt;
          right: 4pt;
        }
      }
    }
  }
  
  tbody > tr:nth-of-type(1) > th {
    border-top-color: transparent;
  }
}