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


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
  // border-color: red;
}



// powerline-like status bar for Atom vim-mode

// green
@normal-bg: rgb(105, 238, 103);
// blue
@insert-bg: rgb(7, 193, 242);
// yellowish
@visual-bg: rgb(255, 206, 98);


// change the current cursor-line background color
// based on vim mode
atom-text-editor.is-focused {
  // &.normal-mode::shadow {
  //   .cursor-line {
  //     background: fadeout(@normal-bg, 86%);
  //   }
  // }
  // &.insert-mode::shadow {
  //   .cursor-line {
  //     background: fadeout(@insert-bg, 86%);
  //   }
  // }
  // &.visual-mode::shadow {
  //   .cursor-line {
  //     background: fadeout(@visual-bg, 86%);
  //   }
  // }
}



// vim mode in the status bar at the bottom
// make it nice and big so you can see it out of the corner of your eye
// without thinking about it.
.status-bar-vim-mode-normal,
.status-bar-vim-mode-insert,
.status-bar-vim-mode-visual {
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
  width: 18rem;
  text-transform: uppercase;
}


.status-bar-vim-mode-normal {
  background: @normal-bg;
  color: rgb(4, 111, 11);
}

.status-bar-vim-mode-insert {
  background: @insert-bg;
  color: white;
}

.status-bar-vim-mode-visual {
  background: @visual-bg;
  color: rgb(168, 117, 5);
}

// change cursor color in normal mode
atom-text-editor.vim-mode.normal-mode.is-focused {
  &::shadow, // shadow-DOM enabled
  &          // shadow-DOM disabled
  {
    .cursor {
      // background: fadeout(@normal-bg, 20%);
      background-color: rgb(245, 99, 0);
    }
  }
}


//HIGHLIGHT MATCHING BRACKET
atom-text-editor::shadow  .bracket-matcher .region {
  border-bottom: 2px solid rgba(245, 99, 0, .9);
  // border-radius: 3px;
  // background-color: rgba(255, 217, 0, 0.3);
  z-index: 100;
}