atom styles

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

 @tab-height: 28px;
 @line-height: @tab-height;
 
.tab-bar {
  height: @tab-height + 1;
  line-height: @tab-height;
  border-bottom: 1px solid #333333;
  padding-left: 1px;
  font-size: 0.9em;

  &:after {
    display: none;
  }

  .tab, .tab.active {
    height: @tab-height;
    line-height: @line-height;
    border-left: 0;
    border-right: 1px solid #333333;
    margin: 0 1px 0 0;
    padding: 0 0 0 5px;
    top:0;
    
    &:first-child {
      margin-left: 0;
      padding-left: 5px;
    }

    &:before, &:after {
      display: none;
    }

    .title {
      line-height: @tab-height;

    }

    .close-icon {
      top: 1px;
      line-height: @line-height;
      height: @line-height;
      right: 5px;
    }

    &.modified .close-icon {
      heigth: 8px;
      right: 5px;
      line-height: @line-height;
    }
  }
}

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
  font-size: 0.9em;
}

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

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

atom-workspace,
atom-text-editor {
  font-family: "Operator Mono";
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
 }
atom-panel.tool-panel {
  font-size: 0.88em;
}