atom styles

styles.less

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 */

// Editor General

.editor .selection .region {
  background-color: rgba(255, 100, 120, 0.30);
}

.editor .gutter .line-numbers {
  color: #888;
  background-color: rgb(32, 32, 32) !important;
}

.editor .line-number.cursor-line-no-selection,
.editor .gutter .cursor-line {
  background-color: #422A36;
}

.editor-colors {
  background-color: #1B1B1B;
}

.editor .cursor {
  position: absolute;
  border: 1px solid rgba(244,100,122, 0.95);
  background-color: rgba(244, 100, 122, 0.42);
}

.editor.is-focused .cursors.blink-off .cursor {
  visibility: visible;
}

// Editor Tabs

.tab-bar .tab {
  height: 30px !important;
  line-height: 28px !important;
  border-bottom-width: 4px;
  .close-icon {
    line-height: auto;
    color: #777;
  }
  .title {
    margin-top: 0 !important;
  }
}

.tab-bar .tab.active {
  &:before {
    height: 30px;
  }
}

.tab-bar {
  border-bottom: 2px solid #1b1b1b;
}

.panes .pane:not(.active) .tab-bar .tab.active {
  color: #ccc;
  border-bottom-color: #3C4E5C;
  &:before {
    border-bottom-color: #3C4E5C;
  }
}


// Tree View

.tree-view {
  font-family: "Fira Sans";
}

.name.icon.icon-file-directory {
  font-weight: normal;
}

.list-group li:not(.list-nested-item), .list-tree li:not(.list-nested-item), .list-group li.list-nested-item > .list-item, .list-tree li.list-nested-item > .list-item {
  height: 18px;
}

.list-group .selected:before, .list-tree .selected:before {
  height: 18px;
}

.list-tree.has-collapsable-children .list-nested-item > .list-tree > li, .list-tree.has-collapsable-children .list-nested-item > .list-group > li {
  padding-left: 8px;
}

.feedback-status inline-block {
  display: none;
}

// Panels

.settings-view {
  .text {
    color: #D8D8D8;
  }
  .section .section-heading {
    color: #eee !important;
  }
  .panels {
    color: #eee;
    background: #333;
  }
  .editor-container .editor.mini {
    color: #eee;
    background: #444;
    &.is-focused {
      color: #eee;
      background: #444;
    }
  }
  
  .form-control {
    color: #ececec;
    background-color: #000;
    border-color: #7c7c7c;
  }
  
  .config-menu {
    background-color: #222222;
    
    .nav > li > a {
      color: #bbb;
      &:hover {
        color: #eee;
        background-color: #444;
      }
    }
    .nav > li.active > a {
      
      &:hover {
        color: #eee;
        background-color: #3f99d3;
      }
    }
  }
}