├── CONTRIBUTING.md ├── styles ├── messages.less ├── zen.less ├── atom.less ├── git.less ├── sites.less ├── dropdowns.less ├── utilities.less ├── nav.less ├── panes.less ├── tree-view.less ├── ui-mixins.less ├── overlays.less ├── editor.less ├── panels.less ├── buttons.less ├── tooltips.less ├── progress.less ├── text.less ├── tabs.less ├── ui-variables.less └── lists.less ├── README.md ├── package.json ├── index.less └── LICENSE.md /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | See the [Atom contributing guide](https://atom.io/docs/latest/contributing) 2 | -------------------------------------------------------------------------------- /styles/messages.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | ul.background-message { 4 | font-weight: bold; 5 | color: rgba(0, 0, 0, .2); 6 | } 7 | -------------------------------------------------------------------------------- /styles/zen.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .zen { 4 | atom-pane-container atom-pane { 5 | background-color: @app-background-color; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /styles/atom.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | .atom-workspace { 8 | background-color: @app-background-color; 9 | } 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Spacegray Dark UI theme 2 | 3 | Port of the [Spacegray](http://kkga.github.io/spacegray) Sublime Text theme to Atom. 4 | 5 | ![screenshot](http://ridingtheclutch.com.s3.amazonaws.com/images/spacegray.png) 6 | -------------------------------------------------------------------------------- /styles/git.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | .status { .text(normal); } 5 | .status-added { .text(info); } 6 | .status-ignored { .text(subtle); } 7 | .status-modified { .text(warning); } 8 | .status-removed { .text(error); } 9 | .status-renamed { .text(success); } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spacegray-dark-ui", 3 | "theme": "ui", 4 | "version": "0.13.0", 5 | "description": "Port of the Spacegray Sublime Text theme http://kkga.github.io/spacegray to Atom", 6 | "license": "MIT", 7 | "repository": "https://github.com/cannikin/spacegray-dark-ui", 8 | "engines": { 9 | "atom": ">0.50.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /styles/sites.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | .ui-site(@num, @color) { 5 | .ui-site-@{num} { 6 | background-color: @color; 7 | } 8 | } 9 | 10 | .ui-site(1, @ui-site-color-1); 11 | .ui-site(2, @ui-site-color-2); 12 | .ui-site(3, @ui-site-color-3); 13 | .ui-site(4, @ui-site-color-4); 14 | .ui-site(5, @ui-site-color-5); 15 | -------------------------------------------------------------------------------- /styles/dropdowns.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | @import "octicon-mixins"; 4 | 5 | .dropdown-menu { 6 | background-color: @overlay-background-color; 7 | border-radius: @component-border-radius; 8 | padding: 0; 9 | 10 | > li > a { 11 | .text(normal); 12 | } 13 | 14 | > li > a:hover { 15 | .text(highlight); 16 | background-color: @background-color-highlight; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /styles/utilities.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | .key-binding { 5 | display: inline-block; 6 | line-height: 100%; 7 | border-radius: @component-border-radius; 8 | margin-left: @component-icon-padding; 9 | font-family: Helvetica, Arial, sans-serif; 10 | font-size: @font-size - 1px; 11 | padding: @component-padding / 2; 12 | } 13 | 14 | .badge { 15 | .text(highlight); 16 | background: @background-color-highlight; 17 | } 18 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | @import "styles/atom"; 2 | @import "styles/buttons"; 3 | @import "styles/editor"; 4 | @import "styles/git"; 5 | @import "styles/lists"; 6 | @import "styles/messages"; 7 | @import "styles/nav"; 8 | @import "styles/overlays"; 9 | @import "styles/panels"; 10 | @import "styles/panes"; 11 | @import "styles/progress"; 12 | @import "styles/sites"; 13 | @import "styles/tabs"; 14 | @import "styles/text"; 15 | @import "styles/tooltips"; 16 | @import "styles/tree-view"; 17 | @import "styles/utilities"; 18 | @import "styles/zen"; 19 | -------------------------------------------------------------------------------- /styles/nav.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .nav-tabs { 4 | border-bottom: 1px solid @base-border-color; 5 | li { 6 | a, 7 | &.active a { 8 | border: none; 9 | margin-right: 0px; 10 | margin-bottom: 1px; 11 | } 12 | 13 | a:hover, 14 | &.active a, 15 | &.active a:hover { 16 | background-color: @background-color-highlight; 17 | border: none; 18 | color: @text-color-selected; 19 | border-bottom-left-radius: 0px; 20 | border-bottom-right-radius: 0px; 21 | } 22 | 23 | &.active a { 24 | background-color: @tab-background-color-active; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /styles/panes.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | @import "buttons"; 4 | 5 | .pane-item { 6 | .panel { 7 | border-color: fadeout(@inset-panel-border-color, 30%); 8 | } 9 | } 10 | 11 | atom-pane-container { 12 | atom-pane { 13 | background-color: lighten(@app-background-color, 4%); 14 | 15 | &:focus { 16 | background-color: @app-background-color; 17 | } 18 | } 19 | 20 | atom-pane-axis.horizontal > * { 21 | border-right: 1px solid @pane-item-border-color; 22 | &:last-child { border-right: none; } 23 | } 24 | 25 | atom-pane-axis.vertical > * { 26 | border-bottom: 1px solid @pane-item-border-color; 27 | &:last-child { border-bottom: none; } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .tree-view { 4 | font-size: @font-size; 5 | background-color: @tree-background-color; 6 | } 7 | 8 | .focusable-panel { 9 | opacity: 1; 10 | 11 | &:focus { 12 | .selected > .name, 13 | .selected > .name:before, 14 | .selected > .list-item > .name, 15 | .selected > .list-item > .name:before { 16 | color: #fff !important; 17 | } 18 | } 19 | } 20 | 21 | .tree-view-resizer, atom-text-editor { 22 | /deep/ ::-webkit-scrollbar { 23 | width: 1em; 24 | height: 1em; 25 | } 26 | /deep/ ::-webkit-scrollbar-track { 27 | background-color: #2B303B; 28 | } 29 | 30 | /deep/ ::-webkit-scrollbar-thumb { 31 | background-color: #232830; 32 | } 33 | 34 | /deep/ ::-webkit-scrollbar-corner { 35 | background-color: #1C1F25; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /styles/ui-mixins.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | // Pattern matching; ish is cray. 4 | // http://lesscss.org/#-pattern-matching-and-guard-expressions 5 | .text(normal) { 6 | font-weight: normal; 7 | color: @text-color; 8 | text-shadow: none; 9 | } 10 | .text(subtle) { 11 | font-weight: normal; 12 | color: @text-color-subtle; 13 | text-shadow: none; 14 | } 15 | .text(highlight) { 16 | font-weight: normal; 17 | color: @text-color-highlight; 18 | text-shadow: 0 1px 0 rgba(0,0,0, .5); 19 | } 20 | .text(selected) { 21 | .text(highlight) 22 | } 23 | 24 | .text(info) { 25 | color: @text-color-info; 26 | text-shadow: none; 27 | } 28 | .text(success) { 29 | color: @text-color-success; 30 | text-shadow: none; 31 | } 32 | .text(warning) { 33 | color: @text-color-warning; 34 | text-shadow: none; 35 | } 36 | .text(error) { 37 | color: @text-color-error; 38 | text-shadow: none; 39 | } 40 | -------------------------------------------------------------------------------- /styles/overlays.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | atom-panel.modal { 4 | color: @text-color; 5 | background-color: @overlay-background-color; 6 | padding: @component-padding; 7 | border-radius: @component-border-radius; 8 | 9 | atom-text-editor[mini] { 10 | margin-bottom: @component-padding; 11 | } 12 | 13 | .select-list ol.list-group, 14 | &.select-list ol.list-group { 15 | 16 | background-color: lighten(@overlay-background-color, 3%); 17 | 18 | li { 19 | padding: @component-padding; 20 | 21 | &.two-lines { padding: @component-padding/2 @component-padding; } 22 | 23 | .status.icon { 24 | float: right; 25 | margin-left: @component-icon-padding; 26 | &:before { 27 | margin-right: 0; 28 | } 29 | } 30 | 31 | &.selected { 32 | .status.icon { 33 | color: @text-color-selected; 34 | } 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | 4 | atom-text-editor[mini] { 5 | color: @text-color-highlight; 6 | background-color: @input-background-color; 7 | border-radius: @component-border-radius; 8 | padding-left: @component-padding/2; 9 | .placeholder-text { 10 | color: @text-color-subtle; 11 | } 12 | .cursor { border-color: #fff; } 13 | .selection .region { background-color: lighten(@input-background-color, 10%); } 14 | } 15 | 16 | atom-text-editor[mini].is-focused { 17 | .selection .region { background-color: lighten(@app-background-color, 5%); } 18 | transition: background-color 0.1s 19 | } 20 | 21 | @-webkit-keyframes highlight { 22 | from { background-color: rgba(100, 255, 100, 0.7); } 23 | to { background-color: null; } 24 | } 25 | 26 | atom-text-editor.editor .highlighted.selection .region { 27 | -webkit-animation-name: highlight; 28 | -webkit-animation-duration: 1s; 29 | -webkit-animation-iteration-count: 1; 30 | } 31 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | @import "buttons"; 4 | 5 | .panel { 6 | &.bordered { 7 | border-radius: @component-border-radius; 8 | } 9 | } 10 | 11 | .tool-panel { 12 | .text(normal); 13 | position: relative; 14 | 15 | background-color: @tool-panel-background-color; 16 | } 17 | 18 | .inset-panel { 19 | position: relative; 20 | background-color: @inset-panel-background-color; 21 | } 22 | 23 | .is-blurred { 24 | .tool-panel, 25 | .inset-panel { 26 | } 27 | } 28 | 29 | .panel-heading { 30 | .text(normal); 31 | 32 | background-color: transparent; 33 | 34 | .btn { 35 | padding-left: 8px; 36 | padding-right: 8px; 37 | 38 | @bg: lighten(@button-background-color, 10%); 39 | @hover: lighten(@button-background-color-hover, 10%); 40 | @selected: lighten(@button-background-color-selected, 10%); 41 | @text: lighten(@text-color, 10%); 42 | .btn-background(@bg, @hover, @selected, @text); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 GitHub Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | 4 | .btn-background (@color, @hover-color, @selected-color, @text-color) { 5 | color: @text-color; 6 | transition: color 0.2s; 7 | 8 | &:hover, &:focus { 9 | color: @text-color; 10 | } 11 | &.selected, 12 | &.selected:hover { 13 | color: @text-color-highlight; 14 | &:hover { 15 | 16 | } 17 | } 18 | } 19 | 20 | .btn-variant (@color) { 21 | @bg: darken(@color, 10%); 22 | @hover: @color; 23 | @selected: @color; 24 | .btn-background(@bg, @hover, @selected, @text-color-highlight); 25 | } 26 | 27 | .btn { 28 | .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color); 29 | &:active { 30 | box-shadow: none; 31 | -webkit-box-shadow: none; 32 | } 33 | } 34 | 35 | .btn.btn-primary { 36 | .btn-variant(@background-color-info); 37 | } 38 | .btn.btn-info { 39 | .btn-variant(@background-color-info); 40 | } 41 | .btn.btn-success { 42 | .btn-variant(@background-color-success); 43 | } 44 | .btn.btn-warning { 45 | .btn-variant(@background-color-warning); 46 | } 47 | .btn.btn-error { 48 | .btn-variant(@background-color-error); 49 | } 50 | 51 | .caret { 52 | border-top: 5px solid #fff; 53 | margin-top: -1px; 54 | } 55 | -------------------------------------------------------------------------------- /styles/tooltips.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .tooltip { 4 | @tip-background-color: darken(@tool-panel-background-color, 10%); 5 | @tip-text-color: @text-color; 6 | white-space: nowrap; 7 | 8 | .keystroke { 9 | font-family: Helvetica, Arial, sans-serif; 10 | font-size: 12px; 11 | color: lighten(@tip-text-color, 10%); 12 | padding-left: 2px; 13 | } 14 | 15 | &.in { opacity: 1; } 16 | 17 | .tooltip-inner { 18 | line-height: 19px; 19 | border-radius: @component-border-radius; 20 | background-color: @tip-background-color; 21 | color: @tip-text-color; 22 | white-space: nowrap; 23 | max-width: none; 24 | } 25 | 26 | &.top .tooltip-arrow { 27 | border-top-color: @tip-background-color; 28 | } 29 | &.top-left .tooltip-arrow { 30 | border-top-color: @tip-background-color; 31 | } 32 | &.top-right .tooltip-arrow { 33 | border-top-color: @tip-background-color; 34 | } 35 | &.right .tooltip-arrow { 36 | border-right-color: @tip-background-color; 37 | } 38 | &.left .tooltip-arrow { 39 | border-left-color: @tip-background-color; 40 | } 41 | &.bottom .tooltip-arrow { 42 | border-bottom-color: @tip-background-color; 43 | } 44 | &.bottom-left .tooltip-arrow { 45 | border-bottom-color: @tip-background-color; 46 | } 47 | &.bottom-right .tooltip-arrow { 48 | border-bottom-color: @tip-background-color; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /styles/progress.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | 4 | .loading-spinner(@size) { 5 | width: @size; 6 | height: @size; 7 | display: block; 8 | 9 | background-image: url(images/octocat-spinner-128.gif); 10 | background-repeat: no-repeat; 11 | background-size: cover; 12 | 13 | &.inline-block { 14 | display: inline-block; 15 | } 16 | } 17 | 18 | .loading-spinner-large { 19 | .loading-spinner(64px); 20 | } 21 | 22 | .loading-spinner-medium { 23 | .loading-spinner(50px); 24 | } 25 | 26 | .loading-spinner-small { 27 | .loading-spinner(32px); 28 | } 29 | 30 | .loading-spinner-tiny { 31 | .loading-spinner(20px); 32 | } 33 | 34 | // Much learning from: 35 | // http://css-tricks.com/html5-progress-element/ 36 | 37 | @progress-height: 16px; 38 | @progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15)); 39 | 40 | progress { 41 | height: @progress-height; 42 | -webkit-appearance: none; 43 | } 44 | 45 | progress::-webkit-progress-bar { 46 | height: @progress-height; 47 | border-radius: @component-border-radius; 48 | 49 | background-color: #666; 50 | 51 | background-image: 52 | -webkit-linear-gradient(-30deg, 53 | transparent 33%, rgba(0, 0, 0, .1) 33%, 54 | rgba(0,0, 0, .1) 66%, transparent 66%), 55 | @progress-shine-gradient; 56 | 57 | border-radius: 2px; 58 | background-size: 25px @progress-height, 100% 100%, 100% 100%; 59 | -webkit-animation: animate-stripes 5s linear infinite; 60 | animation: animate-stripes 5s linear infinite; 61 | } 62 | 63 | progress::-webkit-progress-value { 64 | border-radius: @component-border-radius; 65 | background-image: @progress-shine-gradient; 66 | background-color: @background-color-success; 67 | } 68 | 69 | progress[value]::-webkit-progress-bar { 70 | background-image: @progress-shine-gradient; 71 | animation: none; 72 | } 73 | 74 | @-webkit-keyframes animate-stripes { 75 | 100% { background-position: 100px 0px; } 76 | } 77 | -------------------------------------------------------------------------------- /styles/text.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | h1, 5 | h2, 6 | h3 { 7 | line-height: 1em; 8 | margin-bottom: 15px 9 | } 10 | h1 { font-size: 2em; } 11 | h2 { font-size: 1.5em; } 12 | h3 { font-size: 1.2em; } 13 | 14 | p { 15 | line-height: 1.6; 16 | margin-bottom: 15px; 17 | } 18 | 19 | label { 20 | font-weight: normal; 21 | } 22 | 23 | pre { 24 | box-shadow: none; 25 | color: @text-color; 26 | background: @inset-panel-background-color; 27 | border-radius: @component-border-radius; 28 | border: none; 29 | margin: 0; 30 | } 31 | 32 | code { 33 | .text(highlight); 34 | background: @background-color-highlight; 35 | border-radius: @component-border-radius; 36 | } 37 | 38 | .selected { .text(highlight); } 39 | 40 | .text-smaller { font-size: 0.9em; } 41 | 42 | .text-subtle { .text(subtle); } 43 | .text-highlight { .text(highlight); } 44 | 45 | .text-error { .text(error); } 46 | .text-info { 47 | .text(info); 48 | &:hover { color: @text-color-info; } 49 | } 50 | .text-warning { 51 | .text(warning); 52 | &:hover { color: @text-color-warning; } 53 | } 54 | .text-success { 55 | .text(success); 56 | &:hover { color: @text-color-success; } 57 | } 58 | 59 | .highlight { 60 | color: @text-color-highlight; 61 | font-weight: bold; 62 | text-shadow: none; 63 | background-color: @background-color-highlight; 64 | border-radius: @component-border-radius; 65 | padding: 1px 3px; 66 | } 67 | 68 | .highlight-color(@name, @color, @text-color) { 69 | .highlight-@{name} { 70 | color: lighten(saturate(@text-color, 0%), 30%); 71 | font-weight: bold; 72 | text-shadow: none; 73 | background-color: fadeout(@color, 60%); 74 | border-radius: @component-border-radius; 75 | padding: 1px 3px; 76 | } 77 | } 78 | .highlight-color(info, @background-color-info, @text-color-info); 79 | .highlight-color(warning, @background-color-warning, @text-color-warning); 80 | .highlight-color(error, @background-color-error, @text-color-error); 81 | .highlight-color(success, @background-color-success, @text-color-success); 82 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @tab-radius: 3px; 3 | @modified-icon-width: 8px; 4 | @tab-skew: 30deg; 5 | @tab-top-padding: 0; 6 | @tab-bottom-border-height: 8px; 7 | @tab-border: 1px solid @tab-border-color; 8 | @tab-bar-bottom-border-color: #111; 9 | 10 | .tab-bar { 11 | height: @tab-height + @tab-top-padding; 12 | background: @tab-bar-background-color; 13 | padding: 0 13px 0 10px; 14 | box-sizing: border-box; 15 | 16 | &:after { 17 | content: ""; 18 | position: absolute; 19 | bottom: 0; 20 | height: @tab-bottom-border-height; 21 | left: 0px; 22 | width: 100%; 23 | } 24 | 25 | .tab { 26 | position: relative; 27 | top: @tab-top-padding; 28 | height: @tab-height; 29 | line-height: @tab-height; 30 | color: @text-color; 31 | padding-left: 0; 32 | margin-left: 15px; 33 | transition: color .1s ease-in; 34 | 35 | &:before { 36 | content: ''; 37 | position: absolute; 38 | top: 0; 39 | left: -18px; 40 | height: @tab-height; 41 | width: 40px; 42 | } 43 | 44 | .close-icon { 45 | display: none; 46 | transition: color 0.1s; 47 | &:hover { 48 | color: @text-color-error !important; 49 | 50 | } 51 | } 52 | 53 | &.modified:not(:hover) .close-icon { 54 | display: block; 55 | top: @tab-height/2 - @modified-icon-width/2 + 1px; 56 | right: 14px; 57 | width: @modified-icon-width; 58 | height: @modified-icon-width; 59 | border-color: @text-color-info; 60 | } 61 | 62 | &:first-child { 63 | margin-left: 20px; 64 | } 65 | 66 | &:hover { 67 | .close-icon { 68 | display: block; 69 | } 70 | } 71 | } 72 | 73 | .tab.active { 74 | z-index: 10; 75 | line-height: @tab-height - 3px; 76 | color: @text-color-highlight; 77 | 78 | .title{ 79 | position: relative; 80 | top: 1px; 81 | } 82 | 83 | .close-icon { 84 | line-height: @tab-height - 1px; 85 | display: block; 86 | } 87 | 88 | &, &:before { 89 | background-color: @tab-background-color-active; 90 | height: @tab-height; 91 | } 92 | 93 | } 94 | 95 | .tab:hover { 96 | color: @text-color-highlight; 97 | } 98 | 99 | .tab.active:hover .close-icon { 100 | color: @text-color-highlight; 101 | } 102 | 103 | .placeholder { 104 | height: @tab-height + @tab-top-padding + @tab-bottom-border-height; 105 | &:after { 106 | top: @tab-height + @tab-top-padding + @tab-bottom-border-height; 107 | } 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | // Colors 2 | 3 | @text-color: rgb(101, 115, 127); 4 | @text-color-subtle: #484F5A; 5 | @text-color-highlight: rgb(192,197,206); 6 | @text-color-selected: rgb(223, 225, 232); 7 | 8 | @text-color-info: #5786B8; 9 | @text-color-success: #68A281; 10 | @text-color-warning: #AA8A69; 11 | @text-color-error: #9B4444; 12 | 13 | @text-color-ignored: @text-color-subtle; 14 | @text-color-added: @text-color-success; 15 | @text-color-renamed: @text-color-info; 16 | @text-color-modified: @text-color-warning; 17 | @text-color-removed: @text-color-error; 18 | 19 | @background-color-info: #0098ff; 20 | @background-color-success: #17ca65; 21 | @background-color-warning: #ffaa2c; 22 | @background-color-error: #c00; 23 | @background-color-highlight: rgba(255, 255, 255, 0.07); 24 | @background-color-selected: #343D46; 25 | 26 | @tree-background-color: #232830; 27 | 28 | @app-background-color: #2B303B; 29 | 30 | @base-background-color: lighten(@tool-panel-background-color, 5%); 31 | @base-border-color: rgba(0, 0, 0, 0.5); 32 | 33 | @pane-item-background-color: @base-background-color; 34 | @pane-item-border-color: rgba(0, 0, 0, 0.5); 35 | 36 | @input-background-color: #1C1F26; 37 | @input-border-color: @base-border-color; 38 | 39 | @tool-panel-background-color: #1C1F26; 40 | @tool-panel-border-color: transparent; 41 | 42 | @inset-panel-background-color: #161719; 43 | @inset-panel-border-color: @base-border-color; 44 | 45 | @panel-heading-background-color: #43484d; 46 | @panel-heading-border-color: fadein(@base-border-color, 10%); 47 | 48 | @overlay-background-color: @tool-panel-background-color; 49 | @overlay-border-color: @background-color-highlight; 50 | 51 | @button-background-color: #1C1F26; 52 | @button-background-color-hover: #1C1F26; 53 | @button-background-color-selected: #1C1F26; 54 | @button-border-color: transparent; 55 | 56 | @tab-bar-background-color: rgb(28, 31, 38); 57 | @tab-bar-border-color: transparent; 58 | @tab-background-color: #1C1F26; 59 | @tab-background-color-active: rgb(43, 48, 59); 60 | @tab-border-color: transparent; 61 | 62 | @tree-view-background-color: @tool-panel-background-color; 63 | @tree-view-border-color: @tool-panel-border-color; 64 | 65 | @ui-site-color-1: @background-color-success; // green 66 | @ui-site-color-2: @background-color-info; // blue 67 | @ui-site-color-3: @background-color-warning; // orange 68 | @ui-site-color-4: #db2ff4; // purple 69 | @ui-site-color-5: #f5e11d; // yellow 70 | 71 | 72 | // Sizes 73 | 74 | @font-size: 11px; 75 | 76 | @disclosure-arrow-size: 12px; 77 | 78 | @component-padding: 10px; 79 | @component-icon-padding: 5px; 80 | @component-icon-size: 16px; 81 | @component-line-height: 25px; 82 | @component-border-radius: 2px; 83 | 84 | @tab-height: 30px; 85 | 86 | 87 | // Other 88 | 89 | @font-family: 'Lucida Grande', 'Segoe UI', sans-serif; 90 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | @import "octicon-mixins"; 4 | 5 | .list-group, .list-tree { 6 | li:not(.list-nested-item), 7 | li.list-nested-item > .list-item { 8 | .text(normal); 9 | } 10 | 11 | .generate-list-item-text-color(@class) { 12 | li:not(.list-nested-item).text-@{class}, 13 | li.list-nested-item.text-@{class} > .list-item { 14 | .text(@class); 15 | } 16 | } 17 | .generate-list-item-text-color(subtle); 18 | .generate-list-item-text-color(info); 19 | .generate-list-item-text-color(success); 20 | .generate-list-item-text-color(warning); 21 | .generate-list-item-text-color(error); 22 | .generate-list-item-text-color(selected); 23 | 24 | .generate-list-item-status-color(@color, @status) { 25 | li:not(.list-nested-item).status-@{status}, 26 | li.list-nested-item.status-@{status} > .list-item { 27 | color: @color; 28 | } 29 | } 30 | 31 | .generate-list-item-status-color(@text-color-subtle, ignored); 32 | .generate-list-item-status-color(@text-color-added, added); 33 | .generate-list-item-status-color(@text-color-renamed, renamed); 34 | .generate-list-item-status-color(@text-color-modified, modified); 35 | .generate-list-item-status-color(@text-color-removed, removed); 36 | 37 | li:not(.list-nested-item).selected, 38 | li.list-nested-item.selected > .list-item { 39 | .text(selected); 40 | } 41 | } 42 | 43 | .select-list ol.list-group, 44 | &.select-list ol.list-group { 45 | li.two-lines { 46 | .secondary-line { color: @text-color-subtle; } 47 | &.selected .secondary-line { 48 | color: @text-color; 49 | text-shadow: none; 50 | } 51 | } 52 | 53 | // We want to highlight the background of the list items because we dont 54 | // know their size. 55 | li.selected { 56 | background-color: @background-color-selected; 57 | &:before{ display: none; } 58 | } 59 | 60 | &.mark-active{ 61 | @active-icon-size: 14px; 62 | 63 | // pad in front of the text where the icon would be We'll pad the non- 64 | // active items with a 'fake' icon so other classes can pad the item 65 | // without worrying about the icon padding. 66 | li:before { 67 | content: ''; 68 | background-color: transparent; 69 | position: static; 70 | display: inline-block; 71 | left: auto; right: auto; 72 | height: @active-icon-size; 73 | width: @active-icon-size; 74 | } 75 | > li:not(.active):before { 76 | margin-right: @component-icon-padding; 77 | } 78 | li.active { 79 | .octicon(check, @active-icon-size); 80 | &:before { 81 | margin-right: @component-icon-padding; 82 | color: @text-color-success; 83 | } 84 | } 85 | } 86 | } 87 | 88 | .select-list.popover-list { 89 | background-color: @overlay-background-color; 90 | padding: @component-padding/2; 91 | border-radius: @component-border-radius; 92 | border: 1px solid @overlay-border-color; 93 | 94 | atom-text-editor { 95 | margin-bottom: @component-padding/2; 96 | } 97 | 98 | .list-group li { 99 | padding-left: @component-padding/2; 100 | } 101 | } 102 | 103 | .ui-sortable { 104 | li { 105 | line-height: 2.5; 106 | } 107 | 108 | // For sortable lists in the settings view 109 | li.ui-sortable-placeholder { 110 | visibility: visible !important; 111 | background-color: darken(@pane-item-background-color, 10%); 112 | } 113 | } 114 | 115 | li.ui-draggable-dragging, li.ui-sortable-helper { 116 | line-height: @component-line-height; 117 | height: @component-line-height; 118 | border: 0; 119 | border-radius: 0; 120 | list-style: none; 121 | padding: 0 @component-padding; 122 | background: @background-color-highlight;; 123 | } 124 | --------------------------------------------------------------------------------