viddo/atom-textual-velocity

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";
@headerZindex: 2;

.tv-dot {
  display: inline-block;
  width: 1px;
  height: 1px;
  margin-right: 1px;
  margin-bottom: 1px;
  background-color: @text-color-success;
}

.tv-loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: @app-background-color;
  opacity: 0.9;
  z-index: 10;
}

.tv-load-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;

  span {
    white-space: nowrap;
  }

  progress {
    width: 100%;
  }
}

.tv-input {
  background-color: @input-background-color;
  color: @text-color;
  width: 100%;
  height: 100%;
  border: 0;
  padding-left: @component-icon-padding;
}
.tv-input--search {
  padding-top: @component-padding;
  padding-bottom: @component-padding;
  padding-right: @component-icon-padding;
}

.textual-velocity {
  .header {
    position: relative;
    overflow-y: scroll;
    box-shadow: @tree-view-border-color 0 1px 2px;
    z-index: @headerZindex;

    tr {
      background-color: @tree-view-background-color !important;
    }
  }

  table {
    width: 100%;
  }
  tr {
    &:nth-child(odd) {
      background-color: @tree-view-background-color;
    }
    &:nth-child(even) {
      background-color: lighten(@tree-view-background-color, 2%);
    }
  }
  .is-reversed-stripes {
    tr {
      &:nth-child(odd) {
        background-color: lighten(@tree-view-background-color, 2%);
      }
      &:nth-child(even) {
        background-color: @tree-view-background-color;
      }
    }
    tr.is-selected {
      background-color: @background-color-selected;
      color: @text-color-selected;
    }
  }
  tr.is-selected {
    background-color: @background-color-selected;
    color: @text-color-selected;
  }
  td,
  th {
    padding-left: @component-icon-padding;
    padding-right: @component-icon-padding;
    max-width: 0; // required for overflow to work
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .highlight {
      // e.g. tags, "reversed" colors
      color: @app-background-color;
      background-color: @text-color-subtle;
    }
  }
  th {
    padding-top: @component-icon-padding;
    padding-bottom: @component-icon-padding;
    color: @text-color-subtle;
    cursor: pointer;
    &.is-selected {
      color: @text-color;
    }
    & .icon.is-hidden:before {
      // hack to make the height remain the same even if the sort icon is not visible
      width: 0;
      overflow: hidden;
    }
  }
  td {
    cursor: pointer;
    &.edit-cell-str {
      display: table-cell;
      padding: 0;
    }
    &.summary,
    &.stats {
      padding-top: @component-icon-padding;
      padding-bottom: @component-icon-padding;
    }
  }
  .only-for-column-widths {
    tr,
    td,
    th {
      height: 0;
      padding: 0;
    }
  }

  .resize-handle {
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 7px;
    cursor: ns-resize;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: @pane-item-border-color;
    z-index: @headerZindex + 1;
  }
}

.tv-info {
  cursor: pointer;
}