styles.less

//
// I should probably have turned this into a theme…
// but who has time for that?

//
// Installation:
// 1. Choose "Solarized Dark" as your theme.
// 2. Install Input from http://input.fontbureau.com/
//    (It's free for personal use.)
// 3. Stick the contents of this file into your Atom stylesheet.

//
// Colors
// http://ethanschoonover.com/solarized

//  SOLARIZED HEX      // 16/8 TERMCOL  XTERM/HEX   L*A*B      RGB         HSB
//  --------- -------  // ---- -------  ----------- ---------- ----------- -----------
   @base03  : #002b36; //  8/4 brblack  234 #1c1c1c 15 -12 -12   0  43  54 193 100  21
   @base02  : #073642; //  0/4 black    235 #262626 20 -12 -12   7  54  66 192  90  26
   @base01  : #586e75; // 10/7 brgreen  240 #585858 45 -07 -07  88 110 117 194  25  46
   @base00  : #657b83; // 11/7 bryellow 241 #626262 50 -07 -07 101 123 131 195  23  51
   @base0   : #839496; // 12/6 brblue   244 #808080 60 -06 -03 131 148 150 186  13  59
   @base1   : #93a1a1; // 14/4 brcyan   245 #8a8a8a 65 -05 -02 147 161 161 180   9  63
   @base2   : #eee8d5; //  7/7 white    254 #e4e4e4 92 -00  10 238 232 213  44  11  93
   @base3   : #fdf6e3; // 15/7 brwhite  230 #ffffd7 97  00  10 253 246 227  44  10  99
   @yellow  : #b58900; //  3/3 yellow   136 #af8700 60  10  65 181 137   0  45 100  71
   @orange  : #cb4b16; //  9/3 brred    166 #d75f00 50  50  55 203  75  22  18  89  80
   @red     : #dc322f; //  1/1 red      160 #d70000 50  65  45 220  50  47   1  79  86
   @magenta : #d33682; //  5/5 magenta  125 #af005f 50  65 -05 211  54 130 331  74  83
   @violet  : #6c71c4; // 13/5 brmagenta 61 #5f5faf 50  15 -45 108 113 196 237  45  77
   @blue    : #268bd2; //  4/4 blue      33 #0087ff 55 -10 -45  38 139 210 205  82  82
   @cyan    : #2aa198; //  6/6 cyan      37 #00afaf 60 -35 -05  42 161 152 175  74  63
   @green   : #859900; //  2/2 green     64 #5f8700 60 -20  65 133 153   0  68 100  60

//
// Fonts
// http://input.fontbureau.com/

@ui-font: "Input Sans Narrow";

.tab {
  font-family: @ui-font;
  font-size: 12px !important;
}

.status-bar,
.tool-panel {
  font-family: @ui-font;
}

.editor {
  font-weight: 400;
}

//
// Tab bar modifications
// Light Table-esque styling

.tab-bar {
  background: @base02;
  border-bottom: none;
  padding: 3px 0 5px;
  height: auto;
  border-bottom: none;
  box-shadow: none;

  &:after {
    display: none;
  }
}

.tab-bar .tab {
  background: @base02;
  padding: 2px 10px 3px !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: #586e75;

  .close-icon {
    right: 10px !important;
    top: 0;
    line-height: 26px !important;
  }
}

// Curved tab edges turned off
.tab-bar .tab:before, .tab-bar .tab:after {
  display: none !important;
}

.tab-bar .tab.active, .tab-bar .tab.active:before, .tab-bar .tab.active:after {
  background: @base03;
  color: #eee8d5;
  height: 26px;
  line-height: 25px;
}

//
// File tree modifications

.tool-panel.panel-left {
  border-right: none;
}

.tree-view-resizer {

}

.tree-view-scroller {
  background: @base02 !important;

  // Softening gradient between tree view content and editor edge
  /*&:after {
    content: "";
    display: block;
    background: linear-gradient(to right, fade(@base02, 0%) 0%, fade(@base02, 100%) 100%);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
  }*/
}

.tree-view {
  font-family: @ui-font;
  font-size: 12px;
  background: @base02 !important;
  box-shadow: none;
  padding: 8px;

  .list-item {
    line-height: 1.8 !important;

    .name { color: @base1; }
  }

  .selected {
    & > .header .name,
    & > .name {
      color: @base2;
    }

    &:before {
      background: mix(@blue, @base02, 38.2%) !important;
      height: 1.6em !important;
      box-shadow: none;
    }
  }

  .entry.status-modified {
    & > .header .name,
    & > .name {
      color: @orange;
    }
  }

  .selected.entry.status-modified > .header .name,
  .selected.entry.status-modified > .name {
    color: lighten(@orange, 23.6%) !important;
  }

  .icon:before {
    font-size: 14px;
    opacity: .854;
    top: 0;
    margin-right: 0.1em;
  }

  .header:before {
    margin-right: 0 !important;
  }
}

//
// Status bar modifications

.tool-panel.status-bar {
  background: @base02;
  border: none;
  box-shadow: none;
  color: @base00;

  a {
    color: @base1;
  }

  .text-error {
    color: @red;
  }

  .status-bar-right,
  .status-bar-left {
    padding-top: 2px;
  }
}

//
// Find/search bar modifications

.tool-panel.panel-bottom {
  background: @base02;
  box-shadow: none;
  border: none;
  color: @base1;

  // Faded bits of text
  .subtle-info-message,
  .options-label,
  .placeholder-text {
    color: @base00 !important;
  }

  // Bright bits of text
  .highlight,
  .options-label .options {
    color: @base1;
  }

  // Textfields
  .editor.mini {
    color: @base2;
    background: @base03;
    padding-top: 1px;

    &.is-focused { background: darken(@base03, 1.4%); }
  }

  // Buttons
  .btn {
    border-color: @base02;
    background: mix(@blue, @base02, 14.6%);
    color: @base1;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1px;

    &:hover,
    &:focus {
      background: mix(@blue, @base02, 50%);
      color: @base2;
    }

    &:active {
      background: mix(@blue, @base02, 9.6%);
      color: @base1;
    }
  }

  // Fixes extra gap in 3-button groups
  .btn + .btn + .btn { border-left: 0; }
}

//
// Misc styling changes
// Everything else

// Cursor color and thickness
.editor .cursor {
  border-color: saturate( lighten(@magenta, 9%), 14.6%);
  border-width: 2px;
}

// Gap on the right side of editor
.item-views {
  border-right: 8px solid @base02;
}

// Remove borders between splits
.panes .pane-row > *,
.panes .pane-column > * {
  border: none;
}

// The lines that help you match indent levels
.editor .indent-guide {
  box-shadow: inset 1px 0 0 fade(@base3, 5.6%);

  // Hide leftmost guide, since it's useless
  &:first-of-type { box-shadow: none; }
}

// Highlighting for matching start & end brackets
.bracket-matcher {
  opacity: 1;
  background-color: fade(@magenta, 50%);
  border-bottom: 1px solid fade(@magenta, 76.4%);
}

// The column that contains line numbers
.editor .gutter {
  background: darken(@base03, 1.4%);
  color: @base01;
}

// Highlighted line number and line
.line.cursor-line,
.editor .line-number.cursor-line-no-selection {
  background: fade(#000, 23.6%);
}

// Selection colors
.editor .selection .region {
  background: fade(@base00, 38.2%);
}