├── .gitignore ├── Atom.icns ├── Atom.ico ├── CHANGELOG.md ├── README.md ├── images └── spinner-128.gif ├── index.less ├── lib ├── helpers │ └── toggle-class-name.js └── main.js ├── package.json └── styles ├── atom.less ├── buttons.less ├── docks.less ├── git.less ├── input-fields.less ├── lists.less ├── messages.less ├── notifications.less ├── overlays.less ├── panels.less ├── plugins.less ├── progress.less ├── project-find-results.less ├── settings-view.less ├── sites.less ├── status-bar.git.less ├── status-bar.less ├── tabs.git-status.less ├── tabs.less ├── text.less ├── tooltips.less ├── tree-view.less ├── tree-view.project-root.less ├── ui-mixins.buttons.less ├── ui-mixins.less ├── ui-mixins.text.less ├── ui-variables.less └── utilities.less /.gitignore: -------------------------------------------------------------------------------- 1 | assets/.DS_Store 2 | .DS_Store 3 | promo 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /Atom.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fv0/native-ui/ad67a7d5ae27d78fce5ea2c9db577b8d7c6af17a/Atom.icns -------------------------------------------------------------------------------- /Atom.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fv0/native-ui/ad67a7d5ae27d78fce5ea2c9db577b8d7c6af17a/Atom.ico -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | # 0.26.3 4 | 5 | - Fixed [#91](https://github.com/fv0/native-ui/issues/91) 6 | 7 | # 0.26.2 8 | 9 | - Fixed irregular border radii for grouped buttons 10 | - Adapted code to new Git status display 11 | - Fixed [#65](https://github.com/fv0/native-ui/issues/65) 12 | 13 | ## 0.26 14 | 15 | - Smaller border radii for buttons to make it more accurate to macOS 16 | - Fine-tuned the appearence of buttons, some things were misaligned 17 | - Reduced padding in the settings view to see more content on smaller screens 18 | - Code refactoring and clean-up 19 | 20 | ## 0.25.2 21 | 22 | - Fixed cut-off descenders in control panel. 23 | - Evened out vertical alignment in the status bar. 24 | - Fixed: In some syntax themes the color of the control panel text would change. 25 | - Fixed: Calculations for the typography variables outputted some incomprehensible values. 26 | 27 | ## 0.25.1 28 | 29 | - Fixed [#86](https://github.com/fv0/native-ui/issues/86) 30 | 31 | ## 0.25 32 | 33 | - Fixed [#82](https://github.com/fv0/native-ui/issues/82) and [#84](https://github.com/fv0/native-ui/issues/84): resize handles overlapping with some other interface elements. 34 | - Unified type sizes throughout the interface using a typographic scale approach. 35 | - New design for buttons and input fields. 36 | - New design for the settings view, display of packages and many more. 37 | - Code clean-up, simplified variables, removed bloat. 38 | 39 | ## 0.24 40 | 41 | - Fixed [#81](https://github.com/fv0/native-ui/issues/81): “Busy Signal” missing in the status bar. 42 | - Merged [#78](https://github.com/fv0/native-ui/pull/78) by [hferrier](https://github.com/hferrier): Hide the scrollbar in the tabs section. 43 | 44 | ## 0.23 45 | 46 | - I added some user settings for Native UI. Go to `Settings` → `Themes` and click on the `Settings` button next to the theme selection. 47 | - You can choose between tabs that are either fixed-width or flexible. 48 | - You can turn of the transparency effect for the sidebar, if you don’t like the effect. 49 | - Dock titles now look more similar to tabs again. 50 | - Code clean-up. 51 | 52 | ## 0.22.1 53 | 54 | - Fixed [#74](https://github.com/fv0/native-ui/issues/74) 55 | - Small design adjustments to Atoms notifications to resemble the appearance of macOS notifications. 56 | 57 | ## 0.22.0 58 | 59 | - Implemented [#72](https://github.com/fv0/native-ui/issues/72): Supported by Atom 1.19 I added macOS transparency for file and directory list. Thanks to [Guillaume](https://github.com/the0neyouseek) for mentioning and helping with this. 60 | - The Git status in the bottom bar is now back to its old look with a dark background. 61 | - Cosmetic adjustments here and there. 62 | - Some design adjustments to the “Project Find Results”. 63 | - Added testimonials and new screenshots to `README.md`. 64 | 65 | ## 0.21.0 66 | 67 | - Fixed [#69](https://github.com/fv0/native-ui/issues/69): Styled the new “Docks” feature in Atom. 68 | - Simpfified code for the status bar. 69 | - Simpfified code for buttons. They might appear a bit less “native” than before, but they don’t break as much in different parts of the UI since they overwrite the default only minorly. 70 | - Fixed [#70](https://github.com/fv0/native-ui/issues/70): Find in project is showing incomplete/incorrect results. 71 | 72 | ## 0.20.6 73 | 74 | - [#67](https://github.com/fv0/native-ui/issues/67): Fix for the weird display of search results when updating to Atom 1.16. 75 | 76 | ## 0.20.5 77 | 78 | - [#66](https://github.com/fv0/native-ui/issues/66): Broken loading icon for the Linter 2 package. 79 | 80 | ## 0.20.4 81 | 82 | - Made character match better visible. 83 | - Increased opacity of the border separating the tabs. 84 | - Adjusted baseline alignments of status bar elements. 85 | 86 | ## 0.20.3 87 | 88 | - [#62](https://github.com/fv0/native-ui/issues/62): Brought back scrollbars for some areas of Native UI. Thanks for the tip, Matt! 89 | 90 | ## 0.20.2 91 | 92 | - Removed small box-shadows on left and right of tabs 93 | - Cleaned up files 94 | - Code clean-up 95 | 96 | ## 0.20 97 | 98 | I took the time to make some changes to the interface. At some points the macOS interface elements lack contrast and since a code editor should not stand in your way of working efficiently I adapted some parts. This wasn't easy for me since I wanted to stay to the original as close as possible, but if something is bad, then sometimes you have to make a decision. I hope you like the revamped Native UI and if everything appears wrong, please file an issue in the Github repository. Happy coding! – [Ferdinand](https://twitter.com/ferdinandvogler) 99 | 100 | - [#61](https://github.com/fv0/native-ui/issues/61): Theme will now work in Atom 0.13: fixed deprecated selector because of Shadow DOM removal in upcoming release. 101 | - Tabs: active tab now better visible. When closing a tab, there is now a subtle resize animation. 102 | - Design changes to the control panel overlay. 103 | - Design changes for search results page. 104 | - New app icon. 105 | - Updated screenshots for the README file. 106 | 107 | ## 0.19.2 108 | 109 | - Fixed fonts for macOS Sierra. The wrong font style was used (slightly condensed). 110 | - Changed height of status bar to make elements be vertically aligned again. 111 | - Removed background-transition effect from tabs. 112 | 113 | ## 0.19.1 114 | 115 | - [#57](https://github.com/fv0/native-ui/issues/57): No border seperating the treeview and status bar. 116 | 117 | ## 0.19.0 118 | 119 | - [#60](https://github.com/fv0/native-ui/issues/60): Fix font-family for macOS Sierra. 120 | - Adjustments for the display of checkboxes. 121 | 122 | ## 0.18.3 123 | 124 | - Make the [Linter Package](https://atom.io/packages/linter) match Native UI's appearance. 125 | 126 | ## 0.18.2 127 | 128 | - Reset changes from [#47](https://github.com/fv0/native-ui/issues/42). Issue mentioned in [#55](https://github.com/fv0/native-ui/issues/42). 129 | 130 | ## 0.18.1 131 | 132 | - Added some new loading indicators. 133 | 134 | ## 0.18.0 135 | 136 | - [#48](https://github.com/fv0/native-ui/issues/42): Removed :before of modal 137 | - When renaming large file paths they are displayed in one text field and not in one line 138 | - If the tree view is hidden and only one file is shown, the tab bar gets hidden (thanks @leo). 139 | 140 | ## 0.17.0 141 | 142 | - Removed deprecated classes highlighted by Deprecation Cop. 143 | - Show resize handle on hover in the treeview 144 | - Unfocused state of tab bar when no file is open gets displayed in the correct color. 145 | 146 | ## 0.16.1 147 | 148 | - Bringing back an improved unfocused window state 149 | 150 | ## 0.16.0 151 | 152 | - Removed window blur 153 | - New folder arrows 154 | - Increase of the tab color contrast 155 | - Finetuned status bar appearance 156 | 157 | ## 0.15.1 158 | 159 | - [#42](https://github.com/fv0/native-ui/issues/42): Fix for two icons looking messed up. 160 | 161 | ## 0.15.0 162 | 163 | - Added ICO file for Windows users 164 | - Fixed double border on top of project search results 165 | - Removed right margin on Git status bar items 166 | - Updated screenshots 167 | 168 | ## 0.14.0 169 | 170 | - Increased contrast between active tab and normal tabs. 171 | - The status bar items and display of the Git status have been slightly modified. 172 | - Added a border around the list of items when toggling the command palette, fuzzy finder, etc 173 | - All elements now have a decreased opacity when not in focus. 174 | - Fixed bug that the border between editor and tree view sometimes vanished (might relate to [#39](https://github.com/fv0/native-ui/issues/39)). 175 | 176 | ## 0.13.0 177 | 178 | - Perfected close buttons. 179 | - Made the tabs and treeview have a lighter color, when the window is out of focus. Thanks to [leo](https://github.com/leo). 180 | - Added subtle gradient to status bar like in Finder. 181 | - Adjusted the Git status indicators for the tabs. 182 | 183 | ## 0.12.0 184 | 185 | - Simplified the _modified_ indicator and removed the color of it. 186 | - Moved changelog to seperate file. Atom now recognizes this and shows it as a button in the theme. 187 | - Added colored tab corners to show the Git status. 188 | - Fixed [#29](https://github.com/fv0/native-ui/issues/29): No more overlapping of the scrollbar if you decide to have scrollbars visible all the time. 189 | - Fixed [#30](https://github.com/fv0/native-ui/issues/30): When the files tree view is closed there is no more border to the left of the window. 190 | - Fixed [#35](https://github.com/fv0/native-ui/pull/35): Spell corrections didn't have the correct background color. 191 | - Adjusted box-shadows globally to look more natural. 192 | 193 | ### 0.11.0 194 | 195 | - Fixed [#27](https://github.com/fv0/native-ui/issues/27): You can know scroll and click in the modal windows again. 196 | - Fixed [#23](https://github.com/fv0/native-ui/issues/23): For people who choose VCS coloring in the settings of the `tabs` package, this is a more better readible display and is optically identical to the sidebar solution. [#25](https://github.com/fv0/native-ui/issues/25) is related. 197 | - Fixed [#22](https://github.com/fv0/native-ui/issues/22): No border bottom radius on popup window when there is no description. 198 | - Started this changelog. 199 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Banner Native UI](https://cloud.githubusercontent.com/assets/8401092/20631149/769f190a-b335-11e6-91ba-aad73f7f4c49.jpg) 2 | 3 | Native UI brings macOS’ looks to Atom. Experience a reduced, more native feeling for your favorite code editor. No redundant transitions or fancy effects distracting you from your daily work. 4 | 5 | Created by **[Ferdinand Vogler](https://www.twitter.com/ferdinandvogler)** 6 | 7 | # Features 8 | 9 | - Tab behavior known from Finder. 10 | - `NEW` macOS transparent blur effect for the directory list. 11 | - Apple’s new system font San Francisco. 12 | - Better structured search results. 13 | - Redesign of many parts in Atom. 14 | - Built fast and reliant with an eye for details. 15 | 16 | # What Developers say about Native UI 17 | 18 | > “This theme makes Atom look like it should on macOS. It’s the gold standard for native themes.” 19 | > — [Nick Balsbaugh](https://github.com/fv0/native-ui/issues/70#issuecomment-306361702) 20 | > 21 | > “Just started working on Atom’s Native UI theme this week and it’s awesome!” 22 | > — [Odicro](https://twitter.com/odicro/status/744053690164723712) 23 | > 24 | > “Native UI, an Atom theme for El Capitan is flat out amazing. I love this theme.” 25 | > — [Amy](https://twitter.com/lexicalunit/status/715246366293934083) 26 | > 27 | > “Started using Native UI, a super cool Atom theme for El Capitan. Really well made.” 28 | > — [Alexey](https://twitter.com/laughedelic/status/667736559064621058) 29 | 30 | # Screenshots 31 | 32 | ![Editor](https://user-images.githubusercontent.com/8401092/29223143-ca3f182e-7ec5-11e7-95e0-62dd1f2b6878.jpg) 33 | ![File Switcher](https://user-images.githubusercontent.com/8401092/29223144-ca5851fe-7ec5-11e7-80ff-bdf86afff71f.jpg) 34 | ![Search Results](https://user-images.githubusercontent.com/8401092/29223145-ca5eaafe-7ec5-11e7-85c4-066a71c5a535.jpg) 35 | ![Settings](https://user-images.githubusercontent.com/8401092/29223146-ca5ebeb8-7ec5-11e7-932b-b0ef74986ddb.jpg) 36 | 37 | # Icons 38 | 39 | ![](https://cloud.githubusercontent.com/assets/8401092/20631850/50eec71a-b339-11e6-9cf1-e245e8d6451b.png) 40 | 41 | Choose between [macOS (.icns)](https://github.com/fv0/native-ui/raw/master/Atom.icns) or [Windows (.ico)](https://github.com/fv0/native-ui/raw/master/Atom.ico). 42 | 43 | # How To Install 44 | 45 | Terminal | Atom 46 | --- | --- 47 | If you have the Atom Package Manager installed you can run `apm install native-ui` | Go to Settings → Install, switch the tab from Packages to Themes and search for **native-ui**. After that select the theme **Native** in Settings → Themes. 48 | 49 | # Enjoy working with Native UI? 50 | 51 | [Tell others on Twitter](https://twitter.com/intent/tweet?text=Native%20UI,%20a%20Atom%20theme%20for%20El%20Capitan&url=http%3A%2F%2Fatom.io/themes/native-ui&via=ferdinandvogler) and [let’s talk](https://twitter.com/intent/tweet?text=@ferdinandvogler) about other features you would like. 52 | -------------------------------------------------------------------------------- /images/spinner-128.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fv0/native-ui/ad67a7d5ae27d78fce5ea2c9db577b8d7c6af17a/images/spinner-128.gif -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | @import "styles/atom.less"; 2 | @import "styles/ui-variables.less"; 3 | @import "styles/utilities.less"; 4 | @import "styles/ui-mixins.text.less"; 5 | @import "styles/text.less"; 6 | @import "styles/git.less"; 7 | @import "styles/input-fields.less"; 8 | @import "styles/sites.less"; 9 | @import "styles/messages.less"; 10 | @import "styles/progress.less"; 11 | @import "styles/ui-mixins.buttons.less"; 12 | @import "styles/buttons.less"; 13 | @import "styles/panels.less"; 14 | @import "styles/status-bar.less"; 15 | @import "styles/status-bar.git.less"; 16 | @import "styles/lists.less"; 17 | @import "styles/overlays.less"; 18 | @import "styles/tabs.less"; 19 | @import "styles/tabs.git-status.less"; 20 | @import "styles/tooltips.less"; 21 | @import "styles/tree-view.less"; 22 | @import "styles/tree-view.project-root.less"; 23 | @import "styles/settings-view.less"; 24 | @import "styles/project-find-results.less"; 25 | @import "styles/plugins.less"; 26 | @import "styles/docks.less"; 27 | @import "styles/notifications.less"; 28 | -------------------------------------------------------------------------------- /lib/helpers/toggle-class-name.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | export default function toggleClassName(className, mustAddClass) { 4 | const root = document.documentElement; 5 | 6 | if (mustAddClass) { 7 | root.classList.add(className); 8 | } 9 | else { 10 | root.classList.remove(className); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /lib/main.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import toggleClassName from './helpers/toggle-class-name'; 4 | 5 | const classNames = { 6 | 'native-ui-autoResizeTabs': atom.config.get('native-ui.tabs.autoResizeTabs'), 7 | 'native-ui-macTransparency': atom.config.get('native-ui.ui.macTransparency') 8 | }; 9 | 10 | if (atom.config.get('native-ui.ui.macTransparency')) { 11 | // Make sidebars transparent 12 | require('electron').remote.getCurrentWindow().setVibrancy('light'); 13 | } 14 | 15 | export default { 16 | activate() { 17 | Object.keys(classNames).forEach(className => ( 18 | toggleClassName(className, classNames[className])), 19 | ); 20 | }, 21 | 22 | deactivate() { 23 | // Reset all class names 24 | Object.keys(classNames).forEach(className => toggleClassName(className, false)); 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-ui", 3 | "theme": "ui", 4 | "version": "0.26.3", 5 | "description": "Experience better coding in macOS High Sierra.", 6 | "main": "lib/main", 7 | "keywords": [ 8 | "sierra", 9 | "elcapitan", 10 | "native", 11 | "apple", 12 | "macos", 13 | "macosx", 14 | "sanfrancisco" 15 | ], 16 | "repository": "https://github.com/fv0/native-ui.git", 17 | "engines": { 18 | "atom": ">= 1.27" 19 | }, 20 | "configSchema": { 21 | "tabs": { 22 | "order": 1, 23 | "type": "object", 24 | "title": "Tabs", 25 | "properties": { 26 | "autoResizeTabs": { 27 | "title": "Flexible tabs", 28 | "description": "Resize tabs proportional to the space available.", 29 | "type": "boolean", 30 | "default": true 31 | } 32 | } 33 | }, 34 | "ui": { 35 | "order": 2, 36 | "type": "object", 37 | "title": "User Interface", 38 | "properties": { 39 | "macTransparency": { 40 | "title": "macOS transparency", 41 | "description": "Enable transparency for the sidebars.", 42 | "type": "boolean", 43 | "default": true 44 | } 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /styles/atom.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | atom-workspace, 4 | .atom-dock-mask, 5 | .pane { 6 | background: @base-background-color; 7 | 8 | // User settings 9 | .native-ui-macTransparency & { 10 | background: transparent; 11 | } 12 | } 13 | 14 | html { 15 | background: @base-background-color; 16 | 17 | // User settings 18 | &.native-ui-macTransparency { 19 | background: @base-background-color-transparent; 20 | } 21 | } 22 | 23 | atom-panel.left, 24 | .tool-panel.left, 25 | atom-panel.panel-left, 26 | .tool-panel.panel-left { 27 | border-right: none !important; 28 | } 29 | 30 | // #62: Partially hide scrollbars 31 | // https://github.com/fv0/native-ui/issues/62 32 | .suggestion-list-scroller { 33 | &::-webkit-scrollbar { 34 | display: none; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | 4 | .box-shadow() { 5 | // atom uses `!important by default, so we need to overwrite this 6 | box-shadow: 7 | inset 0 0 0 1/@rem hsla(0,0%,0%, 0.07), 8 | inset 0 -1/@rem 0 0 hsla(0,0%,0%, 0.3) !important; 9 | } 10 | 11 | // Default button 12 | .btn { 13 | .mixin-btn(@button-background-color); 14 | .box-shadow(); 15 | 16 | color: @button-text-color; // overwrite mixin 17 | 18 | &:active, 19 | &:focus { 20 | .box-shadow(); 21 | 22 | background: linear-gradient(to top, darken(@button-background-color, 15%), @button-background-color); 23 | color: @button-text-color; // overwrite mixin 24 | } 25 | 26 | &.selected, 27 | &.selected:hover, 28 | &.selected.icon:hover { 29 | background: linear-gradient(to top, darken(@background-color-selected, 15%), @background-color-selected); 30 | color: @button-text-color-inverted; 31 | } 32 | 33 | &.icon:hover { 34 | color: @button-text-color; // overwrite mixin 35 | } 36 | } // .btn 37 | 38 | // Button in different states 39 | .btn.btn-info, 40 | .btn.btn-primary { 41 | .mixin-btn(@background-color-selected); 42 | .mixin-btn-colored--active-focus-selected(@background-color-selected); 43 | } 44 | 45 | .btn.btn-success { 46 | .mixin-btn(@background-color-success); 47 | .mixin-btn-colored--active-focus-selected(@background-color-success); 48 | } 49 | 50 | .btn.btn-warning { 51 | .mixin-btn(@background-color-warning); 52 | .mixin-btn-colored--active-focus-selected(@background-color-warning) 53 | } 54 | 55 | .btn.btn-error { 56 | .mixin-btn(@background-color-error); 57 | .mixin-btn-colored--active-focus-selected(@background-color-error); 58 | } 59 | 60 | // Button groups 61 | 62 | .btn-group > .btn, 63 | .btn-group > .btn-info { 64 | border: none; 65 | 66 | &.selected { 67 | border-left-color: transparent; 68 | } 69 | 70 | &:first-child { 71 | border-left: none; 72 | } 73 | 74 | &:only-child { 75 | border: none; 76 | } 77 | } 78 | 79 | .btn.disabled, 80 | .btn[disabled], 81 | fieldset[disabled] .btn { 82 | opacity: 0.5; 83 | } 84 | 85 | .section-heading .btn { 86 | font-family: @font-family; 87 | } 88 | 89 | // Fix button groups 90 | 91 | .btn-group > .btn:first-child { 92 | border-top-left-radius: @component-border-radius-small; 93 | border-bottom-left-radius: @component-border-radius-small; 94 | } 95 | 96 | .btn-group > .btn:last-child, 97 | .btn-group > .btn.selected:last-child, 98 | .btn-group > .dropdown-toggle { 99 | border-top-right-radius: @component-border-radius-small; 100 | border-bottom-right-radius: @component-border-radius-small; 101 | } 102 | 103 | // This is a bit of a hack. Otherwise the “Uninstall” button has no rounded corners, since the :only-child rule doesn’t apply here. 104 | .btn.icon[style="display: none;"] + .btn.icon, 105 | .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { 106 | border-top-left-radius: @component-border-radius-small; 107 | border-bottom-left-radius: @component-border-radius-small; 108 | } 109 | -------------------------------------------------------------------------------- /styles/docks.less: -------------------------------------------------------------------------------- 1 | @width-resize-handle: @component-padding / 2; 2 | @color-highlight-handle: lighten(@base-background-color, 20%); 3 | @dock-border-color: @base-border-color; 4 | 5 | // Title of the dock 6 | atom-dock .tab-bar.inset-panel .tab .title { 7 | text-transform: uppercase; 8 | font-size: @font-size-small; 9 | font-weight: bold; 10 | } 11 | 12 | atom-dock .tab-bar.inset-panel .tab { 13 | box-shadow: inset 0 -1px 0 0 @dock-border-color; 14 | 15 | &.active { 16 | background: @base-background-color; 17 | } 18 | } 19 | 20 | .atom-dock-resize-handle { 21 | position: absolute; 22 | z-index: 100; 23 | 24 | &.bottom { 25 | height: @width-resize-handle; 26 | width: 100%; 27 | box-shadow: inset 0 1px 0 @dock-border-color; 28 | } 29 | 30 | &.left, 31 | &.right { 32 | width: @width-resize-handle; 33 | height: 100%; 34 | } 35 | 36 | &.left { 37 | box-shadow: inset -1px 0 0 0 @dock-border-color; 38 | } 39 | 40 | &.right { 41 | box-shadow: inset 1px 0 0 0 @dock-border-color; 42 | } 43 | } // .atom-dock-resize-handle 44 | 45 | .atom-dock-toggle-button .atom-dock-toggle-button-inner { 46 | border-radius: @component-border-radius; 47 | 48 | &.left { 49 | border-left: none; 50 | 51 | .icon { 52 | transform: translateX(12px); 53 | } 54 | } 55 | 56 | &.right { 57 | border-right: none; 58 | 59 | .icon { 60 | transform: translateX(-12px); 61 | } 62 | } 63 | 64 | &.bottom { 65 | border-bottom: none; 66 | 67 | .icon { 68 | transform: translateY(-12px); 69 | } 70 | } 71 | } // .atom-dock-toggle-button .atom-dock-toggle-button-inner 72 | -------------------------------------------------------------------------------- /styles/git.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | .status { .text(normal); } 5 | .status-added { .text(success); } 6 | .status-ignored { .text(subtle); } 7 | .status-modified { .text(warning); } 8 | .status-removed { .text(error); } 9 | .status-renamed { .text(info); } 10 | -------------------------------------------------------------------------------- /styles/input-fields.less: -------------------------------------------------------------------------------- 1 | @height-inner-selection: 20px; 2 | @margin-inner-selection: 2px; 3 | 4 | .editor-container atom-text-editor, 5 | .settings-view atom-text-editor, 6 | .modal atom-text-editor { 7 | border: 1px solid @input-border-color; 8 | padding: 0 (@margin-inner-selection * 2); 9 | background-color: @input-background-color; 10 | transition: box-shadow @transition--default; 11 | color: @text-color !important; // used `!important` because some syntax themes overwrite this 12 | 13 | // Styles of the text when it is not selected 14 | .selection .region { 15 | @color: contrast(@input-background-color); 16 | 17 | background-color: hsla(hue(@color), saturation(@color), lightness(@color), 0.175); 18 | height: @height-inner-selection !important; 19 | margin-top: @margin-inner-selection; 20 | } 21 | 22 | .cursor { 23 | // Overwrite inline styles for cursor 24 | width: 1px !important; 25 | border-left-width: 1px !important; 26 | height: @height-inner-selection !important; 27 | margin-top: @margin-inner-selection; 28 | border-color: @text-color; 29 | } 30 | 31 | // input field is selected 32 | &.is-focused { 33 | border-color: @input-border-color-active; 34 | color: @text-color-highlight; 35 | border-radius: @component-border-radius-small; // otherwise the `box-shadow` doesn’t appear rounded 36 | box-shadow: 0 0 0 3/@rem @input-outline-color-active; 37 | 38 | .placeholder-text { 39 | color: @text-color-subtle; 40 | } 41 | 42 | // Background of highlighted text 43 | .selection .region { 44 | background-color: tint(@background-color-selected, 75%); 45 | } 46 | } // .is-focused 47 | } // editor.mini 48 | 49 | .tree-view-dialog .editor.mini { 50 | max-height: 100%; 51 | } 52 | 53 | // A `select` input field 54 | .settings-view select.form-control, 55 | .settings-view select.form-control:hover { 56 | height: 26px; 57 | border-bottom-color: darken(@button-border-color, 10%); 58 | // background: @input-background-color; 59 | box-shadow: none; // otherwise this has an inset box-shadow 60 | } 61 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | @import "octicon-mixins"; 4 | 5 | .list-group, .list-tree { 6 | li:not(.list-nested-item), 7 | li.list-nested-item > .list-item { 8 | .text(normal); 9 | } 10 | 11 | .generate-list-item-text-color(@class) { 12 | li:not(.list-nested-item).text-@{class}, 13 | li.list-nested-item.text-@{class} > .list-item { 14 | .text(@class); 15 | } 16 | } 17 | .generate-list-item-text-color(subtle); 18 | .generate-list-item-text-color(info); 19 | .generate-list-item-text-color(success); 20 | .generate-list-item-text-color(warning); 21 | .generate-list-item-text-color(error); 22 | .generate-list-item-text-color(selected); 23 | 24 | .generate-list-item-status-color(@color, @status) { 25 | li:not(.list-nested-item).status-@{status}, 26 | li.list-nested-item.status-@{status} > .list-item { 27 | color: @color; 28 | } 29 | 30 | li:not(.list-nested-item).selected.status-@{status}, 31 | li.list-nested-item.selected.status-@{status} > .list-item { 32 | color: darken(@color, 7%); 33 | } 34 | } 35 | .generate-list-item-status-color(@text-color-subtle, ignored); 36 | .generate-list-item-status-color(@text-color-added, added); 37 | .generate-list-item-status-color(@text-color-renamed, renamed); 38 | .generate-list-item-status-color(@text-color-modified, modified); 39 | .generate-list-item-status-color(@text-color-removed, removed); 40 | 41 | li:not(.list-nested-item).selected, 42 | li.list-nested-item.selected > .list-item { 43 | .text(selected); 44 | } 45 | } 46 | 47 | .select-list ol.list-group, 48 | &.select-list ol.list-group { 49 | li.two-lines { 50 | .secondary-line { 51 | color: @text-color-subtle; 52 | } 53 | 54 | &.selected .secondary-line { 55 | color: lighten(@text-color-subtle, 10%); 56 | text-shadow: none; 57 | } 58 | } 59 | 60 | // We want to highlight the background of the list items because we don’t know their size. 61 | li.selected { 62 | background-color: @background-color-selected; 63 | 64 | &:before { 65 | display: none; 66 | background: none; 67 | } 68 | } 69 | 70 | &.mark-active{ 71 | @active-icon-size: 14px; 72 | 73 | // pad in front of the text where the icon would be We'll pad the non- 74 | // active items with a 'fake' icon so other classes can pad the item 75 | // without worrying about the icon padding. 76 | li:before { 77 | content: ""; 78 | background-color: transparent; 79 | position: static; 80 | display: inline-block; 81 | left: auto; right: auto; 82 | height: @active-icon-size; 83 | width: @active-icon-size; 84 | } 85 | > li:not(.active):before { 86 | margin-right: @component-icon-padding; 87 | } 88 | li.active { 89 | .octicon(check, @active-icon-size); 90 | &:before { 91 | margin-right: @component-icon-padding; 92 | color: @text-color-success; 93 | } 94 | } 95 | } 96 | } 97 | 98 | autocomplete-suggestion-list .suggestion-list-scroller { 99 | border-radius: 0 !important; 100 | } 101 | 102 | autocomplete-suggestion-list .select-list.popover-list .suggestion-description { 103 | border-radius: 0 0 @component-border-radius @component-border-radius; 104 | background-color: @status-bar-background-color; 105 | color: @text-color; 106 | line-height: 1.15; // vertically center the text 107 | border-top: 1px solid @tab-bar-border-color; 108 | } 109 | 110 | .select-list.popover-list { 111 | box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); 112 | padding: @component-padding/2; 113 | 114 | atom-text-editor { 115 | margin-bottom: @component-padding/2; 116 | } 117 | 118 | .list-group li { 119 | padding-left: @component-padding/2; 120 | } 121 | } 122 | 123 | autocomplete-suggestion-list.select-list.popover-list ol.list-group li:not(.selected) { 124 | background-color: @overlay-background-color; 125 | } 126 | 127 | autocomplete-suggestion-list .list-group .selected .icon-container .icon { 128 | color: @text-color-selected; 129 | background: darken(@background-color-selected, 10%); 130 | } 131 | 132 | .ui-sortable { 133 | li { 134 | line-height: 2.5; 135 | } 136 | 137 | // For sortable lists in the settings view 138 | li.ui-sortable-placeholder { 139 | visibility: visible !important; 140 | background-color: darken(@pane-item-background-color, 10%); 141 | } 142 | } 143 | 144 | li.ui-draggable-dragging, li.ui-sortable-helper { 145 | line-height: @component-line-height; 146 | height: @component-line-height; 147 | border: 0; 148 | border-radius: 0; 149 | list-style: none; 150 | padding: 0 @component-padding; 151 | background: @background-color-highlight; 152 | box-shadow: 0 0 1px @base-border-color; 153 | } 154 | -------------------------------------------------------------------------------- /styles/messages.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | ul.background-message { 4 | font-weight: bold; 5 | color: rgba(0, 0, 0, .18); 6 | } 7 | -------------------------------------------------------------------------------- /styles/notifications.less: -------------------------------------------------------------------------------- 1 | atom-notification { 2 | margin-bottom: @component-padding; 3 | 4 | .content { 5 | border-top-right-radius: @component-border-radius-large; 6 | border-bottom-right-radius: @component-border-radius-large; 7 | } 8 | 9 | &.icon:before { 10 | border-top-left-radius: @component-border-radius-large; 11 | border-bottom-left-radius: @component-border-radius-large; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /styles/overlays.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | atom-panel.modal, 4 | .overlay { 5 | color: @text-color; 6 | padding: @component-padding; 7 | border-radius: @component-border-radius; 8 | 9 | .editor.mini { 10 | margin-bottom: @component-padding; 11 | } 12 | 13 | // Search results 14 | .select-list ol.list-group, 15 | &.select-list ol.list-group { 16 | background-color: @input-background-color; 17 | padding-top: 0; // prevents it from jumping sometimes 18 | box-shadow: inset 0 0 0 1px @base-border-color; 19 | 20 | li { 21 | padding: @component-padding; 22 | border-bottom: 1px solid @base-border-color; 23 | 24 | &.two-lines { 25 | line-height: 1.5; 26 | 27 | // File name 28 | .primary-line { 29 | font-size: @font-size-h4; 30 | } 31 | 32 | &.selected { 33 | .secondary-line { 34 | color: lighten(@background-color-selected, 25%); 35 | } 36 | } 37 | } 38 | &.selected { 39 | color: @text-color-selected; 40 | background-color: @background-color-selected; 41 | border-bottom-color: @background-color-selected; 42 | box-shadow: 0 -1px 0 0 @background-color-selected; 43 | margin-left: 0; // nullify the margin of `li` 44 | margin-right: 0; 45 | padding-left: @component-padding + 1; 46 | padding-right: @component-padding + 1; 47 | } 48 | 49 | .status.icon { 50 | float: right; 51 | margin-left: @component-icon-padding; 52 | 53 | &:before { 54 | margin-right: 0; 55 | } 56 | } 57 | } 58 | } 59 | } 60 | 61 | // Frame for the autocomplete suggestions 62 | .select-list.popover-list { 63 | border-radius: @component-border-radius; // make the box shadow follow the rounded edges of the children 64 | box-shadow: 65 | 0 10px 20px rgba(0, 0, 0, 0.22), 66 | 0 14px 56px rgba(0, 0, 0, 0.25); 67 | background: transparent; 68 | } 69 | 70 | .select-list.corrections { 71 | background-color: @base-background-color; 72 | border-radius: @component-border-radius; 73 | } 74 | 75 | // The window itself 76 | atom-panel.modal { 77 | top: 15% !important; 78 | border-top-right-radius: @component-border-radius !important; 79 | border-top-left-radius: @component-border-radius !important; 80 | box-shadow: 81 | 0 15px 24px rgba(0, 0, 0, 0.22), 82 | 0 19px 76px rgba(0, 0, 0, 0.3); 83 | 84 | .select-list .error-message { 85 | font-size: @font-size-h3; 86 | font-family: @font-family-headlines; 87 | text-align: center; 88 | color: @text-color-subtle; 89 | } 90 | 91 | .list-group .character-match { 92 | background-color: rgba(0, 0, 0, 0.1); 93 | color: inherit; 94 | font-weight: normal; 95 | } 96 | 97 | .list-group .selected .character-match { 98 | background-color: rgba(0, 0, 0, 0.2); 99 | } 100 | } 101 | 102 | .key-binding { 103 | display: inline-block; 104 | margin-left: @component-padding / 2; 105 | font-family: @font-family; // otherwise `monospace` 106 | background-color: @button-background-color; 107 | border-radius: @component-border-radius; 108 | box-shadow: 109 | 0 0 0 1px @base-border-color-transparent, 110 | inset 0 -1px 0 0 @base-border-color; 111 | } 112 | 113 | autocomplete-suggestion-list .suggestion-list-scroller { 114 | border-radius: @component-border-radius; 115 | } 116 | 117 | autocomplete-suggestion-list .suggestion-description { 118 | margin-top: -@component-padding / 2; 119 | border-top: none; 120 | min-height: auto; 121 | } 122 | 123 | autocomplete-suggestion-list.select-list.popover-list .suggestion-description { 124 | padding: @component-padding @component-padding (@component-padding / 2); 125 | } 126 | 127 | // Don't display when no results 128 | ol.list-group:empty { 129 | display: none; 130 | } 131 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | @import "buttons"; 4 | 5 | .panel { 6 | &.bordered { 7 | border: 1/@rem solid @base-border-color; 8 | border-radius: @component-border-radius; 9 | } 10 | } 11 | 12 | atom-panel, 13 | .tool-panel { 14 | .text(normal); 15 | position: relative; 16 | background-color: @tool-panel-background-color; 17 | text-shadow: none; // overwrite 18 | 19 | &.right, 20 | &.panel-right { 21 | border-left: 1/@rem solid @tool-panel-border-color; 22 | } 23 | 24 | .inset-panel { 25 | border-radius: @component-border-radius; 26 | border: 1/@rem solid @tool-panel-border-color; 27 | } 28 | } 29 | 30 | .panel-heading { 31 | border-bottom: none; 32 | padding: (@component-padding - 2/@rem) @component-padding; 33 | background-color: transparent; 34 | background-image: linear-gradient(@panel-heading-background-color, darken(@panel-heading-background-color, 10%)); 35 | } 36 | 37 | // Among others this is used for the finding panel 38 | .panel-bottom { 39 | box-shadow: 0 -1/@rem 0 0 @base-border-color-transparent; 40 | } 41 | 42 | // Make the panel more like the Spotlight search 43 | .command-palette, 44 | .fuzzy-finder, 45 | .symbols-view, 46 | .grammar-selector, 47 | .encoding-selector { 48 | .editor.mini { 49 | color: @text-color; 50 | font-family: @font-family-headlines; 51 | font-size: @font-size-h1; 52 | margin-left: -@component-padding; 53 | padding: 0 @component-padding 0 @component-padding; 54 | max-height: 30px !important; 55 | line-height: 30px !important; 56 | 57 | * { 58 | height: 30px !important; // overwrite inline styles of `22px` 59 | } 60 | 61 | // Remove styles of the standard input field 62 | &.is-focused, 63 | &:hover { 64 | border: none; 65 | background-color: transparent; 66 | box-shadow: none !important; 67 | } 68 | 69 | .region { 70 | height: 100% !important; 71 | } 72 | } // .editor.mini 73 | } 74 | 75 | // Increase padding from label to the input 76 | .tree-view-dialog label + .editor.mini { 77 | margin-top: @component-padding; 78 | margin-bottom: 0; 79 | } 80 | -------------------------------------------------------------------------------- /styles/plugins.less: -------------------------------------------------------------------------------- 1 | @import "syntax-variables"; 2 | @import "ui-variables"; 3 | 4 | // Fix #66 5 | busy-signal.loading-spinner-tiny { 6 | background-size: contain; 7 | } 8 | 9 | busy-signal { 10 | margin-top: 0; 11 | } 12 | 13 | .linter-status-count { 14 | background-color: darken(@base-background-color, 15%); 15 | border-radius: @component-border-radius; 16 | 17 | a { // each linter item 18 | 19 | &:not(:last-child) { 20 | margin-right: @component-padding / 2; 21 | } 22 | 23 | // A class like `text-error` gets added to make the status appear in some kind of color. If there are no errors it should look inactive. 24 | &:not([class*="text-"]) { 25 | color: @text-color-subtle; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /styles/progress.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | 4 | .loading-spinner(@size) { 5 | width: @size; 6 | height: @size; 7 | display: block; 8 | background-image: url(atom://native-ui/images/spinner-128.gif); 9 | background-repeat: no-repeat; 10 | background-size: cover; 11 | 12 | &.inline-block { 13 | display: inline-block; 14 | } 15 | } 16 | 17 | .loading-spinner-large { 18 | .loading-spinner(64px); 19 | } 20 | 21 | .loading-spinner-medium { 22 | .loading-spinner(50px); 23 | } 24 | 25 | .loading-spinner-small { 26 | .loading-spinner(32px); 27 | } 28 | 29 | .loading-spinner-tiny { 30 | .loading-spinner(20px); 31 | } 32 | 33 | @progress-height: @font-size; 34 | @progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15)); 35 | @progress-background-color: @tab-background-color-active; 36 | 37 | progress { 38 | height: @progress-height; 39 | -webkit-appearance: none; 40 | border-radius: @progress-height; 41 | background-color: @progress-background-color; 42 | animation: glow 3s linear 9; // stop animation after 9 runs (30s) to limit CPU usage 43 | overflow: hidden; 44 | } 45 | 46 | progress::-webkit-progress-bar { 47 | background-color: transparent; 48 | } 49 | 50 | progress::-webkit-progress-value { 51 | // border-radius: @progress-height; 52 | // background-image: @progress-shine-gradient; 53 | background-color: @background-color-info; 54 | animation: glow 3s ease-in-out 6; 55 | } 56 | 57 | progress[value] { 58 | -webkit-animation: none; 59 | } 60 | 61 | @-webkit-keyframes animate-stripes { 62 | 100% { 63 | background-position: 100px 0px; 64 | } 65 | } 66 | 67 | @keyframes glow { 68 | 0% { 69 | background-color: @progress-background-color; 70 | } 71 | 50% { 72 | background-color: @background-color-error; 73 | } 74 | 100% { 75 | background-color: @progress-background-color; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /styles/project-find-results.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .preview-pane .preview-header { 4 | width: 100%; 5 | z-index: 1; 6 | padding: @component-padding ; 7 | font-family: @font-family-headlines; 8 | font-size: @font-size-h1; 9 | font-weight: bold; 10 | background-color: @base-background-color; 11 | border-bottom: none; // ow 12 | 13 | .preview-controls { 14 | font-family: @font-family; 15 | } 16 | } 17 | 18 | .results-view { 19 | padding: 0 @component-padding; 20 | } 21 | 22 | // Single search result 23 | .results-view .list-tree > div { 24 | background-color: @input-background-color; 25 | } 26 | 27 | @marginBetweenResults: (@component-padding / 2); 28 | 29 | .results-view .path-row { 30 | border-top: @marginBetweenResults solid @base-background-color; 31 | 32 | .icon { 33 | // right-align with line numbers 34 | margin-left: (@component-padding / 2); 35 | margin-right: (@component-padding / 2); 36 | } 37 | } 38 | 39 | .results-view .list-nested-item.selected:before { 40 | // since we add a border we must adjust the height of the list item 41 | height: @height__list-item + @marginBetweenResults; 42 | } 43 | 44 | // Overwrite internal styles that draw a line between row 45 | .preview-pane .results-view .context-row.separator, 46 | .preview-pane .results-view .match-row.separator { 47 | box-shadow: none; 48 | } 49 | 50 | .results-view .list-tree.has-collapsable-children { 51 | padding: 0; 52 | } 53 | 54 | .preview-pane .results-view .selected { 55 | > .line-number, 56 | > .preview, 57 | > .path-details.list-item.collapsed, 58 | .path-match-number { 59 | color: @text-color-selected; 60 | } 61 | } 62 | 63 | // Increase distance to search result in code 64 | .preview-pane .results-view .line-number { 65 | border-right: 1px solid @base-border-color; 66 | margin-right: @component-padding / 2; 67 | min-width: @component-padding * 4; // width of a 5-digit number 68 | padding-right: @component-padding / 2; 69 | } 70 | 71 | .preview-pane .results-view .match-row.selected .line-number { 72 | color: @text-color-subtle; 73 | } 74 | 75 | // Name of the file the search result was found in 76 | .results-view .path-details.list-item { 77 | padding: 0 @component-padding; 78 | 79 | .path-name { 80 | font-weight: bold; 81 | } 82 | 83 | .path-match-number { 84 | color: @text-color; 85 | } 86 | } 87 | 88 | .results-view .selected > .path-details.list-item { 89 | color: @text-color; 90 | } 91 | 92 | .preview-pane .results-view .list-tree .path { 93 | padding-left: 0; 94 | } 95 | 96 | // Don’t indent the list items 97 | .results-view .list-tree.has-collapsable-children li.list-item { 98 | margin-left: 0; 99 | 100 | &.selected .preview { 101 | color: @text-color; 102 | } 103 | } 104 | 105 | // Hover over the list results in a different color 106 | .results-view .search-result.list-item, 107 | .results-view .path-details.list-item { 108 | &:hover { 109 | background-color: darken(@base-background-color, 3%); 110 | } 111 | } 112 | 113 | .results-view .search-result.list-item { 114 | margin-left: 0 !important; 115 | } 116 | 117 | .preview-header .highlight-info { 118 | padding: @component-padding / 4 @component-padding / 2; 119 | } 120 | -------------------------------------------------------------------------------- /styles/settings-view.less: -------------------------------------------------------------------------------- 1 | .settings-view .config-menu .button-area { 2 | margin: 8px; 3 | } 4 | 5 | @_dimensions-checkbox: 20px; 6 | 7 | .settings-view .checkbox { 8 | padding-left: @_dimensions-checkbox; 9 | } 10 | 11 | .settings-view input[type="checkbox"] { 12 | margin: 1px 0 0 -@_dimensions-checkbox; 13 | 14 | &:after, 15 | &:before { 16 | display: none; // don’t display the custom lines that simulate the arrow 17 | } 18 | } 19 | 20 | .input-checkbox { 21 | -webkit-appearance: checkbox; 22 | } 23 | 24 | .editor.mini .placeholder-text, 25 | .editor.mini::shadow .placeholder-text { 26 | color: fadeout(@text-color-ignored, 25%); 27 | } 28 | 29 | .settings-view .package-card .meta-user .avatar { 30 | border-radius: 100%; 31 | } 32 | 33 | .settings-view .package-card .meta-user, 34 | .settings-view .package-card .meta-controls { 35 | margin-top: 0; 36 | } 37 | 38 | .settings-view .package-card .meta-controls .btn-group { 39 | margin-top: 0 !important; 40 | } 41 | 42 | .settings-view .package-card .btn:hover { 43 | cursor: pointer; 44 | } 45 | 46 | .settings-view .package-card { 47 | cursor: pointer; 48 | overflow: visible; 49 | border: none; 50 | padding: 0; 51 | border-radius: @component-border-radius-small; 52 | background-color: @button-background-color; 53 | border-bottom: 1/@rem solid @base-border-color; 54 | } 55 | 56 | .package-card .body { 57 | padding: @component-padding; 58 | } 59 | 60 | .package-card .meta { 61 | padding: @component-padding; 62 | border-top: 1/@rem solid @base-border-color; 63 | } 64 | 65 | .settings-view .package-card .package-version { 66 | color: @text-color-subtle; 67 | } 68 | 69 | .settings-view .package-card .package-name { 70 | font-weight: bold; 71 | font-size: @font-size-h3; 72 | } 73 | 74 | .settings-view .package-card .meta-user .author { 75 | color: @text-color; 76 | display: inline-block; 77 | transform: translateY(2px); // center with avatar 78 | } 79 | 80 | .settings-view .package-card .stats { 81 | padding: @component-padding; 82 | } 83 | 84 | // Amount of downloads, amount of likes, etc. 85 | .settings-view .package-card .stats .stats-item { 86 | color: @text-color-subtle; 87 | font-size: 0.9em; 88 | } 89 | 90 | .settings-view .package-card .stats .stats-item .icon:before { 91 | transform: translateY(2px); 92 | } 93 | 94 | .badge { 95 | font-weight: bold; 96 | color: contrast(@background-color-highlight); 97 | background: @background-color-highlight; 98 | 99 | &.badge-flexible { 100 | padding: (@component-padding / 3) @component-padding; 101 | } 102 | } 103 | 104 | .settings-view .package-card .meta-controls .status-indicator { 105 | width: 3px; 106 | border-color: transparent; 107 | min-width: 3px; 108 | } 109 | 110 | .settings-view section .section-heading, 111 | .settings-view .section .section-heading, 112 | ul.background-message.centered { 113 | font-family: @font-family-headlines; 114 | } 115 | 116 | // These are the sections making 117 | .settings-view .package-detail .section { 118 | padding: @component-padding * 2; // same padding as the breadcrumb navigation 119 | } 120 | 121 | .settings-view .packages .search-container { 122 | margin-bottom: 40px; // same as padding of parent element 123 | } 124 | 125 | // Better install animations 126 | .settings-view .package-card .meta-controls .install-button.is-installing, 127 | .settings-view .package-card .meta-controls .uninstall-button.is-uninstalling { 128 | background-image: url(atom://native-ui/images/spinner-128.gif); 129 | background-color: @button-background-color; 130 | background-repeat: no-repeat; 131 | background-size: 16px; 132 | background-position: 8px 50%; 133 | padding-left: 30px; 134 | animation: none; 135 | border-color: @button-border-color; 136 | color: @text-color; 137 | 138 | &:before { // don’t show the current icon 139 | display: none; 140 | } 141 | } 142 | 143 | .alert.alert-info.icon-hourglass { 144 | background-image: url(atom://native-ui/images/spinner-128.gif); 145 | background-color: @background-color-highlight; 146 | background-repeat: no-repeat; 147 | background-size: 16px; 148 | background-position: 12px 50%; 149 | padding-left: 35px; 150 | animation: none; 151 | border-color: @base-border-color; 152 | color: @text-color-highlight; 153 | height: 48px; // somehow necessary because the other box is one pixel higher 154 | 155 | &:before { 156 | display: none; // don't show old icon 157 | } 158 | } 159 | 160 | .settings-view .config-menu .nav > li > a { 161 | cursor: default; // Remove the mouse hand on hover 162 | font-size: 1.15rem; 163 | padding: @component-padding/1.5 @component-padding*2; 164 | color: @text-color-highlight; 165 | 166 | &:hover { 167 | cursor: default; // Remove the mouse hand on hover 168 | background-color: transparent; 169 | color: @text-color-highlight; 170 | } 171 | 172 | &:before { // icon 173 | margin-right: @component-padding; 174 | color: lighten(@text-color-highlight, 45%); 175 | } 176 | } 177 | 178 | .settings-view .config-menu .nav > li.active > a { 179 | color: @text-color-highlight; 180 | background-color: rgba(0,0,0, 0.1); 181 | } 182 | 183 | .settings-view .setting-description { 184 | letter-spacing: 0.02rem; // increase legibility 185 | } 186 | 187 | .settings-view div > section.section.settings-panel { 188 | border-top: none; 189 | } 190 | 191 | // First-level heading 192 | .settings-view section .section-heading, 193 | .settings-view .section .section-heading { 194 | font-size: @font-size-h1; 195 | font-family: @font-family-headlines; 196 | } 197 | 198 | // Second-level heading 199 | .settings-view .sub-section .sub-section-heading { 200 | font-size: @font-size-h2; 201 | font-family: @font-family-headlines; 202 | } 203 | 204 | // Change the seperator icon in the settings breadcrumbs 205 | .settings-view .breadcrumb > li + li:before { 206 | content: "\f078"; 207 | font-family: "Octicons Regular"; 208 | padding: 0 @component-padding; 209 | } 210 | 211 | // Add more spacing between input fields and their label text 212 | .settings-view .control-label { 213 | margin-bottom: 1em; 214 | } 215 | 216 | .settings-view .settings-panel .control-group + .control-group { 217 | margin-top: 2em; 218 | } 219 | -------------------------------------------------------------------------------- /styles/sites.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | .ui-site(@num, @color) { 5 | .ui-site-@{num} { 6 | background-color: @color; 7 | } 8 | } 9 | 10 | .ui-site(1, @ui-site-color-1); 11 | .ui-site(2, @ui-site-color-2); 12 | .ui-site(3, @ui-site-color-3); 13 | .ui-site(4, @ui-site-color-4); 14 | .ui-site(5, @ui-site-color-5); 15 | -------------------------------------------------------------------------------- /styles/status-bar.git.less: -------------------------------------------------------------------------------- 1 | .github-StatusBarTileController { 2 | background-color: @background-git-view; 3 | margin-left: @component-padding; 4 | 5 | &:hover { 6 | background-color: @background-git-view !important; // keep the color 7 | } 8 | } 9 | 10 | .github-StatusBarTileController .inline-block, 11 | .github-StatusBarTileController a { 12 | color: @text-color-selected; 13 | 14 | &:hover { // indicate clickability 15 | text-decoration: underline; 16 | cursor: pointer; 17 | } 18 | } 19 | 20 | .github-StatusBarTileController .inline-block:only-child, 21 | .github-StatusBarTileController .github-branch.inline-block { 22 | margin-left: 0; 23 | } 24 | 25 | .github-StatusBarTileController .icon:before { 26 | margin-right: @component-padding / 2; 27 | } 28 | -------------------------------------------------------------------------------- /styles/status-bar.less: -------------------------------------------------------------------------------- 1 | @import "syntax-variables"; 2 | 3 | status-bar { 4 | border-top: 1/@rem solid @base-border-color; 5 | border-bottom: 1/@rem solid @status-bar-background-color; 6 | background: linear-gradient(to top, @status-bar-background-color, tint(@status-bar-background-color, 60%)); 7 | height: 28/@rem; 8 | line-height: 20/@rem; 9 | 10 | .is-blurred & { 11 | background: @base-background-color; 12 | } 13 | } 14 | 15 | status-bar .status-bar-right, 16 | status-bar .status-bar-left { 17 | padding-top: @component-padding / 4; 18 | padding-bottom: @component-padding / 4; 19 | } 20 | 21 | status-bar .status-bar-right > *, 22 | status-bar .status-bar-left > * { 23 | padding: 0 @component-padding; 24 | border-radius: @component-border-radius-small; 25 | 26 | &:hover:not(busy-signal), 27 | &:active:not(busy-signal), 28 | &:focus:not(busy-signal), 29 | a:hover, 30 | a:active, 31 | a:focus { 32 | text-decoration: none; 33 | } 34 | 35 | // Hover Rules for some cases that are not clickable 36 | &:hover:not(.git-view):not(busy-signal):not(.linter-status-count):not(status-bar-launch-mode):not(status-bar-selection) { 37 | color: @text-color-selected; 38 | background-color: darken(@tab-background-color, 5%); 39 | cursor: pointer; 40 | 41 | a, 42 | span { 43 | color: @text-color-selected; 44 | } 45 | } 46 | }// status-bar .status-bar-right a.inline-block 47 | 48 | .inline-block:empty:not(busy-signal):not(status-bar-launch-mode) { 49 | display: none; 50 | } 51 | 52 | // Otherwise the clickable area is uneven to the right side 53 | status-bar-cursor .inline-block { 54 | margin-right: 0; 55 | } 56 | 57 | // Don’t make the display of the cursor position jump. 58 | .cursor-position, 59 | .selection-count { 60 | font-family: var(--editor-font-family); 61 | } 62 | -------------------------------------------------------------------------------- /styles/tabs.git-status.less: -------------------------------------------------------------------------------- 1 | // Git status triangle for tabs 2 | .tab-git-status-indicator { // mixin 3 | content: ""; 4 | position: absolute; 5 | top: 0; 6 | right: 0; 7 | width: 0; 8 | height: 0; 9 | border-style: solid; 10 | border-width: 0 @font-size-small @font-size-small 0; 11 | } 12 | 13 | // Tab modified 14 | .tab.active .title.status-modified { 15 | color: @text-color; 16 | 17 | &:after { 18 | .tab-git-status-indicator; 19 | border-color: transparent @text-color-modified transparent transparent; 20 | } 21 | } 22 | 23 | // Active tab added 24 | .tab .title.status-modified { 25 | color: @text-color; 26 | 27 | &:after { 28 | .tab-git-status-indicator; 29 | border-color: transparent darken(desaturate(@text-color-modified, 20%), 15%) transparent transparent; 30 | } 31 | } 32 | 33 | // Normal Tab added 34 | .tab .title.status-added { 35 | color: @text-color; 36 | 37 | &:after { 38 | .tab-git-status-indicator; 39 | border-color: transparent darken(desaturate(@text-color-added, 20%), 15%) transparent transparent; 40 | } 41 | } 42 | 43 | // Active Tab added 44 | .tab.active .title.status-added { 45 | color: @text-color; 46 | 47 | &:after { 48 | .tab-git-status-indicator; 49 | border-color: transparent @text-color-added transparent transparent; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | @tab-top-padding: 5px; 4 | @tab-bottom-border-height: 5px; 5 | @tab-padding-sides: 6px; 6 | @tab-border: 1px solid @base-border-color; 7 | @tab-bar-inset-box-shadow: inset 0 -2px 2px -2px rgba(0, 0, 0, 0.15); 8 | 9 | // “Modified” icon 10 | @dimensions-modified-icon: 6px; 11 | @top-modified-icon: 9px; 12 | @left-modified-icon: 12px; 13 | 14 | // “Close” icon 15 | @dimensions-close-icon: 18px; 16 | @padding-top-close-icon: 3px; 17 | 18 | .tab-bar { 19 | background: linear-gradient( 20 | to top, 21 | darken(@tab-bar-background-color, 10%), 22 | darken(@tab-bar-background-color, 20%) 23 | ); 24 | overflow-x: auto; 25 | overflow-y: hidden; 26 | box-shadow: @tab-bar-inset-box-shadow; 27 | z-index: 1; 28 | border-radius: 0; 29 | 30 | &:empty { 31 | display: none; 32 | } 33 | 34 | &::-webkit-scrollbar { 35 | display: none; 36 | } 37 | } // tab-bar 38 | 39 | .tab-bar .tab { 40 | position: relative; 41 | font-size: @font-size; 42 | text-align: center; 43 | background-color: @tab-background-color; 44 | box-shadow: @tab-bar-inset-box-shadow; 45 | border-right: 1px solid @tab-bar-border-color; 46 | line-height: @tab-height; 47 | color: @tab-text-color; 48 | padding: 0 0 0 @tab-padding-sides; 49 | margin: 0; 50 | max-width: 100%; 51 | 52 | &:hover { 53 | background-color: @tab-background-color-hover; 54 | } 55 | 56 | &:last-child { 57 | border-right: none; 58 | } 59 | } 60 | 61 | // Style only for the file tabs, not the docks. 62 | [location="center"].tab-bar .tab { 63 | flex: none; 64 | padding: 0 (@component-padding * 2); 65 | min-width: 140px; 66 | 67 | .native-ui-autoResizeTabs & { 68 | flex: 1; 69 | flex-grow: 1; 70 | transition: max-width 0.35s cubic-bezier(0.785, 0.135, 0.150, 0.860); // resize tabs with animation 71 | } 72 | } 73 | 74 | .tab:hover .title, 75 | .tab.modified .title { 76 | -webkit-mask: linear-gradient(to right, transparent, black 1.125em) no-repeat; 77 | -webkit-mask-position: 0.4em 0; 78 | } 79 | 80 | // Active tab 81 | .tab-bar .tab.active { 82 | flex: 1; 83 | color: @text-color-highlight; 84 | background: linear-gradient( 85 | to top, 86 | @tab-background-color-active, 87 | lighten(@tab-background-color-active, 6%) 88 | ); 89 | } 90 | 91 | // Style only for the file tabs, not the docks. 92 | [location="center"].tab-bar .tab.active { 93 | flex: none; 94 | 95 | // User settings 96 | .native-ui-autoResizeTabs & { 97 | flex: 1; 98 | } 99 | } 100 | 101 | .tab-bar .tab.active .title { 102 | padding-right: 0; // otherwise the title jumps when it’s the active tab 103 | } 104 | 105 | .tab-bar .tab .close-icon { 106 | display: none; 107 | z-index: 3; 108 | height: @dimensions-close-icon; 109 | width: @dimensions-close-icon; 110 | color: @text-color !important; 111 | border-radius: 2px; 112 | text-align: left; 113 | 114 | &:hover, 115 | &:active { 116 | background: @background-close-button-hover; 117 | } 118 | 119 | &:before { // the close icon itself 120 | content: "✕"; 121 | position: relative; 122 | top: -3px; 123 | width: 100%; 124 | text-align: center; 125 | } 126 | } // .close-icon 127 | 128 | // Change the modified icon to a black bullet 129 | .tab-bar .tab.modified:not(:hover) .close-icon { 130 | border: none; 131 | background-color: @text-color; 132 | } 133 | 134 | // Display close icon only when the tab is hovered 135 | .tab-bar .tab:hover .close-icon, 136 | .tab-bar .tab.modified:hover .close-icon { // Display close icon when modified icon is hovered 137 | display: inline-block; 138 | top: @padding-top-close-icon; 139 | left: @tab-padding-sides; 140 | width: @dimensions-close-icon; 141 | height: @dimensions-close-icon; 142 | } 143 | 144 | // display modified indicator in the tab when not hovered 145 | .tab-bar .tab.modified:not(:hover) { 146 | .close-icon { 147 | display: inline-block; 148 | top: @top-modified-icon; 149 | left: @left-modified-icon; 150 | width: @dimensions-modified-icon; 151 | height: @dimensions-modified-icon; 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /styles/text.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | h1, 5 | h2, 6 | h3 { 7 | line-height: 1.2; 8 | margin-bottom: 1em; 9 | font-family: @font-family-headlines; 10 | } 11 | 12 | h1 { 13 | font-size: @font-size-h1; 14 | } 15 | 16 | h2 { 17 | font-size: @font-size-h2; 18 | } 19 | 20 | h3 { 21 | font-size: @font-size-h3; 22 | } 23 | 24 | h4 { 25 | font-size: @font-size-h4; 26 | } 27 | 28 | p { 29 | margin-bottom: 1em; 30 | } 31 | 32 | label { 33 | font-weight: normal; 34 | } 35 | 36 | pre { 37 | border-radius: 0; 38 | padding: @component-padding; 39 | font-size: inherit; 40 | } 41 | 42 | code { 43 | background: @background-color-highlight; 44 | border-radius: 0; 45 | padding: 1px 2px; // same as `.highlight` 46 | } 47 | 48 | .selected { 49 | .text(highlight); 50 | } 51 | 52 | .text-smaller { 53 | font-size: @font-size-small; 54 | } 55 | 56 | .text-subtle { 57 | .text(subtle); 58 | } 59 | 60 | .text-highlight { 61 | .text(highlight); 62 | } 63 | 64 | .text-error { 65 | .text(error); 66 | } 67 | 68 | .text-info { 69 | .text(info); 70 | 71 | &:hover { 72 | color: @text-color-info; 73 | } 74 | } 75 | 76 | .text-warning { 77 | .text(warning); 78 | &:hover { color: @text-color-warning; } 79 | } 80 | 81 | .text-success { 82 | .text(success); 83 | &:hover { color: @text-color-success; } 84 | } 85 | 86 | span.highlight-info { 87 | border-radius: @component-border-radius-small; // increase specificity, since “attribute selector” < “class selector” 88 | padding: 1px 2px; 89 | } 90 | 91 | .highlight-color(info, @background-color-info); 92 | .highlight-color(warning, @background-color-warning); 93 | .highlight-color(error, @background-color-error); 94 | .highlight-color(success, @background-color-success); 95 | 96 | kbd { 97 | color: @text-color-highlight; 98 | } 99 | -------------------------------------------------------------------------------- /styles/tooltips.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .tooltip { 4 | white-space: nowrap; 5 | 6 | .keystroke { 7 | color: @text-color-subtle; 8 | padding-left: 2/@rem; 9 | } 10 | 11 | &.in { 12 | opacity: 1; 13 | } 14 | 15 | .tooltip-inner { 16 | background-color: @tip-background-color; 17 | padding: (@component-padding / 3) @component-padding; 18 | color: @tip-text-color; 19 | white-space: nowrap; 20 | max-width: none; 21 | letter-spacing: 0.01rem; 22 | border-radius: @component-border-radius-small; 23 | } 24 | 25 | &.top .tooltip-arrow { 26 | border-top-color: @tip-arrow-color; 27 | } 28 | &.top-left .tooltip-arrow { 29 | border-top-color: @tip-arrow-color; 30 | } 31 | &.top-right .tooltip-arrow { 32 | border-top-color: @tip-arrow-color; 33 | } 34 | &.right .tooltip-arrow { 35 | border-right-color: @tip-arrow-color; 36 | } 37 | &.left .tooltip-arrow { 38 | border-left-color: @tip-arrow-color; 39 | } 40 | &.bottom .tooltip-arrow { 41 | border-bottom-color: @tip-arrow-color; 42 | } 43 | &.bottom-left .tooltip-arrow { 44 | border-bottom-color: @tip-arrow-color; 45 | } 46 | &.bottom-right .tooltip-arrow { 47 | border-bottom-color: @tip-arrow-color; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .git-status-bullet(@color) { 4 | &:after { 5 | content: ""; 6 | width: 7px; 7 | height: 7px; 8 | float: left; 9 | position: relative; 10 | top: 8px; 11 | left: -13px; 12 | margin-right: -12px; 13 | background-color: @color; 14 | border: 1px solid darken(@color, 7%); 15 | border-radius: 100%; 16 | } 17 | } 18 | 19 | .git-status-bullet--folder(@color) { 20 | &:after { 21 | border-color: @text-color; 22 | left: 15px; 23 | } 24 | } 25 | 26 | .tree-view { 27 | background: @tree-view-background-color; 28 | } 29 | 30 | .list-group .selected:before, 31 | .list-tree .selected:before { 32 | height: @height__list-item; 33 | background: @tree-view-background-color--blurred; 34 | 35 | .tree-view:focus & { 36 | background: @tree-view-background-color--active; 37 | } 38 | } 39 | 40 | // Modified file 41 | .list-item, 42 | .header.list-item { 43 | &.status-modified { 44 | .git-status-bullet(@text-color-modified); 45 | } 46 | } 47 | 48 | // Added file 49 | .list-item, 50 | .header.list-item { 51 | &.status-added { 52 | .git-status-bullet(@text-color-added); 53 | } 54 | } 55 | 56 | // Removed file 57 | .list-item, 58 | .header.list-item { 59 | &.status-removed { 60 | .git-status-bullet(@text-color-removed); 61 | } 62 | } 63 | 64 | // Modified folder 65 | .status-modified > .header.list-item { 66 | .git-status-bullet(@text-color-modified); 67 | .git-status-bullet--folder(@text-color-modified); 68 | } 69 | 70 | // Added folder 71 | .status-added > .header.list-item { 72 | .git-status-bullet(@text-color-added); 73 | .git-status-bullet--folder(@text-color-added); 74 | } 75 | 76 | // These classes are needed so that different files don’t appear color-coded based on their Git status 77 | // Selected 78 | .list-group li:not(.list-nested-item).selected, 79 | .list-tree li:not(.list-nested-item).selected, 80 | .list-group li.list-nested-item.selected > .list-item, 81 | .list-tree li.list-nested-item.selected > .list-item, 82 | // Selected project root 83 | .project-root li:not(.list-nested-item).selected, 84 | .project-root li.list-nested-item.selected > .list-item, 85 | // Modified 86 | .list-group li.file:not(.list-nested-item).status-modified, 87 | .list-tree li.file:not(.list-nested-item).status-modified, 88 | .list-group li.file.list-nested-item.status-modified > .list-item, 89 | .list-tree li.file.list-nested-item.status-modified > .list-item, 90 | .list-group li.directory:not(.list-nested-item).status-modified, 91 | .list-tree li.directory:not(.list-nested-item).status-modified, 92 | .list-group li.directory.list-nested-item.status-modified > .list-item, 93 | .list-tree li.directory.list-nested-item.status-modified > .list-item, 94 | // Added 95 | .list-group li.file:not(.list-nested-item).status-added, 96 | .list-tree li.file:not(.list-nested-item).status-added, 97 | .list-group li.file.list-nested-item.status-added > .list-item, 98 | .list-tree li.file.list-nested-item.status-added > .list-item, 99 | .list-group li.directory:not(.list-nested-item).status-added, 100 | .list-tree li.directory:not(.list-nested-item).status-added, 101 | .list-group li.directory.list-nested-item.status-added > .list-item, 102 | .list-tree li.directory.list-nested-item.status-added > .list-item, 103 | 104 | .expanded.status-modified .header.list-item:before, 105 | .expanded.status-added .header.list-item:before { 106 | color: @text-color; 107 | } 108 | 109 | .list-group li:not(.list-nested-item), 110 | .list-tree li:not(.list-nested-item), 111 | .list-group li.list-nested-item > .list-item, 112 | .list-tree li.list-nested-item > .list-item { 113 | line-height: @height__list-item; 114 | text-shadow: none; 115 | } 116 | 117 | // Folder is open 118 | .list-tree.has-collapsable-children .list-nested-item > .list-item:before { 119 | content: "▶" !important; 120 | font-size: @font-size-small !important; 121 | transform: rotate(90deg) translate(1px, 2px); 122 | } 123 | 124 | // Folder is closed 125 | .list-tree.has-collapsable-children .list-nested-item.collapsed > .list-item:before { 126 | transform: rotate(0deg); 127 | } 128 | -------------------------------------------------------------------------------- /styles/tree-view.project-root.less: -------------------------------------------------------------------------------- 1 | // display project-root bold 2 | .project-root .project-root-header .icon-repo { 3 | font-weight: bold; 4 | 5 | &:before { // Remove repo icon 6 | display: none; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /styles/ui-mixins.buttons.less: -------------------------------------------------------------------------------- 1 | @darkening-factor: 15%; 2 | @box-shadow-bottom: inset 0 -1px 0 0 hsla(0,0%,0%, 0.3); 3 | 4 | .mixin-btn(@color) { 5 | background-color: @color; 6 | border-radius: @component-border-radius-small; 7 | font-size: 12px; 8 | border: none; 9 | color: @button-text-color-inverted; 10 | box-shadow: @box-shadow-bottom; 11 | 12 | &:hover { 13 | background-color: @color; 14 | } 15 | 16 | &:active, 17 | &:focus { 18 | outline: none !important; 19 | box-shadow: @box-shadow-bottom !important; 20 | } 21 | 22 | &.icon:hover { 23 | color: @text-color-selected; 24 | } 25 | } 26 | 27 | .mixin-btn-colored--active-focus-selected(@color) { 28 | &:active, 29 | &:focus, 30 | &.selected { 31 | background: linear-gradient(to top, shade(@color, 15%), @color); 32 | color: hsla(0,0%,100%, 0.75); 33 | } 34 | } 35 | 36 | @darkening-factor-selected-default: 50%; 37 | -------------------------------------------------------------------------------- /styles/ui-mixins.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fv0/native-ui/ad67a7d5ae27d78fce5ea2c9db577b8d7c6af17a/styles/ui-mixins.less -------------------------------------------------------------------------------- /styles/ui-mixins.text.less: -------------------------------------------------------------------------------- 1 | .highlight-color(@name, @color) { 2 | .highlight-@{name} { 3 | color: @text-color-selected; 4 | font-weight: bold; 5 | text-shadow: none; 6 | background-color: @color; 7 | border-radius: @component-border-radius; 8 | padding: 1px 5px; 9 | } 10 | } 11 | 12 | .text(normal) { 13 | font-weight: normal; 14 | color: @text-color; 15 | } 16 | .text(subtle) { 17 | font-weight: normal; 18 | color: @text-color-subtle; 19 | text-shadow: none; 20 | } 21 | .text(highlight) { 22 | font-weight: normal; 23 | color: @text-color-highlight; 24 | } 25 | .text(selected) { 26 | font-weight: normal; 27 | color: @text-color-selected; 28 | text-shadow: none; 29 | } 30 | 31 | .text(info) { 32 | color: @text-color-info; 33 | text-shadow: none; 34 | } 35 | .text(success) { 36 | color: @text-color-success; 37 | text-shadow: none; 38 | } 39 | .text(warning) { 40 | color: @text-color-warning; 41 | text-shadow: none; 42 | } 43 | .text(error) { 44 | color: @text-color-error; 45 | text-shadow: none; 46 | } 47 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | @import "syntax-variables"; 2 | 3 | @ui-syntax-color : @syntax-background-color; 4 | @ui-s-h : hue(@ui-syntax-color); 5 | @ui-s-s : saturation(@ui-syntax-color); 6 | @ui-s-l : lightness(@ui-syntax-color); 7 | @ui-inv : 10%; // inverse lightness if below 8 | 9 | .ui-hue() when (@ui-s-s = 0) { // Use blue hue when no saturation 10 | @ui-hue: 220; 11 | } 12 | 13 | .ui-hue() when (@ui-s-s > 0) { 14 | @ui-hue: @ui-s-h; 15 | } 16 | 17 | .ui-hue(); 18 | 19 | @text-color : hsl(0, 0%, 26%); 20 | @text-color-subtle : hsl(0, 0%, 60%); 21 | @text-color-highlight : hsl(0, 0%, 0%); 22 | @text-color-selected : hsl(0, 0%, 100%); 23 | 24 | // Colors taken from https://developer.apple.com/macos/human-interface-guidelines/visual-design/color/ 25 | @text-color-info : hsl(211, 100%, 51%); 26 | @text-color-success : hsl(104, 68%, 53%); 27 | @text-color-warning : hsl(35, 100%, 50%); 28 | @text-color-error : hsl(3, 100%, 59%); 29 | 30 | @text-color-ignored : @text-color-subtle; 31 | @text-color-added : @text-color-success; 32 | @text-color-renamed : @text-color-info; 33 | @text-color-modified : @text-color-warning; 34 | @text-color-removed : @text-color-error; 35 | 36 | @background-color-info : @text-color-info; 37 | @background-color-success : @text-color-success; 38 | @background-color-warning : @text-color-warning; 39 | @background-color-error : @text-color-error; 40 | @background-color-highlight : hsl(0, 0%, 85%); 41 | @background-color-selected : @text-color-info; 42 | 43 | @app-background-color : hsl(0, 0%, 80%); 44 | 45 | @base-background-color : hsl(0, 0%, 92%); 46 | @base-background-color-transparent : hsla(0, 0%, 100%, 0.7); 47 | @base-border-color : hsl(0, 0%, 78%); 48 | @base-border-color-transparent : hsla(0, 0%, 0%, 0.2); 49 | 50 | @pane-item-background-color : @base-background-color; 51 | @pane-item-border-color : @base-border-color; 52 | 53 | @input-background-color : hsl(0, 0%, 100%); 54 | @input-border-color : fadeout(@base-border-color, 10%); 55 | @input-border-color-active : hsl(211, 58%, 70%); 56 | @input-outline-color-active : hsl(210, 70%, 74%); 57 | 58 | @tool-panel-background-color : @base-background-color; 59 | @tool-panel-border-color : @base-border-color; 60 | 61 | @panel-heading-background-color : hsl(0, 0%, 76%); 62 | @panel-heading-border-color : transparent; 63 | 64 | @overlay-background-color : hsl(0, 0%, 92%); 65 | @overlay-border-color : @base-border-color; 66 | 67 | @button-background-color : @input-background-color; 68 | @button-background-color-selected : @button-background-color; 69 | @button-border-color : hsl(0, 0%, 82%); 70 | @button-border-color--bottom : hsl(0, 0%, 70%); 71 | @button-text-color : @text-color; 72 | @button-text-color-inverted : @text-color-selected; 73 | 74 | @tab-bar-border-color : hsl(0, 0%, 54%); 75 | @tab-bar-border-color-transparent : hsla(0, 0%, 0%, 0.3); 76 | @tab-background-color : hsl(0, 0%, 70%); 77 | @tab-bar-background-color : @tab-background-color; 78 | @tab-background-color-active : hsl(0, 0%, 82%); 79 | @tab-bar-background-color--blurred : @tab-background-color-active; 80 | @tab-background-color-hover : hsl(0, 0%, 65%); 81 | @tab-border-color : @tab-bar-border-color; 82 | @tab-text-color : @text-color-highlight; 83 | 84 | @resize-handle-color-hover : @base-border-color-transparent; 85 | @resize-handle-color-active : @tab-bar-border-color-transparent; 86 | 87 | @tip-background-color : hsl(@ui-hue, 10%, 30%); 88 | @tip-text-color : @text-color-selected; 89 | @tip-arrow-color : hsl(@ui-hue, 10%, 30%); 90 | 91 | @status-bar-background-color : @tab-background-color-active; 92 | @status-bar-border-color : @tab-bar-border-color-transparent; 93 | 94 | @tree-view-background-color : transparent; 95 | @tree-view-border-color : @tab-bar-border-color-transparent; 96 | @tree-view-background-color-highlight: linear-gradient(to right, rgba(0,0,0, 0.18), rgba(0,0,0, 0.15), rgba(0,0,0, 0.22)); 97 | 98 | @ui-site-color-1 : @background-color-success; // green 99 | @ui-site-color-2 : @background-color-info; // blue 100 | @ui-site-color-3 : @background-color-warning; // orange 101 | @ui-site-color-4 : hsl(292, 89%, 57%); // purple 102 | @ui-site-color-5 : hsl(54, 91%, 53%); // yellow 103 | 104 | @background-close-button-hover : hsla(0, 0%, 0%, 0.12); 105 | 106 | @modular-scale: 1.2; 107 | 108 | @font-size : 12px; 109 | @font-size-small : @font-size / @modular-scale; 110 | @input-font-size : 1.15em; 111 | @disclosure-arrow-size : 12px; 112 | @font-size-h1 : round(@font-size * (@modular-scale * @modular-scale * @modular-scale * @modular-scale)); 113 | @font-size-h2 : round(@font-size * (@modular-scale * @modular-scale * @modular-scale)); 114 | @font-size-h3 : round(@font-size * (@modular-scale * @modular-scale)); 115 | @font-size-h4 : round(@font-size * @modular-scale); 116 | 117 | @component-padding : @font-size; 118 | @component-icon-padding : 6px; 119 | @component-icon-size : 16px; 120 | @component-line-height : @font-size * 2; 121 | @component-border-radius : 6px; 122 | @component-border-radius-small : @component-border-radius / 2; 123 | @component-border-radius-large : @component-border-radius * 2; 124 | 125 | @tab-height : 24px; 126 | @height__list-item : @tab-height; 127 | 128 | // Make it possible to convert pixel to relative units 129 | @html-font-size : unit(@font-size); // Your base font-size in pixels 130 | @em : @html-font-size * 1em; // Shorthand for outputting ems, e.g. “12/@em” 131 | @rem : @html-font-size * 1rem; // Shorthand for outputting ems, e.g. “12/@rem 132 | 133 | @font-family : ".SFNSText", "Lucida Grande", "Segoe UI", sans-serif; 134 | @font-family-headlines : ".SFNSDisplay", "Lucida Grande", "Segoe UI", sans-serif; 135 | 136 | @transition--default : 0.15s ease-out; 137 | @opacity-blurred : 0.5; 138 | @background-git-view : hsl(@ui-hue, @ui-s-s, 25%); 139 | -------------------------------------------------------------------------------- /styles/utilities.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | kbd { 5 | font-size: 100%; 6 | } 7 | 8 | .badge { 9 | .text(highlight); 10 | background: @background-color-highlight; 11 | } 12 | --------------------------------------------------------------------------------