Atom Style LESS file

/*
 * 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: #111213;
  font-size: 14px;
}

.list-inline.inset-panel li,
.tab-bar {
  background: #111213 !important;
}

.tab-bar .title {
  padding: 5px;
}

*::-webkit-scrollbar {
  background: rgba(10, 10, 10, 0.02) !important;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  border: none !important;
  outline: none !important;
}

*::-webkit-scrollbar-track {
  background: rgba(10, 10, 10, 0.02) !important;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  background-color: #111213;
  padding-top: 10px;
  font-size: 16px;
}

.line.cursor-line {
  background-color: #17181a !important;
}

.is-focused {
  background-color: #111213 !important;
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
  border-color: red;
}

.scroll-view {
  padding-left: 5px;
}

* {
  // font-family: sans-serif;
}

.syntax--this {
  color: orange;
}

.syntax--entity.syntax--name.syntax--function {
  color: #aef521;
}

.syntax--entity.syntax--name.syntax--tag,
.syntax--component {
  color: #e88ad7 !important;
}

.syntax--console {
  color: #ffa0a0 !important;
  // background: white;
}

.gutter {
  background-color: #111213 !important;
}

.gutter-container {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.texteditor.tab .title {
  font-size: 15px;
  // border-right: 1px solid red;
}

UI Theme: one dark
Syntax theme: Monokai Dark