styles for Atom

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

// style the background color of the tree view
.tree-view {
  background-color: #313a40;
  filter: brightness(100%) contrast(120%) hue-rotate(20deg);
}
.tree-view:hover {
  filter: brightness(115%) contrast(135%);
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  color: #a3f0ff;
  background-color: #2B2A26;
  filter: brightness(110%) contrast(120%) grayscale(20%) hue-rotate(10deg);
}
atom-text-editor:hover {
  filter: brightness(125%) contrast(120%) grayscale(20%) hue-rotate(10deg);
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
  border-color: #67d884;
  border-width: 2px;
  filter: brightness(150%);
}

// style scrollbar
.scrollbars-visible-always {
  /deep/ ::-webkit-scrollbar {
    width: 12px;
    height: 12px;

    &-track {
      background-color: #434f57 !important;
    }

    &-thumb {
      background-color: #ccdecf !important;
      border-color: #4a4a4a;
      border-width: 2px;
      border-radius: 12px;
      cursor: pointer;
    }
  }
}

.theme-one-dark-ui,
.theme-one-light-ui {
  .tab-bar {
    margin-bottom: -12px;
    font-size: 13px;
    font-weight: 100;
    font-family: 'Segoe UI';
    letter-spacing: 0.25px;
    background-color: #394D15;
    margin: -2px 8px 4px 8px;
    padding: 0 8px 0 8px;
    filter: brightness(155%) contrast(175%) opacity(85%) hue-rotate(118deg)
      grayscale(35%);
    border-radius: 25% 25% 75% 75%;
  }
  .tab-bar:hover {
    filter: brightness(175%) contrast(175%) opacity(85%) hue-rotate(118deg)
      grayscale(35%);
  }
  .tab {
    color: #ffffff;
    background-color: #755249;
    border-width: 10px;
    border-color: #24330a;
    border-radius: 90% 45% 90% 45%;
    margin: -6px -8px 0 -4px;
    padding: 0 -12px 0 -12px;
    cursor: pointer;
  }
  .tab:hover {
    border-color: #102E04;
    background-color: #800E3D;
    margin-top: -2px;
    filter: brightness(175%) contrast(185%) opacity(95%) grayscale(25%);
  }
}