Skip to content

Instantly share code, notes, and snippets.

@lucasmotta
Created October 12, 2016 13:24
Show Gist options
  • Save lucasmotta/9f9ab32c1e637ff4291db00f5fe35c42 to your computer and use it in GitHub Desktop.
Save lucasmotta/9f9ab32c1e637ff4291db00f5fe35c42 to your computer and use it in GitHub Desktop.
Atom One Light Rainbow
/***********************************************
* 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
**********************************************/
@lucasmotta
Copy link
Author

screen shot 2016-10-12 at 11 57 32

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment