Customizations for the Atom Editor

Here is my styles.less customization for the Atom editor user interface.

I like a dark interface and editor style and this stylesheet is intended to work with either the Seti UI theme or One Dark UI theme and the Seti syntax theme. Under Themes – Seti UI options I have Compact Mode enabled. In the Editor settings for font I’m using Noto Sans Mono but I also like Meslo LG S and DejaVu Sans Mono.

Note that element sizes such as tab height may need to be adjusted to account for different screen dimensions and resolution. This custom stylesheet also hides the tab close buttons since tabs are easily closed via middle-click.

This stylesheet requires that the fonts-noto-extra package be installed because it uses the Noto Sans Semicondensed font. You can also install the font manually from the link above.

There is one issue with this customization: The tab width is difficult to control. tab-max-width only crudely sets the max limit down to a certain point, and the width changes between Seti and OneDark. If I have time to work on a solution I will update this code.

// status bar customizations
.status-bar,
.tool-panel {
  font-family: Noto Sans SemiCondensed;
}


//  tree view customizations
.tree-view {
  font-family: Noto Sans SemiCondensed;
  font-size: 11px;

  .list-item {
    line-height: 1.2 !important;
  }
}


// editor customizations
atom-text-editor {
  color: white;
  background-color: hsl(0, 0%, 3%);
}


// scrollbar customizations
@scrollbar-width: 11px;

.scrollbars-visible-always {
  ::-webkit-scrollbar {
    width: @scrollbar-width;
    height: @scrollbar-width;

    &-track {
      border: 0;
      border-radius: 8px;
      // background-color: transparent !important;
      //background-color: hsl(0, 0%, 90%) !important;
      background-color: #262626 !important;
    }

    &-thumb {
      // background-color: rgba(111, 111, 111, 0.2) !important;
      //background-color: hsl(0, 0%, 70.2%) !important;
      background-color: #8c8c8c !important;
      border: 0;
      border-radius: 8px;
    }
  }
}
// end scrollbar customizations


// tab customizations
@tab-font-size: 9px;
@tab-height: 20px;
@tab-max-width: 10em;  // ISSUE
@line-height: @tab-height; 

atom-workspace.seti-compact atom-workspace-axis.vertical .tab-bar {

  .tab {
    border-bottom: solid 2px rgba(0,0,0,0.4);
    border-left: 0;
    border-right: 2px solid hsl(0, 0%, 28%);
    margin: 0 0px 0 2px;  // top right bottom left
    padding: 0 0 0 2px;
    height: @tab-height + 1;
    line-height: @line-height;
    max-width: @tab-max-width !important;
    
    .title {
      //line-height: @line-height;
      font-family: Noto Sans SemiCondensed;
      font-weight: 500;
      font-size: @tab-font-size;
      //color: hsl(0, 0%, 70%);  // changes color for active and inactive tabs
    }

    .title::before {
      //display: none;  // uncomment out to hide tab icons
      line-height: @line-height;  // needed for tab icons to vertically align
    }
    
    .close-icon {
      display: none;
      //top: 1px;
      //line-height: @line-height;
      //height: @line-height;
      //right: 5px;
    }
  }
  
  // active tab background color
  .tab.active {
    background: hsl(0, 0%, 28%);
  }
  
  // first tab
  .tab,
  .tab.active {
    &:first-child {
      margin-left: 0;
      padding-left: 5px;
    }
  }

}