Atom Stylesheet

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
 */


 // focus mode for tree-view
 @import "ui-variables";
 .tree-view {
   li {
     transition: opacity 100ms ease-in-out;
     &.project-root > ol > .file > span {
       &:hover { opacity: 1; }
       opacity: 0.5;
     }
   }
   li:not(.project-root) .entries { border-left: 1px solid lighten(@tree-view-background-color, 2%); }
   &:not(:hover) {
     li {
       &.collapsed,
       &.project-root > ol > .file > span { opacity: 0.15; }
       &.selected,
       &.selected > * { opacity: 1 !important; }
     }
   }
 }

// highlight find results
span.path-name.bright { color: #859900; font-weight: 700; }

// highlight brackets
atom-text-editor {
  .bracket-matcher .region { border-color: #d33682; border-radius: 2px; background: rgba(211, 54, 130, 0.4); }
}

// highlight TODOs
atom-text-editor {
  .syntax--note,
  .syntax--fixme,
  .syntax--todo { color: #d33682 !important; }
}

// highlight indent guide
.indent-guide-improved.indent-guide-stack.indent-guide-active { background-color: #d33682; }

// highlight selection
.editor .selection .region {
  background: fade(#d33682, 50%);
}

// make tabs multi-row
.tab-bar { height: auto; flex-wrap: wrap; }
.tab-bar .tab { flex-basis: auto; }