Atom One Light Rainbow

styles.less

/***********************************************
 * GRADIENT THEME
 **********************************************/
@gradient-start: #3E8CC4;
@gradient-end: #A07AB2;
@gradient-ui-background: #FFFFFF;
@gradient-ui-color: #000000;
@gradient-ui-opacity: 75%;
@gradient-padding: 8px;

body {
  background-image: linear-gradient(to bottom, @gradient-start 0%, @gradient-end 100%);
  padding: @gradient-padding;
}


// override opacity to sidebar/content/tabs/search
.tree-view,
.item-views,
.tab-bar,
.panel-bottom {
  background: fade(@gradient-ui-background, @gradient-ui-opacity) !important;
}

// [0] border radius on sidebar
.tree-view,
.tree-view-scroller {
  border-top-left-radius: 4px; // [0]
  border-bottom: 0;
}

// [0] border radius on content
// [1] add some padding, so the border radius can be visible (bit hacky)
atom-text-editor {
  border-radius: 3px 0 0 3px; // [0]
  padding: 3px; // [1]
}

// [0] shadow on content
// [1] remove the ugly border
.item-views {
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2); // [0]
  border: none !important; // [1]
}

// [0] a bit more opaque white on the status bar
// [1] border radius <3
.status-bar {
  background: fade(@gradient-ui-background, @gradient-ui-opacity + 10%) !important; // [0]
  border-radius: 0 0 4px 4px; // [1]
}

// [0] Remove 'responsive' paddings
atom-pane-container atom-pane {
  padding-top: 0; // [0]
  padding-right: 0; // [0]
}

// Remove the tab markers
.tab-bar .tab::after,
.tab-bar .tab::before {
  display: none;
}

// Solid color to divide the tabs
.tab-bar .tab {
  border-image: linear-gradient(rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0.075) 1em) 0 0 0 1 stretch;
}

// No mask or background on the title
.tab-bar .tab .title {
  -webkit-mask: none;
  background: none;
}

// [0] Update active tab colors
// [1] Adds a solid 'border', so the shadow does not leak to the editor content
// [2] Add some shadow around the tab
// [3] border radius
// [4] remove border image (looked weird)
.tab-bar .tab.active {
  background-color: @tab-background-color-active; // [0]
  box-shadow: 0 2px 0 0 @tab-background-color-active, // [1]
              inset 0 -2px 0 0 @tab-background-color-active, // [1]
              0 0 4px rgba(0, 0, 0, 0.1);  // [2]
  border-radius: 3px 3px 0 0; // [3]
  border-image: none; // [4]

  // We apply the same thing here, but with diff colors (based on the editor ui colors)
  &[data-type$="Editor"],
  &[data-type="MarkdownPreviewView"] {
    background-color: @tab-background-color-editor;
    box-shadow: 0 2px 0 0 @tab-background-color-editor,
                inset 0 -2px 0 0 @tab-background-color-editor,
                0 0 4px rgba(0, 0, 0, 0.1);
  }
}

// Change default inactive tab color
.tab-bar .tab {
  color: fade(@gradient-ui-color, 60%);
}

// [4] so the shadow of the active tab can overflow
.tab-bar {
  border-top-right-radius: 4px;
  box-shadow: none;
  z-index: 10;
  overflow: visible; // [4]
}

// rounded linter tabs <3
linter-bottom-tab {
  border-radius: 2rem;
  margin-top: -2px;

  &:not(:last-child) {
    margin-right: 2px;
  }
}

// modal colors
atom-panel.modal:after {
  background-color: fade(@gradient-ui-background, 80%);
  background-image: linear-gradient(to bottom, fade(@gradient-start, 10%) 0%, fade(@gradient-end, 10%) 100%);
}
/***********************************************
 * END GRADIENT THEME
 **********************************************/