├── .coffeelintignore ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── coffeelint.json ├── index.less ├── lib └── main.coffee ├── package.json ├── spec └── theme-spec.coffee └── styles ├── atom.less ├── badges.less ├── buttons.less ├── config.less ├── core.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 ├── panels.less ├── panes.less ├── progress.less ├── settings.less ├── sites.less ├── status-bar.less ├── tabs.less ├── text.less ├── title-bar.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 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: objective-c 2 | 3 | notifications: 4 | email: 5 | on_success: never 6 | on_failure: change 7 | 8 | script: 'curl -s https://raw.githubusercontent.com/atom/ci/master/build-package.sh | sh' 9 | 10 | branches: 11 | only: 12 | - master 13 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | See https://github.com/atom/one-light-ui/releases 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | See the [Atom contributing guide](https://github.com/atom/atom/blob/master/CONTRIBUTING.md) 2 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | ### Prerequisites 10 | 11 | * [ ] Put an X between the brackets on this line if you have done all of the following: 12 | * Reproduced the problem in Safe Mode: http://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode 13 | * Followed all applicable steps in the debugging guide: http://flight-manual.atom.io/hacking-atom/sections/debugging/ 14 | * Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq 15 | * Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom 16 | * Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages 17 | 18 | ### Description 19 | 20 | [Description of the issue] 21 | 22 | ### Steps to Reproduce 23 | 24 | 1. [First Step] 25 | 2. [Second Step] 26 | 3. [and so on...] 27 | 28 | **Expected behavior:** [What you expect to happen] 29 | 30 | **Actual behavior:** [What actually happens] 31 | 32 | **Reproduces how often:** [What percentage of the time does it reproduce?] 33 | 34 | ### Versions 35 | 36 | You can get this information from copy and pasting the output of `atom --version` and `apm --version` from the command line. Also, please include the OS and what version of the OS you're running. 37 | 38 | ### Additional Information 39 | 40 | Any additional information, configuration or data that might be necessary to reproduce the issue. 41 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Requirements 2 | 3 | * Filling out the template is required. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion. 4 | * All new code requires tests to ensure against regressions 5 | 6 | ### Description of the Change 7 | 8 | 13 | 14 | ### Alternate Designs 15 | 16 | 17 | 18 | ### Benefits 19 | 20 | 21 | 22 | ### Possible Drawbacks 23 | 24 | 25 | 26 | ### Applicable Issues 27 | 28 | 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### This package is now a part of the [core Atom repository](https://github.com/atom/atom/tree/master/packages/one-light-ui). Please direct all issues and pull requests there in the future! 2 | 3 | --- 4 | 5 | ## One Light UI theme [![Build Status](https://travis-ci.org/atom/one-light-ui.svg?branch=master)](https://travis-ci.org/atom/one-light-ui) 6 | 7 | A light UI theme that adapts to most syntax themes. 8 | 9 | ![One light UI](https://cloud.githubusercontent.com/assets/378023/26246819/0826f04e-3cd6-11e7-98eb-cd94bc48b090.png) 10 | 11 | > The font used in the screenshot is [Fira Mono](https://github.com/mozilla/Fira). 12 | 13 | 14 | ### Install 15 | 16 | This theme comes bundled with Atom and can be activated by going to the __Settings > Themes__ section and selecting "One Light" from the __UI Themes__ drop-down menu. 17 | 18 | 19 | ### Settings 20 | 21 | In the theme settings you can: 22 | 23 | - Change the __Font Size__ to scale the whole UI up or down. 24 | - Choose between 3 __Tab Sizing__ modes. 25 | - Hide the __dock buttons__. 26 | 27 | To make changes, go to `Settings > Themes > One Light UI > Settings` or the cog icon next to the theme picker. 28 | 29 | 30 | ### Customize 31 | 32 | It's also possible to resize only certain areas by adding the following to your `styles.less` (Use DevTools to find the right selectors): 33 | 34 | ```css 35 | .theme-one-light-ui { 36 | .tab-bar { font-size: 18px; } 37 | .tree-view { font-size: 14px; } 38 | .status-bar { font-size: 12px; } 39 | } 40 | ``` 41 | 42 | 43 | ### FAQ 44 | 45 | __Why do the colors change when I switch Syntax themes.__ 46 | This UI theme uses the same background color as the chosen syntax theme. If that syntax theme has a dark background color, it only uses its hue, but otherwise stays light. This lets you use light-dark combos. 47 | -------------------------------------------------------------------------------- /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: One 3 | 4 | @import "styles/ui-variables.less"; 5 | @import "styles/ui-mixins.less"; 6 | @import "octicon-mixins.less"; // https://github.com/atom/atom/blob/master/static/variables/octicon-mixins.less 7 | 8 | @import "styles/atom.less"; 9 | @import "styles/badges.less"; 10 | @import "styles/buttons.less"; 11 | @import "styles/docks.less"; 12 | @import "styles/editor.less"; 13 | @import "styles/git.less"; 14 | @import "styles/inputs.less"; 15 | @import "styles/lists.less"; 16 | @import "styles/messages.less"; 17 | @import "styles/nav.less"; 18 | @import "styles/notifications.less"; 19 | @import "styles/modal.less"; 20 | @import "styles/panels.less"; 21 | @import "styles/panes.less"; 22 | @import "styles/progress.less"; 23 | @import "styles/tabs.less"; 24 | @import "styles/text.less"; 25 | @import "styles/title-bar.less"; 26 | @import "styles/tooltips.less"; 27 | @import "styles/tree-view.less"; 28 | @import "styles/status-bar.less"; 29 | @import "styles/key-binding.less"; 30 | @import "styles/sites.less"; 31 | 32 | @import "styles/settings.less"; 33 | @import "styles/packages.less"; 34 | @import "styles/core.less"; 35 | @import "styles/config.less"; 36 | -------------------------------------------------------------------------------- /lib/main.coffee: -------------------------------------------------------------------------------- 1 | root = document.documentElement 2 | themeName = 'one-light-ui' 3 | 4 | 5 | module.exports = 6 | activate: (state) -> 7 | atom.config.observe "#{themeName}.fontSize", (value) -> 8 | setFontSize(value) 9 | 10 | atom.config.observe "#{themeName}.tabSizing", (value) -> 11 | setTabSizing(value) 12 | 13 | atom.config.observe "#{themeName}.tabCloseButton", (value) -> 14 | setTabCloseButton(value) 15 | 16 | atom.config.observe "#{themeName}.hideDockButtons", (value) -> 17 | setHideDockButtons(value) 18 | 19 | atom.config.observe "#{themeName}.stickyHeaders", (value) -> 20 | setStickyHeaders(value) 21 | 22 | # DEPRECATED: This can be removed at some point (added in Atom 1.17/1.18ish) 23 | # It removes `layoutMode` 24 | if atom.config.get("#{themeName}.layoutMode") 25 | atom.config.unset("#{themeName}.layoutMode") 26 | 27 | deactivate: -> 28 | unsetFontSize() 29 | unsetTabSizing() 30 | unsetTabCloseButton() 31 | unsetHideDockButtons() 32 | unsetStickyHeaders() 33 | 34 | 35 | # Font Size ----------------------- 36 | 37 | setFontSize = (currentFontSize) -> 38 | root.style.fontSize = "#{currentFontSize}px" 39 | 40 | unsetFontSize = -> 41 | root.style.fontSize = '' 42 | 43 | 44 | # Tab Sizing ----------------------- 45 | 46 | setTabSizing = (tabSizing) -> 47 | root.setAttribute("theme-#{themeName}-tabsizing", tabSizing.toLowerCase()) 48 | 49 | unsetTabSizing = -> 50 | root.removeAttribute("theme-#{themeName}-tabsizing") 51 | 52 | 53 | # Tab Close Button ----------------------- 54 | 55 | setTabCloseButton = (tabCloseButton) -> 56 | if tabCloseButton is 'Left' 57 | root.setAttribute("theme-#{themeName}-tab-close-button", 'left') 58 | else 59 | unsetTabCloseButton() 60 | 61 | unsetTabCloseButton = -> 62 | root.removeAttribute("theme-#{themeName}-tab-close-button") 63 | 64 | 65 | # Dock Buttons ----------------------- 66 | 67 | setHideDockButtons = (hideDockButtons) -> 68 | if hideDockButtons 69 | root.setAttribute("theme-#{themeName}-dock-buttons", 'hidden') 70 | else 71 | unsetHideDockButtons() 72 | 73 | unsetHideDockButtons = -> 74 | root.removeAttribute("theme-#{themeName}-dock-buttons") 75 | 76 | 77 | # Sticky Headers ----------------------- 78 | 79 | setStickyHeaders = (stickyHeaders) -> 80 | if stickyHeaders 81 | root.setAttribute("theme-#{themeName}-sticky-headers", 'sticky') 82 | else 83 | unsetStickyHeaders() 84 | 85 | unsetStickyHeaders = -> 86 | root.removeAttribute("theme-#{themeName}-sticky-headers") 87 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "one-light-ui", 3 | "theme": "ui", 4 | "version": "1.12.5", 5 | "description": "Atom One light UI theme", 6 | "keywords": [ 7 | "light", 8 | "adaptive", 9 | "ui" 10 | ], 11 | "license": "MIT", 12 | "repository": "https://github.com/atom/one-light-ui", 13 | "main": "lib/main", 14 | "engines": { 15 | "atom": ">0.40.0" 16 | }, 17 | "devDependencies": { 18 | "coffeelint": "^1.9.7" 19 | }, 20 | "configSchema": { 21 | "fontSize": { 22 | "title": "Font Size", 23 | "description": "Change the font size for the UI.", 24 | "type": "integer", 25 | "default": 12, 26 | "enum": [ 27 | 10, 28 | 11, 29 | 12, 30 | 13, 31 | 14, 32 | 15, 33 | 16, 34 | 17, 35 | 18, 36 | 19, 37 | 20 38 | ], 39 | "order": 1 40 | }, 41 | "tabSizing": { 42 | "title": "Tab Sizing", 43 | "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.", 44 | "type": "string", 45 | "default": "Even", 46 | "enum": [ 47 | "Even", 48 | "Maximum", 49 | "Minimum" 50 | ], 51 | "order": 2 52 | }, 53 | "tabCloseButton": { 54 | "title": "Tab Close Button", 55 | "description": "Choose the position of the close button shown in tabs.", 56 | "type": "string", 57 | "default": "Right", 58 | "enum": [ 59 | "Left", 60 | "Right" 61 | ], 62 | "order": 3 63 | }, 64 | "hideDockButtons": { 65 | "title": "Hide dock toggle buttons", 66 | "description": "Note: When hiding the toggle buttons, opening a dock needs to be done by using the keyboard or other alternatives.", 67 | "type": "boolean", 68 | "default": "false", 69 | "order": 4 70 | }, 71 | "stickyHeaders": { 72 | "title": "Make tree-view project headers sticky", 73 | "type": "boolean", 74 | "default": "false", 75 | "order": 5 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /spec/theme-spec.coffee: -------------------------------------------------------------------------------- 1 | themeName = 'one-light-ui' 2 | 3 | describe "#{themeName} theme", -> 4 | beforeEach -> 5 | waitsForPromise -> 6 | atom.packages.activatePackage(themeName) 7 | 8 | it "allows the font size to be set via config", -> 9 | expect(document.documentElement.style.fontSize).toBe '12px' 10 | 11 | atom.config.set("#{themeName}.fontSize", '10') 12 | expect(document.documentElement.style.fontSize).toBe '10px' 13 | 14 | it "allows the tab sizing to be set via config", -> 15 | atom.config.set("#{themeName}.tabSizing", 'Maximum') 16 | expect(document.documentElement.getAttribute("theme-#{themeName}-tabsizing")).toBe 'maximum' 17 | 18 | it "allows the tab sizing to be set via config", -> 19 | atom.config.set("#{themeName}.tabSizing", 'Minimum') 20 | expect(document.documentElement.getAttribute("theme-#{themeName}-tabsizing")).toBe 'minimum' 21 | 22 | it "allows the tab close button to be shown on the left via config", -> 23 | atom.config.set("#{themeName}.tabCloseButton", 'Left') 24 | expect(document.documentElement.getAttribute("theme-#{themeName}-tab-close-button")).toBe 'left' 25 | 26 | it "allows the dock toggle buttons to be hidden via config", -> 27 | atom.config.set("#{themeName}.hideDockButtons", true) 28 | expect(document.documentElement.getAttribute("theme-#{themeName}-dock-buttons")).toBe 'hidden' 29 | 30 | it "allows the tree-view headers to be sticky via config", -> 31 | atom.config.set("#{themeName}.stickyHeaders", true) 32 | expect(document.documentElement.getAttribute("theme-#{themeName}-sticky-headers")).toBe 'sticky' 33 | 34 | it "allows the tree-view headers to not be sticky via config", -> 35 | atom.config.set("#{themeName}.stickyHeaders", false) 36 | expect(document.documentElement.getAttribute("theme-#{themeName}-sticky-headers")).toBe null 37 | -------------------------------------------------------------------------------- /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 | 2 | @btn-border: 1px solid @button-border-color; 3 | @btn-padding: 0 @ui-size/1.25; 4 | 5 | // Mixins ----------------------- 6 | 7 | .btn-default (@color, @hover-color, @selected-color, @text-color) { 8 | color: @text-color; 9 | text-shadow: none; 10 | border: @btn-border; 11 | background-color: @color; 12 | background-image: linear-gradient(lighten(@color, 2%), @color); 13 | 14 | &:hover { 15 | color: @text-color-highlight; 16 | background-image: linear-gradient(lighten(@hover-color, 2%), @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 | } 32 | } 33 | 34 | .btn-variant (@color) { 35 | @_text-color: contrast(@color, white, hsl(0,0%,20%), 33% ); 36 | .btn-default( 37 | @color, 38 | lighten(@color, 3%), 39 | saturate(darken(@color, 12%), 20%), 40 | @text-color-highlight 41 | ); 42 | color: @_text-color; 43 | 44 | & when (@ui-lightness > 50%) { 45 | border-color: transparent; // hide border on light backgrounds 46 | } 47 | 48 | &:hover, 49 | &:focus { 50 | color: @_text-color; 51 | } 52 | &:focus { 53 | border-color: transparent; 54 | background-clip: padding-box; 55 | box-shadow: inset 0 0 0 1px fade(@base-border-color, 50%), 0 0 0 1px @color; 56 | } 57 | 58 | &.icon:before { 59 | color: @_text-color; 60 | } 61 | } 62 | 63 | 64 | // Buttons ----------------------- 65 | 66 | .btn { 67 | height: initial; 68 | padding: @btn-padding; 69 | font-size: @ui-size; 70 | line-height: @ui-line-height; 71 | } 72 | 73 | .btn, 74 | .btn.btn-default { 75 | .btn-default(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color); 76 | } 77 | 78 | .btn.btn-primary { 79 | .btn-variant(@accent-bg-color); 80 | } 81 | .btn.btn-info { 82 | .btn-variant(@background-color-info); 83 | } 84 | .btn.btn-success { 85 | .btn-variant(@background-color-success); 86 | } 87 | .btn.btn-warning { 88 | .btn-variant(@background-color-warning); 89 | } 90 | .btn.btn-error { 91 | .btn-variant(@background-color-error); 92 | } 93 | 94 | 95 | // Button Sizes ----------------------- 96 | 97 | .btn.btn-xs, 98 | .btn-group-xs > .btn { 99 | font-size: @ui-size*.8; 100 | line-height: @ui-line-height; 101 | padding: @btn-padding; 102 | } 103 | .btn.btn-sm, 104 | .btn-group-sm > .btn { 105 | font-size: @ui-size*.9; 106 | line-height: @ui-line-height; 107 | padding: @btn-padding; 108 | } 109 | .btn.btn-lg, 110 | .btn-group-lg > .btn { 111 | font-size: @ui-size * 1.5; 112 | line-height: @ui-line-height; 113 | padding: @btn-padding; 114 | } 115 | 116 | 117 | // Button Group ----------------------- 118 | 119 | .btn-group > .btn { 120 | z-index: 0; 121 | &:hover { 122 | z-index: 0; 123 | } 124 | &.btn:focus { 125 | z-index: 1; 126 | .focus(); 127 | } 128 | 129 | &:first-child { 130 | border-left: @btn-border; 131 | } 132 | &:last-child, 133 | &.selected:last-child { 134 | border-right: @btn-border; 135 | } 136 | 137 | // hide border on light backgrounds 138 | & when (@ui-lightness > 50%) { 139 | &.btn-primary:first-child, 140 | &.btn-info:first-child, 141 | &.btn-success:first-child, 142 | &.btn-warning:first-child, 143 | &.btn-error:first-child { 144 | border-left-color: transparent; 145 | } 146 | 147 | &.btn-primary:last-child, 148 | &.btn-info:last-child, 149 | &.btn-success:last-child, 150 | &.btn-warning:last-child, 151 | &.btn-error:last-child { 152 | border-right-color: transparent; 153 | } 154 | } 155 | 156 | &.selected, 157 | &.selected:first-child, 158 | &.selected:last-child { 159 | color: @button-text-color-selected; 160 | border-color: @button-border-color-selected; 161 | } 162 | 163 | & when (@ui-lightness > 50%) { 164 | &.selected + .btn { 165 | border-left-color: @button-border-color-selected; 166 | } 167 | &.selected + .selected { 168 | border-left-color: mix(@button-border-color, @button-border-color-selected); 169 | } 170 | } 171 | 172 | &.selected:focus { 173 | border-color: @button-background-color-selected; 174 | box-shadow: inset 0 0 0 1px fade(@base-border-color, 50%), 0 0 0 1px @button-background-color-selected; 175 | } 176 | } 177 | 178 | 179 | // Button Icons ----------------------- 180 | 181 | .btn.icon:before { 182 | width: auto; 183 | height: auto; 184 | font-size: 1.333333em; 185 | vertical-align: -.1em; 186 | } 187 | -------------------------------------------------------------------------------- /styles/config.less: -------------------------------------------------------------------------------- 1 | 2 | // Theme config 3 | // This gets changed from the theme settings 4 | 5 | @theme-tabsizing: ~'theme-@{ui-theme-name}-tabsizing'; 6 | @theme-dockButtons: ~'theme-@{ui-theme-name}-dock-buttons'; 7 | @theme-stickyHeaders: ~'theme-@{ui-theme-name}-sticky-headers'; 8 | @theme-closeButton: ~'theme-@{ui-theme-name}-tab-close-button'; 9 | 10 | 11 | // Tabs ---------------------------------------------- 12 | 13 | @tab-min-width: 7em; // ~ icon + 6 characters 14 | 15 | // Even (default) 16 | 17 | .tab-bar { 18 | .tab, 19 | .tab.active { 20 | flex: 1 1 0; 21 | max-width: 22em; 22 | min-width: @tab-min-width; 23 | } 24 | atom-dock & { 25 | .tab, 26 | .tab.active { 27 | max-width: none; 28 | } 29 | } 30 | 31 | // TODO: Turn this into a config 32 | // Truncates the beginning instead 33 | // .title.title.title { 34 | // direction: rtl; // change direction 35 | // } 36 | } 37 | 38 | 39 | // Maximum (full width) 40 | 41 | [@{theme-tabsizing}="maximum"] .tab-bar { 42 | .tab, 43 | .tab.active { 44 | max-width: none; 45 | } 46 | } 47 | 48 | 49 | // Minimum (show long paths) 50 | 51 | [@{theme-tabsizing}="minimum"] .tab-bar { 52 | .tab, 53 | .tab.active { 54 | flex: 0 0 auto; 55 | min-width: 2.75em; 56 | max-width: @tab-min-width * 3.3; 57 | } 58 | atom-dock { 59 | .tab, 60 | .tab.active { 61 | max-width: @tab-min-width * 2; 62 | } 63 | } 64 | } 65 | 66 | 67 | // Tabs: close button position ------------------------------ 68 | 69 | [@{theme-closeButton}="left"] { 70 | 71 | .tab-bar .tab { 72 | .close-icon { 73 | right: auto; 74 | left: @icon-padding-right; 75 | } 76 | } 77 | 78 | } 79 | 80 | 81 | // Hide docks toggle buttons ------------------------------ 82 | 83 | [@{theme-dockButtons}="hidden"] { 84 | 85 | // Hide docks when not open 86 | .atom-dock-inner:not(.atom-dock-open) { 87 | display: none; 88 | } 89 | 90 | // Hide toggle buttons 91 | .atom-dock-toggle-button { 92 | display: none; 93 | } 94 | 95 | } 96 | 97 | 98 | // Sticky Projects ------------------------------ 99 | 100 | [@{theme-stickyHeaders}="sticky"] { 101 | 102 | .tree-view { 103 | .project-root-header { 104 | position: sticky; 105 | top: 0; 106 | z-index: 3; 107 | padding-left: 5px; 108 | padding-right: 10px; 109 | border-bottom: 1px solid @base-border-color; 110 | background-color: @tree-view-background-color; 111 | } 112 | .project-root.project-root { 113 | margin-left: -5px; 114 | margin-right: -10px; 115 | 116 | // Disable selection 117 | &::before { 118 | display: none; 119 | } 120 | 121 | // Add selection back 122 | &.selected .project-root-header { 123 | background-color: @background-color-selected; 124 | } 125 | } 126 | &:focus .selected .project-root-header.project-root-header { 127 | background: @button-background-color-selected; 128 | } 129 | 130 | // Fix sticky header from covering auto-revealed files 131 | .entry.file.selected { 132 | padding-top: @ui-tab-height; 133 | margin-top: -@ui-tab-height; 134 | } 135 | 136 | // Fix sticky header from covering auto-revealed directories when using up/down keys 137 | // for directories, scroll test moves to .header, see https://github.com/atom/tree-view/blob/d2857ad4d7eeb7dad5cf94b33257a8740211480e/lib/tree-view.coffee#L839 138 | .entry.directory.selected:not(.project-root) { 139 | & > .header { 140 | padding-top: @ui-tab-height; 141 | margin-top: -@ui-tab-height; 142 | } 143 | &::before { 144 | margin-top: @ui-tab-height; 145 | } 146 | } 147 | 148 | // Fix above directory is not being clickable 149 | .entry.directory:not(.project-root) > .header { 150 | z-index: 2; 151 | } 152 | .entry.directory.selected:not(.project-root) > .header { 153 | z-index: 1; 154 | } 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /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/docks.less: -------------------------------------------------------------------------------- 1 | 2 | // Docks ------------------------------ 3 | 4 | // Make handles not take up any space when dock is open 5 | .atom-dock-resize-handle { 6 | position: absolute; 7 | z-index: 11; // same as toggle buttons 8 | 9 | &.left { 10 | top: 0; 11 | right: 0; 12 | bottom: 0; 13 | } 14 | &.right { 15 | top: 0; 16 | left: 0; 17 | bottom: 0; 18 | } 19 | &.bottom { 20 | top: 0; 21 | left: 0; 22 | right: 0; 23 | } 24 | } 25 | 26 | // Add borders 27 | .atom-dock-inner.atom-dock-open.left { 28 | border-right: 1px solid @base-border-color; 29 | } 30 | .atom-dock-inner.atom-dock-open.right { 31 | border-left: 1px solid @base-border-color; 32 | } 33 | 34 | // Make toggle buttons cover ^ border 35 | .atom-dock-toggle-button.left { 36 | margin-left: -2px; 37 | } 38 | .atom-dock-toggle-button.right { 39 | margin-right: -2px; 40 | } 41 | .atom-dock-inner:not(.atom-dock-open) .atom-dock-toggle-button.bottom { 42 | margin-bottom: -1px; 43 | } 44 | -------------------------------------------------------------------------------- /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 | 2 | // Editor in a panel 3 | 4 | // TODO: Find a better selector, maybe a new class like atom-text-editor[medium] 5 | atom-panel-container atom-text-editor.is-focused { 6 | .focus(); 7 | } 8 | 9 | 10 | // Mini 11 | // Usually just single line inputs 12 | 13 | atom-text-editor[mini] { 14 | overflow: auto; 15 | font-size: @ui-input-size; 16 | line-height: @ui-line-height; 17 | max-height: @ui-line-height * 5; // rows 18 | padding-left: @ui-padding/3; 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 | // 3 | // Checkbox 4 | // ------------------------- 5 | 6 | .input-checkbox { 7 | &:active { 8 | background-color: @accent-color; 9 | } 10 | &:before, 11 | &:after { 12 | background-color: @accent-text-color; 13 | } 14 | &:checked { 15 | background-color: @accent-color; 16 | } 17 | 18 | &:indeterminate { 19 | background-color: @accent-color; 20 | } 21 | } 22 | 23 | 24 | // 25 | // Radio 26 | // ------------------------- 27 | 28 | .input-radio { 29 | &:before { 30 | background-color: @accent-text-color; 31 | } 32 | &:active { 33 | background-color: @accent-color; 34 | } 35 | &:checked { 36 | background-color: @accent-color; 37 | } 38 | } 39 | 40 | 41 | // 42 | // Range (Slider) 43 | // ------------------------- 44 | 45 | .input-range { 46 | &::-webkit-slider-thumb { 47 | background-color: @accent-color; 48 | } 49 | } 50 | 51 | 52 | // 53 | // Toggle 54 | // ------------------------- 55 | 56 | .input-toggle { 57 | &:checked { 58 | background-color: @accent-color; 59 | } 60 | &:before { 61 | background-color: @accent-text-color; 62 | } 63 | } 64 | 65 | 66 | 67 | // States ------------------------- 68 | 69 | .input-text, 70 | .input-search, 71 | .input-number, 72 | .input-textarea, 73 | .input-select, 74 | .input-color { 75 | &:focus { 76 | .focus(); 77 | } 78 | } 79 | 80 | .input-text, 81 | .input-search, 82 | .input-number, 83 | .input-textarea { 84 | &:invalid { 85 | .invalid(); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /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 | // Reset icon to allow nesting 67 | .icon { 68 | display: initial; 69 | height: initial; 70 | } 71 | 72 | // We want to highlight the background of the list items because we dont 73 | // know their size. 74 | li.selected { 75 | background-color: @background-color-selected; 76 | &:before{ display: none; } 77 | } 78 | 79 | &.mark-active { 80 | @active-icon-size: 14px; 81 | 82 | // pad in front of the text where the icon would be We'll pad the non- 83 | // active items with a 'fake' icon so other classes can pad the item 84 | // without worrying about the icon padding. 85 | li:before { 86 | content: ''; 87 | background-color: transparent; 88 | position: static; 89 | display: inline-block; 90 | left: auto; right: auto; 91 | height: @active-icon-size; 92 | width: @active-icon-size; 93 | font-size: @active-icon-size; 94 | } 95 | > li:not(.active):before { 96 | margin-right: @ui-padding-icon; 97 | } 98 | li.active { 99 | .octicon(check, @active-icon-size); 100 | &:before { 101 | margin-right: @ui-padding-icon; 102 | color: @text-color-success; 103 | } 104 | } 105 | } 106 | } 107 | 108 | .select-list.popover-list { 109 | @popover-list-padding: @ui-padding/4; 110 | background-color: @overlay-background-color; 111 | box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.3); 112 | padding: @popover-list-padding; 113 | border-radius: @component-border-radius; 114 | 115 | atom-text-editor[mini] { 116 | margin-bottom: @popover-list-padding; 117 | } 118 | 119 | ol.list-group { 120 | margin-top: @popover-list-padding; 121 | } 122 | 123 | .list-group li { 124 | padding-left: @popover-list-padding; 125 | } 126 | } 127 | 128 | .ui-sortable { 129 | li { 130 | line-height: 2.5; 131 | } 132 | 133 | // For sortable lists in the settings view 134 | li.ui-sortable-placeholder { 135 | visibility: visible !important; 136 | background-color: darken(@pane-item-background-color, 10%); 137 | } 138 | } 139 | 140 | li.ui-draggable-dragging, 141 | li.ui-sortable-helper { 142 | line-height: @ui-line-height; 143 | height: @ui-line-height; 144 | border: 0; 145 | border-radius: 0; 146 | list-style: none; 147 | padding: 0 @ui-padding; 148 | background: @background-color-highlight; 149 | box-shadow: 0 0 1px @base-border-color; 150 | } 151 | -------------------------------------------------------------------------------- /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 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /styles/modal.less: -------------------------------------------------------------------------------- 1 | 2 | @modal-padding: @ui-padding/2 @ui-padding/1.5; 3 | @modal-width: @ui-size * 50; 4 | 5 | atom-panel-container.modal { 6 | position: absolute; 7 | top: 0; left: 0; right: 0; 8 | } 9 | 10 | atom-panel.modal { 11 | position: relative; 12 | width: 100%; 13 | max-width: @modal-width; 14 | margin: 0 auto; 15 | left: initial; 16 | color: @text-color; 17 | background-color: transparent; 18 | padding: @ui-padding/2; 19 | 20 | &.from-top { 21 | top: @component-padding * 5; 22 | } 23 | 24 | atom-text-editor[mini] { 25 | margin-bottom: @ui-padding/2; 26 | } 27 | 28 | .select-list ol.list-group, 29 | &.select-list ol.list-group { 30 | border: 1px solid @overlay-border-color; 31 | background-color: lighten(@overlay-background-color, 2%); 32 | 33 | &:empty { 34 | border: none; 35 | margin-top: 0; 36 | } 37 | 38 | li { 39 | padding: @modal-padding; 40 | line-height: @ui-line-height; 41 | border-bottom: 1px solid @overlay-border-color; 42 | 43 | &:last-of-type { 44 | border-bottom: none; 45 | } 46 | 47 | .icon::before { 48 | margin-left: 1px; 49 | } 50 | 51 | .icon.status { 52 | float: right; 53 | margin-left: @ui-padding-icon; 54 | &:before { 55 | margin-left: 0; 56 | margin-right: 0; 57 | } 58 | } 59 | 60 | &.selected { 61 | .status.icon { 62 | color: @text-color-selected; 63 | } 64 | } 65 | } 66 | 67 | } 68 | 69 | .select-list .key-binding { 70 | margin-top: -1px; 71 | margin-left: @ui-padding/2; 72 | margin-right: calc( -@ui-padding/3 ~"+" 1px); 73 | } 74 | 75 | .select-list .primary-line { 76 | display: block; 77 | } 78 | 79 | & > * { 80 | position: relative; // fixes stacking order 81 | } 82 | 83 | .command-palette { 84 | padding: 1px; // prevents the box-shadow of the input from being cut off 85 | background-color: @overlay-background-color; 86 | } 87 | 88 | 89 | // Container 90 | &:before { 91 | content: ""; 92 | position: absolute; 93 | top: 0; 94 | left: 0; 95 | right: 0; 96 | bottom: 0; 97 | z-index: 0; 98 | background-color: @overlay-background-color; 99 | border-radius: @component-border-radius*2; 100 | box-shadow: 0 6px 12px -2px hsla(0,0%,0%,.4); 101 | } 102 | 103 | // Backdrop 104 | // TODO: Add extra wrapper to translate individually or easier positioning 105 | 106 | &:after { 107 | content: ""; 108 | position: fixed; 109 | top: 0; 110 | left: 0; 111 | right: 0; 112 | bottom: 0; 113 | z-index: -1; 114 | background: @overlay-backdrop-color; 115 | opacity: @overlay-backdrop-opacity; 116 | backface-visibility: hidden; // fixes scrollbar on retina screens 117 | -webkit-animation: overlay-fade .24s cubic-bezier(0.215, 0.61, 0.355, 1); 118 | } 119 | 120 | @-webkit-keyframes overlay-fade { 121 | 0% { opacity: 0; } 122 | 100% { opacity: @overlay-backdrop-opacity; } 123 | } 124 | 125 | } 126 | -------------------------------------------------------------------------------- /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 | 2 | atom-notifications { 3 | font-size: @ui-size * 1.2; 4 | 5 | atom-notification { 6 | width: 32em; 7 | &.has-detail { 8 | width: 32em; 9 | } 10 | 11 | &:first-child.has-close .message { 12 | padding-right: 9em; 13 | } 14 | &:only-child.has-close .message, 15 | &.has-close .message { 16 | padding-right: 2.5em; 17 | } 18 | .item { 19 | padding: @ui-padding/2; 20 | } 21 | 22 | .detail, 23 | .description { 24 | font-size: .85em; 25 | } 26 | 27 | &.icon:before { 28 | padding-top: .85em; 29 | } 30 | .close { 31 | width: 2.5em; 32 | height: 3em; 33 | line-height: 3em; 34 | font-size: inherit; 35 | } 36 | .close-all.btn { 37 | top: .5em; 38 | right: 2.5em; 39 | } 40 | .btn-copy-report { 41 | line-height: 2em; 42 | margin-left: .5em; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /styles/packages.less: -------------------------------------------------------------------------------- 1 | // Overrides packages 2 | 3 | // find-and-replace + project-find --------------------------- 4 | 5 | .find-and-replace, 6 | .project-find { 7 | padding: @ui-padding/4; 8 | .input-block-item { 9 | padding: @ui-padding/4; 10 | } 11 | } 12 | 13 | // find-and-replace 14 | .find-and-replace { 15 | .header, 16 | .input-block { 17 | min-width: @ui-size*22; 18 | } 19 | 20 | .input-block-item { 21 | flex: 1 1 @ui-size*22; 22 | } 23 | .input-block-item--flex { 24 | flex: 100 1 @ui-size*22; 25 | } 26 | 27 | .btn, 28 | .btn-group-options .btn { 29 | font-size: @ui-size*1.1; 30 | padding: 0; 31 | } 32 | 33 | .btn-group-options .btn, 34 | .btn-group-options .btn.option-selection, 35 | .btn-group-options .btn.option-whole-word { 36 | padding: 0; 37 | font-size: @ui-input-size; // keep same as text input 38 | } 39 | 40 | .find-container atom-text-editor { 41 | padding-right: @ui-size*5; // leave some room for the results count 42 | } 43 | .find-meta-container { 44 | top: 0; 45 | font-size: @ui-size; 46 | line-height: @ui-size*2.5; 47 | } 48 | } 49 | 50 | // project-find 51 | .project-find { 52 | .header, 53 | .input-block { 54 | min-width: @ui-size*15; 55 | } 56 | 57 | .input-block-item { 58 | flex: 1 1 @ui-size*14; 59 | } 60 | .input-block-item--flex { 61 | flex: 100 1 @ui-size*20; 62 | } 63 | 64 | .btn { 65 | font-size: @ui-size*1.1; 66 | padding: 0; 67 | } 68 | .btn-group-options .btn { 69 | padding: 0; 70 | font-size: @ui-input-size; // keep same as text input 71 | } 72 | } 73 | 74 | // Colorize find-and-replace based on results 75 | & when (@ui-hue >= 190) and (@ui-hue <= 340) { 76 | .find-and-replace { 77 | &.has-no-results .find-container atom-text-editor[mini].is-focused { 78 | .invalid(); 79 | .selection .region { 80 | background-color: mix(@text-color-error, @input-background-color, 50%); 81 | } 82 | .cursor { 83 | border-color: @text-color-error; 84 | } 85 | } 86 | 87 | &.has-results .find-container atom-text-editor[mini].is-focused { 88 | .valid(); 89 | .selection .region { 90 | background-color: mix(@text-color-success, @input-background-color, 50%); 91 | } 92 | .cursor { 93 | border-color: @text-color-success; 94 | } 95 | } 96 | 97 | &.has-results .find-container .result-counter { color: @text-color-success; } 98 | &.has-no-results .find-container .result-counter { color: @text-color-error; } 99 | } 100 | } 101 | 102 | 103 | 104 | 105 | // Timecop --------------------------- 106 | 107 | .timecop { 108 | .timecop-panel { 109 | padding: @component-padding/2; 110 | background-color: @level-2-color; 111 | } 112 | 113 | .tool-panel { 114 | padding: @component-padding/2; 115 | background-color: @level-2-color; 116 | } 117 | 118 | .inset-panel { 119 | border: 1px solid @base-border-color; 120 | } 121 | 122 | .panel-heading { 123 | .text(highlight); 124 | border-color: @base-border-color; 125 | background-color: @level-1-color; 126 | } 127 | 128 | .list-item .inline-block { 129 | line-height: 1.5; 130 | } 131 | } 132 | 133 | 134 | // Command Palette + Fuzzy Finder --------------------------- 135 | 136 | .command-palette .list-group .character-match, 137 | .fuzzy-finder .list-group .character-match { 138 | color: @accent-only-text-color; 139 | } 140 | 141 | 142 | // Deprecation Cop --------------------------- 143 | 144 | .deprecation-cop { 145 | .deprecation-overview { 146 | background-color: @level-2-color; 147 | border-bottom: 1px solid @base-border-color; 148 | } 149 | } 150 | 151 | 152 | // Tool Bar --------------------------- 153 | 154 | .tool-bar { 155 | // Make it look the same as other panels 156 | background-color: @level-3-color; 157 | border: none; 158 | 159 | // just a single border + more spacing 160 | &.tool-bar-horizontal .tool-bar-spacer { 161 | border-left: 0 none; 162 | margin-left: .5em; 163 | margin-right: .5em; 164 | } 165 | &.tool-bar-vertical .tool-bar-spacer { 166 | border-bottom: 0 none; 167 | margin-top: .5em; 168 | margin-bottom: .5em; 169 | } 170 | 171 | // only show button styles on hover 172 | button.tool-bar-btn { 173 | background-color: @level-3-color; 174 | background-image: none; 175 | border-color: @level-3-color; 176 | } 177 | } 178 | 179 | 180 | 181 | // GitHub package --------------------------------------------------- 182 | 183 | .github { 184 | 185 | // Fix focus styles 186 | // Since it's not possible to add a padding to 187 | // a pseudo element is used to add the border when focused. 188 | &-CommitView-editor atom-text-editor.is-focused { 189 | box-shadow: none; 190 | &:before { 191 | content: ""; 192 | position: absolute; 193 | top: -2px; 194 | left: -2px; 195 | right: -2px; 196 | bottom: -2px; 197 | border: 2px solid; 198 | border-color: inherit; 199 | border-radius: @component-border-radius; 200 | } 201 | } 202 | 203 | // Add focus styles since :focus doesn't work 204 | &-CommitView-coAuthorEditor { 205 | &.is-focused { 206 | .focus(); 207 | } 208 | &.is-open { 209 | border-top-left-radius: 0; 210 | border-top-right-radius: 0; 211 | } 212 | 213 | 214 | .Select-option { 215 | &.is-focused { 216 | border-bottom-left-radius: 0; 217 | border-bottom-right-radius: 0; 218 | color: @accent-text-color; 219 | background-color: @accent-color; 220 | } 221 | } 222 | .Select-menu-outer { 223 | left: -2px; 224 | right: -2px; 225 | bottom: 100%; 226 | border: 2px solid @accent-color; 227 | background-color: @overlay-background-color; 228 | } 229 | } 230 | 231 | } 232 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | 2 | // Panels 3 | 4 | atom-panel { 5 | .text(normal); 6 | position: relative; 7 | border-bottom: 1px solid @base-border-color; 8 | 9 | &.top { 10 | border-right: 1px solid @base-border-color; 11 | } 12 | &.left { 13 | border-right: 1px solid @base-border-color; 14 | } 15 | &.right { 16 | border-left: 1px solid @base-border-color; 17 | } 18 | &.bottom { 19 | border-right: 1px solid @base-border-color; 20 | } 21 | &.footer:last-child { 22 | border-bottom: none; 23 | } 24 | &.tool-panel:empty { 25 | border: none; 26 | } 27 | } 28 | 29 | .panel { 30 | &.bordered { 31 | border: 1px solid @base-border-color; 32 | border-radius: @component-border-radius; 33 | } 34 | } 35 | 36 | .inset-panel { 37 | position: relative; 38 | background-color: @inset-panel-background-color; 39 | border-radius: @component-border-radius; 40 | &.bordered { 41 | border: 1px solid @base-border-color; 42 | border-radius: @component-border-radius; 43 | } 44 | & .panel-heading { 45 | border-color: @inset-panel-border-color; 46 | } 47 | } 48 | 49 | .panel-heading { 50 | .text(normal); 51 | border-bottom: 1px solid @panel-heading-border-color; 52 | background-color: @panel-heading-background-color; 53 | 54 | .btn { 55 | padding-left: 8px; 56 | padding-right: 8px; 57 | .btn-default( 58 | lighten(@button-background-color, 10%), 59 | lighten(@button-background-color-hover, 10%), 60 | lighten(@button-background-color-selected, 10%), 61 | lighten(@text-color, 10%) 62 | ); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /styles/panes.less: -------------------------------------------------------------------------------- 1 | 2 | atom-pane-container { 3 | 4 | atom-pane { 5 | position: relative; 6 | border-right: 1px solid @base-border-color; 7 | border-bottom: 1px solid @base-border-color; 8 | 9 | .item-views { 10 | // prevent atom-text-editor from leaking ouside might improve performance 11 | overflow: hidden; 12 | } 13 | } 14 | 15 | } 16 | 17 | // Hide right-most border 18 | atom-pane:only-child, 19 | atom-pane-axis.pane-row > atom-pane:last-child, 20 | atom-pane-axis.pane-column:last-child > atom-pane { 21 | border-right: none; 22 | } 23 | -------------------------------------------------------------------------------- /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 | 2 | // Settings 3 | 4 | // Modular Scale (1.125): http://www.modularscale.com/?1&em&1.125&web&table 5 | @ms-6: @ui-size * 2.027; 6 | @ms-5: @ui-size * 1.802; 7 | @ms-4: @ui-size * 1.602; 8 | @ms-3: @ui-size * 1.424; 9 | @ms-2: @ui-size * 1.266; 10 | @ms-1: @ui-size * 1.125; 11 | @ms-0: @ui-size * 1; 12 | @ms_1: @ui-size * 0.889; 13 | @ms_2: @ui-size * 0.790; 14 | 15 | 16 | 17 | .settings-view { 18 | 19 | // Menu ------------------------------ 20 | 21 | .config-menu { 22 | position: relative; 23 | min-width: @ui-size * 15; 24 | max-width: @ui-size * 20; 25 | border-width: 0 1px 0 0; 26 | border-image: linear-gradient(@level-2-color 10px, @base-border-color 200px) 0 1 0 0 stretch; 27 | background: @level-2-color; 28 | 29 | .btn { 30 | white-space: initial; 31 | font-size: @ms_1; 32 | line-height: 1; 33 | padding: @ui-padding/3 @ui-padding/2; 34 | &::before { 35 | vertical-align: middle; 36 | } 37 | } 38 | 39 | 40 | } 41 | .nav { 42 | & > li > a { 43 | padding: @ui-padding/2 @ui-padding; 44 | line-height: @ui-line-height; 45 | } 46 | } 47 | 48 | 49 | // Sections ------------------------------ 50 | 51 | & > .panels { 52 | background-color: @level-2-color; 53 | } 54 | 55 | .section-container { 56 | max-width: @ui-size*60; 57 | } 58 | .sub-section { 59 | margin: @ui-padding*3 0; 60 | } 61 | 62 | .section, 63 | .section:first-child, 64 | .section:last-child { 65 | padding: @ui-padding*3; 66 | } 67 | 68 | .themes-panel .control-group { 69 | margin-top: @ui-padding*2; 70 | } 71 | 72 | 73 | // Titles ------------------------------ 74 | 75 | .section .section-heading { 76 | margin-bottom: @ui-padding/1.5; 77 | } 78 | 79 | .sub-section-heading.icon:before, 80 | .section-heading.icon:before { 81 | margin-right: @ui-padding-icon; 82 | } 83 | 84 | 85 | 86 | // Cards ------------------------------ 87 | 88 | .package-card { 89 | padding: @ui-padding; 90 | .meta-controls .status-indicator { 91 | width: @ui-padding/4; 92 | &:before { 93 | content: "\00a0"; // fixes 0 height 94 | } 95 | } 96 | } 97 | 98 | 99 | // Components ------------------------------ 100 | 101 | .icon::before { 102 | color: @text-color-subtle; 103 | } 104 | 105 | .editor-container { 106 | margin: @ui-padding 0; 107 | } 108 | 109 | .form-control { 110 | font-size: @ui-size*1.25; 111 | height: @ui-line-height; 112 | padding-top: 0; 113 | padding-bottom: 0; 114 | } 115 | 116 | .update-all-button { 117 | font-size: .75em; 118 | } 119 | 120 | .install-button { 121 | .btn-variant(@accent-bg-color); 122 | } 123 | 124 | input[type="checkbox"] { 125 | background-color: @background-color-selected; 126 | &:active, 127 | &:checked { 128 | background-color: @accent-color; 129 | } 130 | &:before, 131 | &:after { 132 | background-color: @accent-text-color; 133 | } 134 | } 135 | 136 | .search-container .btn { 137 | font-size: @ui-input-size; 138 | } 139 | 140 | } 141 | -------------------------------------------------------------------------------- /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 | 2 | @status-bar-height: @ui-tab-height; // same as tabs 3 | @status-bar-padding: @ui-padding; 4 | 5 | .status-bar { 6 | font-size: @ui-size; 7 | height: @status-bar-height; 8 | line-height: @status-bar-height; 9 | background-color: @level-3-color; 10 | 11 | .flexbox-repaint-hack { 12 | padding: 0; // override default 13 | } 14 | 15 | // underlines should only be used for external links 16 | a:hover, 17 | a:focus { 18 | text-decoration: none; 19 | cursor: default; 20 | } 21 | 22 | .inline-block { 23 | margin: 0; // override default 24 | padding: 0 @status-bar-padding/2; 25 | vertical-align: top; 26 | 27 | &:hover { 28 | text-decoration: none; 29 | background-color: @level-3-color-hover; 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 | .icon { 48 | vertical-align: middle; 49 | } 50 | .icon::before { 51 | font-size: 1.33333em; // should be 16px with a default of 12px 52 | width: auto; // use natural width 53 | line-height: 1; 54 | height: 1em; // same as line-height 55 | margin-right: .25em; 56 | top: auto; 57 | } 58 | } 59 | 60 | 61 | // Package overrides ------------------------------- 62 | 63 | .status-bar.status-bar { 64 | 65 | // Read-only -> Remove hover effect 66 | .is-read-only, // <- use this class in packages 67 | status-bar-launch-mode, 68 | busy-signal { 69 | &:hover, 70 | &:active, 71 | .inline-block:hover, 72 | .inline-block:active { 73 | background-color: transparent; 74 | } 75 | } 76 | 77 | // Remove underline 78 | .package-updates-status-view, 79 | .github-ChangedFilesCount { 80 | &:hover, 81 | &:focus { 82 | text-decoration: none; 83 | cursor: default; 84 | } 85 | } 86 | 87 | // Remove margin for icon without text 88 | status-bar-launch-mode::before, // Launch mode 89 | .about-release-notes::before, // New release squirrel 90 | .PortalStatusBarIndicator .icon::before, // Teletype 91 | .icon.is-icon-only::before { 92 | margin-right: 0; 93 | } 94 | .github-PushPull-label.is-push:empty { // GitHub package when nothing to push 95 | margin-right: -.25em; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | 2 | // Tabs 3 | 4 | @tab-border: 1px solid @tab-border-color; 5 | @title-padding: .66em; 6 | @icon-padding-top: .5em; // 2.5 (total) - 1.5 (text) / 2 7 | @icon-padding-right: .5em; 8 | 9 | .tab-bar { 10 | position: relative; 11 | height: @ui-tab-height; 12 | box-shadow: inset 0 -1px 0 @tab-border-color; 13 | background: @tab-bar-background-color; 14 | overflow-x: auto; 15 | overflow-y: hidden; 16 | border-radius: 0; 17 | 18 | &::-webkit-scrollbar { 19 | display: none; 20 | } 21 | 22 | &:empty { 23 | display: none; 24 | } 25 | 26 | 27 | // Tab ---------------------- 28 | 29 | .tab { 30 | position: relative; 31 | top: 0; 32 | padding: 0; 33 | margin: 0; 34 | height: inherit; 35 | font-size: inherit; 36 | line-height: @ui-tab-height; 37 | color: @tab-text-color; 38 | background-color: @tab-background-color; 39 | box-shadow: inherit; 40 | border-left: @tab-border; 41 | &.active { 42 | color: @tab-text-color-active; 43 | background-color: @tab-background-color-active; 44 | box-shadow: none; 45 | } 46 | &:first-of-type { 47 | border-left-color: transparent; 48 | } 49 | &:last-of-type { 50 | // use box-shadow to not take up any space 51 | box-shadow: inset 0 -1px 0 @tab-border-color, 1px 0 0 @base-border-color; 52 | } 53 | &.active:last-of-type { 54 | box-shadow: 1px 0 0 @base-border-color; 55 | } 56 | 57 | 58 | // Title ---------------------- 59 | 60 | .title { 61 | text-align: center; 62 | margin: 0 @title-padding; 63 | } 64 | 65 | // VCS coloring ---------------------- 66 | &:not(.active) .status-added { color: @tab-inactive-status-added; } 67 | &:not(.active) .status-modified { color: @tab-inactive-status-modified; } 68 | 69 | 70 | // Icons ---------------------- 71 | 72 | .title.title:before { 73 | margin-right: .3em; 74 | width: auto; 75 | height: auto; 76 | line-height: 1; 77 | font-size: 1.125em; 78 | vertical-align: -.0625em; // Adjust center for the 0.1em font-size increase 79 | } 80 | 81 | // Close icon ---------------------- 82 | 83 | .close-icon { 84 | top: @icon-padding-top; 85 | right: @icon-padding-right; 86 | z-index: 2; 87 | font-size: 1em; 88 | width: 1.5em; 89 | height: 1.5em; 90 | line-height: 1.5; 91 | text-align: center; 92 | border-radius: @component-border-radius; 93 | background-color: inherit; 94 | overflow: hidden; 95 | transform: scale(0); 96 | transition: transform .08s; 97 | &:hover { 98 | color: @accent-text-color; 99 | background-color: @accent-color; 100 | } 101 | &:active { 102 | background-color: fade(@accent-color, 50%); 103 | } 104 | &::before { 105 | z-index: 1; 106 | font-size: 1.1em; 107 | vertical-align: -.05em; // Adjust center for the 0.1em font-size increase 108 | width: auto; 109 | height: auto; 110 | pointer-events: none; 111 | } 112 | } 113 | &:hover .close-icon { 114 | transform: scale(1); 115 | transition-duration: .16s; 116 | } 117 | } 118 | 119 | // Modified icon ---------------------- 120 | 121 | .tab.modified { 122 | &:hover .close-icon { 123 | color: @accent-color; 124 | &:hover { 125 | color: @accent-bg-text-color; 126 | } 127 | } 128 | &:not(:hover) .close-icon { 129 | top: @icon-padding-top; 130 | right: @icon-padding-right; 131 | width: 1.5em; 132 | height: 1.5em; 133 | line-height: 1.5; 134 | color: @accent-color; 135 | border-radius: @component-border-radius; 136 | border: none; 137 | transform: scale(1); 138 | &::before { 139 | content: "\f052"; 140 | display: inline-block; 141 | } 142 | } 143 | } 144 | 145 | 146 | // Tabs in the docks ---------------------- 147 | 148 | atom-dock & { 149 | .tab.active { 150 | background-color: @tool-panel-background-color; 151 | } 152 | } 153 | 154 | 155 | // Dragging ---------------------- 156 | 157 | .tab.is-dragging { 158 | opacity: .5; 159 | 160 | .close-icon, 161 | &:before { 162 | visibility: hidden; 163 | } 164 | } 165 | 166 | .placeholder { 167 | position: relative; 168 | pointer-events: none; 169 | 170 | // bar 171 | &:before { 172 | z-index: 1; 173 | margin: 0; 174 | width: 2px; 175 | height: @ui-tab-height; 176 | background-color: @accent-color; 177 | } 178 | 179 | // arrow 180 | &:after { 181 | z-index: 0; 182 | top: @ui-tab-height/2; 183 | margin: -4px 0 0 -3px; 184 | border-radius: 0; 185 | border: 4px solid @accent-color; 186 | transform: rotate(45deg); 187 | background: transparent; 188 | } 189 | 190 | &:last-child { 191 | &:before { 192 | margin-left: -2px; 193 | } 194 | &:after { 195 | transform: none; 196 | margin-left: -10px; 197 | border-color: transparent @accent-color transparent transparent; 198 | } 199 | } 200 | } 201 | 202 | 203 | // Overrides ---------------------- 204 | 205 | // keep tabs same size when active 206 | .tab, 207 | .tab.active { 208 | padding-right: 0; 209 | .title { 210 | padding: 0; 211 | } 212 | } 213 | } 214 | 215 | 216 | // Active pane marker -------------- 217 | 218 | atom-pane-axis > atom-pane.active, 219 | atom-pane-container > atom-pane.pane { 220 | .tab.active:before { 221 | content: ""; 222 | position: absolute; 223 | pointer-events: none; 224 | z-index: 2; 225 | top: 0; 226 | left: -1px; // cover left border 227 | bottom: 0; 228 | width: 2px; 229 | background: @accent-color; 230 | } 231 | } 232 | 233 | // hide marker in docks 234 | atom-dock .tab-bar .tab::before { 235 | display: none; 236 | } 237 | 238 | 239 | // Custom tabs -------------- 240 | 241 | .tab-bar .tab.active { 242 | &[data-type$="Editor"], 243 | &[data-type$="AboutView"], 244 | &[data-type$="TimecopView"], 245 | &[data-type$="StyleguideView"], 246 | &[data-type="MarkdownPreviewView"] { 247 | color: @tab-text-color-editor; 248 | background-color: @tab-background-color-editor; // Match syntax background color 249 | } 250 | } 251 | -------------------------------------------------------------------------------- /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/title-bar.less: -------------------------------------------------------------------------------- 1 | .title-bar { 2 | height: 22px; // remove 1px since there is no border 3 | border-bottom: none; 4 | } 5 | -------------------------------------------------------------------------------- /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 | white-space: nowrap; 17 | max-width: none; 18 | } 19 | 20 | .keystroke { 21 | font-size: max(1em, @ui-size*.85); 22 | padding: .1em .4em; 23 | margin: 0 @ui-padding*-.35 0 @ui-padding*.25; 24 | border-radius: max(2px, @component-border-radius / 2); 25 | color: @tooltip-text-key-color; 26 | background: @tooltip-background-key-color; 27 | } 28 | 29 | &.top .tooltip-arrow { 30 | border-top-color: @tooltip-background-color; 31 | } 32 | &.top-left .tooltip-arrow { 33 | border-top-color: @tooltip-background-color; 34 | } 35 | &.top-right .tooltip-arrow { 36 | border-top-color: @tooltip-background-color; 37 | } 38 | &.right .tooltip-arrow { 39 | border-right-color: @tooltip-background-color; 40 | } 41 | &.left .tooltip-arrow { 42 | border-left-color: @tooltip-background-color; 43 | } 44 | &.bottom .tooltip-arrow { 45 | border-bottom-color: @tooltip-background-color; 46 | } 47 | &.bottom-left .tooltip-arrow { 48 | border-bottom-color: @tooltip-background-color; 49 | } 50 | &.bottom-right .tooltip-arrow { 51 | border-bottom-color: @tooltip-background-color; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | @tree-view-height: @ui-line-height; 2 | 3 | .tree-view { 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 state 18 | .selected:before { 19 | background: @background-color-selected; 20 | } 21 | 22 | // Focus + selected state 23 | &:focus { 24 | .selected.list-item > .name, // files 25 | .selected.list-nested-item > .list-item > .name, // folders 26 | .selected.list-nested-item > .header:before { // arrow icon 27 | color: contrast(@button-background-color-selected); 28 | } 29 | .selected:before { 30 | background: @button-background-color-selected; 31 | } 32 | } 33 | } 34 | 35 | .theme-one-dark-ui .tree-view .project-root.project-root::before { 36 | border-top: 1px solid transparent; 37 | background-clip: padding-box; 38 | } 39 | 40 | .tree-view-resizer { 41 | .tree-view-resize-handle { 42 | width: 8px; 43 | } 44 | } 45 | 46 | // Variable height, based on ems 47 | .list-group li:not(.list-nested-item), 48 | .list-tree li:not(.list-nested-item), 49 | .list-group li.list-nested-item > .list-item, 50 | .list-tree li.list-nested-item > .list-item { 51 | line-height: @tree-view-height; 52 | } 53 | 54 | .list-group .selected::before, 55 | .list-tree .selected::before { 56 | height: @tree-view-height; 57 | } 58 | 59 | // icon 60 | .list-group .icon, 61 | .list-tree .icon { 62 | display: inline-block; 63 | height: inherit; 64 | &::before { 65 | top: initial; 66 | line-height: inherit; 67 | height: inherit; 68 | vertical-align: top; 69 | } 70 | } 71 | 72 | // Arrow icon 73 | .list-group, 74 | .list-tree { 75 | .header.header.header.header::before { 76 | top: initial; 77 | line-height: inherit; 78 | height: inherit; 79 | vertical-align: top; 80 | font-size: inherit; 81 | } 82 | } 83 | .tree-view .project-root-header.project-root-header.project-root-header.project-root-header::before { 84 | line-height: @ui-tab-height; 85 | } 86 | -------------------------------------------------------------------------------- /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(subtle) { 9 | font-weight: normal; 10 | color: @text-color-subtle; 11 | } 12 | .text(highlight) { 13 | font-weight: normal; 14 | color: @text-color-highlight; 15 | } 16 | .text(selected) { 17 | .text(highlight) 18 | } 19 | 20 | .text(info) { 21 | color: @text-color-info; 22 | } 23 | .text(success) { 24 | color: @text-color-success; 25 | } 26 | .text(warning) { 27 | color: @text-color-warning; 28 | } 29 | .text(error) { 30 | color: @text-color-error; 31 | } 32 | 33 | .focus() { 34 | outline: none; 35 | border-color: @accent-color; 36 | box-shadow: 0 0 0 1px @accent-color; 37 | } 38 | 39 | .valid() { 40 | border-color: @text-color-success; 41 | box-shadow: 0 0 0 1px @text-color-success; 42 | background-color: mix(@text-color-success, @input-background-color, 10%); 43 | } 44 | 45 | .invalid() { 46 | border-color: @text-color-error; 47 | box-shadow: 0 0 0 1px @text-color-error; 48 | background-color: mix(@text-color-error, @input-background-color, 10%); 49 | } 50 | -------------------------------------------------------------------------------- /styles/ui-variables-custom.less: -------------------------------------------------------------------------------- 1 | 2 | // ONE light UI variables 3 | // ---------------------------------------------- 4 | 5 | @import "syntax-variables"; 6 | 7 | .ui-syntax-color() { @syntax-background-color: hsl(220,1%,98%); } .ui-syntax-color(); // fallback color 8 | @ui-syntax-color: @syntax-background-color; 9 | 10 | // Color guards ----------------- 11 | @ui-s-h: hue(@ui-syntax-color); 12 | .ui-hue() when (@ui-s-h = 0) { @ui-hue: 220; } // Use blue hue when no saturation 13 | .ui-hue() when (@ui-s-h > 0) { @ui-hue: @ui-s-h; } 14 | .ui-hue(); 15 | 16 | @ui-saturation: min( saturation(@ui-syntax-color), 24%); // max saturation 17 | @ui-lightness: max( lightness(@ui-syntax-color), 92%); // min lightness 18 | 19 | // Main colors ----------------- 20 | @ui-fg: hsl(@ui-hue, @ui-saturation, @ui-lightness - 72%); 21 | @ui-bg: hsl(@ui-hue, @ui-saturation, @ui-lightness); // normalized @syntax-background-color 22 | @ui-border: darken(@level-3-color, 6%); 23 | 24 | 25 | 26 | 27 | // Custom variables 28 | // These variables are only used in this theme 29 | // ---------------------------------------------- 30 | 31 | @ui-theme-name: one-light-ui; 32 | 33 | // Text (Custom) ----------------- 34 | @text-color-faded: fade(@text-color, 30%); 35 | 36 | @text-color-added: @text-color-success; // green 37 | @text-color-ignored: @text-color-subtle; // faded 38 | @text-color-modified: @text-color-warning; // orange 39 | @text-color-removed: @text-color-error; // red 40 | @text-color-renamed: @text-color-info; // blue 41 | 42 | 43 | // Background (Custom) ----------------- 44 | @level-1-color: lighten(@base-background-color, 4%); 45 | @level-2-color: @base-background-color; 46 | @level-3-color: darken(@base-background-color, 6%); 47 | 48 | @level-3-color-hover: darken(@level-3-color, 6%); 49 | @level-3-color-active: darken(@level-3-color, 3%); 50 | 51 | 52 | // Accent (Custom) ----------------- 53 | @accent-luma: luma( hsl(@ui-hue, 50%, 50%) ); // get lightness of current hue 54 | 55 | // used for marker, inputs (smaller things) 56 | @accent-color: mix( hsv( @ui-hue, 60%, 60%), hsl( @ui-hue, 100%, 68%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) 57 | @accent-text-color: contrast(@accent-color, hsl(@ui-hue,100%,16%), #fff, 40% ); 58 | 59 | // used for button, tooltip (larger things) 60 | @accent-bg-color: mix( hsv( @ui-hue, 40%, 72%), hsl( @ui-hue, 100%, 66%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) 61 | @accent-bg-text-color: contrast(@accent-bg-color, hsl(@ui-hue,100%,10%), #fff, 40% ); 62 | 63 | // used for text only 64 | @accent-only-text-color: mix( hsv( @ui-hue, 70%, 50%), hsl( @ui-hue, 100%, 60%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) 65 | 66 | 67 | // Components (Custom) ----------------- 68 | @badge-background-color: @background-color-selected; 69 | 70 | @button-text-color-selected: @accent-bg-text-color; 71 | @button-border-color-selected: @accent-color; 72 | 73 | @checkbox-background-color: fade(@accent-bg-color, 33%); 74 | 75 | @input-background-color-focus: hsl(@ui-hue, 100%, 96%); 76 | @input-selection-color: mix( hsv( @ui-hue, 33%, 95%), hsl( @ui-hue, 100%, 98%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) 77 | @input-selection-color-focus: mix( hsv( @ui-hue, 44%, 90%), hsl( @ui-hue, 100%, 94%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) 78 | 79 | @overlay-backdrop-color: hsl(@ui-hue, @ui-saturation*0.4, @ui-lightness*0.8); 80 | @overlay-backdrop-opacity: .66; 81 | 82 | @progress-background-color: @accent-color; 83 | 84 | @scrollbar-color: darken(@level-3-color, 14%); 85 | @scrollbar-background-color: @level-3-color; // replaced `transparent` with a solid color to test https://github.com/atom/one-light-ui/issues/4 86 | @scrollbar-color-editor: contrast(@ui-syntax-color, darken(@ui-syntax-color, 14%), lighten(@ui-syntax-color, 9%) ); 87 | @scrollbar-background-color-editor: @ui-syntax-color; 88 | 89 | @tab-text-color: @text-color-subtle; 90 | @tab-text-color-active: @text-color-highlight; 91 | @tab-text-color-editor: contrast(@ui-syntax-color, lighten(@ui-syntax-color, 70%), @text-color-highlight ); 92 | @tab-background-color-editor: @ui-syntax-color; 93 | @tab-inactive-status-added: fade(@text-color-success, 77%); 94 | @tab-inactive-status-modified: fade(@text-color-warning, 77%); 95 | 96 | @tooltip-background-color: @accent-bg-color; 97 | @tooltip-text-color: @accent-bg-text-color; 98 | @tooltip-text-key-color: @tooltip-background-color; 99 | @tooltip-background-key-color: @tooltip-text-color; 100 | 101 | 102 | // Sizes (Custom) ----------------- 103 | 104 | @ui-size: 1em; 105 | @ui-input-size: @ui-size*1.15; 106 | @ui-padding: @ui-size*1.5; 107 | @ui-padding-pane: @ui-size*.5; 108 | @ui-padding-icon: @ui-padding/3.3; 109 | @ui-line-height: @ui-size*2; 110 | @ui-tab-height: @ui-size*2.5; 111 | 112 | 113 | 114 | 115 | 116 | // Packages variables 117 | // These variables are used to override packages 118 | // ---------------------------------------------- 119 | 120 | @settings-list-background-color: darken(@level-2-color, 3%); 121 | @theme-config-box-shadow: inset 0 1px 2px hsla(0, 0%, 0%, .2), 0 1px 0 hsla(0, 0%, 100%, .3); 122 | @theme-config-box-shadow-selected: inset 0 1px 3px hsla(0, 0%, 0%, .2); 123 | @theme-config-border-selected: hsla(0, 0%, 0%, .5); 124 | 125 | 126 | // Debug 127 | // Output variables to the top of the UI 128 | // ------------------------------------- 129 | 130 | // html:before { 131 | // content: "@{variable}"; 132 | // } 133 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | 2 | @import "ui-variables-custom.less"; // import colors and custom variables 3 | 4 | // ONE light UI variables 5 | // ---------------------------------------------- 6 | 7 | // Official variables 8 | // These variables must be defined in every theme 9 | // Source: https://github.com/atom/atom/blob/master/static/variables/ui-variables.less 10 | // ---------------------------------------------- 11 | 12 | 13 | // Text ----------------- 14 | @text-color: @ui-fg; 15 | @text-color-subtle: lighten(@text-color, 30%); 16 | @text-color-highlight: darken(@text-color, 12%); 17 | @text-color-selected: darken(@text-color-highlight, 12%); 18 | 19 | @text-color-info: hsl(208, 100%, 54%); 20 | @text-color-success: hsl(132, 60%, 44%); 21 | @text-color-warning: hsl( 37, 90%, 44%); 22 | @text-color-error: hsl( 0, 90%, 56%); 23 | 24 | 25 | // Background ----------------- 26 | @background-color-info: hsl(208, 100%, 56%); 27 | @background-color-success: hsl(132, 52%, 48%); 28 | @background-color-warning: hsl( 40, 60%, 48%); 29 | @background-color-error: hsl( 5, 72%, 56%); 30 | 31 | @background-color-highlight: darken(@level-3-color, 2%); 32 | @background-color-selected: darken(@level-3-color, 6%); 33 | 34 | @app-background-color: @level-3-color; 35 | 36 | 37 | // Base ----------------- 38 | @base-background-color: @ui-bg; 39 | @base-border-color: @ui-border; 40 | 41 | 42 | // Components ----------------- 43 | @pane-item-background-color: @base-background-color; 44 | @pane-item-border-color: @base-border-color; 45 | 46 | @input-background-color: @level-1-color; 47 | @input-border-color: @base-border-color; 48 | 49 | @tool-panel-background-color: @level-3-color; 50 | @tool-panel-border-color: @base-border-color; 51 | 52 | @inset-panel-background-color: lighten(@level-2-color, 4%); 53 | @inset-panel-border-color: fadeout(@base-border-color, 15%); 54 | 55 | @panel-heading-background-color: @level-2-color; 56 | @panel-heading-border-color: @base-border-color; 57 | 58 | @overlay-background-color: mix(@level-2-color, @level-3-color); 59 | @overlay-border-color: @base-border-color; 60 | 61 | @button-background-color: @level-1-color; 62 | @button-background-color-hover: darken(@button-background-color, 4%); 63 | @button-background-color-selected: @accent-bg-color; 64 | @button-border-color: @base-border-color; 65 | 66 | @tab-bar-background-color: @level-3-color; 67 | @tab-bar-border-color: @base-border-color; 68 | @tab-background-color: @level-3-color; 69 | @tab-background-color-active: @level-2-color; 70 | @tab-border-color: @base-border-color; 71 | 72 | @tree-view-background-color: @level-3-color; 73 | @tree-view-border-color: @base-border-color; 74 | 75 | @ui-site-color-1: hsl(208, 100%, 56%); // blue 76 | @ui-site-color-2: hsl(132, 48%, 48%); // green 77 | @ui-site-color-3: hsl( 40, 60%, 52%); // orange 78 | @ui-site-color-4: #D831B0; // pink 79 | @ui-site-color-5: #EBDD5B; // yellow 80 | 81 | 82 | // Sizes ----------------- 83 | @font-size: 12px; 84 | @input-font-size: 14px; 85 | @disclosure-arrow-size: 12px; 86 | 87 | @component-padding: 10px; 88 | @component-icon-padding: 5px; 89 | @component-icon-size: 16px; // needs to stay 16px to look sharpest 90 | @component-line-height: 25px; 91 | @component-border-radius: 3px; 92 | 93 | @tab-height: 30px; 94 | 95 | 96 | // Font ----------------- 97 | @font-family: system-ui; 98 | --------------------------------------------------------------------------------