styles.less

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
  // border-color: red;
}

@tab-bar-height: 3.2em;
@tab-close-height: 1.5em;
@tab-close-padding: (@tab-bar-height - @tab-close-height) / 2;
@tab-bg-color: #21252b;
@tab-bg-color-active: #282c34;
@tab-border-color: #181a1f;
@tab-active-border-left-color: #4f545e;
@tab-active-focus-border-left-color: #568af2;

.tab-bar {
  height: @tab-bar-height;

  .tab {
    line-height: @tab-bar-height;

    .close-icon {
      top: @tab-close-padding;
      right: @tab-close-padding;
      width: @tab-close-height;
      height: @tab-close-height;
    }

    &.modified:not(:hover) .close-icon {
      top: @tab-close-padding;
      right: @tab-close-padding;
      width: @tab-close-height;
      height: @tab-close-height;
    }

    &.pinned-tab {
      border-left-width: 0;

      &:before {
        display: none;
      }

      > .title {
        position: fixed;
        margin-right: 1px;
        max-width: inherit;
        border-right: 1px solid @tab-border-color;
        box-shadow: inherit;
        background: linear-gradient(to left, @tab-bg-color, @tab-bg-color) no-repeat 1px 0;
        transform: translateX(-2px);
        z-index: 1000;
      }

      &.active > .title {
        background: linear-gradient(to left, @tab-bg-color-active, @tab-bg-color-active) no-repeat 1px 0;

        &:after {
          content: "";
          position: absolute;
          pointer-events: none;
          z-index: 2;
          top: 0;
          left: 0;
          bottom: 0;
          width: 2px;
          background: @tab-active-border-left-color;

          .pane:focus-within & {
            background: @tab-active-focus-border-left-color;
          }
        }
      }

      &.active:first-of-type > .title,
      &:first-of-type > .title {
        background-color: inherit;
      }

      & + .active:not(.pinned-tab) {
        &:before {
          width: 3px !important;
        }
      }
    }
  }
}