├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── index.less ├── package.json └── styles ├── atom.less ├── buttons.less ├── editor.less ├── inputs.less ├── lists.less ├── messages.less ├── notifications.less ├── overlays.less ├── packages.less ├── panels.less ├── progress.less ├── settings-view.less ├── sites.less ├── tabs.less ├── text.less ├── tooltips.less ├── tree-view.less ├── ui-custom-variables.less ├── ui-mixins.less └── ui-variables.less /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.10.0 2 | ### The Almost-There-Release 3 | Ever since I started this project, before the launch of atom 1.0.0, this theme has gone through some tweaking over time. Sometimes this created bugs in other packages. Because of limited time, most of the time I fixed it with a quick hack. Threw in some `!important` left and right. However these hacks where catching up to me, I felt like every time I fixed something I created another bug somewhere else. So I decided to start from scratch again. Behind the scenes I've been working inside a new repo and I feel I cleaned up a lot of code that was unnecessary and I think I am almost there, I can finally release the 1.0.0 version of this theme. Just not yet, I want to push this minor patch first to see everything works out as well for you as it does for me. 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #### Not under development 2 | I made the switch to VSCode, this theme is no longer under development. I'll leave this up for anyone to fork. 3 | 4 | # Nucleus Dark UI 5 | 6 | Nucleus is an adaptable UI theme for Atom with your favorite syntax coloring at its core! This gives the UI a coherent feel, with whatever syntax theme you like to use. I used [Behave](https://atom.io/themes/behave-theme) in the screenshot below. 7 | 8 | ![Screenshot](http://i.imgur.com/j7Vrom5.png) 9 | 10 | #### Installation 11 | Inside atom go to settings, select Install and search for Nucleus. 12 | 13 | Or install directly from the console: 14 | 15 | `apm install nucleus-dark-ui` 16 | 17 | #### Requirements 18 | Every color used in the UI is taken directly from a (dark) syntax theme. In order for this to work, the syntax theme needs to have a `syntax-variables.less`. A light version of this theme is still being worked on. 19 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | @import (reference) "styles/ui-variables"; 2 | @import (reference) "styles/ui-mixins"; 3 | @import (reference) "octicon-mixins"; 4 | 5 | @import "styles/atom"; 6 | @import "styles/buttons"; 7 | @import "styles/editor"; 8 | @import "styles/inputs"; 9 | @import "styles/lists"; 10 | @import "styles/messages"; 11 | @import "styles/notifications"; 12 | @import "styles/overlays"; 13 | @import "styles/packages"; 14 | @import "styles/panels"; 15 | @import "styles/progress"; 16 | @import "styles/settings-view"; 17 | @import "styles/sites"; 18 | @import "styles/tabs"; 19 | @import "styles/text"; 20 | @import "styles/tooltips"; 21 | @import "styles/tree-view"; 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nucleus-dark-ui", 3 | "theme": "ui", 4 | "version": "0.12.3", 5 | "description": "An adaptable UI with your favorite syntax theme at its core!", 6 | "keywords": [ 7 | "dark", 8 | "adaptive", 9 | "ui" 10 | ], 11 | "repository": "https://github.com/ignism/nucleus-dark-ui", 12 | "license": "MIT", 13 | "engines": { 14 | "atom": ">=1.13.0 <2.0.0" 15 | }, 16 | "dependencies": {} 17 | } 18 | -------------------------------------------------------------------------------- /styles/atom.less: -------------------------------------------------------------------------------- 1 | :root { 2 | font-size: @font-size; 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | -webkit-font-smoothing: antialiased; // EDIT 8 | } 9 | 10 | atom-workspace { 11 | background-color: @app-background-color; 12 | } 13 | 14 | status-bar { 15 | .text(highlight); 16 | background: @base-border-color; 17 | height: 2.25rem; 18 | line-height: @component-line-height; 19 | font-size: 0.8rem; 20 | z-index: +1000; 21 | 22 | span { 23 | font-size: 0.8rem; 24 | } 25 | } 26 | 27 | .title-bar { 28 | background: @app-background-color; 29 | border-color: transparent; 30 | } 31 | // Keyboard Shortcuts ---------------------------------------------------------- 32 | 33 | .keystroke, 34 | kbd { 35 | .text(invert); 36 | font-size: @font-size; 37 | font-family: @font-family; 38 | line-height: @component-line-height; 39 | background: @background-color-info; 40 | padding: 2px 4px; 41 | border: 0; 42 | border-radius: 2px; 43 | } 44 | // Close icons ----------------------------------------------------------------- 45 | 46 | .close-icon::before, 47 | .icon-x::before, 48 | .icon.x::before { 49 | content: '✕' !important; 50 | } 51 | // Scrollbars ------------------------------------------------------------------ 52 | 53 | .scrollbars-visible-always { 54 | /deep/::-webkit-scrollbar { 55 | width: 10px; 56 | height: 10px; 57 | } 58 | 59 | /deep/::-webkit-scrollbar-track { 60 | background: @scrollbar-background-color; 61 | } 62 | 63 | /deep/::-webkit-scrollbar-corner { 64 | background: @scrollbar-background-color; 65 | } 66 | 67 | /deep/::-webkit-scrollbar-thumb { 68 | border-radius: 5px; 69 | border: 3px solid @scrollbar-background-color; 70 | background: @scrollbar-color; 71 | background-clip: content-box; 72 | 73 | &:active, 74 | &:hover { 75 | border-width: 1px; 76 | } 77 | } 78 | 79 | 80 | atom-panel-container.bottom, 81 | atom-text-editor { 82 | /deep/::-webkit-scrollbar-track { 83 | background: @base-background-color; 84 | } 85 | 86 | /deep/::-webkit-scrollbar-corner { 87 | background: @base-background-color; 88 | } 89 | 90 | /deep/::-webkit-scrollbar-thumb { 91 | border-color: @base-background-color; 92 | background: @scrollbar-color; 93 | } 94 | } 95 | } 96 | 97 | // docks 98 | atom-dock { 99 | .atom-dock-toggle-button { 100 | .atom-dock-toggle-button-inner { 101 | border: 0; 102 | 103 | &.left, 104 | &.right { 105 | .icon { 106 | margin-top: 1px; 107 | } 108 | } 109 | } 110 | } 111 | } 112 | 113 | // github 114 | .github { 115 | &-DialogInputs, 116 | &-DialogButtons, 117 | &-DialogLabel { 118 | padding: 0; 119 | margin: 0; 120 | } 121 | 122 | &-Panel:not(.is-empty):not(.no-repository) { 123 | background: @tool-panel-background-color; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | @btn-padding: 0 @ui-size/1.25; 2 | @btn-height: @ui-size*2.5; 3 | 4 | // Mixins ---------------------------------------------------------------------- 5 | .button(@color) { 6 | .transition(); 7 | // .text(uppercase); TODO: Make an Settings screen for this. 8 | // font-size: 0.85rem; 9 | color: @color; 10 | text-shadow: none; 11 | border: 1px solid @color; 12 | background: transparent; 13 | 14 | &:focus, 15 | &:active:focus { 16 | outline: none; 17 | } 18 | 19 | &:focus, 20 | &:hover, 21 | &.selected { 22 | border-color: @color; 23 | color: @base-background-color; 24 | background: @color; 25 | } 26 | 27 | &:active { 28 | background: @color; 29 | box-shadow: none; 30 | } 31 | 32 | &.selected:focus, 33 | &.selected:hover { 34 | background: @color; 35 | } 36 | 37 | &[disabled], 38 | &.disabled { 39 | opacity: 1; 40 | background-color: transparent !important; 41 | border-color: transparent !important; 42 | color: @text-color-subtle; 43 | } 44 | 45 | &:first-child { 46 | border: 1px solid @color; 47 | border-top-left-radius: @component-border-radius; 48 | border-bottom-left-radius: @component-border-radius; 49 | } 50 | 51 | &.selected:last-child, 52 | &:last-child { 53 | border: 1px solid @color; 54 | border-top-right-radius: @component-border-radius; 55 | border-bottom-right-radius: @component-border-radius; 56 | } 57 | } 58 | // Buttons --------------------------------------------------------------------- 59 | .btn { 60 | height: @btn-height; 61 | line-height: @btn-height; 62 | padding: @btn-padding; 63 | font-size: @ui-size; 64 | } 65 | 66 | .btn.btn-xs { 67 | font-size: @ui-size/1.5; 68 | } 69 | .btn.btn-sm { 70 | font-size: @ui-size/1.25; 71 | } 72 | .btn.btn-lg { 73 | font-size: @ui-size*1.25; 74 | } 75 | 76 | .btn-group > .btn, 77 | .btn, 78 | .btn.btn-default { 79 | .button(@text-color); 80 | } 81 | .btn.btn-primary { 82 | .button(@text-color-info); 83 | } 84 | .btn.btn-info { 85 | .button(@text-color-info); 86 | } 87 | .btn.btn-success { 88 | .button(@text-color-success); 89 | } 90 | .btn.btn-warning { 91 | .button(@text-color-warning); 92 | } 93 | .btn.btn-error { 94 | .button(@text-color-error); 95 | } 96 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | atom-text-editor { 2 | .wrap-guide { 3 | background: @base-border-color; 4 | } 5 | 6 | .indent-guide { 7 | color: @base-border-color; 8 | box-shadow: inset 1px 0 @base-border-color; 9 | } 10 | 11 | .bracket-matcher .region { 12 | border: 1px solid @text-color-info; 13 | border-radius: 2px; 14 | box-sizing: border-box; 15 | background-color: fade(@background-color-info, 32%); 16 | } 17 | 18 | .invisible-character { 19 | color: @base-border-color; 20 | } 21 | 22 | .invisible { 23 | color: @base-border-color; 24 | } 25 | 26 | .line.cursor-line { 27 | background-color: fade(@background-color-selected, 32%); 28 | } 29 | 30 | .selection .region { 31 | background-color: @background-color-selected; 32 | } 33 | 34 | .line-number { 35 | .text(light); 36 | color: @text-color-subtle; 37 | 38 | &.cursor-line { 39 | .text(bold); 40 | color: @text-color-selected; 41 | background-color: transparent; 42 | } 43 | 44 | &.cursor-line-no-selection { 45 | background-color: transparent; 46 | color: @text-color-highlight; 47 | font-weight: 600; 48 | } 49 | 50 | &.git-line-added { 51 | color: mix(@syntax-background-color, @text-color-added, 48%); 52 | border-left-color: mix(@syntax-background-color, @text-color-added, 48%); 53 | 54 | &.cursor-line, 55 | &.cursor-line-no-selection { 56 | color: @text-color-added; 57 | border-left-color: @text-color-added; 58 | } 59 | } 60 | 61 | &.git-line-modified { 62 | color: mix(@syntax-background-color, @text-color-modified, 48%); 63 | border-left-color: mix(@syntax-background-color, @text-color-modified, 48%); 64 | 65 | &.cursor-line, 66 | &.cursor-line-no-selection { 67 | color: @text-color-modified; 68 | border-left-color: @text-color-modified; 69 | } 70 | } 71 | 72 | &.git-line-removed { 73 | color: mix(@syntax-background-color, @text-color-removed, 48%); 74 | border-left-color: mix(@syntax-background-color, @text-color-removed, 48%); 75 | 76 | &.cursor-line, 77 | &.cursor-line-no-selection { 78 | color: @text-color-removed; 79 | border-left-color: @text-color-removed; 80 | } 81 | } 82 | } 83 | 84 | .gutter { 85 | background-color: @base-background-color; 86 | -webkit-font-smoothing: antialiased; 87 | 88 | .line-number.folded, 89 | .line-number.folded .icon-right, 90 | .line-number:after { 91 | color: mix(@syntax-background-color, @text-color-info, 48%); 92 | border-left-color: mix(@syntax-background-color, @text-color-info, 48%); 93 | } 94 | 95 | .line-number.folded.cursor-line, 96 | .line-number.folded.cursor-line-no-selection { 97 | color: @text-color-info; 98 | border-left-color: @text-color-info; 99 | 100 | .icon-right { 101 | color: @text-color-info; 102 | border-left-color: @text-color-info; 103 | } 104 | } 105 | } 106 | 107 | .fold-marker:after { 108 | color: @text-color-info; 109 | background: transparent; 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /styles/inputs.less: -------------------------------------------------------------------------------- 1 | @input-padding: 0 @ui-size/1.25; 2 | @input-height: @ui-size*2.5; 3 | 4 | .input-radio, 5 | .input-checkbox, 6 | .input-toggle, 7 | .input-range { 8 | .transition(background); 9 | background: @base-border-color; 10 | &:checked { 11 | background: @background-color-info; 12 | } 13 | &:hover { 14 | background: @input-background-color; 15 | } 16 | } 17 | 18 | .input-text, 19 | .input-search, 20 | .input-textarea { 21 | .transition(background); 22 | border: 0; 23 | background: @base-border-color; 24 | 25 | .cursor { 26 | border-color: @ui-text-color-accent; 27 | border-width: 1px; 28 | } 29 | 30 | &:hover, 31 | &:active, 32 | &:focus { 33 | background: @input-background-color; 34 | color: @text-color-highlight; 35 | } 36 | } 37 | 38 | atom-text-editor.mini { 39 | .transition(); 40 | background: @base-border-color; 41 | border-radius: @component-border-radius; 42 | height: auto; 43 | line-height: @input-height; 44 | padding: @input-padding; 45 | font-size: @ui-size; 46 | font-family: @font-family; 47 | 48 | .cursor { 49 | border-color: @text-color-highlight; 50 | border-width: 2px; 51 | } 52 | 53 | .line, 54 | .regexp { 55 | .text(normal); 56 | } 57 | } 58 | 59 | atom-text-editor.mini.is-focused, 60 | atom-text-editor.mini:hover { 61 | background: @input-background-color; 62 | .line, 63 | .regexp { 64 | .text(highlight); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | // Mixins ---------------------------------------------------------------------- 2 | 3 | .generate-list-item-text-color(@class) { 4 | li:not(.list-nested-item).text-@{class}, 5 | li.list-nested-item.text-@{class} > .list-item { 6 | .text(@class); 7 | } 8 | } 9 | 10 | .generate-list-item-status-color(@color, @status) { 11 | li:not(.list-nested-item).status-@{status}, 12 | li.list-nested-item.status-@{status} > .list-item { 13 | color: @color; 14 | } 15 | 16 | li:not(.list-nested-item).selected.status-@{status}, 17 | li.list-nested-item.selected.status-@{status} > .list-item { 18 | color: @color; 19 | } 20 | } 21 | 22 | // Lists ----------------------------------------------------------------------- 23 | 24 | .list-group, 25 | .list-tree { 26 | li:not(.list-nested-item), 27 | li.list-nested-item > .list-item { 28 | line-height: 2.25rem; 29 | .text(normal); 30 | .transition(color); 31 | } 32 | 33 | .generate-list-item-text-color(subtle); 34 | .generate-list-item-text-color(info); 35 | .generate-list-item-text-color(success); 36 | .generate-list-item-text-color(warning); 37 | .generate-list-item-text-color(error); 38 | .generate-list-item-text-color(selected); 39 | 40 | .generate-list-item-status-color(@text-color-added, added); 41 | .generate-list-item-status-color(@text-color-ignored, ignored); 42 | .generate-list-item-status-color(@text-color-modified, modified); 43 | .generate-list-item-status-color(@text-color-removed, removed); 44 | .generate-list-item-status-color(@text-color-renamed, renamed); 45 | 46 | li:not(.list-nested-item).selected, 47 | li.list-nested-item.selected > .list-item { 48 | .text(selected); 49 | } 50 | li:hover { 51 | .text(highlight); 52 | } 53 | 54 | li.selected::before { 55 | height: 2.25rem; 56 | background: @background-color-selected; 57 | } 58 | } 59 | 60 | .select-list ol.list-group, 61 | &.select-list ol.list-group { 62 | margin: 0 !important; // TODO: remove !important 63 | 64 | li.two-lines { 65 | .secondary-line { 66 | .text(invert); 67 | } 68 | &.selected .secondary-line { 69 | .text(highlight); 70 | } 71 | } 72 | 73 | // We want to highlight the background of the list items because we dont 74 | // know their size. 75 | li.selected { 76 | background-color: @background-color-selected; 77 | 78 | &:before { 79 | display: none; 80 | } 81 | } 82 | 83 | &.mark-active { 84 | @active-icon-size: 14px; 85 | 86 | // pad in front of the text where the icon would be We'll pad the non- 87 | // active items with a 'fake' icon so other classes can pad the item 88 | // without worrying about the icon padding. 89 | li:before { 90 | content: ''; 91 | background-color: transparent; 92 | position: static; 93 | display: inline-block; 94 | left: auto; right: auto; 95 | height: @active-icon-size; 96 | width: @active-icon-size; 97 | } 98 | > li:not(.active):before { 99 | margin-right: @component-icon-padding; 100 | } 101 | li.active { 102 | .octicon(check, @active-icon-size); 103 | &:before { 104 | margin-right: @component-icon-padding; 105 | color: @text-color-success; 106 | } 107 | } 108 | } 109 | } 110 | 111 | .select-list.popover-list, 112 | .autocomplete-suggestion-list.select-list.popover-list { 113 | .shadow(); 114 | .character-match { 115 | } 116 | 117 | .suggestion-description { 118 | background: @overlay-border-color; 119 | 120 | span, 121 | a { 122 | font-size: 0.8rem; 123 | } 124 | } 125 | 126 | 127 | 128 | background-color: @overlay-background-color; 129 | border-radius: @component-border-radius; 130 | border: 0; 131 | 132 | atom-text-editor { 133 | margin-bottom: @component-padding/2; 134 | } 135 | 136 | .list-group li { 137 | padding-left: @component-padding/2; 138 | .transition(color); 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /styles/messages.less: -------------------------------------------------------------------------------- 1 | background-tips .background-message .message .keystroke { 2 | .text(invert); 3 | font-size: 1em; 4 | font-family: @font-family; 5 | line-height: @component-line-height; 6 | background: @background-color-info; 7 | padding: 2px 4px; 8 | border: 0; 9 | border-radius: 4px; 10 | } 11 | 12 | .background-message { 13 | & > * { 14 | .text(heading); 15 | .text(subtle); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /styles/notifications.less: -------------------------------------------------------------------------------- 1 | atom-notifications { 2 | atom-notification { 3 | font-size: @font-size; 4 | &.has-close.message { 5 | padding-right: 24px; 6 | } 7 | .item { 8 | border-top: 0; 9 | padding: 0; 10 | margin: 12px; 11 | } 12 | 13 | .content { 14 | overflow: hidden; 15 | } 16 | 17 | .description { 18 | font-size: 1rem; 19 | } 20 | 21 | .close { 22 | .transition(); 23 | opacity: 1; 24 | width: @component-icon-size; 25 | height: @component-icon-size; 26 | line-height: @component-icon-size; 27 | top: 12px; 28 | right: 8px; 29 | position: absolute; 30 | border-radius: 2px; 31 | 32 | &:before { 33 | font-size: 12px; 34 | position: absolute; 35 | top: 2px; 36 | left: 2px; 37 | width: 12px; 38 | height: 12px; 39 | } 40 | 41 | &:hover { 42 | background-color: @dark; 43 | } 44 | } 45 | @color-info-level-1: @ui-blue; 46 | @color-success-level-1: @ui-green; 47 | @color-warning-level-1: @ui-orange; 48 | @color-error-level-1: @ui-red; 49 | @color-fatal-level-1: @ui-red; 50 | .generate-notification-type(info); 51 | .generate-notification-type(success); 52 | .generate-notification-type(warning); 53 | .generate-notification-type(error); 54 | .generate-notification-type(fatal); 55 | } 56 | } 57 | 58 | .generate-notification-type(@class) { 59 | @color: "color-@{class}-level-1"; 60 | @bright: @@color; 61 | @dark: mix(@ui-background-level-2, @@color, 88%); 62 | 63 | &.@{class} { 64 | .close-all.btn { 65 | font-size: 0.8rem; 66 | top: 3px; 67 | right: 24px; 68 | border: 0; 69 | } 70 | 71 | .close, 72 | .close-all.btn, 73 | a { 74 | color: @bright; 75 | 76 | &:hover { 77 | color: @text-color-highlight; 78 | } 79 | } 80 | 81 | .close:hover { 82 | background-color: @bright; 83 | } 84 | 85 | &.icon:before { 86 | color: @dark; 87 | background-color: @bright; 88 | } 89 | 90 | .detail { 91 | color: @bright; 92 | background: @dark; 93 | } 94 | 95 | .content { 96 | color: @bright; 97 | background-color: @dark; 98 | } 99 | 100 | code { 101 | color: @dark; 102 | background-color: @bright; 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /styles/overlays.less: -------------------------------------------------------------------------------- 1 | atom-overlay, 2 | atom-panel.modal { 3 | // .shadow(); 4 | z-index: 9999; 5 | border-radius: @component-border-radius; 6 | } 7 | 8 | atom-panel.modal { 9 | &:after { 10 | // content: ""; 11 | // position: fixed; 12 | // top: 0; 13 | // left: 0; 14 | // right: 0; 15 | // bottom: 0; 16 | // z-index: -1; 17 | // background: @app-background-color; 18 | // opacity: 0.8; 19 | // backface-visibility: hidden; 20 | } 21 | 22 | &:before { 23 | .shadow(); 24 | content: ""; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | right: 0; 29 | bottom: 0; 30 | z-index: 0; 31 | background-color: @overlay-background-color; 32 | border-radius: @component-border-radius; 33 | } 34 | } 35 | 36 | 37 | .overlay, 38 | atom-panel.modal { 39 | background-color: @overlay-background-color; 40 | border-radius: @component-border-radius; 41 | border: 0; 42 | padding: @component-padding 0; 43 | width: 680px; 44 | margin-left: -340px; 45 | 46 | @media (max-width: 768px) { 47 | width: 88%; 48 | left: 50%; 49 | margin-left: -44%; 50 | } 51 | 52 | &.from-top { 53 | top: 20%; 54 | border-top-right-radius: @component-border-radius; 55 | border-top-left-radius: @component-border-radius; 56 | 57 | & > * { 58 | padding: 0; 59 | } 60 | } 61 | 62 | & > * > *:not(.list-group) { 63 | margin: 0 @component-padding*2; 64 | } 65 | 66 | .list-group:not(:first-child):not(:empty), 67 | .list-tree:not(:first-child):not(:empty) { 68 | border-top: 1px solid @overlay-border-color; 69 | } 70 | 71 | .list-group, 72 | .list-tree { 73 | li.list-nested-item > .list-item, 74 | li:not(.list-nested-item) { 75 | padding: 0.5em @component-padding*2; 76 | 77 | .character-match { 78 | .transition(color); 79 | font-weight: normal; 80 | } 81 | } 82 | 83 | li.selected { 84 | .text(selected); 85 | background: @background-color-selected; 86 | 87 | .character-match { 88 | .text(selected); 89 | } 90 | } 91 | 92 | li:not(.selected) { 93 | .character-match { 94 | .text(normal); 95 | } 96 | 97 | .secondary-line .character-match { 98 | .text(invert); 99 | } 100 | 101 | &:hover { 102 | .text(highlight); 103 | background: transparent; 104 | 105 | .character-match { 106 | .text(highlight); 107 | } 108 | } 109 | } 110 | } 111 | 112 | atom-text-editor.mini { 113 | max-height: none; 114 | background-color: transparent; 115 | border: 0; 116 | border-radius: 0; 117 | padding: 0; 118 | 119 | .line { 120 | font-size: @ui-size * 2; 121 | height: 1.3em; 122 | line-height: 1.3em; 123 | } 124 | } 125 | 126 | /deep/::-webkit-scrollbar-track { 127 | background: @overlay-background-color; 128 | border-bottom-right-radius: 8px; 129 | } 130 | 131 | /deep/::-webkit-scrollbar-corner { 132 | background: @overlay-background-color; 133 | } 134 | 135 | /deep/::-webkit-scrollbar-thumb { 136 | border-color: @overlay-background-color; 137 | background: @scrollbar-color; 138 | } 139 | } 140 | 141 | autocomplete-suggestion-list .icon { 142 | width: 2.25rem; 143 | height: 2.25rem; 144 | } 145 | 146 | .autocomplete-suggestion-list.select-list.popover-list, 147 | .select-list.popover-list { 148 | .shadow(); 149 | .text(normal); 150 | background-color: @overlay-border-color; 151 | border-radius: @component-border-radius; 152 | border: 0; 153 | line-height: 2.25rem; 154 | 155 | .suggestion-list-scroller { 156 | border-radius: 4px; 157 | background-color: @overlay-background-color; 158 | } 159 | 160 | .suggestion-description { 161 | background: @overlay-border-color; 162 | } 163 | 164 | atom-text-editor { 165 | margin-bottom: @component-padding/2; 166 | } 167 | 168 | ol.list-group li { 169 | line-height: 2.25rem; 170 | padding-left: @component-padding/2; 171 | .transition(color); 172 | 173 | .character-match { 174 | .text(normal); 175 | } 176 | 177 | .left-label, 178 | .right-label { 179 | .text(bold); 180 | .text(invert); 181 | } 182 | 183 | .word .snippet-completion, 184 | .word .snippet-completion .character-match { 185 | .text(normal); 186 | .text(invert); 187 | } 188 | 189 | &.selected { 190 | .word { 191 | .text(highlight); 192 | 193 | .snippet-completion, 194 | .snippet-completion .character-match { 195 | .text(normal); 196 | } 197 | } 198 | } 199 | } 200 | 201 | /deep/::-webkit-scrollbar { 202 | display: none; 203 | } 204 | } 205 | -------------------------------------------------------------------------------- /styles/packages.less: -------------------------------------------------------------------------------- 1 | //Git control ------------------------------------------------------------------ 2 | @input-padding: 0 @ui-size/1.25; 3 | @input-height: @ui-size*2.5; 4 | 5 | .git-control .dialog { 6 | .shadow(); 7 | background: @overlay-background-color; 8 | border: 0; 9 | border-radius: @component-border-radius; 10 | padding: @component-padding; 11 | opacity: 1; 12 | 13 | .heading strong { 14 | .text(normal); 15 | .text(bold); 16 | } 17 | 18 | button { 19 | .transition(color); 20 | .icon::before { 21 | .transition(color); 22 | } 23 | &:hover { 24 | color: @text-color-highlight; 25 | .icon::before { 26 | color: @text-color-highlight; 27 | } 28 | } 29 | } 30 | 31 | input { 32 | height: @input-height; 33 | padding: @input-padding; 34 | } 35 | 36 | input, 37 | textarea { 38 | .transition(background); 39 | .text(normal); 40 | border: 0; 41 | background: @base-border-color; 42 | padding: @ui-size/1.25; 43 | 44 | .cursor { 45 | border-color: @ui-text-color-accent; 46 | border-width: 1px; 47 | } 48 | 49 | &:hover, 50 | &:active, 51 | &:focus { 52 | .text(highlight); 53 | background: @input-background-color; 54 | } 55 | } 56 | 57 | select { 58 | .transition(background); 59 | .text(normal); 60 | height: @input-height; 61 | border: 1px solid @input-background-color; 62 | background: transparent; 63 | -webkit-appearance: menulist-button; 64 | 65 | &:hover, 66 | &:active, 67 | &:focus { 68 | .text(invert); 69 | background: @input-background-color; 70 | } 71 | } 72 | } 73 | 74 | 75 | // Tool-bar -------------------------------------------------------------------- 76 | .tool-bar { 77 | background-color: @tool-panel-background-color; 78 | border: 0; 79 | 80 | &.tool-bar-horizontal .tool-bar-spacer { 81 | border-left: 1px solid @base-border-color; 82 | border-right: 0; 83 | margin-left: 0.5em; 84 | margin-right: 0.5em; 85 | -webkit-mask-image: none; 86 | } 87 | 88 | &.tool-bar-vertical .tool-bar-spacer { 89 | border-top: 1px solid @base-border-color; 90 | border-bottom: 0; 91 | margin-top: 0.5em; 92 | margin-bottom: 0.5em; 93 | -webkit-mask-image: none; 94 | } 95 | 96 | button.tool-bar-btn, 97 | button.tool-bar-btn:first-child, 98 | button.tool-bar-btn:last-child { 99 | background: transparent; 100 | border: 0; 101 | 102 | &:hover { 103 | color: @text-color-highlight; 104 | background: transparent; 105 | } 106 | } 107 | } 108 | // tree-view-open-files -------------------------------------------------------- 109 | 110 | .tree-view-open-files { 111 | border-bottom: 0; 112 | 113 | & > .list-tree:not(:first-child) { 114 | padding-top: @component-padding; 115 | } 116 | 117 | & > .list-tree > .list-nested-item > .list-item, 118 | & > .list-tree > .list-nested-item.collapsed > .list-item { 119 | .text(subtle); 120 | height: @tab-height !important; 121 | line-height: @tab-height !important; 122 | 123 | &::before { 124 | .transition(opacity); 125 | opacity: 0; 126 | } 127 | 128 | &:hover::before { 129 | opacity: 1; 130 | } 131 | 132 | & > .name::before { 133 | display: none; 134 | } 135 | } 136 | 137 | .list-tree { 138 | .list-nested-item { 139 | padding-bottom: @component-padding; 140 | } 141 | 142 | .file { 143 | .close-open-file { 144 | padding: 0 6px; 145 | 146 | &::before { 147 | .transition(opacity); 148 | content: '✕'; 149 | opacity: 0; 150 | } 151 | } 152 | 153 | &:hover .close-open-file::before { 154 | color: @text-color-highlight; 155 | opacity: 1; 156 | } 157 | 158 | &.modified, 159 | &.selected.modified { 160 | .close-open-file { 161 | &::before { 162 | opacity: 1; 163 | content: ''; 164 | border-width: 1px; 165 | border-color: @text-color-modified; 166 | } 167 | 168 | &:hover::before { 169 | content: '✕'; 170 | } 171 | } 172 | 173 | &:hover .close-open-file { 174 | &::before { 175 | color: @text-color-modified; 176 | content: '✕'; 177 | border: 0; 178 | width: 12px; 179 | height: 12px; 180 | margin: 0; 181 | } 182 | 183 | &:hover::before { 184 | color: @text-color-highlight; 185 | } 186 | } 187 | } 188 | } 189 | } 190 | } 191 | // Linter ---------------------------------------------------------------------- 192 | .linter-status-count span { 193 | border-radius: 0; 194 | } 195 | 196 | .linter-status-count span:first-child { 197 | border-top-left-radius: @component-border-radius; 198 | border-bottom-left-radius: @component-border-radius; 199 | } 200 | 201 | .linter-status-count span:last-child { 202 | border-top-right-radius: @component-border-radius; 203 | border-bottom-right-radius: @component-border-radius; 204 | } 205 | 206 | .sb-table.linter { 207 | border: 0; 208 | thead, tbody, tr, td, th { 209 | border: 0; 210 | } 211 | tbody { 212 | background: @base-background-color; 213 | } 214 | } 215 | 216 | #linter-tooltip { 217 | linter-message, 218 | linter-message.info, 219 | linter-message.warning, 220 | linter-message.error { 221 | font-family: @font-family; 222 | color: @base-background-color; 223 | 224 | a { 225 | color: @base-background-color; 226 | } 227 | .badge { 228 | color: @text-color-highlight; 229 | background-color: rgba(0, 0, 0, 0.4); 230 | } 231 | } 232 | } 233 | 234 | linter-message:first-child { 235 | border-top-left-radius: @component-border-radius; 236 | border-top-right-radius: @component-border-radius; 237 | } 238 | linter-message:last-child { 239 | border-bottom-left-radius: @component-border-radius; 240 | border-bottom-right-radius: @component-border-radius; 241 | } 242 | 243 | 244 | // Deprecation Cop ------------------------------------------------------------- 245 | .deprecation-cop, 246 | .deprecation-cop .panel { 247 | background-color: @base-background-color !important; 248 | } 249 | // Find And Replace ------------------------------------------------------------ 250 | .find-and-replace, 251 | .project-find { 252 | .btn-group-find .btn { 253 | .button(@text-color-info); 254 | } 255 | 256 | .btn-group-replace .btn, 257 | .btn-group-replace-all .btn { 258 | .button(@text-color-warning); 259 | } 260 | 261 | .description .subtle-info-message .highlight { 262 | color: @base-background-color; 263 | } 264 | } 265 | 266 | // Terminal Plus --------------------------------------------------------------- 267 | 268 | .terminal-plus.terminal-view .btn-toolbar .btn { 269 | border: 0; 270 | &:hover { 271 | color: @text-color-highlight; 272 | background: transparent; 273 | } 274 | } 275 | 276 | // LaTeX tools ----------------------------------------------------------------- 277 | .modal.overlay.from-top > .overlay.from-top { 278 | position: relative; 279 | } 280 | 281 | // Atom Build ------------------------------------------------------------------ 282 | .build-confirm { 283 | padding: @component-padding * 2; 284 | 285 | h3 { 286 | margin-top: 0; 287 | margin-bottom: @component-padding * 2; 288 | } 289 | } 290 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | atom-panel-container { 2 | &.bottom { 3 | z-index: +1000; 4 | } 5 | } 6 | 7 | atom-panel { 8 | &.bottom { 9 | border-top: 1px solid @tool-panel-border-color; 10 | background: @base-background-color; 11 | } 12 | } 13 | 14 | atom-pane-container { 15 | background: linear-gradient(@app-background-color, @base-background-color); 16 | } 17 | 18 | atom-pane-container atom-pane-axis.horizontal > *:last-child { 19 | border-right: none; 20 | } 21 | 22 | atom-pane-container atom-pane-axis.horizontal > * { 23 | border-right: 1px solid @base-border-color; 24 | } 25 | 26 | atom-pane-container atom-pane-axis.vertical > atom-pane-resize-handle.vertical { 27 | border-top: 1px solid @base-border-color; 28 | margin-top: 0; 29 | } 30 | 31 | .inset-panel { 32 | .panel-heading { 33 | .text(heading); 34 | } 35 | } 36 | 37 | .tool-panel { 38 | .panel-body, 39 | .panel-heading { 40 | background: transparent; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /styles/progress.less: -------------------------------------------------------------------------------- 1 | // Spinner --------------------------------------------------------------------- 2 | .loading-spinner(@size) { 3 | width: @size; 4 | height: @size; 5 | display: block; 6 | 7 | background-image: url(images/octocat-spinner-128.gif); 8 | background-repeat: no-repeat; 9 | background-size: cover; 10 | 11 | &.inline-block { 12 | display: inline-block; 13 | } 14 | } 15 | 16 | .loading-spinner-large { 17 | .loading-spinner(64px); 18 | } 19 | 20 | .loading-spinner-medium { 21 | .loading-spinner(48px); 22 | } 23 | 24 | .loading-spinner-small { 25 | .loading-spinner(32px); 26 | } 27 | 28 | .loading-spinner-tiny { 29 | .loading-spinner(20px); 30 | } 31 | 32 | // Progress Bar ---------------------------------------------------------------- 33 | progress { 34 | -webkit-appearance: none; 35 | height: 8px; 36 | border-radius: @component-border-radius; 37 | background-color: @base-border-color; 38 | 39 | &::-webkit-progress-bar { 40 | background-color: transparent; 41 | } 42 | 43 | &::-webkit-progress-value { 44 | border-radius: @component-border-radius; 45 | background-color: @background-color-info; 46 | } 47 | 48 | // Is buffering (when no value is set) 49 | &:indeterminate { 50 | background-image: 51 | linear-gradient(-45deg, transparent 33%, @background-color-info 33%, 52 | @background-color-info 66%, transparent 66%); 53 | background-size: 24px 8px, 100% 100%, 100% 100%; 54 | -webkit-animation: progress-buffering 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage 55 | } 56 | } 57 | 58 | @-webkit-keyframes progress-buffering { 59 | 100% { background-position: -100px 0px; } 60 | } 61 | -------------------------------------------------------------------------------- /styles/settings-view.less: -------------------------------------------------------------------------------- 1 | .settings-view { 2 | .text(normal); 3 | 4 | .config-menu { 5 | background: transparent; 6 | 7 | .panels-menu li a { 8 | .transition(); 9 | } 10 | 11 | .button-area { 12 | .btn { 13 | padding: 0; 14 | } 15 | } 16 | } 17 | 18 | input[type="checkbox"] { 19 | .transition(background); 20 | background: @base-border-color; 21 | 22 | &:checked { 23 | background: @background-color-info; 24 | } 25 | 26 | &:hover { 27 | background: @input-background-color; 28 | } 29 | } 30 | 31 | .settings-panel .control-group + .control-group { 32 | margin-top: 2em; 33 | } 34 | 35 | .breadcrumb { 36 | .text(subtle); 37 | } 38 | 39 | .alert-type(@color) { 40 | color: @color; 41 | border: 0; 42 | background-color: transparent; 43 | padding: 1em 0; 44 | 45 | .alert-link { 46 | color: inherit; 47 | text-decoration: underline; 48 | } 49 | } 50 | 51 | .alert-info { 52 | .alert-type(@text-color-info); 53 | } 54 | 55 | .alert-success { 56 | .alert-type(@text-color-success); 57 | } 58 | 59 | .alert-warning { 60 | .alert-type(@text-color-warning); 61 | } 62 | 63 | .alert-danger, 64 | .alert-error { 65 | .alert-type(@text-color-error); 66 | } 67 | 68 | .section .section-heading, 69 | .sub-section .sub-section-heading { 70 | .text(heading); 71 | } 72 | 73 | .setting-title { 74 | .text(normal); 75 | } 76 | 77 | .setting-description { 78 | .text(normal); 79 | .text(subtle); 80 | } 81 | 82 | .packages .themes-label { 83 | .text(normal); 84 | } 85 | 86 | .package-detail .package-card:hover { 87 | background: transparent; 88 | } 89 | 90 | .package-card { 91 | background: transparent; 92 | border: 0; 93 | border-radius: @component-border-radius; 94 | padding: @component-padding; 95 | margin-bottom: 3em; 96 | .transition(); 97 | 98 | &:hover { 99 | background-color: @background-color-highlight; 100 | } 101 | 102 | &.disabled { 103 | .card-name .package-name { 104 | color: @text-color-warning; 105 | } 106 | } 107 | 108 | .card-name { 109 | margin-bottom: 4px; 110 | 111 | .package-name { 112 | .text(normal); 113 | .text(highlight); 114 | } 115 | } 116 | 117 | .package-description { 118 | .text(normal); 119 | } 120 | 121 | .meta-user, 122 | .package-version, 123 | .stats-item { 124 | .text(normal); 125 | .text(subtle); 126 | } 127 | 128 | .stats-item { 129 | margin-right: 10px; 130 | } 131 | 132 | .meta { 133 | margin-top: 4px; 134 | 135 | .meta-controls { 136 | .btn { 137 | border: 0; 138 | border-radius: @component-border-radius !important; 139 | 140 | &:focus, 141 | &:hover { 142 | color: @text-color-highlight; 143 | background: transparent; 144 | } 145 | 146 | &.icon-playback-pause, &.install-button { 147 | color: @text-color-info; 148 | 149 | &:focus, 150 | &:hover { 151 | color: @base-background-color; 152 | background: @text-color-info; 153 | } 154 | } 155 | 156 | &.icon-playback-play { 157 | color: @text-color-warning; 158 | 159 | &:focus, 160 | &:hover { 161 | color: @base-background-color; 162 | background: @text-color-warning; 163 | } 164 | } 165 | } 166 | 167 | .status-indicator { 168 | display: none; 169 | } 170 | } 171 | } 172 | } 173 | 174 | .packages .theme-description { 175 | min-height: 3em; 176 | } 177 | 178 | select.form-control { 179 | .button(@text-color); 180 | } 181 | } 182 | -------------------------------------------------------------------------------- /styles/sites.less: -------------------------------------------------------------------------------- 1 | .ui-site(@num, @color) { 2 | .ui-site-@{num} { 3 | background-color: @color; 4 | } 5 | } 6 | 7 | .ui-site(1, @ui-site-color-1); 8 | .ui-site(2, @ui-site-color-2); 9 | .ui-site(3, @ui-site-color-3); 10 | .ui-site(4, @ui-site-color-4); 11 | .ui-site(5, @ui-site-color-5); 12 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | .tab-bar { 2 | background: @tab-bar-background-color; 3 | width: 100%; 4 | height: @tab-height; 5 | // -webkit-transform:scale(1); 6 | 7 | .tab { 8 | .transition(); 9 | .text(normal); 10 | .text(subtle); 11 | text-align: center; 12 | color: @text-color-subtle; 13 | background: @tab-background-color; 14 | width: 100%; 15 | max-width: 100%; 16 | height: @tab-height; 17 | line-height: @tab-height; 18 | box-sizing: border-box; 19 | border: 0; 20 | padding-left: 20px; 21 | padding-right: 20px; 22 | flex: 1; 23 | 24 | // .title { TODO: Make a settings screen for this 25 | // .text(uppercase); 26 | // font-size: 0.85rem; 27 | // } 28 | 29 | &:hover { 30 | .text(highlight); 31 | background: @background-color-highlight; 32 | 33 | .close-icon { 34 | opacity: 1; 35 | &:before { 36 | transform: scale(1); 37 | } 38 | } 39 | } 40 | 41 | &.active, 42 | &:hover.active { 43 | color: @text-color-selected; 44 | background: @tab-background-color-active; 45 | width: 100%; 46 | max-width: 100%; 47 | flex: 1; 48 | 49 | .title { 50 | .text(selected); 51 | padding: 0; 52 | } 53 | 54 | .status-modified { 55 | color: @text-color-modified; 56 | } 57 | 58 | .status-added { 59 | color: @text-color-added; 60 | } 61 | 62 | .status-ignored { 63 | color: @text-color-ignored; 64 | } 65 | } 66 | 67 | // Close Icon -------------------------------------------------------------- 68 | .close-icon { 69 | .transition(background); 70 | top: (@tab-height - @component-icon-size) / 2; 71 | width: @component-icon-size; 72 | height: @component-icon-size; 73 | line-height: @component-icon-size; 74 | left: auto; 75 | right: 4px; 76 | position: absolute; 77 | opacity: 0; 78 | border-radius: 2px; 79 | 80 | &::before { 81 | .transition(); 82 | transform: scale(0); 83 | color: @text-color-highlight; 84 | font-size: 12px; 85 | position: absolute; 86 | top: 2px; 87 | left: 2px; 88 | width: 12px; 89 | height: 12px; 90 | } 91 | 92 | &:hover { 93 | background: @tab-background-color; 94 | } 95 | } 96 | // Modified ---------------------------------------------------------------- 97 | &.modified:not(:hover) .close-icon { 98 | opacity: 1; 99 | top: (@tab-height - 6) / 2; 100 | right: 8px; 101 | display: inline-block; 102 | border-width: 1px; 103 | border-color: @text-color-modified; 104 | } 105 | 106 | &.modified { 107 | &:hover .close-icon::before { 108 | color: @text-color-modified; 109 | } 110 | } 111 | 112 | &.modified .close-icon:hover { 113 | background: @text-color-modified; 114 | 115 | &::before { 116 | .text(invert); 117 | } 118 | } 119 | } 120 | } 121 | 122 | atom-dock { 123 | .tab-bar { 124 | .tab { 125 | &.active, 126 | &:hover.active { 127 | color: @text-color-selected; 128 | background: @tab-background-color; 129 | 130 | &[data-type="TextEditor"], 131 | &[data-type="SettingsView"], 132 | &[data-type="AboutView"], 133 | &[data-type="StyleguideView"], 134 | &[data-type="TimecopView"], 135 | &[data-type="MarkdownPreviewView"]{ 136 | background: @tab-background-color-active; 137 | } 138 | } 139 | } 140 | } 141 | } 142 | 143 | // MacOS ----------------------------------------------------------------------- 144 | .platform-darwin { 145 | .tab-bar .tab { 146 | .close-icon { 147 | left: 4px; 148 | right: auto; 149 | } 150 | 151 | &.modified:not(:hover) .close-icon { 152 | left: 8px; 153 | right: auto; 154 | } 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /styles/text.less: -------------------------------------------------------------------------------- 1 | body { 2 | font-weight: 400; 3 | } 4 | 5 | h1, 6 | h2, 7 | h3, 8 | h4, 9 | h5, 10 | h6, 11 | .h1, 12 | .h2, 13 | .h3, 14 | .h4, 15 | .h5, 16 | .h6 { 17 | .text(heading); 18 | 19 | small { 20 | font-weight: 200; 21 | } 22 | } 23 | 24 | h1, 25 | .h1 { 26 | font-size: 1.6em; 27 | } 28 | h2, 29 | .h2 { 30 | font-size: 1.5em; 31 | } 32 | h3, 33 | .h3 { 34 | font-size: 1.4em; 35 | } 36 | h4, 37 | .h4 { 38 | font-size: 1.3em; 39 | } 40 | h5, 41 | .h5 { 42 | font-size: 1.2em; 43 | } 44 | h6, 45 | .h6 { 46 | font-size: 1.1em; 47 | } 48 | 49 | .text-subtle { 50 | .text(subtle); 51 | } 52 | 53 | .text-highlight { 54 | .text(highlight); 55 | } 56 | 57 | .text-selected { 58 | .text(selected); 59 | } 60 | 61 | .text-info { 62 | .text(info); 63 | } 64 | 65 | .text-success { 66 | .text(success); 67 | } 68 | 69 | .text-warning { 70 | .text(warning); 71 | } 72 | 73 | .text-error { 74 | .text(error); 75 | } 76 | 77 | .highlight { 78 | .highlight-type(@text-color); 79 | } 80 | 81 | .highlight-info { 82 | .highlight-type(@text-color-info); 83 | } 84 | 85 | .highlight-success { 86 | .highlight-type(@text-color-success); 87 | } 88 | 89 | .highlight-warning { 90 | .highlight-type(@text-color-warning); 91 | } 92 | 93 | .highlight-error { 94 | .highlight-type(@text-color-error); 95 | } 96 | 97 | .highlight-type(@color) { 98 | font-weight: normal; 99 | padding-left: @component-padding/2; 100 | padding-right: @component-padding/2; 101 | color: @base-background-color; 102 | border-radius: @component-border-radius; 103 | background-color: @color; 104 | } 105 | 106 | pre { 107 | .text(normal); 108 | border-color: @base-border-color; 109 | background: @base-background-color; 110 | border: 0; 111 | } 112 | 113 | code { 114 | padding: 2px 4px; 115 | font-size: 0.9em; 116 | color: @text-color-highlight; 117 | background-color: @base-border-color; 118 | border-radius: 4px; 119 | } 120 | -------------------------------------------------------------------------------- /styles/tooltips.less: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | white-space: nowrap; 3 | 4 | &.in { 5 | opacity: 1; 6 | } 7 | 8 | .tooltip-inner { 9 | .text(invert); 10 | .shadow(); 11 | line-height: @component-line-height; 12 | border-radius: @component-border-radius; 13 | background-color: @ui-background-accent; 14 | white-space: nowrap; 15 | max-width: none; 16 | } 17 | 18 | &.top .tooltip-arrow { 19 | border-top-color: @ui-background-accent; 20 | } 21 | 22 | &.top-left .tooltip-arrow { 23 | border-top-color: @ui-background-accent; 24 | } 25 | 26 | &.top-right .tooltip-arrow { 27 | border-top-color: @ui-background-accent; 28 | } 29 | 30 | &.right .tooltip-arrow { 31 | border-right-color: @ui-background-accent; 32 | } 33 | 34 | &.left .tooltip-arrow { 35 | border-left-color: @ui-background-accent; 36 | } 37 | 38 | &.bottom .tooltip-arrow { 39 | border-bottom-color: @ui-background-accent; 40 | } 41 | 42 | &.bottom-left .tooltip-arrow { 43 | border-bottom-color: @ui-background-accent; 44 | } 45 | 46 | &.bottom-right .tooltip-arrow { 47 | border-bottom-color: @ui-background-accent; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | .tree-view-resizer > .tree-view-scroller:not(:first-child) { 2 | padding-top: @component-padding; 3 | border-top: 1px solid @base-border-color; 4 | } 5 | 6 | .tree-view { 7 | font-size: @ui-size; 8 | background: @tree-view-background-color; 9 | 10 | .directory > .header:hover { 11 | .text(highlight); 12 | } 13 | 14 | .directory::before { 15 | background: transparent; 16 | } 17 | 18 | .project-root.project-root { 19 | &::before { 20 | background: transparent; 21 | } 22 | padding-bottom: @component-padding; 23 | &:not(:first-child) { 24 | padding-top: @component-padding; 25 | } 26 | 27 | &:before { 28 | height: @tab-height; 29 | background-clip: padding-box; 30 | } 31 | 32 | & > .header { 33 | &::before { 34 | .transition(opacity); 35 | opacity: 0; 36 | } 37 | 38 | &:hover::before { 39 | opacity: 1; 40 | } 41 | 42 | .name { 43 | .text(highlight); 44 | font-weight: bold; 45 | line-height: @tab-height; 46 | 47 | &:before { 48 | display: none; 49 | } 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /styles/ui-custom-variables.less: -------------------------------------------------------------------------------- 1 | @import "syntax-variables"; 2 | 3 | @ui-text-color-highlight: rgb(255, 255, 255); 4 | @ui-text-color-accent: mix(@syntax-text-color, @ui-text-color-highlight, 50%); 5 | @ui-text-color-normal: mix(@syntax-background-color, @ui-text-color-accent, 32%); 6 | @ui-text-color-subtle: mix(@syntax-background-color, @ui-text-color-accent, 72%); 7 | 8 | @ui-background-level-1: desaturate(darken(@syntax-background-color, 4%), 2%); 9 | @ui-background-level-2: @syntax-background-color; 10 | @ui-background-level-3: desaturate(lighten(@syntax-background-color, 16%), 2%); 11 | 12 | @ui-background-highlight: lighten(@syntax-background-color, 8%); 13 | @ui-background-accent: @ui-text-color-normal; 14 | 15 | @ui-blue: @syntax-color-renamed; 16 | @ui-green: @syntax-color-added; 17 | @ui-orange: @syntax-color-modified; 18 | @ui-red: @syntax-color-removed; 19 | 20 | @ui-size: 1rem; 21 | @ui-line-height: 1.3em; 22 | @ui-input-font: Menlo, Monaco, Consolas, 'Courier New', monospace; 23 | -------------------------------------------------------------------------------- /styles/ui-mixins.less: -------------------------------------------------------------------------------- 1 | .text(normal) { 2 | font-size: @font-size; 3 | font-weight: normal; 4 | color: @text-color; 5 | } 6 | .text(subtle) { 7 | font-weight: normal; 8 | color: @text-color-subtle; 9 | } 10 | .text(highlight) { 11 | font-weight: normal; 12 | color: @text-color-highlight; 13 | } 14 | .text(selected) { 15 | font-weight: bold; 16 | color: @text-color-selected; 17 | } 18 | 19 | .text(info) { 20 | color: @text-color-info; 21 | } 22 | .text(success) { 23 | color: @text-color-success; 24 | } 25 | .text(warning) { 26 | color: @text-color-warning; 27 | } 28 | .text(error) { 29 | color: @text-color-error; 30 | } 31 | 32 | .text(heading) { 33 | font-weight: 300; 34 | font-size: @font-size * 1.5; 35 | } 36 | 37 | .text(uppercase) { 38 | text-transform: uppercase; 39 | letter-spacing: 0.025em; 40 | } 41 | 42 | .text(light) { 43 | font-weight: 300; 44 | } 45 | .text(bold) { 46 | font-weight: 600; 47 | } 48 | .text(invert) { 49 | color: @app-background-color; 50 | } 51 | 52 | .transition() { 53 | transition: 400ms all ease; 54 | } 55 | 56 | .transition(@property) { 57 | transition: 400ms @property ease; 58 | } 59 | 60 | .shadow() { 61 | box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.4) !important; 62 | } 63 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | @import "ui-custom-variables"; 2 | 3 | // Text Colors ----------------------------------------------------------------- 4 | 5 | @text-color: @ui-text-color-normal; 6 | @text-color-subtle: @ui-text-color-subtle; 7 | @text-color-highlight: @ui-text-color-highlight; 8 | @text-color-selected: @ui-text-color-highlight; 9 | 10 | @text-color-info: @ui-blue; 11 | @text-color-success: @ui-green; 12 | @text-color-warning: @ui-orange; 13 | @text-color-error: @ui-red; 14 | 15 | @text-color-ignored: @ui-text-color-subtle; 16 | @text-color-added: @ui-green; 17 | @text-color-renamed: @ui-blue; 18 | @text-color-modified: @ui-orange; 19 | @text-color-removed: @ui-red; 20 | 21 | // Background colors ----------------------------------------------------------- 22 | 23 | @base-background-color: @ui-background-level-2; 24 | @base-border-color: @ui-background-highlight; 25 | 26 | @background-color-info: @ui-blue; 27 | @background-color-success: @ui-green; 28 | @background-color-warning: @ui-orange; 29 | @background-color-error: @ui-red; 30 | @background-color-highlight: @ui-background-highlight; 31 | @background-color-selected: @ui-background-highlight; 32 | 33 | @app-background-color: @ui-background-level-1; 34 | 35 | // Component colors ------------------------------------------------------------ 36 | 37 | @pane-item-background-color: @base-background-color; 38 | @pane-item-border-color: @base-border-color; 39 | 40 | @input-background-color: @ui-background-accent; 41 | @input-border-color: @ui-background-accent; 42 | 43 | @tool-panel-background-color: @app-background-color; 44 | @tool-panel-border-color: @base-border-color; 45 | 46 | @inset-panel-background-color: @ui-background-highlight; 47 | @inset-panel-border-color: @base-border-color; 48 | 49 | @panel-heading-background-color: @ui-background-highlight; 50 | @panel-heading-border-color: @base-border-color; 51 | 52 | @overlay-background-color: @ui-background-level-3; 53 | @overlay-border-color: @base-border-color; 54 | 55 | @button-background-color: transparent; 56 | @button-background-color-hover: @ui-background-accent; 57 | @button-background-color-selected: @ui-background-accent; 58 | @button-border-color: @ui-background-accent; 59 | 60 | @tab-bar-background-color: @ui-background-level-1; 61 | @tab-bar-border-color: @base-border-color; 62 | @tab-background-color: @ui-background-level-1; 63 | @tab-background-color-active: @ui-background-level-2; 64 | @tab-border-color: @base-border-color; 65 | 66 | @tree-view-background-color: @ui-background-level-1; 67 | @tree-view-border-color: @base-border-color; 68 | 69 | @scrollbar-background-color: @ui-background-level-1; 70 | @scrollbar-color: @ui-background-highlight; 71 | 72 | // 73 | 74 | @ui-site-color-1: @ui-green; // green 75 | @ui-site-color-2: @ui-blue; // blue 76 | @ui-site-color-3: @ui-orange; // orange 77 | @ui-site-color-4: mix(@ui-blue, @ui-red, 50%); // purple 78 | @ui-site-color-5: mix(@ui-green, @ui-red, 50%); // yellow 79 | 80 | 81 | // Sizes ----------------------------------------------------------------------- 82 | 83 | @font-size: 13px; 84 | @input-font-size: 13px; 85 | 86 | @disclosure-arrow-size: 12px; 87 | 88 | @component-padding: 12px; 89 | @component-icon-padding: 5px; 90 | @component-icon-size: 16px; 91 | @component-line-height: 2rem; 92 | @component-border-radius: 4px; 93 | 94 | @tab-height: 36px; 95 | 96 | // Other ----------------------------------------------------------------------- 97 | 98 | @font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif; 99 | --------------------------------------------------------------------------------