├── .coffeelintignore ├── .gitignore ├── LICENSE.md ├── README.md ├── coffeelint.json ├── index.less ├── lib └── main.coffee ├── package.json ├── screenshots ├── editor.png ├── overlay.png └── tree-view.png ├── spec └── theme-spec.coffee └── styles ├── atom.less ├── badges.less ├── buttons.less ├── config.less ├── core.less ├── custom-title-bar.less ├── docks.less ├── dropdowns.less ├── editor.less ├── git.less ├── inputs.less ├── key-binding.less ├── lists.less ├── messages.less ├── modal.less ├── nav.less ├── notifications.less ├── packages.less ├── packages ├── atom-spotified.less ├── deprecation-cop.less ├── github.less ├── project-find.less ├── timecop.less └── toolbar.less ├── panels.less ├── panes.less ├── progress.less ├── settings.less ├── sites.less ├── status-bar.less ├── tabs.less ├── text.less ├── tooltips.less ├── tree-view.less ├── ui-mixins.less ├── ui-variables-custom.less └── ui-variables.less /.coffeelintignore: -------------------------------------------------------------------------------- 1 | spec/fixtures 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Pristine UI theme 2 | > A dark UI theme based off of [One Dark UI](https://atom.io/themes/one-dark-ui) 3 | 4 | #### Editing 5 | ![editing](https://raw.githubusercontent.com/cdonohue/pristine-ui/master/screenshots/editor.png) 6 | 7 | #### Overlays 8 | ![overlay](https://raw.githubusercontent.com/cdonohue/pristine-ui/master/screenshots/overlay.png) 9 | > Shown with the [duotone-dark-sky-syntax](https://atom.io/themes/duotone-dark-sky-syntax) syntax theme by simurai. Icons by [file-icons](https://atom.io/packages/file-icons). 10 | 11 | ### New Features 12 | 13 | File indicator dots and folder scope lines in the tree-view. Also, modified styles for overlays and the status bar. 14 | #### Tree View 15 | ![tree view](https://raw.githubusercontent.com/cdonohue/pristine-ui/master/screenshots/tree-view.png) 16 | 17 | ### Install 18 | 19 | Navigate to __Settings > Install__ , select __Themes__, and search for `pristine-ui`. 20 | 21 | Once installed, this theme can be activated by going to the __Settings > Themes__ section and selecting "Pristine UI" from the __UI Themes__ drop-down menu. 22 | 23 | ### Settings 24 | 25 | Since this theme is forked from One Dark UI, it brings along some nice additions of being able to tailor font and tab sizes. 26 | 27 | - Change the __Font Size__ to scale the whole UI up or down. 28 | - Choose between 3 __Tab Sizing__ modes. 29 | - Hide the __dock buttons__. 30 | 31 | ### Customize 32 | 33 | It's also possible to resize only certain areas by adding the following to your styles.less (Use DevTools to find the right selectors): 34 | 35 | ``` css 36 | .theme-pristine-ui { 37 | .tab-bar { font-size: 18px; } 38 | .tree-view { font-size: 14px; } 39 | .status-bar { font-size: 12px; } 40 | } 41 | ``` 42 | 43 | ### Special Thanks 44 | To the One Dark UI creators/contributors, without which this theme would not exist. 45 | -------------------------------------------------------------------------------- /coffeelint.json: -------------------------------------------------------------------------------- 1 | { 2 | "max_line_length": { 3 | "level": "ignore" 4 | }, 5 | "no_empty_param_list": { 6 | "level": "error" 7 | }, 8 | "arrow_spacing": { 9 | "level": "error" 10 | }, 11 | "no_interpolation_in_single_quotes": { 12 | "level": "error" 13 | }, 14 | "no_debugger": { 15 | "level": "error" 16 | }, 17 | "prefer_english_operator": { 18 | "level": "error" 19 | }, 20 | "colon_assignment_spacing": { 21 | "spacing": { 22 | "left": 0, 23 | "right": 1 24 | }, 25 | "level": "error" 26 | }, 27 | "braces_spacing": { 28 | "spaces": 0, 29 | "level": "error" 30 | }, 31 | "spacing_after_comma": { 32 | "level": "error" 33 | }, 34 | "no_stand_alone_at": { 35 | "level": "error" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | 2 | // Atom UI Theme: Pristine 3 | 4 | @import (reference) "styles/ui-variables"; 5 | @import (reference) "styles/ui-mixins"; 6 | @import (reference) "octicon-mixins"; 7 | 8 | @import "styles/atom"; 9 | @import "styles/badges"; 10 | @import "styles/buttons"; 11 | @import "styles/docks"; 12 | @import "styles/editor"; 13 | @import "styles/git"; 14 | @import "styles/inputs"; 15 | @import "styles/lists"; 16 | @import "styles/messages"; 17 | @import "styles/notifications"; 18 | @import "styles/nav"; 19 | @import "styles/modal"; 20 | @import "styles/panels"; 21 | @import "styles/panes"; 22 | @import "styles/progress"; 23 | @import "styles/tabs"; 24 | @import "styles/text"; 25 | @import "styles/tooltips"; 26 | @import "styles/tree-view"; 27 | @import "styles/status-bar"; 28 | @import "styles/key-binding"; 29 | @import "styles/sites"; 30 | 31 | @import "styles/settings"; 32 | @import "styles/packages"; 33 | @import "styles/core"; 34 | @import "styles/config"; 35 | @import "styles/custom-title-bar"; 36 | -------------------------------------------------------------------------------- /lib/main.coffee: -------------------------------------------------------------------------------- 1 | root = document.documentElement 2 | 3 | module.exports = 4 | activate: (state) -> 5 | atom.config.observe 'pristine-ui.fontSize', (value) -> 6 | setFontSize(value) 7 | 8 | atom.config.observe 'pristine-ui.tabSizing', (value) -> 9 | setTabSizing(value) 10 | 11 | atom.config.observe 'pristine-ui.hideDockButtons', (value) -> 12 | setHideDockButtons(value) 13 | 14 | # DEPRECATED: This can be removed at some point (added in Atom 1.17/1.18ish) 15 | # It removes `layoutMode` 16 | if atom.config.get('pristine-ui.layoutMode') 17 | atom.config.unset('pristine-ui.layoutMode') 18 | 19 | deactivate: -> 20 | unsetFontSize() 21 | unsetTabSizing() 22 | unsetHideDockButtons() 23 | 24 | 25 | # Font Size ----------------------- 26 | 27 | setFontSize = (currentFontSize) -> 28 | if Number.isInteger(currentFontSize) 29 | root.style.fontSize = "#{currentFontSize}px" 30 | else if currentFontSize is 'Auto' 31 | unsetFontSize() 32 | 33 | unsetFontSize = -> 34 | root.style.fontSize = '' 35 | 36 | 37 | # Tab Sizing ----------------------- 38 | 39 | setTabSizing = (tabSizing) -> 40 | root.setAttribute('theme-pristine-ui-tabsizing', tabSizing.toLowerCase()) 41 | 42 | unsetTabSizing = -> 43 | root.removeAttribute('theme-pristine-ui-tabsizing') 44 | 45 | 46 | # Dock Buttons ----------------------- 47 | 48 | setHideDockButtons = (hideDockButtons) -> 49 | if hideDockButtons 50 | root.setAttribute('theme-pristine-ui-dock-buttons', 'hidden') 51 | else 52 | unsetHideDockButtons() 53 | 54 | unsetHideDockButtons = -> 55 | root.removeAttribute('theme-pristine-ui-dock-buttons') 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pristine-ui", 3 | "theme": "ui", 4 | "version": "1.1.11", 5 | "description": "Pristine UI theme", 6 | "keywords": [ 7 | "dark", 8 | "adaptive", 9 | "ui", 10 | "pristine", 11 | "clean" 12 | ], 13 | "license": "MIT", 14 | "repository": "https://github.com/cdonohue/pristine-ui", 15 | "main": "lib/main", 16 | "engines": { 17 | "atom": ">0.40.0" 18 | }, 19 | "devDependencies": { 20 | "coffeelint": "^1.9.7" 21 | }, 22 | "configSchema": { 23 | "fontSize": { 24 | "title": "Font Size", 25 | "description": "Change the UI font size. Needs to be between 8 and 20. In Auto mode, the Font Size will automatically change based on the window size.", 26 | "type": [ 27 | "integer", 28 | "string" 29 | ], 30 | "minimum": 8, 31 | "maximum": 20, 32 | "default": "Auto", 33 | "order": 1 34 | }, 35 | "tabSizing": { 36 | "title": "Tab Sizing", 37 | "description": "In Even mode all tabs will be the same size. Great for quickly closing many tabs. In Maximum mode the tabs will expand to take up the full width. In Minimum mode the tabs will only take as little space as needed and also show longer file names.", 38 | "type": "string", 39 | "default": "Even", 40 | "enum": [ 41 | "Even", 42 | "Maximum", 43 | "Minimum" 44 | ], 45 | "order": 2 46 | }, 47 | "hideDockButtons": { 48 | "title": "Hide dock toggle buttons", 49 | "description": "Note: When hiding the toggle buttons, opening a dock needs to be done by using the keyboard or other alternatives.", 50 | "type": "boolean", 51 | "default": "false", 52 | "order": 3 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /screenshots/editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cdonohue/pristine-ui/aa9d750ab0c1616914b0746bf9c85d7489ec1d44/screenshots/editor.png -------------------------------------------------------------------------------- /screenshots/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cdonohue/pristine-ui/aa9d750ab0c1616914b0746bf9c85d7489ec1d44/screenshots/overlay.png -------------------------------------------------------------------------------- /screenshots/tree-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cdonohue/pristine-ui/aa9d750ab0c1616914b0746bf9c85d7489ec1d44/screenshots/tree-view.png -------------------------------------------------------------------------------- /spec/theme-spec.coffee: -------------------------------------------------------------------------------- 1 | describe "Clean UI theme", -> 2 | beforeEach -> 3 | waitsForPromise -> 4 | atom.packages.activatePackage('pristine-ui') 5 | 6 | it "allows the font size to be set via config", -> 7 | expect(document.documentElement.style.fontSize).toBe '' 8 | 9 | atom.config.set('pristine-ui.fontSize', '10') 10 | expect(document.documentElement.style.fontSize).toBe '10px' 11 | 12 | atom.config.set('pristine-ui.fontSize', 'Auto') 13 | expect(document.documentElement.style.fontSize).toBe '' 14 | 15 | it "allows the layout mode to be set via config", -> 16 | expect(document.documentElement.getAttribute('theme-pristine-ui-layoutmode')).toBe 'auto' 17 | 18 | atom.config.set('pristine-ui.layoutMode', 'Spacious') 19 | expect(document.documentElement.getAttribute('theme-pristine-ui-layoutmode')).toBe 'spacious' 20 | 21 | it "allows the tab sizing to be set via config", -> 22 | expect(document.documentElement.getAttribute('theme-pristine-ui-tabsizing')).toBe 'auto' 23 | 24 | atom.config.set('pristine-ui.tabSizing', 'Minimum') 25 | expect(document.documentElement.getAttribute('theme-pristine-ui-tabsizing')).toBe 'minimum' 26 | -------------------------------------------------------------------------------- /styles/atom.less: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-size: @font-size; 7 | } 8 | 9 | atom-workspace { 10 | background-color: @app-background-color; 11 | } 12 | 13 | 14 | // Scrollbars ------------------------------------ 15 | 16 | .scrollbars-visible-always { 17 | ::-webkit-scrollbar { 18 | width: 10px; 19 | height: 10px; 20 | } 21 | 22 | ::-webkit-scrollbar-track { 23 | background: @scrollbar-background-color; 24 | } 25 | 26 | ::-webkit-scrollbar-thumb { 27 | border-radius: 5px; 28 | border: 3px solid @scrollbar-background-color; 29 | background: @scrollbar-color; 30 | background-clip: content-box; 31 | } 32 | 33 | ::-webkit-scrollbar-corner { 34 | background: @scrollbar-background-color; 35 | } 36 | 37 | ::-webkit-scrollbar-thumb:vertical:active { 38 | border-radius: 0; 39 | border-left-width: 0; 40 | border-right-width: 0; 41 | } 42 | 43 | ::-webkit-scrollbar-thumb:horizontal:active { 44 | border-radius: 0; 45 | border-top-width: 0; 46 | border-bottom-width: 0; 47 | } 48 | 49 | atom-text-editor { 50 | ::-webkit-scrollbar-track { 51 | background: @scrollbar-background-color-editor; 52 | } 53 | ::-webkit-scrollbar-corner { 54 | background: @scrollbar-background-color-editor; 55 | } 56 | ::-webkit-scrollbar-thumb { 57 | border-color: @scrollbar-background-color-editor; 58 | background: @scrollbar-color-editor; 59 | } 60 | } 61 | } 62 | 63 | // TODO: Move to a better place, not sure where it gets used 64 | .caret { 65 | border-top: 5px solid #fff; 66 | margin-top: -1px; 67 | } 68 | -------------------------------------------------------------------------------- /styles/badges.less: -------------------------------------------------------------------------------- 1 | .badge { 2 | padding: @ui-padding/4 @ui-padding/2.5; 3 | min-width: @ui-padding*1.25; 4 | .text(highlight); 5 | border-radius: @ui-size*2; 6 | background-color: @badge-background-color; 7 | 8 | // Icon ---------------------- 9 | &.icon { 10 | font-size: @ui-size; 11 | padding: @ui-padding-icon @ui-padding-icon*1.5; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | @btn-border: 1px solid transparent; //@button-border-color; 2 | @btn-padding: 0 @ui-size/1.25; 3 | 4 | // Mixins ----------------------- 5 | 6 | .btn-default (@color, @hover-color, @selected-color, @text-color) { 7 | color: @text-color; 8 | text-shadow: none; 9 | border: @btn-border; 10 | transition: .15s ease-in-out; 11 | box-shadow: 1px 2px 12px rgba(0,0,0,.26); 12 | background-color: @color; 13 | 14 | &:hover { 15 | color: @text-color-highlight; 16 | background: @hover-color; 17 | } 18 | &:active { 19 | background: darken(@color, 4%); 20 | box-shadow: none; 21 | } 22 | &.selected { 23 | background: @selected-color; 24 | } 25 | &.selected:focus, 26 | &.selected:hover { 27 | background: lighten(@selected-color, 2%); 28 | } 29 | &:focus { 30 | .focus(); // unfortunately :focus styles stay even after releasing mouse. 31 | border: @btn-border; 32 | } 33 | } 34 | 35 | .btn-variant (@color) { 36 | @_text-color: contrast(@color, white, hsl(0,0%,20%), 33% ); 37 | .btn-default( 38 | @color, 39 | lighten(@color, 3%), 40 | saturate(darken(@color, 12%), 20%), 41 | @text-color-highlight 42 | ); 43 | color: @_text-color; 44 | 45 | & when (@ui-lightness > 50%) { 46 | border-color: transparent; // hide border on light backgrounds 47 | } 48 | 49 | &:hover, 50 | &:focus { 51 | color: @_text-color; 52 | } 53 | &:focus { 54 | border-color: transparent; 55 | background-clip: padding-box; 56 | // box-shadow: inset 0 0 0 1px fade(@base-border-color, 50%), 0 0 0 1px @color; 57 | } 58 | 59 | &.icon:before { 60 | color: @_text-color; 61 | } 62 | } 63 | 64 | 65 | // Buttons ----------------------- 66 | 67 | .btn { 68 | height: initial; 69 | padding: @btn-padding; 70 | font-size: @ui-size; 71 | line-height: @ui-line-height; 72 | } 73 | 74 | .btn, 75 | .btn.btn-default { 76 | .btn-default(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color); 77 | } 78 | 79 | .btn.btn-primary { 80 | .btn-variant(@accent-bg-color); 81 | } 82 | .btn.btn-info { 83 | .btn-variant(@background-color-info); 84 | } 85 | .btn.btn-success { 86 | .btn-variant(@background-color-success); 87 | } 88 | .btn.btn-warning { 89 | .btn-variant(@background-color-warning); 90 | } 91 | .btn.btn-error { 92 | .btn-variant(@background-color-error); 93 | } 94 | 95 | 96 | // Button Sizes ----------------------- 97 | 98 | .btn.btn-xs, 99 | .btn-group-xs > .btn { 100 | font-size: @ui-size*.8; 101 | line-height: @ui-line-height; 102 | padding: @btn-padding; 103 | } 104 | .btn.btn-sm, 105 | .btn-group-sm > .btn { 106 | font-size: @ui-size*.9; 107 | line-height: @ui-line-height; 108 | padding: @btn-padding; 109 | } 110 | .btn.btn-lg, 111 | .btn-group-lg > .btn { 112 | font-size: @ui-size * 1.5; 113 | line-height: @ui-line-height; 114 | padding: @btn-padding; 115 | } 116 | 117 | 118 | // Button Group ----------------------- 119 | 120 | .btn-group > .btn { 121 | z-index: 0; 122 | &:hover { 123 | z-index: 0; 124 | } 125 | &.btn:focus { 126 | z-index: 1; 127 | .focus(); 128 | } 129 | 130 | &:first-child { 131 | border-left: @btn-border; 132 | } 133 | &:last-child, 134 | &.selected:last-child { 135 | border-right: @btn-border; 136 | } 137 | 138 | // hide border on light backgrounds 139 | & when (@ui-lightness > 50%) { 140 | &.btn-primary:first-child, 141 | &.btn-info:first-child, 142 | &.btn-success:first-child, 143 | &.btn-warning:first-child, 144 | &.btn-error:first-child { 145 | border-left-color: transparent; 146 | } 147 | 148 | &.btn-primary:last-child, 149 | &.btn-info:last-child, 150 | &.btn-success:last-child, 151 | &.btn-warning:last-child, 152 | &.btn-error:last-child { 153 | border-right-color: transparent; 154 | } 155 | } 156 | 157 | &.selected, 158 | &.selected:first-child, 159 | &.selected:last-child { 160 | color: @button-text-color-selected; 161 | border-color: @button-border-color-selected; 162 | } 163 | 164 | & when (@ui-lightness > 50%) { 165 | &.selected + .btn { 166 | border-left-color: @button-border-color-selected; 167 | } 168 | &.selected + .selected { 169 | border-left-color: mix(@button-border-color, @button-border-color-selected); 170 | } 171 | } 172 | 173 | &.selected:focus { 174 | border-color: @button-background-color-selected; 175 | box-shadow: inset 0 0 0 1px fade(@base-border-color, 50%), 0 0 0 1px @button-background-color-selected; 176 | } 177 | } 178 | 179 | 180 | // Button Icons ----------------------- 181 | 182 | .btn.icon:before { 183 | line-height: inherit; 184 | vertical-align: top; 185 | } 186 | -------------------------------------------------------------------------------- /styles/config.less: -------------------------------------------------------------------------------- 1 | // Tabs ---------------------------------------------- 2 | 3 | @theme-tabsizing: ~'theme-@{ui-theme-name}-tabsizing'; 4 | @theme-dockButtons: ~'theme-@{ui-theme-name}-dock-buttons'; 5 | 6 | @tab-min-width: 7em; // ~ icon + 6 characters 7 | 8 | 9 | // Even (default) --------------- 10 | 11 | .tab-bar { 12 | .tab, 13 | .tab.active { 14 | flex: 1 1 0; 15 | max-width: 22em; 16 | min-width: @tab-min-width; 17 | } 18 | atom-dock & { 19 | .tab, 20 | .tab.active { 21 | max-width: none; 22 | } 23 | } 24 | 25 | // TODO: Turn this into a config 26 | // Truncates the beginning instead 27 | // .title.title.title { 28 | // direction: rtl; // change direction 29 | // } 30 | } 31 | 32 | 33 | // Maximum (full width) --------------- 34 | 35 | [@{theme-tabsizing}="maximum"] .tab-bar { 36 | .tab, 37 | .tab.active { 38 | max-width: none; 39 | } 40 | } 41 | 42 | 43 | // Minimum (show long paths) --------------- 44 | 45 | [@{theme-tabsizing}="minimum"] .tab-bar { 46 | .tab, 47 | .tab.active { 48 | flex: 0 0 auto; 49 | min-width: 2.75em; 50 | max-width: @tab-min-width * 3.3; 51 | } 52 | atom-dock { 53 | .tab, 54 | .tab.active { 55 | max-width: @tab-min-width * 2; 56 | } 57 | } 58 | } 59 | 60 | 61 | 62 | // Hide docks toggle buttons ------------------------------ 63 | 64 | [@{theme-dockButtons}="hidden"] { 65 | 66 | // Hide docks when not open 67 | .atom-dock-inner:not(.atom-dock-open) { 68 | display: none; 69 | } 70 | 71 | // Hide toggle buttons 72 | .atom-dock-toggle-button { 73 | display: none; 74 | } 75 | 76 | } 77 | -------------------------------------------------------------------------------- /styles/core.less: -------------------------------------------------------------------------------- 1 | // Misc 2 | 3 | .preview-pane .results-view .path-match-number { 4 | // show number also on selected item 5 | color: inherit; 6 | opacity: .6; 7 | } 8 | 9 | .tool-panel.incompatible-packages { 10 | // incompatible-packages isn't really a tool-panel and more a whole pane 11 | .text(normal); 12 | background-color: @level-2-color; 13 | } 14 | 15 | // Styleguide ---------------------------------------------- 16 | 17 | .styleguide { 18 | // Modal 19 | atom-panel.modal:after { 20 | position: absolute; // prevent overlay backdrop from leaking outside 21 | left: -@ui-padding; 22 | right: -@ui-padding; 23 | bottom: -@ui-padding; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /styles/custom-title-bar.less: -------------------------------------------------------------------------------- 1 | .custom-title-bar { 2 | atom-panel { 3 | &.header { 4 | .title-bar { 5 | border-bottom: none; 6 | padding-bottom: 4px; 7 | } 8 | } 9 | } 10 | 11 | .tab-bar .tab { 12 | border-image: linear-gradient(to top, @tab-border-color 50%, rgba(0, 0, 0, 0) 90%) 1; 13 | &.active { 14 | box-shadow: inset 0 1px 0 @tab-border-color; 15 | border-image: none; 16 | & + .tab { 17 | border-image: none; 18 | } 19 | } 20 | &:first-of-type { 21 | border-image: none; 22 | border-left: 1px solid transparent; 23 | } 24 | &:last-of-type { 25 | box-shadow: inset 0 -1px 0 @tab-border-color;; 26 | &.active { 27 | box-shadow: inset 0 1px 0 @tab-border-color, 28 | inset -1px 0 0 @tab-border-color; 29 | } 30 | } 31 | } 32 | 33 | // Active pane marker -------------- 34 | 35 | atom-pane.active .tab.active:before { 36 | top: 1px; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /styles/docks.less: -------------------------------------------------------------------------------- 1 | // Docks ------------------------------ 2 | 3 | // Make handles not take up any space when dock is open 4 | .atom-dock-resize-handle { 5 | position: absolute; 6 | z-index: 11; // same as toggle buttons 7 | 8 | &.left { 9 | top: 0; 10 | right: 0; 11 | bottom: 0; 12 | } 13 | &.right { 14 | top: 0; 15 | left: 0; 16 | bottom: 0; 17 | } 18 | &.bottom { 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | } 23 | } 24 | 25 | // Add borders 26 | .atom-dock-inner.atom-dock-open.left { 27 | border-right: 1px solid @base-border-color; 28 | } 29 | .atom-dock-inner.atom-dock-open.right { 30 | border-left: 1px solid @base-border-color; 31 | } 32 | 33 | // Make toggle buttons cover ^ border 34 | .atom-dock-toggle-button.left { 35 | margin-left: -1px; 36 | } 37 | .atom-dock-toggle-button.right { 38 | margin-right: -1px; 39 | } 40 | .atom-dock-inner:not(.atom-dock-open) .atom-dock-toggle-button.bottom { 41 | margin-bottom: -1px; 42 | } 43 | 44 | .atom-dock-toggle-button { 45 | .atom-dock-toggle-button-inner { 46 | border-radius: 4px; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /styles/dropdowns.less: -------------------------------------------------------------------------------- 1 | .dropdown-menu { 2 | background-color: @overlay-background-color; 3 | border-radius: @component-border-radius; 4 | // border: 1px solid @base-border-color; 5 | padding: 0; 6 | 7 | > li > a { 8 | .text(normal); 9 | } 10 | 11 | > li > a:hover { 12 | .text(highlight); 13 | background-color: @background-color-highlight; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | // Editor in a panel 2 | 3 | // TODO: Find a better selector, maybe a new class like atom-text-editor[medium] 4 | atom-panel-container atom-text-editor.is-focused { 5 | .focus(); 6 | } 7 | 8 | 9 | // Mini 10 | // Usually just single line inputs 11 | 12 | atom-text-editor[mini] { 13 | overflow: auto; 14 | font-size: @ui-input-size; 15 | line-height: @ui-line-height; 16 | max-height: @ui-line-height * 5; // rows 17 | padding-left: @ui-padding/3; 18 | box-shadow: inset 0 2px 1px rgba(0,0,0,.12); 19 | border-radius: @component-border-radius; 20 | color: @text-color-highlight; 21 | border: 1px solid @input-border-color; 22 | background-color: @input-background-color; 23 | 24 | .placeholder-text { 25 | color: @text-color-subtle; 26 | } 27 | 28 | .selection .region { 29 | background-color: @input-selection-color; 30 | } 31 | 32 | .cursor { 33 | border-color: @accent-color; 34 | border-width: 2px; 35 | } 36 | 37 | &.is-focused { 38 | .focus(); 39 | background-color: @input-background-color-focus; 40 | .selection .region { 41 | background-color: @input-selection-color-focus; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /styles/git.less: -------------------------------------------------------------------------------- 1 | .status { .text(normal); } 2 | .status-added { .text(success); } // green 3 | .status-ignored { .text(subtle); } // faded 4 | .status-modified { .text(warning); } // orange 5 | .status-removed { .text(error); } // red 6 | .status-renamed { .text(info); } // blue 7 | -------------------------------------------------------------------------------- /styles/inputs.less: -------------------------------------------------------------------------------- 1 | // 2 | // Checkbox 3 | // ------------------------- 4 | 5 | .input-checkbox { 6 | &:active { 7 | background-color: @accent-color; 8 | } 9 | &:before, 10 | &:after { 11 | background-color: @accent-text-color; 12 | } 13 | &:checked { 14 | background-color: @accent-color; 15 | } 16 | 17 | &:indeterminate { 18 | background-color: @accent-color; 19 | } 20 | } 21 | 22 | 23 | // 24 | // Radio 25 | // ------------------------- 26 | 27 | .input-radio { 28 | &:before { 29 | background-color: @accent-text-color; 30 | } 31 | &:active { 32 | background-color: @accent-color; 33 | } 34 | &:checked { 35 | background-color: @accent-color; 36 | } 37 | } 38 | 39 | 40 | // 41 | // Range (Slider) 42 | // ------------------------- 43 | 44 | .input-range { 45 | &::-webkit-slider-thumb { 46 | background-color: @accent-color; 47 | } 48 | } 49 | 50 | 51 | // 52 | // Toggle 53 | // ------------------------- 54 | 55 | .input-toggle { 56 | &:checked { 57 | background-color: @accent-color; 58 | } 59 | &:before { 60 | background-color: @accent-text-color; 61 | } 62 | } 63 | 64 | 65 | 66 | // States ------------------------- 67 | 68 | .input-text, 69 | .input-search, 70 | .input-number, 71 | .input-textarea, 72 | .input-select, 73 | .input-color { 74 | &:focus { 75 | .focus(); 76 | } 77 | } 78 | 79 | .form-control { 80 | border: none; 81 | box-shadow: 0 3px 10px rgba(0,0,0,.12); 82 | } 83 | -------------------------------------------------------------------------------- /styles/key-binding.less: -------------------------------------------------------------------------------- 1 | .key-binding { 2 | display: inline-block; 3 | margin-left: @ui-padding-icon; 4 | padding: 0 @ui-padding/4; 5 | line-height: 2; 6 | font-family: inherit; 7 | font-size: max(1em, @ui-size*.85); 8 | letter-spacing: @ui-size/10; 9 | border-radius: @component-border-radius; 10 | color: @accent-bg-text-color; 11 | background-color: @accent-bg-color; 12 | } 13 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | .list-group, 2 | .list-tree { 3 | li:not(.list-nested-item), 4 | li.list-nested-item > .list-item { 5 | .text(normal); 6 | } 7 | 8 | .generate-list-item-text-color(@class) { 9 | li:not(.list-nested-item).text-@{class}, 10 | li.list-nested-item.text-@{class} > .list-item { 11 | .text(@class); 12 | } 13 | } 14 | .generate-list-item-text-color(subtle); 15 | .generate-list-item-text-color(info); 16 | .generate-list-item-text-color(success); 17 | .generate-list-item-text-color(warning); 18 | .generate-list-item-text-color(error); 19 | .generate-list-item-text-color(selected); 20 | 21 | .generate-list-item-status-color(@color, @status) { 22 | li:not(.list-nested-item).status-@{status}, 23 | li.list-nested-item.status-@{status} > .list-item { 24 | color: @color; 25 | } 26 | 27 | li:not(.list-nested-item).selected.status-@{status}, 28 | li.list-nested-item.selected.status-@{status} > .list-item { 29 | color: @color; 30 | } 31 | 32 | } 33 | 34 | .generate-list-item-status-color(@text-color-added, added); 35 | .generate-list-item-status-color(@text-color-ignored, ignored); 36 | .generate-list-item-status-color(@text-color-modified, modified); 37 | .generate-list-item-status-color(@text-color-removed, removed); 38 | .generate-list-item-status-color(@text-color-renamed, renamed); 39 | 40 | li:not(.list-nested-item).selected, 41 | li.list-nested-item.selected > .list-item { 42 | .text(selected); 43 | } 44 | 45 | .no-icon { 46 | padding-left: calc(@ui-padding-icon ~"+" @component-icon-size); 47 | } 48 | } 49 | 50 | .list-tree.has-collapsable-children .list-nested-item > .list-item::before { 51 | text-align: center; 52 | } 53 | 54 | .select-list ol.list-group, 55 | &.select-list ol.list-group { 56 | li.two-lines { 57 | .secondary-line { 58 | color: @text-color-subtle; 59 | } 60 | &.selected .secondary-line { 61 | color: fade(@text-color-highlight, 50%); 62 | text-shadow: none; 63 | } 64 | } 65 | 66 | // We want to highlight the background of the list items because we dont 67 | // know their size. 68 | li.selected { 69 | background-color: @background-color-selected; 70 | &:before{ display: none; } 71 | } 72 | 73 | &.mark-active { 74 | @active-icon-size: 14px; 75 | 76 | // pad in front of the text where the icon would be We'll pad the non- 77 | // active items with a 'fake' icon so other classes can pad the item 78 | // without worrying about the icon padding. 79 | li:before { 80 | content: ''; 81 | background-color: transparent; 82 | position: static; 83 | display: inline-block; 84 | left: auto; right: auto; 85 | height: @active-icon-size; 86 | width: @active-icon-size; 87 | font-size: @active-icon-size; 88 | } 89 | > li:not(.active):before { 90 | margin-right: @ui-padding-icon; 91 | } 92 | li.active { 93 | .octicon(check, @active-icon-size); 94 | &:before { 95 | margin-right: @ui-padding-icon; 96 | color: @text-color-success; 97 | } 98 | } 99 | } 100 | } 101 | 102 | .select-list.popover-list { 103 | @popover-list-padding: @ui-padding/4; 104 | background-color: @overlay-background-color; 105 | box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.3); 106 | padding: @popover-list-padding; 107 | border-radius: @component-border-radius; 108 | 109 | atom-text-editor[mini] { 110 | margin-bottom: @popover-list-padding; 111 | } 112 | 113 | ol.list-group { 114 | margin-top: @popover-list-padding; 115 | } 116 | 117 | .list-group li { 118 | padding-left: @popover-list-padding; 119 | } 120 | } 121 | 122 | .ui-sortable { 123 | li { 124 | line-height: 2.5; 125 | } 126 | 127 | // For sortable lists in the settings view 128 | li.ui-sortable-placeholder { 129 | visibility: visible !important; 130 | background-color: darken(@pane-item-background-color, 10%); 131 | } 132 | } 133 | 134 | li.ui-draggable-dragging, 135 | li.ui-sortable-helper { 136 | line-height: @ui-line-height; 137 | height: @ui-line-height; 138 | border: 0; 139 | border-radius: 0; 140 | list-style: none; 141 | padding: 0 @ui-padding; 142 | background: @background-color-highlight; 143 | box-shadow: 0 0 1px @base-border-color; 144 | } 145 | -------------------------------------------------------------------------------- /styles/messages.less: -------------------------------------------------------------------------------- 1 | background-tips ul.background-message { 2 | font-weight: 500; 3 | font-size: 2em; 4 | color: @text-color-faded; 5 | 6 | .message { 7 | padding: 0 @component-padding * 10; 8 | 9 | .keystroke { 10 | white-space: nowrap; 11 | vertical-align: middle; 12 | line-height: 1; 13 | padding: .1em .4em; 14 | border-radius: 4px; 15 | color: lighten(@text-color-subtle, 3%); 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /styles/modal.less: -------------------------------------------------------------------------------- 1 | @modal-padding: @ui-padding/2 @ui-padding/1.5; 2 | @modal-width: @ui-size * 50; 3 | 4 | atom-panel-container.modal { 5 | position: absolute; 6 | top: 0; left: 0; right: 0; 7 | } 8 | 9 | atom-panel.modal { 10 | // .overlay-shadow(); 11 | position: relative; 12 | width: 100%; 13 | max-width: @modal-width; 14 | max-height: 65vh !important; 15 | margin: 0 auto; 16 | left: initial; 17 | 18 | &.from-top { 19 | top: 15vh; 20 | } 21 | 22 | atom-text-editor[mini] { 23 | .text(heading); 24 | padding: 0 @component-padding/2 @component-padding; 25 | box-shadow: none !important; 26 | border: none; 27 | border-radius: 0; 28 | border-bottom: 1px solid @base-border-color; 29 | background: transparent; 30 | font-size: 2.2em; 31 | &.is-focused.editor { 32 | border-bottom-color: @base-border-color; 33 | } 34 | } 35 | 36 | .select-list ol.list-group, 37 | &.select-list ol.list-group { 38 | border: 1px solid @overlay-border-color; 39 | background-color: lighten(@overlay-background-color, 2%); 40 | 41 | &:empty { 42 | border: none; 43 | margin-top: 0; 44 | } 45 | 46 | li { 47 | padding: @modal-padding; 48 | line-height: @ui-line-height; 49 | border-bottom: 1px solid @overlay-border-color; 50 | 51 | &:last-of-type { 52 | border-bottom: none; 53 | } 54 | 55 | .icon::before { 56 | margin-left: 1px; 57 | } 58 | 59 | .icon.status { 60 | float: right; 61 | margin-left: @ui-padding-icon; 62 | &:before { 63 | margin-left: 0; 64 | margin-right: 0; 65 | } 66 | } 67 | 68 | &.selected { 69 | .status.icon { 70 | color: @text-color-selected; 71 | } 72 | } 73 | } 74 | 75 | } 76 | 77 | .select-list .key-binding { 78 | margin-top: -1px; 79 | margin-left: @ui-padding/2; 80 | margin-right: calc( -@ui-padding/3 ~"+" 1px); 81 | } 82 | 83 | .select-list .primary-line { 84 | display: block; 85 | } 86 | 87 | & > * { 88 | position: relative; // fixes stacking order 89 | } 90 | 91 | 92 | // Container 93 | &:before { 94 | content: ""; 95 | position: absolute; 96 | top: 0; 97 | left: 0; 98 | right: 0; 99 | bottom: 0; 100 | z-index: 0; 101 | background-color: @overlay-background-color; 102 | border-radius: @component-border-radius*2; 103 | box-shadow: 0 6px 12px hsla(0,0%,0%,.26); 104 | } 105 | 106 | // Backdrop 107 | // TODO: Add extra wrapper to translate individually or easier positioning 108 | 109 | &:after { 110 | content: ""; 111 | position: fixed; 112 | top: 0; 113 | left: 0; 114 | right: 0; 115 | bottom: 0; 116 | z-index: -1; 117 | background: @overlay-backdrop-color; 118 | opacity: @overlay-backdrop-opacity; 119 | backface-visibility: hidden; // fixes scrollbar on retina screens 120 | -webkit-animation: overlay-fade .2s cubic-bezier(0.215, 0.61, 0.355, 1); 121 | } 122 | 123 | @-webkit-keyframes overlay-fade { 124 | 0% { opacity: 0; } 125 | 100% { opacity: @overlay-backdrop-opacity; } 126 | } 127 | 128 | } 129 | -------------------------------------------------------------------------------- /styles/nav.less: -------------------------------------------------------------------------------- 1 | .nav-tabs { 2 | border-bottom: 1px solid @base-border-color; 3 | li { 4 | a, 5 | &.active a { 6 | border: none; 7 | margin-right: 0px; 8 | margin-bottom: 1px; 9 | } 10 | 11 | a:hover, 12 | &.active a, 13 | &.active a:hover { 14 | background-color: @background-color-highlight; 15 | border: none; 16 | color: @text-color-selected; 17 | border-bottom-left-radius: 0px; 18 | border-bottom-right-radius: 0px; 19 | } 20 | 21 | &.active a { 22 | background-color: @tab-background-color-active; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /styles/notifications.less: -------------------------------------------------------------------------------- 1 | atom-notifications { 2 | font-size: @ui-size * 1.2; 3 | 4 | atom-notification { 5 | width: 32em; 6 | &.has-detail { 7 | width: 32em; 8 | } 9 | 10 | &:first-child.has-close .message { 11 | padding-right: 9em; 12 | } 13 | &:only-child.has-close .message, 14 | &.has-close .message { 15 | padding-right: 2.5em; 16 | } 17 | .item { 18 | padding: @ui-padding/2; 19 | } 20 | 21 | .detail, 22 | .description { 23 | font-size: .85em; 24 | } 25 | 26 | &.icon:before { 27 | padding-top: .85em; 28 | } 29 | .close { 30 | width: 2.5em; 31 | height: 3em; 32 | line-height: 3em; 33 | font-size: inherit; 34 | } 35 | .close-all.btn { 36 | top: .5em; 37 | right: 2.5em; 38 | } 39 | .btn-copy-report { 40 | line-height: 2em; 41 | margin-left: .5em; 42 | } 43 | 44 | &.info, 45 | &.success, 46 | &.warning, 47 | &.error { 48 | pre code { 49 | color: #dad6e0; 50 | background: transparent; 51 | } 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /styles/packages.less: -------------------------------------------------------------------------------- 1 | @import "packages/project-find"; 2 | @import "packages/timecop"; 3 | @import "packages/deprecation-cop"; 4 | @import "packages/toolbar"; 5 | @import "packages/atom-spotified"; 6 | @import "packages/github"; 7 | -------------------------------------------------------------------------------- /styles/packages/atom-spotified.less: -------------------------------------------------------------------------------- 1 | atom-pane-container atom-pane .atom-spotified { 2 | border-bottom: 1px solid transparent !important; 3 | } 4 | -------------------------------------------------------------------------------- /styles/packages/deprecation-cop.less: -------------------------------------------------------------------------------- 1 | .deprecation-cop { 2 | .deprecation-overview { 3 | background-color: @level-2-color; 4 | border-bottom: 1px solid @base-border-color; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /styles/packages/github.less: -------------------------------------------------------------------------------- 1 | .github-StagingView-group.is-focused { 2 | .is-selected { 3 | background: @tree-view-background-selected-color; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /styles/packages/project-find.less: -------------------------------------------------------------------------------- 1 | .find-and-replace, 2 | .project-find { 3 | padding: @ui-padding/4; 4 | .input-block-item { 5 | padding: @ui-padding/4; 6 | } 7 | } 8 | 9 | .find-and-replace, 10 | .project-find { 11 | .header, 12 | .input-block { 13 | min-width: @ui-size*25; 14 | } 15 | 16 | .input-block-item { 17 | flex: 1 1 @ui-size*25; 18 | } 19 | .input-block-item--flex { 20 | flex: 100 1 @ui-size*25; 21 | } 22 | 23 | .btn, 24 | .btn-group-options .btn { 25 | font-size: @ui-size*1.1; 26 | padding: 0; 27 | } 28 | 29 | .btn-group-options .btn, 30 | .btn-group-options .btn.option-selection, 31 | .btn-group-options .btn.option-whole-word { 32 | padding: 0; 33 | font-size: @ui-input-size; // keep same as text input 34 | } 35 | 36 | .find-container atom-text-editor { 37 | padding-right: @ui-size*5; // leave some room for the results count 38 | } 39 | .find-meta-container { 40 | top: 0; 41 | font-size: @ui-size; 42 | line-height: @ui-size*2.5; 43 | } 44 | } 45 | 46 | .project-find { 47 | .header, 48 | .input-block { 49 | min-width: @ui-size*15; 50 | } 51 | 52 | .input-block-item { 53 | flex: 1 1 @ui-size*20; 54 | } 55 | .input-block-item--flex { 56 | flex: 100 1 @ui-size*20; 57 | } 58 | 59 | .btn { 60 | font-size: @ui-size*1.1; 61 | padding: 0; 62 | } 63 | .btn-group-options .btn { 64 | padding: 0; 65 | font-size: @ui-input-size; // keep same as text input 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /styles/packages/timecop.less: -------------------------------------------------------------------------------- 1 | .timecop { 2 | .timecop-panel { 3 | padding: @component-padding/2; 4 | background-color: @level-2-color; 5 | } 6 | 7 | .tool-panel { 8 | padding: @component-padding/2; 9 | background-color: @level-2-color; 10 | } 11 | 12 | .inset-panel { 13 | border: 1px solid @base-border-color; 14 | } 15 | 16 | .panel-heading { 17 | .text(highlight); 18 | border-color: @base-border-color; 19 | background-color: @level-1-color; 20 | } 21 | 22 | .list-item .inline-block { 23 | line-height: 1.5; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /styles/packages/toolbar.less: -------------------------------------------------------------------------------- 1 | .tool-bar { 2 | // Make it look the same as other panels 3 | background-color: @level-3-color; 4 | border: none; 5 | 6 | // just a single border + more spacing 7 | &.tool-bar-horizontal .tool-bar-spacer { 8 | border-left: 0 none; 9 | margin-left: .5em; 10 | margin-right: .5em; 11 | } 12 | &.tool-bar-vertical .tool-bar-spacer { 13 | border-bottom: 0 none; 14 | margin-top: .5em; 15 | margin-bottom: .5em; 16 | } 17 | 18 | // only show button styles on hover 19 | button.tool-bar-btn { 20 | background-color: @level-3-color; 21 | background-image: none; 22 | border-color: @level-3-color; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | // Panels 2 | 3 | atom-panel { 4 | .text(normal); 5 | position: relative; 6 | border-bottom: 1px solid @base-border-color; 7 | 8 | &.header { 9 | .title-bar { 10 | background: @tree-view-background-color; 11 | } 12 | border-bottom: none; 13 | } 14 | 15 | &.top { 16 | border-right: 1px solid @base-border-color; 17 | } 18 | &.left { 19 | border-right: 1px solid @base-border-color; 20 | } 21 | &.right { 22 | border-left: 1px solid @base-border-color; 23 | } 24 | &.bottom { 25 | border-right: none; 26 | } 27 | &.footer:last-child { 28 | border-bottom: none; 29 | } 30 | &.tool-panel:empty { 31 | border: none; 32 | } 33 | } 34 | 35 | .panel { 36 | &.bordered { 37 | border: 1px solid @base-border-color; 38 | border-radius: @component-border-radius; 39 | } 40 | } 41 | 42 | .inset-panel { 43 | position: relative; 44 | background-color: @inset-panel-background-color; 45 | border-radius: @component-border-radius; 46 | &.bordered { 47 | border: 1px solid @base-border-color; 48 | border-radius: @component-border-radius; 49 | } 50 | & .panel-heading { 51 | border-color: @inset-panel-border-color; 52 | } 53 | } 54 | 55 | .panel-heading { 56 | .text(normal); 57 | border-bottom: 1px solid @panel-heading-border-color; 58 | background-color: @panel-heading-background-color; 59 | 60 | .btn { 61 | padding-left: 8px; 62 | padding-right: 8px; 63 | .btn-default( 64 | lighten(@button-background-color, 10%), 65 | lighten(@button-background-color-hover, 10%), 66 | lighten(@button-background-color-selected, 10%), 67 | lighten(@text-color, 10%) 68 | ); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /styles/panes.less: -------------------------------------------------------------------------------- 1 | atom-pane-container { 2 | 3 | atom-pane { 4 | position: relative; 5 | border-right: 1px solid @base-border-color; 6 | border-bottom: 1px solid @base-border-color; 7 | 8 | .item-views { 9 | // prevent atom-text-editor from leaking ouside might improve performance 10 | overflow: hidden; 11 | .pane-item { 12 | background-color: @syntax-background-color; 13 | } 14 | } 15 | } 16 | 17 | } 18 | 19 | // Hide right-most border 20 | atom-pane:only-child, 21 | atom-pane-axis.pane-row > atom-pane:last-child, 22 | atom-pane-axis.pane-column:last-child > atom-pane { 23 | border-right: none; 24 | } 25 | -------------------------------------------------------------------------------- /styles/progress.less: -------------------------------------------------------------------------------- 1 | 2 | // Spinner ---------------------- 3 | 4 | @spinner-duration: 1.2s; 5 | 6 | .loading-spinner(@size) { 7 | position: relative; 8 | display: block; 9 | width: 1em; 10 | height: 1em; 11 | font-size: @size; 12 | background: radial-gradient(@accent-color .1em, transparent .11em); 13 | 14 | &::before, 15 | &::after { 16 | content: ""; 17 | position: absolute; 18 | z-index: 10; // prevent sibling elements from getting their own layers 19 | top: 0; 20 | left: 0; 21 | border-radius: 1em; 22 | width: inherit; 23 | height: inherit; 24 | border-radius: 1em; 25 | border: 2px solid; 26 | -webkit-animation: spinner-animation @spinner-duration infinite; 27 | -webkit-animation-fill-mode: backwards; 28 | } 29 | &::before { 30 | border-color: @accent-color transparent transparent transparent; 31 | } 32 | &::after { 33 | border-color: transparent lighten(@accent-color, 15%) transparent transparent; 34 | -webkit-animation-delay: @spinner-duration/2; 35 | } 36 | 37 | &.inline-block { 38 | display: inline-block; 39 | } 40 | } 41 | 42 | @-webkit-keyframes spinner-animation { 43 | 0% { transform: rotateZ( 0deg); -webkit-animation-timing-function: cubic-bezier(0, 0, .8, .2); } 44 | 50% { transform: rotateZ(180deg); -webkit-animation-timing-function: cubic-bezier(.2, .8, 1, 1); } 45 | 100% { transform: rotateZ(360deg); } 46 | } 47 | 48 | // Spinner sizes 49 | .loading-spinner-tiny { .loading-spinner(16px); &::before, &::after { border-width: 1px; } } 50 | .loading-spinner-small { .loading-spinner(32px); } 51 | .loading-spinner-medium { .loading-spinner(48px); } 52 | .loading-spinner-large { .loading-spinner(64px); } 53 | 54 | 55 | 56 | 57 | // Progress Bar ---------------------- 58 | 59 | @progress-height: 8px; 60 | @progress-buffer-color: fade(@progress-background-color, 20%); 61 | 62 | progress { 63 | -webkit-appearance: none; 64 | height: @progress-height; 65 | border-radius: @component-border-radius; 66 | background-color: @input-background-color; 67 | box-shadow: inset 0 0 0 1px @input-border-color; 68 | 69 | &::-webkit-progress-bar { 70 | background-color: transparent; 71 | } 72 | 73 | &::-webkit-progress-value { 74 | border-radius: @component-border-radius; 75 | background-color: @progress-background-color; 76 | } 77 | 78 | // Is buffering (when no value is set) 79 | &:indeterminate { 80 | background-image: 81 | linear-gradient(-45deg, transparent 33%, @progress-buffer-color 33%, 82 | @progress-buffer-color 66%, transparent 66%); 83 | background-size: 25px @progress-height, 100% 100%, 100% 100%; 84 | 85 | // Plays animation for 1min (12runs) at normal speed, 86 | // then slows down frame-rate for 9mins (108runs) to limit CPU usage 87 | -webkit-animation: progress-buffering 5s linear 12, 88 | progress-buffering 5s 60s steps(10) 108; 89 | } 90 | } 91 | 92 | @-webkit-keyframes progress-buffering { 93 | 100% { background-position: -100px 0px; } 94 | } 95 | -------------------------------------------------------------------------------- /styles/settings.less: -------------------------------------------------------------------------------- 1 | // Settings 2 | 3 | // Modular Scale (1.125): http://www.modularscale.com/?1&em&1.125&web&table 4 | @ms-6: @ui-size * 2.027; 5 | @ms-5: @ui-size * 1.802; 6 | @ms-4: @ui-size * 1.602; 7 | @ms-3: @ui-size * 1.424; 8 | @ms-2: @ui-size * 1.266; 9 | @ms-1: @ui-size * 1.125; 10 | @ms-0: @ui-size * 1; 11 | @ms_1: @ui-size * 0.889; 12 | @ms_2: @ui-size * 0.790; 13 | 14 | 15 | // Welcome screen 16 | details.welcome-card { 17 | .welcome-detail { 18 | border-top: 1px solid rgba(0,0,0,.26); 19 | } 20 | 21 | border: none; 22 | box-shadow: 0 6px 12px rgba(0,0,0,.16); 23 | } 24 | 25 | .settings-view { 26 | // Menu ------------------------------ 27 | 28 | .config-menu { 29 | position: relative; 30 | min-width: @ui-size * 15; 31 | max-width: 100%; 32 | border-width: 0 1px 0 0; 33 | border-image: linear-gradient(@level-2-color 0px, @base-border-color 200px) 0 1 0 0 stretch; 34 | background: @level-2-color; 35 | 36 | .btn { 37 | white-space: initial; 38 | font-size: @ms_1; 39 | line-height: 1; 40 | padding: @ui-padding/3 @ui-padding/2; 41 | &::before { 42 | vertical-align: middle; 43 | } 44 | } 45 | } 46 | .nav { 47 | & > li > a { 48 | padding: @ui-padding/2 @ui-padding; 49 | line-height: @ui-line-height; 50 | } 51 | } 52 | 53 | .alert { 54 | border: none; 55 | } 56 | 57 | 58 | // Sections ------------------------------ 59 | 60 | & > .panels { 61 | background-color: @level-2-color; 62 | .section.settings-panel { 63 | border-top: none; 64 | } 65 | } 66 | 67 | .section-container { 68 | max-width: @ui-size*60; 69 | } 70 | .sub-section { 71 | margin: @ui-padding*3 0; 72 | } 73 | 74 | .section, 75 | .section:first-child, 76 | .section:last-child { 77 | padding: @ui-padding*3; 78 | } 79 | 80 | .themes-panel { 81 | .control-group { 82 | margin-top: @ui-padding*2; 83 | } 84 | 85 | .select-container { 86 | .btn.active-theme-settings, 87 | .btn.active-syntax-settings { 88 | margin-left: 4px; 89 | } 90 | } 91 | } 92 | 93 | 94 | // Titles ------------------------------ 95 | 96 | .section .section-heading { 97 | margin-bottom: @ui-padding/1.5; 98 | } 99 | 100 | .sub-section-heading.icon:before, 101 | .section-heading.icon:before { 102 | margin-right: @ui-padding-icon; 103 | } 104 | 105 | 106 | 107 | // Cards ------------------------------ 108 | 109 | .package-card { 110 | padding: @ui-padding; 111 | .meta-controls .status-indicator { 112 | width: @ui-padding/4; 113 | &:before { 114 | content: "\00a0"; // fixes 0 height 115 | } 116 | } 117 | border: none; 118 | box-shadow: 0 6px 12px rgba(0,0,0,.16); 119 | } 120 | 121 | 122 | // Components ------------------------------ 123 | 124 | .icon::before { 125 | color: @text-color-subtle; 126 | } 127 | 128 | .editor-container { 129 | margin: @ui-padding 0; 130 | } 131 | 132 | .form-control { 133 | font-size: @ui-size*1.25; 134 | height: @ui-line-height; 135 | padding-top: 0; 136 | padding-bottom: 0; 137 | } 138 | 139 | .update-all-button { 140 | font-size: .75em; 141 | } 142 | 143 | .install-button { 144 | .btn-variant(@accent-bg-color); 145 | } 146 | 147 | input[type="checkbox"] { 148 | background-color: @background-color-selected; 149 | &:active, 150 | &:checked { 151 | background-color: @accent-color; 152 | } 153 | &:before, 154 | &:after { 155 | background-color: @accent-text-color; 156 | } 157 | } 158 | 159 | .search-container .btn { 160 | font-size: @ui-input-size; 161 | } 162 | 163 | } 164 | -------------------------------------------------------------------------------- /styles/sites.less: -------------------------------------------------------------------------------- 1 | // Site Colors 2 | 3 | .ui-site(@num, @color) { 4 | .ui-site-@{num} { 5 | background-color: @color; 6 | } 7 | } 8 | 9 | .ui-site(1, @ui-site-color-1); 10 | .ui-site(2, @ui-site-color-2); 11 | .ui-site(3, @ui-site-color-3); 12 | .ui-site(4, @ui-site-color-4); 13 | .ui-site(5, @ui-site-color-5); 14 | -------------------------------------------------------------------------------- /styles/status-bar.less: -------------------------------------------------------------------------------- 1 | @status-bar-height: @ui-tab-height; // same as tabs 2 | @status-bar-padding: @ui-padding; 3 | 4 | .status-bar { 5 | font-size: @ui-size; 6 | height: @status-bar-height; 7 | line-height: @status-bar-height; 8 | background-color: @level-3-color; 9 | 10 | .flexbox-repaint-hack { 11 | padding: 0; // override default 12 | } 13 | 14 | // underlines should only be used for external links 15 | a:hover, 16 | a:focus { 17 | text-decoration: none; 18 | cursor: default; 19 | } 20 | 21 | .inline-block { 22 | margin: 0; // override default 23 | padding: 0 @status-bar-padding/2; 24 | vertical-align: top; 25 | transition: .1s ease-in-out; 26 | 27 | &:hover { 28 | background-color: @level-3-color-hover; 29 | color: white; 30 | } 31 | &:active { 32 | background-color: @level-3-color-active; 33 | } 34 | 35 | // reset on child inline-block 36 | .inline-block { 37 | margin: 0; 38 | padding: 0; 39 | } 40 | } 41 | 42 | .status-bar-right { 43 | .inline-block { 44 | margin-left: 0; // override default 45 | } 46 | } 47 | 48 | .icon { 49 | &::before { 50 | font-size: 16px; // keeps them sharp 51 | width: 14px; 52 | height: 16px; 53 | margin-right: 4px; 54 | } 55 | } 56 | } 57 | 58 | 59 | // Package overrides ------------------------------- 60 | 61 | .status-bar.status-bar { 62 | 63 | // Read-only -> Remove hover effect 64 | .is-read-only, // <- use this class in packages 65 | status-bar-launch-mode, 66 | status-bar-cursor, 67 | busy-signal { 68 | &:hover, 69 | &:active, 70 | .inline-block:hover, 71 | .inline-block:active { 72 | background-color: transparent; 73 | } 74 | } 75 | 76 | // Remove underline 77 | .package-updates-status-view, 78 | .github-ChangedFilesCount { 79 | &:hover, 80 | &:focus { 81 | text-decoration: none; 82 | cursor: default; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | // Tabs 2 | 3 | @tab-border: 1px solid @tab-border-color; 4 | @title-padding: .66em; 5 | @icon-padding-top: .75em; // 3 (total) - 1.5 (text) / 2 6 | @icon-padding-right: .75em; 7 | 8 | .tab-bar { 9 | position: relative; 10 | height: @ui-tab-height; 11 | box-shadow: inset 0 -1px 0 @tab-border-color; 12 | background: @tab-bar-background-color; 13 | overflow-x: auto; 14 | overflow-y: hidden; 15 | border-radius: 0; 16 | 17 | &::-webkit-scrollbar { 18 | display: none; 19 | } 20 | 21 | &:empty { 22 | display: none; 23 | } 24 | 25 | 26 | // Tab ---------------------- 27 | 28 | .tab { 29 | position: relative; 30 | top: 0; 31 | padding: 0; 32 | margin: 0; 33 | height: inherit; 34 | font-size: inherit; 35 | line-height: @ui-tab-height; 36 | color: @tab-text-color; 37 | background-color: @tab-background-color; 38 | box-shadow: inherit; 39 | border-left: @tab-border; 40 | &.active { 41 | color: @tab-text-color-active; 42 | background-color: @tab-background-color-active; 43 | box-shadow: none; 44 | } 45 | &:first-of-type { 46 | border-left: 1px solid transparent; 47 | } 48 | &:last-of-type { 49 | // use box-shadow to not take up any space 50 | box-shadow: inset 0 -1px 0 @tab-border-color, 1px 0 0 @base-border-color; 51 | } 52 | &.active:last-of-type { 53 | box-shadow: 1px 0 0 @base-border-color; 54 | } 55 | 56 | 57 | // Title ---------------------- 58 | 59 | .title { 60 | text-align: center; 61 | margin: 0 @title-padding; 62 | } 63 | 64 | 65 | // Icons ---------------------- 66 | 67 | .title.title:before { 68 | margin-right: .3em; 69 | width: 1em; 70 | height: 1em; 71 | line-height: 1; 72 | font-size: 1.1em; 73 | } 74 | 75 | // Close icon ---------------------- 76 | 77 | .close-icon { 78 | top: @icon-padding-top; 79 | right: @icon-padding-right; 80 | z-index: 2; 81 | font-size: 1em; 82 | width: 1.5em; 83 | height: 1.5em; 84 | line-height: 1.5; 85 | border-radius: @component-border-radius; 86 | background-color: inherit; 87 | overflow: hidden; 88 | transform: scale(0); 89 | transition: transform .08s; 90 | &:hover { 91 | color: @accent-text-color; 92 | background-color: @accent-color; 93 | } 94 | &:active { 95 | background-color: fade(@accent-color, 50%); 96 | } 97 | &::before { 98 | z-index: 1; 99 | position: absolute; 100 | font-size: 1.1em; 101 | width: inherit; 102 | height: inherit; 103 | line-height: inherit; 104 | text-align: center; 105 | pointer-events: none; 106 | } 107 | } 108 | &:hover .close-icon { 109 | transform: scale(1); 110 | transition-duration: .16s; 111 | } 112 | } 113 | 114 | // Modified icon ---------------------- 115 | 116 | .tab.modified { 117 | &:hover .close-icon { 118 | color: @accent-color; 119 | &:hover { 120 | color: @accent-bg-text-color; 121 | } 122 | } 123 | &:not(:hover) .close-icon { 124 | top: @icon-padding-top; 125 | right: @icon-padding-right; 126 | width: 1.5em; 127 | height: 1.5em; 128 | line-height: 1.5; 129 | color: @accent-color; 130 | border-radius: @component-border-radius; 131 | border: none; 132 | transform: scale(1); 133 | &::before { 134 | content: "\f052"; 135 | display: inline-block; 136 | } 137 | } 138 | } 139 | 140 | 141 | // Tabs in the docks ---------------------- 142 | 143 | atom-dock & { 144 | .tab.active { 145 | background-color: @tool-panel-background-color; 146 | } 147 | } 148 | 149 | 150 | // Dragging ---------------------- 151 | 152 | .tab.is-dragging { 153 | opacity: .5; 154 | 155 | .close-icon, 156 | &:before { 157 | visibility: hidden; 158 | } 159 | } 160 | 161 | .placeholder { 162 | position: relative; 163 | pointer-events: none; 164 | 165 | // bar 166 | &:before { 167 | z-index: 1; 168 | margin: 0; 169 | width: 2px; 170 | height: @ui-tab-height; 171 | background-color: @accent-color; 172 | } 173 | 174 | // arrow 175 | &:after { 176 | z-index: 0; 177 | top: @ui-tab-height/2; 178 | margin: -4px 0 0 -3px; 179 | border-radius: 0; 180 | border: 4px solid @accent-color; 181 | transform: rotate(45deg); 182 | background: transparent; 183 | } 184 | 185 | &:last-child { 186 | &:before { 187 | margin-left: -2px; 188 | } 189 | &:after { 190 | transform: none; 191 | margin-left: -10px; 192 | border-color: transparent @accent-color transparent transparent; 193 | } 194 | } 195 | } 196 | 197 | 198 | // Overrides ---------------------- 199 | 200 | // keep tabs same size when active 201 | .tab, 202 | .tab.active { 203 | padding-right: 0; 204 | .title { 205 | padding: 0; 206 | } 207 | } 208 | } 209 | 210 | atom-dock.left { 211 | .tab-bar { 212 | box-shadow: none; 213 | 214 | .tab { 215 | border: none; 216 | &.active:last-of-type { 217 | box-shadow: none; 218 | } 219 | } 220 | } 221 | } 222 | 223 | // Active pane marker -------------- 224 | 225 | atom-pane.active .tab.active:before { 226 | content: ""; 227 | position: absolute; 228 | pointer-events: none; 229 | z-index: 2; 230 | top: 0; 231 | left: -1px; // cover left border 232 | bottom: 0; 233 | width: 2px; 234 | background: @accent-color; 235 | } 236 | 237 | // hide marker in docks 238 | atom-dock .tab-bar .tab::before { 239 | display: none; 240 | } 241 | 242 | 243 | // Custom tabs -------------- 244 | 245 | .tab-bar .tab.active { 246 | &[data-type$="Editor"], 247 | &[data-type$="AboutView"], 248 | &[data-type$="TimecopView"], 249 | &[data-type$="StyleguideView"], 250 | &[data-type="MarkdownPreviewView"] { 251 | color: @tab-text-color-editor; 252 | background-color: @tab-background-color-editor; // Match syntax background color 253 | } 254 | } 255 | -------------------------------------------------------------------------------- /styles/text.less: -------------------------------------------------------------------------------- 1 | h1, 2 | h2, 3 | h3 { 4 | line-height: 1em; 5 | margin-bottom: 15px 6 | } 7 | h1 { font-size: 2em; } 8 | h2 { font-size: 1.5em; } 9 | h3 { font-size: 1.2em; } 10 | 11 | p { 12 | line-height: 1.6; 13 | margin-bottom: 15px; 14 | } 15 | 16 | label { 17 | font-weight: normal; 18 | } 19 | 20 | pre { 21 | box-shadow: none; 22 | color: @text-color; 23 | background: @inset-panel-background-color; 24 | border-radius: @component-border-radius; 25 | border: none; 26 | margin: 0; 27 | } 28 | 29 | code { 30 | .text(highlight); 31 | background: @background-color-highlight; 32 | border-radius: @component-border-radius; 33 | } 34 | 35 | .selected { .text(highlight); } 36 | 37 | .text-smaller { font-size: 0.9em; } 38 | 39 | .text-subtle { .text(subtle); } 40 | .text-highlight { .text(highlight); } 41 | 42 | .text-error { .text(error); } 43 | .text-info { 44 | .text(info); 45 | &:hover { color: @text-color-info; } 46 | } 47 | .text-warning { 48 | .text(warning); 49 | &:hover { color: @text-color-warning; } 50 | } 51 | .text-success { 52 | .text(success); 53 | &:hover { color: @text-color-success; } 54 | } 55 | 56 | .highlight-mixin { 57 | padding: 1px 4px; 58 | border-radius: 2px; 59 | } 60 | 61 | .highlight { 62 | .highlight-mixin(); 63 | font-weight: 700; 64 | color: @text-color-highlight; 65 | background-color: @background-color-highlight; 66 | } 67 | 68 | .highlight-color(@name, @background-color) { 69 | .highlight-@{name} { 70 | .highlight-mixin(); 71 | font-weight: 500; 72 | color: white; 73 | text-shadow: 0 1px 0px hsla(0,0%,0%,.2); 74 | background-color: @background-color; 75 | } 76 | } 77 | .highlight-color( info, @background-color-info); 78 | .highlight-color(warning, @background-color-warning); 79 | .highlight-color( error, @background-color-error); 80 | .highlight-color(success, @background-color-success); 81 | 82 | .results-view .path-details.list-item { 83 | color: darken(@text-color-highlight, 18%); 84 | } 85 | -------------------------------------------------------------------------------- /styles/tooltips.less: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | white-space: nowrap; 3 | font-size: @ui-size*1.15; 4 | 5 | &.in { 6 | opacity: 1; 7 | transition: opacity .12s ease-out; 8 | } 9 | 10 | .tooltip-inner { 11 | line-height: 1; 12 | padding: @ui-padding*.5 @ui-padding*.65; 13 | border-radius: @component-border-radius; 14 | background-color: @tooltip-background-color; 15 | color: @tooltip-text-color; 16 | box-shadow: 0 0 12px rgba(0,0,0,.54); 17 | white-space: nowrap; 18 | max-width: none; 19 | } 20 | 21 | .keystroke { 22 | font-size: max(1em, @ui-size*.85); 23 | padding: .1em .4em; 24 | margin: 0 @ui-padding*-.35 0 @ui-padding*.25; 25 | border-radius: max(2px, @component-border-radius / 2); 26 | color: @tooltip-text-key-color; 27 | background: @tooltip-background-key-color; 28 | } 29 | 30 | &.top .tooltip-arrow { 31 | border-top-color: @tooltip-background-color; 32 | } 33 | &.top-left .tooltip-arrow { 34 | border-top-color: @tooltip-background-color; 35 | } 36 | &.top-right .tooltip-arrow { 37 | border-top-color: @tooltip-background-color; 38 | } 39 | &.right .tooltip-arrow { 40 | border-right-color: @tooltip-background-color; 41 | } 42 | &.left .tooltip-arrow { 43 | border-left-color: @tooltip-background-color; 44 | } 45 | &.bottom .tooltip-arrow { 46 | border-bottom-color: @tooltip-background-color; 47 | } 48 | &.bottom-left .tooltip-arrow { 49 | border-bottom-color: @tooltip-background-color; 50 | } 51 | &.bottom-right .tooltip-arrow { 52 | border-bottom-color: @tooltip-background-color; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | @tree-view-height: @ui-line-height; 2 | 3 | .tree-view:not(.nuclide-file-tree) { 4 | font-size: @ui-size; 5 | background: @tree-view-background-color; 6 | 7 | .project-root.project-root { 8 | &:before { 9 | height: @ui-tab-height; 10 | background-clip: padding-box; 11 | } 12 | & > .header .name { 13 | line-height: @ui-tab-height; 14 | } 15 | } 16 | 17 | .selected { 18 | &:before { 19 | position: absolute; 20 | background: @tree-view-background-selected-color; 21 | margin-left: -100%; 22 | margin-right: -10px; 23 | z-index: -1; 24 | } 25 | 26 | &.project-root:before { 27 | background: transparent; 28 | box-shadow: none; 29 | border-right: none; 30 | margin-left: initial; 31 | } 32 | } 33 | 34 | .list-item + .list-tree { 35 | position: relative; 36 | &:before { 37 | content: ''; 38 | position: absolute; 39 | min-width: 1px; 40 | display: block; 41 | top: 0; 42 | bottom: 0; 43 | left: 5px; 44 | background: rgba(255, 255, 255, .12); 45 | } 46 | } 47 | 48 | .list-item.file.entry { 49 | transition: .2s ease-in; 50 | 51 | &:after { 52 | opacity: .26; 53 | .octicon-font(); 54 | content: "\f052"; 55 | position: relative; 56 | font-size: 4px; 57 | float: left; 58 | top: 1px; 59 | left: -12.5px; 60 | width: 6px; 61 | margin-right: -8px; 62 | } 63 | 64 | &[class^="status-"], &[class*="status-"] { 65 | &:after { 66 | opacity: .54; 67 | } 68 | } 69 | } 70 | } 71 | 72 | .theme-pristine-ui .tree-view .project-root.project-root::before { 73 | border-top: 1px solid transparent; 74 | background-clip: padding-box; 75 | } 76 | 77 | .tree-view-resizer { 78 | .tree-view-resize-handle { 79 | width: 8px; 80 | } 81 | } 82 | 83 | // Variable height, based on ems 84 | .list-group li:not(.list-nested-item), 85 | .list-tree li:not(.list-nested-item), 86 | .list-group li.list-nested-item > .list-item, 87 | .list-tree li.list-nested-item > .list-item { 88 | line-height: @tree-view-height; 89 | } 90 | 91 | .list-group .selected::before, 92 | .list-tree .selected::before { 93 | height: @tree-view-height; 94 | } 95 | 96 | // icon 97 | .list-group .icon, 98 | .list-tree .icon { 99 | display: inline-block; 100 | height: inherit; 101 | &::before { 102 | top: initial; 103 | line-height: inherit; 104 | height: inherit; 105 | vertical-align: top; 106 | } 107 | } 108 | 109 | // Active tree-view marker -------------- 110 | 111 | .tree-view::before { 112 | content: ""; 113 | position: fixed; 114 | pointer-events: none; 115 | z-index: 1; 116 | height: @ui-tab-height; 117 | width: 2px; 118 | background: transparent; 119 | opacity: 0; 120 | transition: opacity .16s; 121 | } 122 | 123 | .tree-view:focus::before { 124 | opacity: 1; 125 | transition-duration: .32s; 126 | } 127 | -------------------------------------------------------------------------------- /styles/ui-mixins.less: -------------------------------------------------------------------------------- 1 | // Pattern matching; ish is cray. 2 | // http://lesscss.org/#-pattern-matching-and-guard-expressions 3 | 4 | .text(normal) { 5 | font-weight: normal; 6 | color: @text-color; 7 | } 8 | .text(light) { 9 | font-weight: 200; 10 | } 11 | .text(bold) { 12 | font-weight: 700; 13 | } 14 | .text(subtle) { 15 | font-weight: normal; 16 | color: @text-color-subtle; 17 | } 18 | .text(highlight) { 19 | font-weight: normal; 20 | color: @text-color-highlight; 21 | } 22 | .text(selected) { 23 | .text(highlight) 24 | } 25 | .text(heading) { 26 | font-family: @font-family; 27 | font-weight: 200; 28 | } 29 | 30 | .text(info) { 31 | color: @text-color-info; 32 | } 33 | .text(success) { 34 | color: @text-color-success; 35 | } 36 | .text(warning) { 37 | color: @text-color-warning; 38 | } 39 | .text(error) { 40 | color: @text-color-error; 41 | } 42 | 43 | .focus() { 44 | outline: none; 45 | border-color: @accent-color; 46 | } 47 | 48 | .overlay-shadow() { 49 | box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.2); 50 | } 51 | -------------------------------------------------------------------------------- /styles/ui-variables-custom.less: -------------------------------------------------------------------------------- 1 | // Pristine UI colors 2 | // ---------------------------------------------- 3 | 4 | @import "syntax-variables"; 5 | 6 | .ui-syntax-color() { @syntax-background-color: hsl(220,24%,20%); } .ui-syntax-color(); // fallback color 7 | @ui-syntax-color: @syntax-background-color; 8 | 9 | // Color guards ----------------- 10 | @ui-s-h: hue(@ui-syntax-color); 11 | @ui-s-s: saturation(@ui-syntax-color); 12 | @ui-s-l: lightness(@ui-syntax-color); 13 | @ui-inv: 10%; // inverse lightness if below 14 | 15 | .ui-hue() when (@ui-s-s = 0) { @ui-hue: 220; } // Use blue hue when no saturation 16 | .ui-hue() when (@ui-s-s > 0) { @ui-hue: @ui-s-h; } 17 | .ui-hue(); 18 | 19 | .ui-saturation() when (@ui-s-h <= 80) { @ui-saturation: min(@ui-s-s, 5%); } // minimize saturation for brown 20 | .ui-saturation() when (@ui-s-h > 80) and (@ui-s-h < 160) { @ui-saturation: min(@ui-s-s, 12%); } // reduce saturation for green 21 | .ui-saturation() when (@ui-s-h >= 160) and (@ui-s-l < @ui-inv) { @ui-saturation: min(@ui-s-s, 48%); } // limit max saturation for very dark backgrounds 22 | .ui-saturation() when (@ui-s-h >= 160) and (@ui-s-l >= @ui-inv) { @ui-saturation: @ui-s-s; } 23 | .ui-saturation(); 24 | 25 | .ui-lightness() when (@ui-s-l < @ui-inv) { 26 | @ui-lightness: @ui-s-l + 8%; // increase lightness when too dark 27 | @ui-lightness-border: @ui-lightness*.3; 28 | } 29 | .ui-lightness() when (@ui-s-l >= @ui-inv) { 30 | @ui-lightness: min(@ui-s-l, 20%); // limit max lightness (for light syntax themes) 31 | @ui-lightness-border: @ui-lightness*.6; 32 | } 33 | .ui-lightness(); 34 | 35 | // Main colors ----------------- 36 | @ui-fg: hsl(@ui-hue, min(@ui-saturation, 18%), max(@ui-lightness*3, 66%) ); 37 | @ui-bg: hsl(@ui-hue, @ui-saturation, @ui-lightness); // normalized @syntax-background-color 38 | @ui-border: hsl(@ui-hue, @ui-saturation, @ui-lightness-border); 39 | 40 | 41 | // Custom variables 42 | // These variables are only used in this theme 43 | // ---------------------------------------------- 44 | 45 | @ui-theme-name: pristine-ui; 46 | 47 | // Text (Custom) ----------------- 48 | @text-color-faded: fade(@text-color, 20%); 49 | 50 | @text-color-added: @text-color-success; // green 51 | @text-color-ignored: @text-color-subtle; // faded 52 | @text-color-modified: @text-color-warning; // orange 53 | @text-color-removed: @text-color-error; // red 54 | @text-color-renamed: @text-color-info; // blue 55 | 56 | 57 | // Background (Custom) ----------------- 58 | @level-1-color: lighten(@base-background-color, 6%); 59 | @level-2-color: @base-background-color; 60 | @level-3-color: darken(@base-background-color, 3%); 61 | 62 | @level-3-color-hover: lighten(@level-3-color, 6%); 63 | @level-3-color-active: lighten(@level-3-color, 3%); 64 | 65 | 66 | // Accent (Custom) ----------------- 67 | @accent-luma: luma( hsl(@ui-hue, 50%, 50%) ); // get lightness of current hue 68 | 69 | // used for marker, inputs (smaller things) 70 | @accent-color: mix( hsv( @ui-hue, 100%, 66%), hsl( @ui-hue, 100%, 70%), @accent-luma ); // mix hsv + hsl (favor mostly hsl) 71 | @accent-text-color: contrast(@accent-color, hsl(@ui-hue,100%,10%), #fff, 25% ); 72 | 73 | // used for button, tooltip (larger things) 74 | @accent-bg-color: mix( hsv( @ui-hue, 66%, 66%), hsl( @ui-hue, 66%, 60%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) 75 | @accent-bg-text-color: contrast(@accent-bg-color, hsl(@ui-hue,100%,10%), #fff, 30% ); 76 | 77 | // used for text only 78 | @accent-only-text-color: mix( hsv( @ui-hue, 100%, 66%), hsl( @ui-hue, 100%, 77%), @accent-luma ); // mix hsv + hsl (favor mostly hsl) 79 | 80 | // Components (Custom) ----------------- 81 | @badge-background-color: lighten(@background-color-highlight, 6%); 82 | 83 | @button-text-color-selected: @accent-bg-text-color; 84 | @button-border-color-selected: @base-border-color; 85 | 86 | @checkbox-background-color: fade(@accent-bg-color, 33%); 87 | 88 | @input-background-color-focus: mix(@accent-bg-color, @input-background-color, 10%); 89 | @input-selection-color: mix(@accent-color, @input-background-color, 25%); 90 | @input-selection-color-focus: mix(@accent-color, @input-background-color, 50%); 91 | 92 | @overlay-backdrop-color: hsl(@ui-hue,@ui-saturation,10%); 93 | @overlay-backdrop-opacity: .82; 94 | 95 | @progress-background-color: @accent-color; 96 | 97 | @scrollbar-color: @level-1-color; 98 | @scrollbar-background-color: @level-3-color; // replaced `transparent` with a solid color to test https://github.com/atom/one-light-ui/issues/4 99 | @scrollbar-color-editor: contrast(@ui-syntax-color, darken(@ui-syntax-color, 18%), lighten(@ui-syntax-color, 9%) ); 100 | @scrollbar-background-color-editor: @ui-syntax-color; 101 | 102 | 103 | @tab-text-color: @text-color-subtle; 104 | @tab-text-color-active: @text-color-highlight; 105 | @tab-text-color-editor: contrast(@ui-syntax-color, darken(@ui-syntax-color, 50%), @text-color-highlight ); 106 | @tab-background-color-editor: @ui-syntax-color; 107 | 108 | @tree-view-background-selected-color: @level-2-color; 109 | 110 | @tooltip-background-color: @accent-bg-color; 111 | @tooltip-text-color: @accent-bg-text-color; 112 | @tooltip-text-key-color: @tooltip-background-color; 113 | @tooltip-background-key-color: @tooltip-text-color; 114 | 115 | 116 | // Sizes (Custom) ----------------- 117 | 118 | @ui-size: 1em; 119 | @ui-input-size: @ui-size*1.15; 120 | @ui-padding: @ui-size*1.5; 121 | @ui-padding-pane: @ui-size*.5; 122 | @ui-padding-icon: @ui-padding/3.3; 123 | @ui-line-height: @ui-size*2; 124 | @ui-tab-height: @ui-size*3; 125 | 126 | 127 | 128 | 129 | // Packages variables 130 | // These variables are used to override packages 131 | // ---------------------------------------------- 132 | 133 | @settings-list-background-color: darken(@level-2-color, 1.5%); 134 | @theme-config-box-shadow: inset 0 0 3px hsla(0, 0%, 100%, .4), 0 1px 3px hsla(0, 0%, 0%, .2); 135 | @theme-config-box-shadow-selected: inset 0 1px 3px hsla(0, 0%, 0%, .1); 136 | @theme-config-border-selected: hsla(0, 0%, 100%, .75); 137 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables-custom.less"; // import colors and custom variables 2 | 3 | // Pristine UI variables 4 | // ---------------------------------------------- 5 | 6 | // Official variables 7 | // These variables must be defined in every theme 8 | // Source: https://github.com/atom/atom/blob/master/static/variables/ui-variables.less 9 | // ---------------------------------------------- 10 | 11 | 12 | // Text ----------------- 13 | @text-color: @ui-fg; 14 | @text-color-subtle: fadeout(@text-color, 40%); 15 | @text-color-highlight: lighten(@text-color, 20%); 16 | @text-color-selected: white; 17 | 18 | @color-info: hsl(219, 79%, 66%); 19 | @color-success: hsl(140, 44%, 62%); 20 | @color-warning: hsl( 36, 60%, 72%); 21 | @color-error: hsl( 9, 100%, 64%); 22 | 23 | @text-color-info: lighten(@color-info, 3%); 24 | @text-color-success: lighten(@color-success, 3%); 25 | @text-color-warning: lighten(@color-warning, 3%); 26 | @text-color-error: lighten(@color-error, 3%); 27 | 28 | // Background ----------------- 29 | @background-color-info: @color-info; 30 | @background-color-success: @color-success; 31 | @background-color-warning: @color-warning; 32 | @background-color-error: @color-error; 33 | 34 | @background-color-highlight: lighten(@base-background-color, 4%); 35 | @background-color-selected: lighten(@base-background-color, 8%); 36 | 37 | @app-background-color: @level-3-color; 38 | 39 | 40 | // Base ----------------- 41 | @base-background-color: @ui-bg; 42 | @base-border-color: lighten(@ui-border, 1%); 43 | 44 | 45 | // Components ----------------- 46 | @pane-item-background-color: @base-background-color; 47 | @pane-item-border-color: @base-border-color; 48 | 49 | @input-background-color: darken(@base-background-color, 6%); 50 | @input-border-color: @base-border-color; 51 | 52 | @tool-panel-background-color: @level-3-color; 53 | @tool-panel-border-color: @base-border-color; 54 | 55 | @inset-panel-background-color: lighten(@level-2-color, 4%); 56 | @inset-panel-border-color: fadeout(@base-border-color, 15%); 57 | 58 | @panel-heading-background-color: @level-2-color; 59 | @panel-heading-border-color: @base-border-color; 60 | 61 | @overlay-background-color: @level-2-color; 62 | @overlay-border-color: @base-border-color; 63 | 64 | @button-background-color: @level-1-color; 65 | @button-background-color-hover: lighten(@button-background-color, 2%); 66 | @button-background-color-selected: @accent-bg-color; 67 | @button-border-color: lighten(@base-border-color, 3%); 68 | 69 | @tab-bar-background-color: @level-3-color; 70 | @tab-bar-border-color: @base-border-color; 71 | @tab-background-color: @level-3-color; 72 | @tab-background-color-active: @level-2-color; 73 | @tab-border-color: @base-border-color; 74 | 75 | @tree-view-background-color: @level-3-color; 76 | @tree-view-border-color: @base-border-color; 77 | 78 | @ui-site-color-1: hsl(208, 100%, 50%); // blue 79 | @ui-site-color-2: hsl(160, 70%, 42%); // green 80 | @ui-site-color-3: hsl(32, 60%, 50%); // orange 81 | @ui-site-color-4: #D831B0; // pink 82 | @ui-site-color-5: #EBDD5B; // yellow 83 | 84 | 85 | // Sizes ----------------- 86 | @font-size: 12px; 87 | @input-font-size: 14px; 88 | @disclosure-arrow-size: 12px; 89 | 90 | @component-padding: 10px; 91 | @component-icon-padding: 5px; 92 | @component-icon-size: 16px; // needs to stay 16px to look sharpest 93 | @component-line-height: 25px; 94 | @component-border-radius: 3px; 95 | 96 | @tab-height: 30px; 97 | 98 | 99 | // Font ----------------- 100 | @font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif; 101 | --------------------------------------------------------------------------------