atom stylesheet with customized tree view and tab view

styles.less

// Atom styles.less
// anthonyclarka2 AT G MAIL
// 2018-08-03
// Atom theme used is Solarized Light

@import "ui-variables";
@import "syntax-variables";
// does exactly what the package name suggests:
@import "packages/red-wavy-underline/styles/red-wavy-underline";

.tree-view {
  font-family: "Noto Sans Condensed";
  font-size: 10pt;
  font-weight: lighter;
  .selected {
    font-family: "Noto Sans Condensed";
    font-weight: lighter;
    // required to prevent ghosting of text
    text-shadow: none !important;
    font-weight: bold !important;
  }
  .list-item {
    text-shadow: none !important;
  }
}

// Adobe's Source Code Pro is my current favourite
// download from: https://github.com/adobe-fonts/source-code-pro/releases/latest
.workspace, body, html {
  font-family: "SourceCodePro-Regular", "Source Code Pro";
  font-style: normal;
}

.tab-bar {
  font-family: "Noto Sans Condensed";
  text-shadow: none !important;
  font-size: 10pt;
  .active {
    font-family: "Noto Sans Condensed";
    font-weight: bold;
  }
}

// I find lower case text easier on the eyes
// plus keeping it small wastes less space on UI chrome
status-bar {
  font-family: "Noto Sans";
  text-transform: lowercase;
  font-size: 10pt;
  height: 24px;
  line-height: 24px;
}

// change bracket matching to a more visible colour, using
// using "violet" from Solarized
editor, atom-text-editor {
  bracket-matcher {
    border-bottom: 1px solid #6c71c4;
    position: absolute;
    border: 1px solid rgba(108, 113, 196, 0.8);
    background-color: rgba(108, 113, 196, 0.2);
  }
}

// Replaces the atom-lint error highlight with the red wavy underline
.lint .violation-border.violation-warning {
  .red-wavy-underline;
}

// Brightens the gutter diff indicators to make them more visible
.diff-icon(@color) {
  background-color: fade(@color, 60%);

  &:before {
    color: contrast(fade(@color, 60%));
  }
}

.diff-border(@color) {
  border-color: lighten(@color, 15%);
  border-left-width: 4px;
}

@gutter-padding: 15px;

atom-text-editor {
  .gutter .line-number {
    padding-left: @gutter-padding;

    &.git-line-added {
      .diff-border(@text-color-success);
      padding-left: @gutter-padding - 4;
    }

    &.git-line-modified {
      .diff-border(@text-color-warning);
      padding-left: @gutter-padding - 4;
    }

    &.git-line-removed {
      .diff-border(@text-color-error);
      padding-left: @gutter-padding;
    }
  }

  .gutter.git-diff-icon .line-number {
    &.git-line-added {
      .diff-icon(@text-color-success);
    }

    &.git-line-modified {
      .diff-icon(@text-color-warning);
    }

    &.git-line-removed {
      .diff-icon(@text-color-error);
    }
  }
}
// end of diff gutter modifications

// Highlights trailing whitespace except on the cursor line
atom-text-editor {
  div.line:not(.cursor-line) {
    .trailing-whitespace {
      background-color: @background-color-error;
      color: contrast(@background-color-error);
    }
  }
}

// atom-text-editor, atom-text-editor {
//    // Box
//   .highlights .highlight-selected .region {
//     border-color: #999;
//     border-radius: 3px;
//     box-sizing: border-box;
//     background-color: transparent;
//     border-width: 1px;
//     border-style: dashed;
//   }
//   // Background
//   .highlights .highlight-selected.background .region {
//     background-color: rgba(155, 149, 0, 0.6);
//   }
//   // Light theme box (set in settings)
//   .highlights .highlight-selected.light-theme .region {
//     border-color: rgba(255, 128, 64, 0.4);
//   }
//   // Light theme background (set in settings)
//   .highlights .highlight-selected.light-theme.background .region {
//     background-color: rgba(255, 128, 64, 0.2);
//   }
// }