├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github └── codeowners ├── .gitignore ├── .husky └── pre-commit ├── .mailmap ├── .npmrc ├── .prettierignore ├── .remarkignore ├── .remarkrc.mjs ├── .stylelintrc.js ├── changelog.md ├── index.less ├── lib └── main.coffee ├── license ├── lint-staged.config.js ├── package-lock.json ├── package.json ├── prettier.config.js ├── readme.md ├── spec ├── darker-form-focusing-effect-spec.coffee └── full-width-tab-sizing-spec.coffee └── styles ├── atom.less ├── buttons.less ├── editor.less ├── inputs.less ├── lists.less ├── messages.less ├── nord.less ├── notifications.less ├── overlays.less ├── package-support ├── autocomplete-plus.less ├── build.less ├── color-picker.less ├── deprecation-cop.less ├── expose.less ├── imdone-atom.less ├── indent-guide-improved.less ├── markdown-preview.less ├── minimap-git-diff.less ├── minimap.less ├── project-manager.less ├── script.less ├── timecop.less └── tool-bar.less ├── panels.less ├── progress-indicator.less ├── settings-view.less ├── sites.less ├── status-bar.less ├── tabs.less ├── text.less ├── tooltips.less ├── tree-view.less ├── ui-animations.less ├── ui-mixins.less ├── ui-theme-settings.less └── ui-variables.less /.editorconfig: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | # Configurations for EditorConfig. 5 | # See https://editorconfig.org/#file-format-details for more details. 6 | 7 | # +--------------------+ 8 | # + Base Configuration + 9 | # +--------------------+ 10 | root = true 11 | 12 | [*] 13 | charset = utf-8 14 | end_of_line = lf 15 | indent_size = 2 16 | indent_style = space 17 | insert_final_newline = true 18 | max_line_length = 160 19 | trim_trailing_whitespace = true 20 | 21 | # +-----------+ 22 | # + Languages + 23 | # +-----------+ 24 | # +--- Markdown ---+ 25 | [*.{md}] 26 | max_line_length = off 27 | trim_trailing_whitespace = false 28 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | # Path match pattern to ignore (i.e. not lint) certain files and folders. 5 | # References: 6 | # 1. https://eslint.org/docs/latest/use/configure/ignore 7 | 8 | node_modules/ 9 | 10 | # Explicitly include specific "dotfiles". 11 | # ESLint automatically applies ignore pattern for "dotfiles" by default to prevent accidentally lint over paths like 12 | # `.git` or any other critical paths. 13 | !**/.eslintrc.js 14 | !.remarkrc.mjs 15 | !.stylelintrc.js 16 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /** 7 | * Configurations for ESLint. 8 | * @see https://eslint.org/docs/latest/use/configure 9 | * @see https://eslint.org/docs/latest/use/configure/#using-configuration-files 10 | * @see https://eslint.org/docs/latest/use/configure/#specifying-environments 11 | * @see https://eslint.org/docs/latest/rules 12 | */ 13 | module.exports = { 14 | root: true, 15 | env: { 16 | jasmine: true, 17 | atomtest: true, 18 | }, 19 | globals: { 20 | atom: true, 21 | }, 22 | extends: [ 23 | "@svengreb/eslint-config-base", 24 | /* 25 | * Enable support for projects using Prettier. 26 | * Note that this must always be placed after the `@svengreb/eslint-config-base` preset to take precedence, otherwise it won't prevent errors 27 | * due to useless and possibly conflicting rules! 28 | */ 29 | "@svengreb/eslint-config-base/prettier", 30 | ], 31 | overrides: [ 32 | { 33 | files: ["*.js"], 34 | rules: { 35 | "capitalized-comments": "off", 36 | }, 37 | }, 38 | ], 39 | }; 40 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | # Configuration to define attributes per path. 5 | # 6 | # References: 7 | # 1. https://git-scm.com/docs/gitattributes 8 | # 2. https://git-scm.com/book/en/v2/Customizing-Git-Git-Attributes#Keyword-Expansion 9 | 10 | # Automatically perform line feed (LF) normalization for files detected as text and 11 | # leave all files detected as binary untouched. 12 | * text=auto eol=lf 13 | -------------------------------------------------------------------------------- /.github/codeowners: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | # Configuration for the GitHub feature to automatically request reviews from the code owners 5 | # when a pull request changes any owned files. 6 | # 7 | # References: 8 | # 1. https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners#codeowners-file-location 9 | # 2. https://github.com/blog/2392-introducing-code-owners 10 | 11 | # +----------------------+ 12 | # + Core Team Code Owner + 13 | # +----------------------+ 14 | * @svengreb 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | # Path match pattern to intentionally ignore untracked files and directories. 5 | # See https://git-scm.com/docs/gitignore for more details. 6 | 7 | # +---------+ 8 | # + Node.js + 9 | # +---------+ 10 | node_modules/ 11 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # Copyright (c) 2016-present Sven Greb 4 | # This source code is licensed under the Creative Commons Attribution-ShareAlike 4.0 International license found in the license file. 5 | 6 | # Git "pre-commit" hook for husky. 7 | # References: 8 | # 1. https://github.com/typicode/husky 9 | # 2. https://git-scm.com/docs/githooks#_pre_commit 10 | 11 | . "$(dirname "$0")/_/husky.sh" 12 | 13 | npm exec lint-staged 14 | -------------------------------------------------------------------------------- /.mailmap: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | # Configuration for the Git mail mapping feature to coalesce together commits by the same person in the shortlog, 5 | # where their name and/or email address was spelled differently or has been changed. 6 | # See https://git-scm.com/docs/git-shortlog#_mapping_authors for more details. 7 | Sven Greb 8 | Sven Greb 9 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | # Configurations for npm. 5 | # See https://docs.npmjs.com/cli/v7/configuring-npm/npmrc for more details. 6 | 7 | # Disable the vulnerability auditing and checks which includes often way too many false-positives, insignificant 8 | # problems that are only for local development, and many other warnings that are overhelming. 9 | # Use dedicated vulnerability tools instead to filter and identify issue that really impact the project. 10 | # References: 11 | # 1. https://docs.npmjs.com/cli/v9/commands/npm-audit 12 | audit=false 13 | 14 | # Only use a lockfile for single-consumer projects, like applications, but not for multi-consumer projects like 15 | # libraries. 16 | # It helps to pin dependency versions, improves the security through integrity checksums, prevents possible errors 17 | # caused by updated transitive dependencies and allows to get deterministic build results, but it can hide problems in 18 | # multi-consumer projects when any later versions of a used dependency, or its transitive dependencies, is not 19 | # compatible with the own project anymore. 20 | package-lock=true 21 | 22 | # Do not resolve to the latest minor and patch updates. 23 | # Automatically pin dependencies to exact versions instead of resolving to latest minor and patch updates. 24 | # This prevents possible errors caused by updated transitive dependencies. 25 | save-exact=true 26 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | # Path match pattern to ignore (i.e. not reformat) certain files and folders. 5 | # See https://prettier.io/docs/en/ignore for more details. 6 | 7 | .husky/_/ 8 | node_modules/ 9 | -------------------------------------------------------------------------------- /.remarkignore: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | # Path match pattern to ignore when searching for files. 5 | # See https://github.com/unifiedjs/unified-engine/blob/HEAD/doc/ignore.md for more details. 6 | 7 | node_modules/ 8 | license 9 | -------------------------------------------------------------------------------- /.remarkrc.mjs: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /** 7 | * Configurations for remark-lint. 8 | * @see https://github.com/remarkjs/remark-lint 9 | * @see https://remark.js.org 10 | */ 11 | export default { 12 | plugins: ["@svengreb/remark-preset-lint"], 13 | }; 14 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /** 7 | * Configurations for Stylelint. 8 | * @see https://stylelint.io 9 | * @see https://stylelint.io/user-guide/rules 10 | * @see https://github.com/stylelint/stylelint-config-standard 11 | */ 12 | module.exports = { 13 | extends: ["stylelint-config-standard"], 14 | plugins: ["stylelint-prettier"], 15 | overrides: [ 16 | { 17 | files: ["*.less"], 18 | plugins: ["stylelint-less"], 19 | customSyntax: "postcss-less", 20 | rules: { 21 | "at-rule-no-unknown": null, 22 | "color-no-invalid-hex": true, 23 | "less/color-no-invalid-hex": true, 24 | "selector-class-pattern": null, 25 | "no-descending-specificity": null, 26 | }, 27 | }, 28 | ], 29 | }; 30 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 | 6 | 7 | 8 |

9 | 10 |

11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | 19 |

20 | 21 | 22 | 23 | 24 | 25 | 26 |

27 | 28 |

Changelog for Nord Atom UI — An arctic, north-bluish clean and elegant Atom UI theme.

29 | 30 | 31 | 32 | # 0.12.0 33 | 34 | ![Release Date: 2019-07-31](https://img.shields.io/static/v1.svg?style=flat-square&label=Release%20Date&message=2019-07-31&colorA=4c566a&colorB=88c0d0) [![Project Board](https://img.shields.io/static/v1.svg?style=flat-square&label=Project%20Board&message=0.12.0&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0)](https://github.com/orgs/nordtheme/projects/1/views/10) [![Milestone](https://img.shields.io/static/v1.svg?style=flat-square&label=Milestone&message=0.12.0&logo=github&logoColor=eceff4&colorA=4c566a&colorB=88c0d0)](https://github.com/nordtheme/atom-ui/milestone/15) 35 | 36 | ## Features 37 | 38 | **Nord Docs Transition** — #82 ⇄ #83 (⊶ 744bcbb8) 39 | ↠ Transferred all documentations, assets and from „Nord Atom UI“ to [Nord Docs][nord]. 40 | Please see the [corresponding issue in the Nord Docs repository][nord-docs#166] to get an overview of what has changed for Nord Atom UI and what has been done to migrate to Nord Docs. 41 | 42 |

Landing Page

43 |

Preview: Nord Atom UI Port Project Landing Page

44 | 45 |

Docs Page

46 |

Preview: Nord Atom UI Docs Page

47 | 48 |

Installation & Activation Guide

49 |

Preview: Nord Atom UI Installation & Activation Guide Page

50 | 51 |

Configurations

52 |

Preview: Nord Atom UI Configuration Page

53 | 54 |

Package Development

55 |

Preview: Nord Atom UI Package Development Guide Page

56 | 57 | ## Improvements 58 | 59 | ### Package Support 60 | 61 | **Left align heading for `build`** — #69 (⊶ c59a0d4a) by [@noseglid][gh-user-noseglid] 62 | ↠ Improved the timer of the [`build` package][pkg-build] to stop slightly moving left and right when the value updated due to the position of the comma and the variable container width. 63 | 64 |

65 | 66 | ## Task 67 | 68 | ### Documentation 69 | 70 | **Migration to MIT license** — #70 ⇄ #71 (⊶ 55587b2e) 71 | ↠ Adapted to the MIT license migration of [Nord][]. Details can be found in the main task ticket [nordtheme/nord#55][nord#55]. 72 | 73 | # 0.11.0 74 | 75 | _2017-04-01_ 76 | 77 | ## Features 78 | 79 | ### Package Support 80 | 81 | ❯ Implemented support for the community package [`indent-guide-improved`](https://atom.io/packages/indent-guide-improved) to adapt to the UI style. This matches the indent guide improvements implemented in [nordtheme/atom-syntax #43](https://github.com/nordtheme/atom-syntax/issues/43). (@svengreb, #64, e185d481) 82 | 83 |

84 | 85 | ## Improvements 86 | 87 | ### Tabs 88 | 89 | ❯ The close icon of inactive tabs is now only colored bright on hover to match the stye of active tabs. (@svengreb, #65, 3d86698b) 90 | 91 |

Before

After

92 | 93 | ## Bug Fixes 94 | 95 | ### Documentation 96 | 97 | ❯ Fixed a typo in the project description. This is a sub-task of [nordtheme/nord #20](https://github.com/nordtheme/nord/issues/20). (@svengreb, #60, 443531b9) 98 | 99 | > **A** arctic ... -> **An** arctic ... 100 | 101 | # 0.10.2 102 | 103 | _2017-03-06_ 104 | 105 | ## Bug Fixes 106 | 107 | ❯ Fixed the overall height increase of the tab-bar when dragging tabs by disabling the placeholder bar. This also makes the drag & drop animation to be smoother and look more flat. (@maliMirkec, #56, 031da28b) 108 | 109 |

Linux ( Arch Linux, GNOME DE)

macOS (Sierra)

110 | 111 | ❯ Fixed the tab close icon of tabs by moving it to the right side (macOS only) to not collide with icons of any icon package, like [`file-icons`](https://atom.io/packages/file-icons) or [`seti-icons`](https://atom.io/packages/seti-icons) package, following recommendations in the conversations [atom/tabs #378](https://github.com/atom/tabs/issues/378) and [atom/one-dark-ui #179](https://github.com/atom/one-dark-ui/issues/179). A left-sided tab close icon (macOS only) should be better moved into a optional theme setting to not mess with people's muscle memory or wait to be implemented into the Atom core [tabs](https://github.com/atom/tabs) package. (@peteringram0, #57, c03130db) 112 | 113 |

Before with file-icons package

Before with seti-icons package

114 |

After with file-icons package

After with seti-icons package

115 | 116 | # 0.10.1 117 | 118 | _2017-01-25_ 119 | 120 | ## Bug Fixes 121 | 122 | ❯ Fixed unreadable text color for of all focused floating modal overlays by adding the new `syntax--` class prefix introduced by the new Atom syntax theme package API change regarding the shadow DOM removal for Atom >= 1.13.0. (@abrthel, #53, 1598fabd) 123 | 124 |

Before

After

125 | 126 | # 0.10.0 127 | 128 | _2017-01-24_ 129 | 130 | **Please note that the minimal version for this theme is now >=1.13.0 due to the Atom theme API change!** 131 | 132 | ## Improvements 133 | 134 | ❯ Migrated to the new Atom theme API. 135 | Starting from Atom version 1.13, the contents of `atom-text-editor` [elements are no longer encapsulated within a shadow DOM boundary](http://blog.atom.io/2016/11/14/removing-shadow-dom-boundary-from-text-editor-elements.html). 136 | This means the `:host` and `::shadow` pseudo-selectors should be completely removed and all syntax selectors should be prepended with `syntax--`. 137 | To prevent breakage with existing style sheets, Atom will automatically upgrade selectors for versions less or equal to 1.12. (@svengreb, #31, 42d7f7ba) 138 | 139 | ![](http://blog.atom.io/img/posts/shadow-dom.png) 140 | 141 | # 0.9.0 142 | 143 | _2016-12-01_ 144 | 145 | ## Improvements 146 | 147 | ❯ Single tabs are now colored with the base background color to better match the theme ambience. (@svengreb, #44, ee8a0c60) 148 | 149 |

Before

150 |

After

151 | 152 | ❯ The background color of selected list items is now slightly darker (`nord2` to `nord1`) to better fit the darker ambience and improve the text visibility. (@svengreb, #48, ddba34d5) 153 | 154 |

Before

155 |

After

156 | 157 | ## Bug Fixes 158 | 159 | ❯ Selected folders in `tree-view` had a transparent background color unlike files which made it hard to navigate using the keyboard. 160 | This has been changed to colorize the background color of selected folders. (@marza91, #47, 6c2c13ea) 161 | 162 |


163 | 164 | # 0.8.1 165 | 166 | _2016-11-23_ 167 | 168 | ## Bug Fixes 169 | 170 | ❯ Fixed unreadable bold-formated text shown in the [`markdown-preview`](https://atom.io/packages/markdown-preview) tab. 171 | The text color was too bright and therefore was not be seen. (@ToxidoLiu, #45, 9f6ccf16) 172 | 173 |

Before

174 | 175 |

After

176 | 177 | ❯ Fixed unreadable plain text in [`markdown-preview`](https://atom.io/packages/markdown-preview) code blocks. 178 | The text color was equal the to the background color and was therefore not be seen. (@svengreb, #46, 6a55c98d) 179 | 180 |

Before

181 | 182 |

After

183 | 184 | # 0.8.0 185 | 186 | _2016-11-16_ 187 | 188 | ## Features 189 | 190 | ### Theme Settings 191 | 192 | ❯ Implemented a new theme setting to use darker colors for focused forms like the `find-and-replace`- and `project-search` inputs. (@svengreb, #43, 38d1ca07) 193 | 194 |


With default snow-inspired focus effect

With enabled setting for darker focus color effect

195 | 196 | ## Bug Fixes 197 | 198 | ❯ Fixed regexp groups in the `find-and-replace` inputs getting obscured if the current syntax highlighting theme uses light colors for these pattern. (@svengreb, #39, fca9d9f5) 199 | 200 |

Selected characters are now colored correctly

With enabled "Darker Form-Focusing Effect" theme setting the current syntax highlighting remains preserved

201 | 202 | # 0.7.0 203 | 204 | _2016-11-12_ 205 | 206 | ## Features 207 | 208 | ### Package Support 209 | 210 | ❯ Implemented support for the community package [`tool-bar`](https://atom.io/packages/tool-bar) by [suda](https://github.com/suda) to make the tool-bar package fit more with the surrounding UI. (@svengreb, #41, 010119c6) 211 | 212 |

Before

After

213 | 214 | ❯ Implemented support for the community package [`minimap-git-diff`](https://atom.io/packages/minimap-git-diff) by [atom-minimap](https://github.com/atom-minimap) to make the minimap-git-diff package fit more with the theme color palette. (@svengreb, #42, e5251f7) 215 | 216 |

Before

After

217 | 218 | ## Improvements 219 | 220 | ❯ The current active tab is now colored with a slightly lighter background color to differ from inactive tabs. (@svengreb, #40, bc213c13) 221 | 222 |

223 | 224 | # 0.5.1 225 | 226 | _2016-11-01_ 227 | 228 | ## Bug Fixes 229 | 230 | ### Documentation 231 | 232 | ❯ Fixed the `README` rendering caused by an malformed HTML tag chain 233 | 234 | # 0.5.0 235 | 236 | _2016-11-01_ 237 | 238 | ## Features 239 | 240 | ### Theme Settings 241 | 242 | ❯ The theme can now be tweaked by using the theme settings which can be found by clicking on the gear icon next to the _UI Theme_ drop-down. (@svengreb, #36, 98dfc25d) 243 | The following options are available: 244 | 245 | _Full-Width Tab Sizing_ 246 | 247 | > In full width mode, tabs will fill the whole tab bar. 248 | 249 | ![](https://cloud.githubusercontent.com/assets/7836623/19620532/ef4ef634-987f-11e6-89bd-5dda9bcade88.png) 250 | 251 | ### Package Support 252 | 253 | ❯ Implemented support for the community package [`script`](https://atom.io/packages/script) by [rgbkrk](https://github.com/rgbkrk) (@svengreb, #37, b8f7e87a) 254 | 255 | # 0.4.0 256 | 257 | _2016-11-01_ 258 | 259 | ## Features 260 | 261 | ### Package Support 262 | 263 | ❯ Implemented support for the community package [`imdone-atom`](https://atom.io/packages/imdone-atom) by [imdone](https://github.com/imdone) (@svengreb, #38, 4214c7fa) 264 | 265 | # 0.3.0 266 | 267 | _2016-09-29_ 268 | 269 | ## Features 270 | 271 | ### Package Support 272 | 273 | ❯ Implemented support for the community package [`build`](https://atom.io/packages/build) by [noseglid](https://github.com/noseglid) (@svengreb, #34, dfebe0c6) 274 | 275 | # 0.2.0 276 | 277 | _2016-09-20_ 278 | 279 | ## Improvements 280 | 281 | ### Controls 282 | 283 | ❯ The background color of checked checkboxes is now the accent color instead of lime/green (@svengreb, #33, 55b0be1f) 284 | 285 | ## Bugfixes 286 | 287 | ### Documentation 288 | 289 | ❯ Fixed all unrendered images in the [atom.io](https://atom.io/themes/nord-atom-ui) package README by using the `https://raw.githubusercontent.com` domain (@svengreb, #32, 9db9fed2) 290 | 291 | # 0.1.0 292 | 293 | _2016-09-20_ 294 | **Initial APM package release version!** 295 | _Closes the [APM Package Release](https://github.com/nordtheme/atom-ui/milestone/1) milestone._ 296 | 297 | ## Features 298 | 299 | A complete list of all implemented features can be found in the [README](https://github.com/nordtheme/atom-ui/blob/develop/readme.md#features) section. 300 | 301 | ### Package Support 302 | 303 | The [Package Support](https://github.com/nordtheme/atom-ui/milestone/2) milestone backlog ticket #20 contains a list of all currently implemented- and planned package supports. 304 | 305 | **Community** 306 | 307 | - [`color-picker`](https://atom.io/packages/color-picker) by [thomaslindstrom](https://github.com/thomaslindstrom) (@svengreb, #21, 132eb795) 308 | - [`expose`](https://atom.io/packages/expose) by [mrodalgaard](https://github.com/mrodalgaard) (@svengreb, #30, 4e70ed1d) 309 | - [`minimap`](https://atom.io/packages/minimap) by [atom-minimap](https://github.com/atom-minimap) (@svengreb, #28, 8ba2bddc) 310 | - [`project-manager`](https://atom.io/packages/project-manager) by [danielbrodin](https://github.com/danielbrodin) (@svengreb, #29, 233233dd) 311 | 312 | 313 | 314 | ## Core 315 | 316 | - [`autocomplete-plus`](https://atom.io/packages/autocomplete-plus) (@svengreb, #22, 44714fd6) 317 | - [`deprecation-cop`](https://atom.io/packages/deprecation-cop) (@svengreb, #23, e9b9a1b2) 318 | - [`markdown-preview`](https://atom.io/packages/markdown-preview) (@svengreb, #27, 11ed42e6) 319 | - [`timecop`](https://atom.io/packages/timecop) (@svengreb, #24, 20653ad8) 320 | 321 |

322 | 323 | 324 | 325 | 326 | 327 |

328 | 329 |

330 | Copyright © 2016-present Sven Greb 331 |

332 | 333 |

334 | 335 | 336 | 337 | 338 | 339 | 340 |

341 | 342 | 351 | 352 | 353 | 354 | 355 | 356 | [nord]: https://www.nordtheme.com 357 | [pkg-build]: https://atom.io/packages/build 358 | 359 | 360 | 361 | [gh-user-noseglid]: https://github.com/noseglid 362 | [nord-docs#166]: https://github.com/nordtheme/web/issues/166 363 | [nord#55]: https://github.com/nordtheme/nord/issues/55 364 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * References: 8 | * 1. https://atom.io/docs/api/latest/Atom 9 | * 2. https://atom.io/docs 10 | * 3. https://github.com/atom/atom/blob/master/static/variables/ui-variables.less 11 | * 4. http://lesscss.org 12 | */ 13 | 14 | /* +------+ 15 | + Core + 16 | +------+ */ 17 | @import (reference) url("styles/ui-variables"); 18 | @import (reference) url("octicon-mixins"); 19 | @import (reference) url("styles/ui-mixins"); 20 | @import url("styles/ui-animations"); 21 | 22 | /* +------------+ 23 | + Components + 24 | +------------+ */ 25 | @import url("styles/atom"); 26 | @import url("styles/buttons"); 27 | @import url("styles/editor"); 28 | @import url("styles/inputs"); 29 | @import url("styles/lists"); 30 | @import url("styles/messages"); 31 | @import url("styles/notifications"); 32 | @import url("styles/overlays"); 33 | @import url("styles/panels"); 34 | @import url("styles/progress-indicator"); 35 | @import url("styles/settings-view"); 36 | @import url("styles/sites"); 37 | @import url("styles/status-bar"); 38 | @import url("styles/tabs"); 39 | @import url("styles/text"); 40 | @import url("styles/tooltips"); 41 | @import url("styles/tree-view"); 42 | 43 | /* +-----------------+ 44 | + Package Support + 45 | +-----------------+ */ 46 | 47 | /* +--- Community ---+ */ 48 | @import url("styles/package-support/build"); 49 | @import url("styles/package-support/color-picker"); 50 | @import url("styles/package-support/expose"); 51 | @import url("styles/package-support/imdone-atom"); 52 | @import url("styles/package-support/indent-guide-improved"); 53 | @import url("styles/package-support/minimap"); 54 | @import url("styles/package-support/minimap-git-diff"); 55 | @import url("styles/package-support/project-manager"); 56 | @import url("styles/package-support/script"); 57 | @import url("styles/package-support/tool-bar"); 58 | 59 | /* +--- Core ---+ */ 60 | @import url("styles/package-support/autocomplete-plus"); 61 | @import url("styles/package-support/deprecation-cop"); 62 | @import url("styles/package-support/markdown-preview"); 63 | @import url("styles/package-support/timecop"); 64 | 65 | /* +----------------+ 66 | + Theme Settings + 67 | +----------------+ */ 68 | @import url("styles/ui-theme-settings"); 69 | -------------------------------------------------------------------------------- /lib/main.coffee: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | root = document.documentElement; 5 | 6 | module.exports = 7 | activate: (state) -> 8 | atom.config.observe 'nord-atom-ui.tabSizing', (noFullWidth) -> 9 | setTabSizing(noFullWidth) 10 | atom.config.observe 'nord-atom-ui.darkerFormFocusEffect', (noSnowLight) -> 11 | setFormFocusEffect(noSnowLight) 12 | 13 | deactivate: -> 14 | unsetTabSizing() 15 | unsetFormFocusEffect() 16 | 17 | setFormFocusEffect = (noSnowLight) -> 18 | if (noSnowLight) 19 | root.setAttribute('theme-nord-atom-ui-form-focus-effect', "nosnowlight") 20 | else 21 | unsetFormFocusEffect() 22 | 23 | setTabSizing = (noFullWidth) -> 24 | if (noFullWidth) 25 | unsetTabSizing() 26 | else 27 | root.setAttribute('theme-nord-atom-ui-tabsizing', "nofullwidth") 28 | 29 | unsetFormFocusEffect = -> 30 | root.removeAttribute('theme-nord-atom-ui-form-focus-effect') 31 | 32 | unsetTabSizing = -> 33 | root.removeAttribute('theme-nord-atom-ui-tabsizing') 34 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License (MIT) 2 | 3 | Copyright (c) 2016-present Sven Greb (https://www.svengreb.de) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /lint-staged.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /** 7 | * Configurations for lint-staged. 8 | * @see https://github.com/okonet/lint-staged#configuration 9 | */ 10 | module.exports = { 11 | "*.less": ["stylelint", "prettier --check --ignore-unknown --no-editorconfig"], 12 | "*.json": "prettier --check --ignore-unknown --no-editorconfig", 13 | "*.{js,mjs}": ["eslint", "prettier --check --ignore-unknown --no-editorconfig"], 14 | "*.md": ["remark --no-stdout", "prettier --check --ignore-unknown --no-editorconfig"], 15 | ".husky/pre-*": "prettier --check --ignore-unknown --no-editorconfig", 16 | }; 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nord-atom-ui", 3 | "version": "0.12.0", 4 | "description": "An arctic, north-bluish clean and elegant minimal Atom UI theme.", 5 | "author": { 6 | "name": "Sven Greb", 7 | "email": "development@svengreb.de", 8 | "url": "https://www.svengreb.de" 9 | }, 10 | "homepage": "https://www.nordtheme.com/ports/atom-ui", 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/nordtheme/atom-ui.git" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/nordtheme/atom-ui/issues" 17 | }, 18 | "license": "MIT", 19 | "main": "./lib/main", 20 | "engines": { 21 | "atom": ">=1.13.0 <2.0.0", 22 | "npm": ">=7.7" 23 | }, 24 | "keywords": [ 25 | "arctic", 26 | "north", 27 | "bluish", 28 | "clean", 29 | "elegant", 30 | "minimal", 31 | "ui" 32 | ], 33 | "theme": "ui", 34 | "configSchema": { 35 | "darkerFormFocusEffect": { 36 | "title": "Darker Form-Focusing Effect", 37 | "description": "Use darker colors for focused forms instead of the snow-inspired light effect.", 38 | "type": "boolean", 39 | "default": false 40 | }, 41 | "tabSizing": { 42 | "title": "Full-Width Tab Sizing", 43 | "description": "In full width mode, tabs will fill the whole tab bar.", 44 | "type": "boolean", 45 | "default": true 46 | } 47 | }, 48 | "scripts": { 49 | "format": "run-s format:*", 50 | "format:js": "eslint --fix .", 51 | "format:pretty": "prettier --ignore-unknown --no-editorconfig --write \"**\"", 52 | "lint": "run-s lint:js lint:less lint:md lint:pretty", 53 | "lint:ci": "run-s --continue-on-error lint:js lint:less lint:md lint:ci:pretty", 54 | "lint:ci:pretty": "prettier --check --ignore-unknown --loglevel silent --no-editorconfig --no-error-on-unmatched-pattern \"**\"", 55 | "lint:js": "eslint .", 56 | "lint:less": "stylelint --formatter verbose *.less styles/", 57 | "lint:md": "remark --no-stdout . .github/", 58 | "lint:pretty": "prettier --check --ignore-unknown --no-editorconfig \"**\"", 59 | "prepare:husky": "husky install", 60 | "prepare": "run-s prepare:*" 61 | }, 62 | "devDependencies": { 63 | "@svengreb/eslint-config-base": ">=0.12.0 <=1.0.0", 64 | "@svengreb/remark-preset-lint": ">=0.5.0 <1.0.0", 65 | "eslint": "8.39.0", 66 | "eslint-config-prettier": "8.8.0", 67 | "eslint-plugin-import": "2.27.5", 68 | "eslint-plugin-prettier": "4.2.1", 69 | "husky": "8.0.3", 70 | "lint-staged": "13.2.2", 71 | "npm-run-all": "4.1.5", 72 | "postcss-less": "6.0.0", 73 | "prettier": "2.8.8", 74 | "prettier-plugin-sh": "0.12.8", 75 | "remark-cli": "11.0.0", 76 | "stylelint": "15.6.0", 77 | "stylelint-config-standard": "33.0.0", 78 | "stylelint-less": "1.0.6", 79 | "stylelint-prettier": "3.0.0" 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /** 7 | * Configurations for Prettier. 8 | * @see https://prettier.io/docs/en/configuration.html 9 | * @see https://prettier.io/docs/en/options.html 10 | * @see https://prettier.io/docs/en/options.html#parser 11 | * @see https://prettier.io/docs/en/plugins.html 12 | * @see https://github.com/un-ts/prettier/tree/master/packages/sh 13 | */ 14 | module.exports = { 15 | printWidth: 160, 16 | overrides: [ 17 | { 18 | files: ["*.less"], 19 | options: { 20 | parser: "less", 21 | }, 22 | }, 23 | { 24 | files: [".husky/*"], 25 | options: { 26 | parser: "sh", 27 | }, 28 | }, 29 | ], 30 | }; 31 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 | 6 | 7 | 8 |

9 | 10 |

11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

21 | 22 |

23 | 24 | 25 | 26 | 27 | 28 | 29 |

30 | 31 |

32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |

42 | 43 |

44 | 45 | 46 | 47 | 48 | 49 | 50 |

51 | 52 |

An arctic, north-bluish clean and elegant Atom UI theme.

53 | 54 |

Designed for a fluent and clear workflow based on the Nord color palette that fits the Nord Atom Syntax theme.

55 | 56 |

57 | 58 | 59 | 60 |

61 | 62 | ## Getting Started 63 | 64 | Visit the [official website][nord-home] to learn all about the [UI elements][nord-home#ui-elements] features, the [supported packages][nord-home#package-support] and the [one-click setup][nord-home#setup]. 65 | 66 | Learn about the [installation and activation][nord-docs-home-install], how to [configure][nord-docs-home-config] and [develop][nord-docs-home-develop] the theme from the [official documentations][nord-docs-home]. 67 | 68 | ### Quick Start 69 | 70 | Thanks to the official [Atom package registry][atom-theme_pack-reg], _Nord Atom UI_ can be installed with one click. 71 | 72 | 1. Go to the [package installation view][atom-docs-pkgs] by opening the [_Settings_][atom-docs-basic-settings]. 73 | 2. Switch to the _Install_ pane and enable the [_Themes_ package search filter][atom-docs-pkgs-themes]. 74 | 3. Search for _Nord_ and and click on the Install button to finish the installation. 75 | 76 |

77 | 78 | 79 | 80 |

81 | 82 | See the documentation for details about more installation options like through the [APM `install` command][nord-docs-home-install#apm]. 83 | 84 | #### Activation 85 | 86 | To activate the theme, open the [_Settings_][atom-docs-basic-settings] and switch to the _Themes_ pane to [change the UI or syntax theme][atom-docs-basic-theme_switch]. Click on the the _UI Theme_ drop-down menu and select _Nord Atom_. 87 | 88 |

89 | 90 | 91 | 92 |

93 | 94 | See the documentation for details about [more activation options][nord-docs-home-install#activation]. 95 | 96 | ## Features 97 | 98 |
99 |

Your IDE. Your style.

100 |

A unified UI and editor syntax element design provides a clutter-free and fluidly merging appearance.

101 |
102 |

103 | 104 | 105 | 106 |

107 | 108 |
109 |

Uniform design with beautiful UI elements.

110 |

The themed UI elements provide a fluid and unobtrusive transition from the code editor to the IDE.

111 |
112 |

113 | 114 | 115 | 116 |

117 | 118 |
119 |

Take your favorite packages with you.

120 |

The theme supports many popular UI packages for fluid and unobtrusive user interface transitions.

121 |
122 |

123 | 124 | 125 | 126 |

127 | 128 | ## Contributing 129 | 130 | Nord is an open source project and we love to receive contributions from the [community][nord-comm]! 131 | 132 | There are many ways to contribute, from [writing- and improving documentation and tutorials][nord-contrib-guide-docs], [reporting bugs][nord-contrib-guide-bugs], [submitting enhancement suggestions][nord-contrib-guide-enhance] that can be added to Nord by [submitting pull requests][nord-contrib-guide-pr]. 133 | 134 | Please take a moment to read Nord's full [contributing guide][nord-contrib-guide] to learn about the development process, the project's used [styleguides][nord-contrib-guide-styles], [branch organization][nord-contrib-guide-branching] and [versioning][nord-contrib-guide-versioning] model. 135 | 136 | The guide also includes information about [minimal, complete, and verifiable examples][nord-contrib-guide-mcve] and other ways to contribute to the project like [improving existing issues][nord-contrib-guide-impr-issues] and [giving feedback on issues and pull requests][nord-contrib-guide-feedback]. 137 | 138 |

139 | 140 | 141 | 142 | 143 | 144 |

145 | 146 |

147 | Copyright © 2016-present Sven Greb 148 |

149 | 150 |

151 | 152 | 153 | 154 | 155 | 156 | 157 |

158 | 159 | [atom-docs-basic-settings]: https://flight-manual.atom.io/getting-started/sections/atom-basics/#settings-and-preferences 160 | [atom-docs-basic-theme_switch]: https://flight-manual.atom.io/getting-started/sections/atom-basics/#changing-the-theme 161 | [atom-docs-pkgs-themes]: https://flight-manual.atom.io/using-atom/sections/atom-packages/#atom-themes 162 | [atom-docs-pkgs]: https://flight-manual.atom.io/using-atom/sections/atom-packages 163 | [atom-theme_pack-reg]: https://atom.io/themes 164 | [nord-comm]: https://www.nordtheme.com/community 165 | [nord-contrib-guide-branching]: https://github.com/nordtheme/.github/blob/main/contributing.md#branch-organization 166 | [nord-contrib-guide-bugs]: https://github.com/nordtheme/.github/blob/main/contributing.md#bug-reports 167 | [nord-contrib-guide-docs]: https://github.com/nordtheme/.github/blob/main/contributing.md#documentations 168 | [nord-contrib-guide-enhance]: https://github.com/nordtheme/.github/blob/main/contributing.md#enhancement-suggestions 169 | [nord-contrib-guide-feedback]: https://github.com/nordtheme/.github/blob/main/contributing.md#feedback 170 | [nord-contrib-guide-impr-issues]: https://github.com/nordtheme/.github/blob/main/contributing.md#improve-issues 171 | [nord-contrib-guide-mcve]: https://github.com/nordtheme/.github/blob/main/contributing.md#mcve 172 | [nord-contrib-guide-pr]: https://github.com/nordtheme/.github/blob/main/contributing.md#pull-requests 173 | [nord-contrib-guide-styles]: https://github.com/nordtheme/.github/blob/main/contributing.md#style-guides 174 | [nord-contrib-guide-versioning]: https://github.com/nordtheme/.github/blob/main/contributing.md#versioning 175 | [nord-contrib-guide]: https://github.com/nordtheme/.github/blob/main/contributing.md 176 | [nord-docs-home-config]: https://www.nordtheme.com/docs/ports/atom-ui/configuration 177 | [nord-docs-home-develop]: https://www.nordtheme.com/docs/ports/atom-ui/development 178 | [nord-docs-home-install]: https://www.nordtheme.com/docs/ports/atom-ui/installation 179 | [nord-docs-home-install#activation]: https://www.nordtheme.com/docs/ports/atom-ui/installation#activation 180 | [nord-docs-home-install#apm]: https://www.nordtheme.com/docs/ports/atom-ui/installation#from-cli-via-apm 181 | [nord-docs-home]: https://www.nordtheme.com/docs/ports/atom-ui 182 | [nord-home]: https://www.nordtheme.com/ports/atom-ui 183 | [nord-home#package-support]: https://www.nordtheme.com/ports/atom-ui#package-support 184 | [nord-home#setup]: https://www.nordtheme.com/ports/atom-ui#setup 185 | [nord-home#ui-elements]: https://www.nordtheme.com/ports/atom-ui#ui-elements 186 | -------------------------------------------------------------------------------- /spec/darker-form-focusing-effect-spec.coffee: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | describe "Nord Atom UI theme", -> 5 | beforeEach -> 6 | waitsForPromise -> 7 | atom.packages.activatePackage('nord-atom-ui') 8 | 9 | it "allows to use darker colors for focused forms to be set via theme settings", -> 10 | expect(document.documentElement.getAttribute('theme-nord-atom-ui-form-focus-effect')).toBe null 11 | 12 | atom.config.set('nord-atom-ui.darkerFormFocusEffect', true) 13 | expect(document.documentElement.getAttribute('theme-nord-atom-ui-form-focus-effect')).toBe 'nosnowlight' 14 | -------------------------------------------------------------------------------- /spec/full-width-tab-sizing-spec.coffee: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2016-present Sven Greb 2 | # This source code is licensed under the MIT license found in the license file. 3 | 4 | describe "Nord Atom UI theme", -> 5 | beforeEach -> 6 | waitsForPromise -> 7 | atom.packages.activatePackage('nord-atom-ui') 8 | 9 | it "allows to disable full-width tab sizing to be set via theme settings", -> 10 | expect(document.documentElement.getAttribute('theme-nord-atom-ui-tabsizing')).toBe null 11 | 12 | atom.config.set('nord-atom-ui.tabSizing', false) 13 | expect(document.documentElement.getAttribute('theme-nord-atom-ui-tabsizing')).toBe 'nofullwidth' 14 | -------------------------------------------------------------------------------- /styles/atom.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* +------------------+ 7 | + find-and-replace + 8 | +------------------+ */ 9 | .project-find, 10 | .find-and-replace { 11 | atom-text-editor[mini].is-focused { 12 | .source .regexp { 13 | color: @base-background-color; 14 | } 15 | } 16 | 17 | .btn-group-find .btn { 18 | .button-variant(@text-color-info); 19 | } 20 | 21 | .btn-group-replace .btn, 22 | .btn-group-replace-all .btn { 23 | .button-variant(@text-color-warning); 24 | } 25 | 26 | .find-meta-container { 27 | top: 4px; 28 | 29 | span { 30 | font-size: 11px; 31 | text-transform: uppercase; 32 | } 33 | } 34 | } 35 | 36 | /* +-------------------+ 37 | + Keybinding Badges + 38 | +-------------------+ */ 39 | kbd { 40 | .text(normal); 41 | 42 | color: @tooltip-key-text-color; 43 | background: @tooltip-key-background-color; 44 | font-size: 90%; 45 | border: 1px solid @tooltip-key-text-color; 46 | border-radius: @component-border-radius / 2; 47 | margin-left: @component-padding / 2; 48 | } 49 | 50 | /* +------------+ 51 | + Scrollbars + 52 | +------------+ */ 53 | .scrollbars-visible-always { 54 | ::-webkit-scrollbar { 55 | width: 10px; 56 | height: 10px; 57 | } 58 | 59 | ::-webkit-scrollbar-track, 60 | ::-webkit-scrollbar-corner { 61 | background: @scrollbar-track-color; 62 | } 63 | 64 | ::-webkit-scrollbar-thumb { 65 | border-radius: 5px; 66 | border: 1px solid @scrollbar-border-color; 67 | background: @scrollbar-color; 68 | background-clip: content-box; 69 | 70 | &:active, 71 | &:hover { 72 | border: 1px solid @scrollbar-border-color; 73 | background: @scrollbar-color-active; 74 | } 75 | } 76 | 77 | atom-text-editor, 78 | .settings-view { 79 | ::-webkit-scrollbar-track, 80 | ::-webkit-scrollbar-corner { 81 | background: @base-background-color; 82 | } 83 | 84 | ::-webkit-scrollbar-thumb { 85 | border: 1px solid @base-background-color; 86 | background: @scrollbar-color; 87 | 88 | &:active, 89 | &:hover { 90 | border: 1px solid @base-background-color; 91 | } 92 | } 93 | } 94 | } 95 | 96 | /* +--------------+ 97 | + Select Forms + 98 | +--------------+ */ 99 | select.form-control { 100 | .button(@button-border-color); 101 | .text(normal); 102 | 103 | height: @input-height; 104 | line-height: @input-height; 105 | text-transform: none; 106 | 107 | &:focus, 108 | &:hover { 109 | background: @button-border-color !important; 110 | color: @base-background-color !important; 111 | } 112 | } 113 | 114 | /* +--------------+ 115 | + Text Editors + 116 | +--------------+ */ 117 | atom-text-editor[mini] { 118 | transition: all @transition-time ease; 119 | background-color: @input-background-color; 120 | border: 1px solid @input-background-color; 121 | border-radius: @component-border-radius; 122 | padding-left: @component-padding / 2; 123 | height: @input-height; 124 | max-height: @input-height; 125 | line-height: @input-height - 2px; 126 | 127 | .syntax--text, 128 | .syntax--source { 129 | color: @text-color; 130 | } 131 | 132 | .placeholder-text { 133 | .text(subtle); 134 | 135 | height: @input-height; 136 | line-height: @input-height - 2px; 137 | } 138 | 139 | .cursor { 140 | border-color: @text-color-highlight; 141 | } 142 | } 143 | 144 | atom-text-editor[mini].is-focused { 145 | border: 1px solid @input-border-color-active; 146 | background-color: @input-background-color-active; 147 | 148 | .syntax--text, 149 | .syntax--source { 150 | color: @input-text-color-active; 151 | } 152 | 153 | &:hover { 154 | border: 1px solid @text-color-highlight; 155 | background-color: @input-background-color-active; 156 | color: @text-color-highlight; 157 | } 158 | 159 | .selection .region { 160 | /* stylelint-disable-next-line function-no-unknown */ 161 | background-color: fade(@background-color-highlight, 40%); 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | button, 7 | button.icon, 8 | .btn-default, 9 | .btn { 10 | .button(@button-border-color); 11 | 12 | &:focus, 13 | &:active:focus { 14 | outline: 0; 15 | border: 1px solid @text-color-selected !important; 16 | } 17 | 18 | &.btn-xs { 19 | font-size: 10px; 20 | padding: 0 4px; 21 | height: 16px; 22 | line-height: 16px; 23 | } 24 | 25 | &.btn-sm { 26 | font-size: 11px; 27 | padding: 0 8px; 28 | height: 24px; 29 | line-height: 24px; 30 | } 31 | 32 | &.btn-lg { 33 | font-size: 13px; 34 | padding: 0 12px; 35 | height: 40px; 36 | line-height: 40px; 37 | } 38 | 39 | &.btn-error { 40 | .button-variant(@text-color-error); 41 | } 42 | 43 | &.btn-info { 44 | .button-variant(@text-color-info); 45 | } 46 | 47 | &.btn-primary { 48 | .button-variant(@text-color-info); 49 | } 50 | 51 | &.btn-success { 52 | .button-variant(@text-color-success); 53 | } 54 | 55 | &.btn-warning { 56 | .button-variant(@text-color-warning); 57 | } 58 | 59 | &.status-indicator { 60 | border-width: 0 !important; 61 | } 62 | } 63 | 64 | .btn-group { 65 | & > .btn:first-child:not(:last-child) { 66 | border-top-right-radius: 0 !important; 67 | border-bottom-right-radius: 0 !important; 68 | } 69 | 70 | & > .btn:last-child:not(:first-child) { 71 | border-top-left-radius: 0 !important; 72 | border-bottom-left-radius: 0 !important; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | atom-text-editor { 7 | .scroll-view { 8 | padding: 0; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /styles/inputs.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | input[type="checkbox"] { 7 | &:focus { 8 | box-shadow: none !important; 9 | } 10 | 11 | &::before, 12 | &::after { 13 | background: @base-background-color; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | .list-group, 7 | .list-tree { 8 | li .character-match { 9 | .text(normal); 10 | 11 | transition: color @transition-time / 2 ease; 12 | } 13 | 14 | li:hover .character-match { 15 | .text(highlight); 16 | 17 | transition: color @transition-time / 2 ease; 18 | } 19 | 20 | li.selected::before { 21 | background: @background-color-selected; 22 | } 23 | 24 | li.selected .character-match { 25 | .text(selected); 26 | 27 | font-size: @font-size; 28 | } 29 | 30 | li.selected .word { 31 | color: @text-color-selected !important; 32 | } 33 | 34 | li, 35 | li.list-item { 36 | transition: color @transition-time / 2 ease; 37 | } 38 | 39 | li:hover, 40 | li.list-item:hover { 41 | .text(highlight); 42 | } 43 | 44 | li:not(.list-nested-item), 45 | li.list-nested-item > .list-item { 46 | .text(normal); 47 | } 48 | 49 | .generate-list-item-text-color(@class) { 50 | li:not(.list-nested-item).text-@{class}, 51 | li.list-nested-item.text-@{class} > .list-item { 52 | .text(@class); 53 | } 54 | } 55 | .generate-list-item-text-color(subtle); 56 | .generate-list-item-text-color(info); 57 | .generate-list-item-text-color(success); 58 | .generate-list-item-text-color(warning); 59 | .generate-list-item-text-color(error); 60 | .generate-list-item-text-color(selected); 61 | 62 | .generate-list-item-status-color(@color, @status) { 63 | li:not(.list-nested-item).status-@{status}, 64 | li.list-nested-item.status-@{status} > .list-item { 65 | color: @color; 66 | } 67 | 68 | li:not(.list-nested-item).selected.status-@{status}, 69 | li.list-nested-item.selected.status-@{status} > .list-item { 70 | color: @color; 71 | } 72 | } 73 | .generate-list-item-status-color(@text-color-subtle, ignored); 74 | .generate-list-item-status-color(@text-color-added, added); 75 | .generate-list-item-status-color(@text-color-renamed, renamed); 76 | .generate-list-item-status-color(@text-color-modified, modified); 77 | .generate-list-item-status-color(@text-color-removed, removed); 78 | 79 | li:not(.list-nested-item).selected, 80 | li.list-nested-item.selected > .list-item { 81 | .text(selected); 82 | 83 | font-size: @font-size; 84 | } 85 | } 86 | 87 | .select-list ol.list-group, 88 | &.select-list ol.list-group { 89 | li pre { 90 | margin-bottom: 0; 91 | } 92 | 93 | li.two-lines { 94 | .secondary-line { 95 | .text(subtle); 96 | } 97 | 98 | &.selected .secondary-line { 99 | .text(selected); 100 | } 101 | } 102 | 103 | li.selected { 104 | background-color: @background-color-selected; 105 | 106 | &::before { 107 | display: none; 108 | } 109 | 110 | pre { 111 | border-color: @text-color-highlight; 112 | } 113 | } 114 | 115 | &.mark-active { 116 | li::before { 117 | content: ""; 118 | background-color: transparent; 119 | position: static; 120 | display: inline-block; 121 | left: auto; 122 | right: auto; 123 | height: @list-active-icon-size; 124 | width: @list-active-icon-size; 125 | } 126 | 127 | > li:not(.active)::before { 128 | margin-right: @component-icon-padding; 129 | } 130 | 131 | li.active { 132 | .octicon(check, @list-active-icon-size); 133 | 134 | &::before { 135 | margin-right: @component-icon-padding; 136 | color: @text-color-success; 137 | } 138 | } 139 | } 140 | } 141 | 142 | .select-list.popover-list { 143 | .overlay-shadow(); 144 | 145 | background-color: @overlay-background-color; 146 | border-radius: @component-border-radius !important; 147 | border: 1px solid @overlay-border-color !important; 148 | 149 | atom-text-editor { 150 | margin-bottom: @component-padding / 2; 151 | } 152 | 153 | .list-group li { 154 | padding-left: @component-padding / 2; 155 | transition: color @transition-time / 2 ease; 156 | } 157 | } 158 | 159 | .ui-sortable { 160 | li { 161 | line-height: 2.5; 162 | } 163 | 164 | li.ui-sortable-placeholder { 165 | visibility: visible !important; 166 | /* stylelint-disable-next-line function-no-unknown */ 167 | background-color: darken(@pane-item-background-color, 10%); 168 | } 169 | } 170 | 171 | li.ui-draggable-dragging, 172 | li.ui-sortable-helper { 173 | line-height: @component-line-height; 174 | height: @component-line-height; 175 | list-style: none; 176 | padding: 0 @component-padding; 177 | background: @background-color-highlight; 178 | } 179 | -------------------------------------------------------------------------------- /styles/messages.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | .background-message .message, 7 | .background-message li { 8 | .text(subtle); 9 | 10 | font-size: 24px; 11 | 12 | .keystroke { 13 | .text(normal); 14 | 15 | color: @tooltip-key-text-color; 16 | background: @tooltip-key-background-color; 17 | font-size: 90%; 18 | border: 1px solid @tooltip-key-text-color; 19 | border-radius: @component-border-radius / 2; 20 | margin-left: @component-padding / 2; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /styles/nord.less: -------------------------------------------------------------------------------- 1 | /* 2 | +--------------------------------------------+ 3 | title Nord + 4 | project nord + 5 | version 0.1.0 + 6 | repository https://github.com/nordtheme/nord + 7 | author Sven Greb + 8 | email development@svengreb.de + 9 | copyright Copyright (c) 2016-present + 10 | +--------------------------------------------+ 11 | 12 | [References] 13 | KSS 14 | (http://warpspire.com/kss) 15 | kss-node 16 | (https://github.com/kss-node/kss-node) 17 | */ 18 | 19 | // A arctic, north-bluish color palette. 20 | // Created for the clean- and minimal design pattern to achieve a optimal focus and readability for code syntax 21 | // highlighting and UI. 22 | // It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful 23 | // ambiance. 24 | // 25 | // Styleguide Nord 26 | 27 | // Base component color of "Polar Night". 28 | // 29 | // Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. 30 | // 31 | // Markup: 32 | //
33 | // 34 | // Styleguide Nord - Polar Night 35 | @nord0: #2e3440; 36 | 37 | // Lighter shade color of the base component color. 38 | // 39 | // Used as a lighter background color for UI elements like status bars. 40 | // 41 | // Markup: 42 | //
43 | // 44 | // Styleguide Nord - Polar Night 45 | @nord1: #3b4252; 46 | 47 | // Lighter shade color of the base component color. 48 | // 49 | // Used as line highlighting in the editor. 50 | // In the UI scope it may be used as selection- and hightlight color. 51 | // 52 | // Markup: 53 | //
54 | // 55 | // Styleguide Nord - Polar Night 56 | @nord2: #434c5e; 57 | 58 | // Lighter shade color of the base component color. 59 | // 60 | // Used for comments, invisibles, indent- and wrap guide marker. 61 | // In the UI scope it may be used as pseudeoclass color for disabled elements. 62 | // 63 | // Markup: 64 | //
65 | // 66 | // Styleguide Nord - Polar Night 67 | @nord3: #4c566a; 68 | 69 | // Base component color of "Snow Storm". 70 | // 71 | // Used for texts, carets and structuring characters like curly- and square brackets. 72 | // In the UI scope it may be used as semi-light background depending on the theme shading design. 73 | // 74 | // Markup: 75 | //
76 | // 77 | // Styleguide Nord - Snow Storm 78 | @nord4: #d8dee9; 79 | 80 | // Lighter shade color of the base component color. 81 | // 82 | // Used as a lighter background color for UI elements like status bars. 83 | // It may also be used as semi-light background depending on the theme shading design. 84 | // 85 | // Markup: 86 | //
87 | // 88 | // Styleguide Nord - Snow Storm 89 | @nord5: #e5e9f0; 90 | 91 | // Lighter shade color of the base component color. 92 | // 93 | // Usually be used as background depending on the theme shading design. 94 | // In the UI scope it may be used as selection- and hightlight color. 95 | // 96 | // Markup: 97 | //
98 | // 99 | // Styleguide Nord - Snow Storm 100 | @nord6: #eceff4; 101 | 102 | // Bluish core color. 103 | // 104 | // Most commonly used for 105 | // - classes/types 106 | // - attributes 107 | // - constants 108 | // 109 | // Markup: 110 | //
111 | // 112 | // Styleguide Nord - Frost 113 | @nord7: #8fbcbb; 114 | 115 | // Bluish core color. 116 | // 117 | // Represents the accent color of the color palette. 118 | // Can be used as main color for primary UI elements. 119 | // Optionally used for methods/functions instead of @nord14 120 | // 121 | // Also commonly used for 122 | // - documentation/annotation tags 123 | // - attribute values 124 | // - Markup quotes 125 | // - Markup link URLs 126 | // 127 | // Markup: 128 | //
129 | // 130 | // Styleguide Nord - Frost 131 | @nord8: #88c0d0; 132 | 133 | // Bluish core color. 134 | // 135 | // Most commonly used for 136 | // - language-specific syntactic/reserved keywords 137 | // - operators 138 | // - tags 139 | // - punctuations like colon/semicolon, comma and braces 140 | // 141 | // Can optionally be used for units and language-specific reserved special support characters (px/em, $, %). 142 | // 143 | // Markup: 144 | //
145 | // 146 | // Styleguide Nord - Frost 147 | @nord9: #81a1c1; 148 | 149 | // Bluish core color. 150 | // 151 | // Most commonly used for 152 | // - Markup doctypes 153 | // - import/include/require statements 154 | // - pre-processor statements 155 | // - at-rules (@) 156 | // 157 | // Markup: 158 | //
159 | // 160 | // Styleguide Nord - Frost 161 | @nord10: #5e81ac; 162 | 163 | // Colorful component color. 164 | // 165 | // Most commonly used for errors, git/diff deletion and linter marker. 166 | // 167 | // Markup: 168 | //
169 | // 170 | // Styleguide Nord - Aurora 171 | @nord11: #bf616a; 172 | 173 | // Colorful component color. 174 | // 175 | // Most commonly used for annotations and regular expressions. 176 | // 177 | // Markup: 178 | //
179 | // 180 | // Styleguide Nord - Aurora 181 | @nord12: #d08770; 182 | 183 | // Colorful component color. 184 | // 185 | // Most commonly used for escape characters, warnings, git/diff renamings and Markup entities. 186 | // 187 | // Markup: 188 | //
189 | // 190 | // Styleguide Nord - Aurora 191 | @nord13: #ebcb8b; 192 | 193 | // Colorful component color. 194 | // 195 | // Most commonly used for methods/functions, git/diff additions and success visualizations. 196 | // 197 | // Markup: 198 | //
199 | // 200 | // Styleguide Nord - Aurora 201 | @nord14: #a3be8c; 202 | 203 | // Colorful component color. 204 | // 205 | // Most commonly used for numbers. 206 | // 207 | // Markup: 208 | //
209 | // 210 | // Styleguide Nord - Aurora 211 | @nord15: #b48ead; 212 | -------------------------------------------------------------------------------- /styles/notifications.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | atom-notifications { 7 | .text(normal); 8 | 9 | top: 32px; 10 | background-color: transparent; 11 | 12 | .close { 13 | transition: all @transition-time ease; 14 | 15 | &::before { 16 | color: @text-color; 17 | } 18 | } 19 | 20 | .btn { 21 | height: 24px !important; 22 | line-height: 20px !important; 23 | 24 | &.close-all { 25 | .button-variant(@text-color-info); 26 | } 27 | } 28 | 29 | .content, 30 | .detail, 31 | .message, 32 | .meta { 33 | color: @text-color; 34 | background-color: @overlay-background-color; 35 | background-clip: inherit; 36 | 37 | code, 38 | .detail-content { 39 | background-color: @overlay-border-color; 40 | color: @text-color; 41 | } 42 | 43 | .stack-toggle { 44 | color: @text-color-info; 45 | } 46 | } 47 | 48 | .meta { 49 | .description a { 50 | color: @text-color-info; 51 | } 52 | 53 | .btn-toolbar .icon-clippy { 54 | color: @text-color; 55 | padding-left: 5px; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /styles/overlays.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | atom-panel.modal, 7 | .overlay { 8 | .overlay-shadow(); 9 | .text(normal); 10 | 11 | background-color: @overlay-background-color; 12 | border-radius: @component-border-radius !important; 13 | border: 1px solid @base-border-color !important; 14 | padding: @component-padding @component-padding*2; 15 | width: 680px; 16 | margin-left: -340px; 17 | 18 | @media (width <= 680px) { 19 | & { 20 | width: 100%; 21 | left: 0; 22 | margin-left: 0; 23 | } 24 | } 25 | 26 | label, 27 | p { 28 | .text(normal); 29 | 30 | font-weight: 200; 31 | } 32 | 33 | atom-text-editor[mini], 34 | atom-text-editor.mini { 35 | .text(heading); 36 | 37 | .syntax--text { 38 | color: @text-color-highlight; 39 | } 40 | 41 | font-size: 24px; 42 | line-height: 32px; 43 | height: auto; 44 | max-height: none; 45 | background-color: transparent; 46 | margin: 0 -@component-padding*2; 47 | padding: 0 @component-padding*2 @component-padding @component-padding*4; 48 | border: 0; 49 | border-radius: 0; 50 | border-bottom: 1px solid @base-border-color; 51 | 52 | &.is-focused:hover, 53 | &:hover { 54 | border-top: 0 !important; 55 | border-left: 0 !important; 56 | border-right: 0 !important; 57 | border-bottom: 1px solid @base-border-color !important; 58 | background-color: transparent !important; 59 | } 60 | } 61 | 62 | &.from-top { 63 | top: 20vh; 64 | } 65 | 66 | .loading, 67 | .error-message { 68 | .text(subtle); 69 | 70 | height: @component-line-height + @component-padding; 71 | line-height: @component-line-height + @component-padding; 72 | padding-bottom: @component-padding; 73 | } 74 | 75 | ul.list-group, 76 | .select-list ol.list-group, 77 | &.select-list ol.list-group { 78 | margin: 0 -@component-padding*2 -@component-padding; 79 | 80 | li .character-match { 81 | .text(normal); 82 | } 83 | 84 | li.selected .character-match { 85 | .text(selected); 86 | } 87 | 88 | li { 89 | padding: @component-padding / 2 @component-padding*2; 90 | 91 | &.two-lines { 92 | padding: @component-padding / 2 @component-padding*2; 93 | } 94 | 95 | .status.icon { 96 | float: right; 97 | margin-left: @component-icon-padding; 98 | 99 | &::before { 100 | margin-right: 0; 101 | } 102 | } 103 | 104 | &.selected { 105 | border-radius: 0 !important; 106 | 107 | .status.icon { 108 | color: @text-color-selected; 109 | } 110 | } 111 | } 112 | } 113 | } 114 | 115 | atom-panel.modal { 116 | & > div > atom-text-editor[mini]::before { 117 | color: @text-color-subtle; 118 | font-family: "Octicons Regular", sans-serif; 119 | padding-right: @component-padding; 120 | -webkit-font-smoothing: antialiased; 121 | content: "\f011"; 122 | margin-left: -@component-padding*2; 123 | } 124 | 125 | & > .command-palette > atom-text-editor[mini]::before { 126 | content: "\f0c8"; 127 | } 128 | 129 | & > .encoding-selector > atom-text-editor[mini]::before { 130 | content: "\f094"; 131 | } 132 | 133 | & > .grammar-selector > atom-text-editor[mini]::before { 134 | content: "\f010"; 135 | } 136 | 137 | & > .symbols-view > atom-text-editor[mini]::before { 138 | content: "\f0c0"; 139 | } 140 | 141 | & > .fuzzy-finder > atom-text-editor[mini]::before { 142 | content: "\f02e"; 143 | } 144 | 145 | & > .diff-list-view > atom-text-editor[mini]::before { 146 | content: "\f0d6"; 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /styles/package-support/autocomplete-plus.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the core package "autocomplete-plus". 8 | * References: 9 | * 1. https://atom.io/packages/autocomplete-plus 10 | */ 11 | 12 | autocomplete-suggestion-list.select-list.popover-list ol.list-group li > .word-container, 13 | autocomplete-suggestion-list.select-list.popover-list ol.list-group li > .word-container span { 14 | font-family: "Source Code Pro", "Fira Code", Menlo, Consolas, "DejaVu Sans Mono", monospace; 15 | 16 | .character-match { 17 | font-weight: 600; 18 | } 19 | } 20 | 21 | autocomplete-suggestion-list.select-list.popover-list .suggestion-description-content { 22 | color: @text-color; 23 | } 24 | -------------------------------------------------------------------------------- /styles/package-support/build.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the community package "build". 8 | * References: 9 | * 1. https://atom.io/packages/build 10 | */ 11 | 12 | .build { 13 | border-left: 0; 14 | animation: none !important; 15 | 16 | .control-container { 17 | padding-left: 5px; 18 | padding-right: 5px; 19 | opacity: 1; 20 | 21 | .btn { 22 | .button(@button-border-color); 23 | 24 | &.icon-zap { 25 | .button-variant(@text-color-info); 26 | } 27 | 28 | &.icon-trashcan { 29 | .button-variant(@text-color-warning); 30 | } 31 | 32 | &.icon-x { 33 | .button(@button-border-color); 34 | } 35 | } 36 | } 37 | 38 | .heading { 39 | font-family: @font-family !important; 40 | color: @text-color; 41 | font-size: @font-size; 42 | 43 | .heading-text { 44 | text-align: center; 45 | font-weight: bold; 46 | } 47 | } 48 | 49 | .output { 50 | font-size: @font-size; 51 | background-color: @build-terminal-background-color !important; 52 | padding-left: @component-padding / 2; 53 | padding-right: @component-padding / 2; 54 | border-radius: @component-border-radius; 55 | color: @text-color !important; 56 | 57 | .terminal { 58 | font-weight: normal; 59 | } 60 | } 61 | 62 | .title { 63 | font-size: @font-size; 64 | background: transparent !important; 65 | 66 | &.error { 67 | color: @text-color-error; 68 | } 69 | 70 | &.success { 71 | color: @text-color-success; 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /styles/package-support/color-picker.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the community package "color-picker". 8 | * References: 9 | * 1. https://atom.io/packages/color-picker 10 | */ 11 | 12 | .ColorPicker-body { 13 | .overlay-shadow(); 14 | 15 | background: @overlay-background-color; 16 | border: 1px solid @base-border-color; 17 | } 18 | 19 | .ColorPicker-body-saturation { 20 | border: 1px solid @base-border-color; 21 | } 22 | 23 | .ColorPicker-body-alpha { 24 | border: 1px solid @base-border-color; 25 | } 26 | 27 | .ColorPicker-body-hue { 28 | border: 1px solid @base-border-color; 29 | } 30 | 31 | .ColorPicker-format { 32 | background: @overlay-background-color; 33 | border: 1px solid @base-border-color; 34 | } 35 | 36 | .ColorPicker-format-button { 37 | background: @overlay-background-color; 38 | color: @text-color-subtle; 39 | border: 0 !important; 40 | text-shadow: none !important; 41 | border-radius: 0; 42 | } 43 | 44 | .ColorPicker-format-button.is--active { 45 | background: @base-background-color; 46 | color: @text-color-highlight; 47 | } 48 | 49 | .ColorPicker-format-button:hover { 50 | background: @background-color-highlight !important; 51 | color: @text-color-highlight !important; 52 | } 53 | -------------------------------------------------------------------------------- /styles/package-support/deprecation-cop.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the core package "deprecation-cop". 8 | * References: 9 | * 1. https://atom.io/packages/deprecation-cop 10 | */ 11 | 12 | .deprecation-cop { 13 | .list-item { 14 | padding-top: @component-padding / 2; 15 | padding-bottom: @component-padding / 2; 16 | 17 | &::before { 18 | transition: all @transition-time ease; 19 | opacity: 0; 20 | } 21 | 22 | &:hover { 23 | background-color: transparent !important; 24 | 25 | &::before { 26 | opacity: 1; 27 | } 28 | } 29 | } 30 | 31 | .stack-trace { 32 | color: @text-color-info; 33 | border-radius: @component-border-radius; 34 | margin-right: @component-padding; 35 | margin-top: @component-padding; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /styles/package-support/expose.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the community package "expose". 8 | * References: 9 | * 1. https://atom.io/packages/expose 10 | */ 11 | 12 | atom-panel.modal.overlay.from-top.expose-panel { 13 | top: 0 !important; 14 | border: 0 !important; 15 | } 16 | 17 | .expose-top { 18 | height: @component-line-height; 19 | 20 | a { 21 | &.icon-gear, 22 | &.icon-x { 23 | color: @base-border-color; 24 | transition: all @transition-time ease; 25 | 26 | &::before { 27 | font-size: @component-icon-size !important; 28 | } 29 | 30 | &:hover { 31 | color: @text-color; 32 | } 33 | } 34 | } 35 | } 36 | 37 | .expose-view .tab-list .expose-tab { 38 | border-radius: @component-border-radius !important; 39 | .overlay-shadow(); 40 | 41 | &.active .tab-body { 42 | border-style: solid; 43 | border-color: @text-color-info !important; 44 | } 45 | 46 | .tab-body { 47 | border-top: 1px solid @text-color-info !important; 48 | cursor: default; 49 | } 50 | 51 | .tab-header { 52 | transition: background @transition-time ease; 53 | color: @text-color-subtle; 54 | 55 | .title { 56 | transition: color @transition-time ease; 57 | } 58 | 59 | .close-icon { 60 | cursor: default; 61 | height: 16px; 62 | width: 16px; 63 | color: @text-color-subtle; 64 | transition: color @transition-time ease; 65 | } 66 | } 67 | 68 | &:hover { 69 | .tab-header { 70 | background: @tab-background-color-hover; 71 | 72 | .title { 73 | color: @text-color-highlight; 74 | } 75 | 76 | .close-icon { 77 | &.icon-x { 78 | color: @text-color-highlight; 79 | } 80 | } 81 | } 82 | 83 | .tab-body { 84 | box-shadow: none; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /styles/package-support/imdone-atom.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the community package "imdone-atom". 8 | * References: 9 | * 1. https://atom.io/packages/imdone-atom 10 | */ 11 | 12 | .imdone-atom .imdone-board-wrapper .imdone-board { 13 | .list { 14 | background: @base-background-color; 15 | 16 | .task { 17 | background-color: @imdone-atom-task-background-color; 18 | border: 1px solid @base-border-color; 19 | transition: background @transition-time ease; 20 | 21 | &.sortable-chosen { 22 | background-color: @imdone-atom-task-background-color-draged; 23 | } 24 | } 25 | 26 | .list-name { 27 | .icon-trashcan { 28 | transition: color @transition-time ease; 29 | 30 | &:hover { 31 | color: @text-color-removed; 32 | } 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /styles/package-support/indent-guide-improved.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the community package "indent-guide-improved". 8 | * References: 9 | * 1. https://atom.io/packages/indent-guide-improved 10 | */ 11 | 12 | .indent-guide-improved { 13 | background-color: @indent-guide-improved-base-color; 14 | opacity: 0.5; 15 | 16 | &.indent-guide-stack { 17 | background-color: @indent-guide-improved-base-color; 18 | 19 | &.indent-guide-active { 20 | background-color: @indent-guide-improved-active-color; 21 | opacity: 1; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /styles/package-support/markdown-preview.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the core package "markdown-preview". 8 | * References: 9 | * 1. https://atom.io/packages/markdown-preview 10 | * 2. https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet 11 | */ 12 | 13 | /* +--------------+ 14 | + GitHub Style + 15 | +--------------+ */ 16 | .markdown-preview[data-use-github-style] { 17 | atom-text-editor { 18 | padding: 16px; 19 | 20 | .editor--private { 21 | span.source { 22 | color: @markdown-preview-text-color; 23 | } 24 | } 25 | } 26 | 27 | atom-text-editor, 28 | code { 29 | background-color: #f7f7f7 !important; 30 | border-radius: 3px; 31 | } 32 | 33 | h1, 34 | h2, 35 | h3, 36 | h4, 37 | h5 { 38 | color: #333; 39 | } 40 | } 41 | 42 | /* +------------+ 43 | + Nord Style + 44 | +------------+ */ 45 | .markdown-preview, 46 | .markdown-preview:not([data-use-github-style]) { 47 | color: @markdown-preview-text-color; 48 | background-color: @markdown-preview-background-color; 49 | 50 | a { 51 | color: @text-color-info; 52 | } 53 | 54 | atom-text-editor { 55 | padding: @component-padding*1.5; 56 | 57 | .editor--private { 58 | span.source { 59 | color: @markdown-preview-text-color; 60 | } 61 | } 62 | } 63 | 64 | atom-text-editor, 65 | code { 66 | background-color: @markdown-preview-code-background-color !important; 67 | border-radius: @component-border-radius; 68 | } 69 | 70 | atom-text-editor[data-grammar="text plain"] { 71 | .meta { 72 | color: @markdown-preview-text-color; 73 | } 74 | } 75 | 76 | blockquote { 77 | border-left-color: @markdown-preview-border-color; 78 | } 79 | 80 | code { 81 | color: @markdown-preview-text-color; 82 | background-clip: padding-box; 83 | } 84 | 85 | h1, 86 | h2, 87 | h3 { 88 | font-weight: bold; 89 | border-color: @markdown-preview-border-color; 90 | } 91 | 92 | h1, 93 | h2, 94 | h3, 95 | h4, 96 | h5 { 97 | color: @markdown-preview-text-color; 98 | } 99 | 100 | hr { 101 | border: 1px solid @markdown-preview-border-color; 102 | } 103 | 104 | strong { 105 | color: @markdown-preview-text-color; 106 | } 107 | 108 | table { 109 | td, 110 | th { 111 | border-color: transparent; 112 | } 113 | 114 | th { 115 | background-color: @markdown-preview-border-color; 116 | } 117 | 118 | tr { 119 | background-color: @markdown-preview-table-body-color; 120 | 121 | &:nth-child(2n) { 122 | /* stylelint-disable-next-line function-no-unknown */ 123 | background-color: darken(@markdown-preview-background-color, 3%); 124 | } 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /styles/package-support/minimap-git-diff.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the community package "minimap-git-diff". 8 | * References: 9 | * 1. https://atom.io/packages/minimap-git-diff 10 | */ 11 | 12 | .minimap { 13 | .line { 14 | .git-line-modified { 15 | /* stylelint-disable-next-line function-name-case,function-no-unknown */ 16 | background: fadeOut(@text-color-modified, 50%); 17 | } 18 | 19 | .git-line-added { 20 | /* stylelint-disable-next-line function-name-case,function-no-unknown */ 21 | background: fadeOut(@text-color-added, 50%); 22 | } 23 | 24 | .git-line-removed { 25 | /* stylelint-disable-next-line function-name-case,function-no-unknown */ 26 | background: fadeOut(@text-color-removed, 50%); 27 | } 28 | } 29 | 30 | .gutter { 31 | .git-line-modified { 32 | background: @text-color-modified; 33 | } 34 | 35 | .git-line-added { 36 | background: @text-color-added; 37 | } 38 | 39 | .git-line-removed { 40 | background: @text-color-removed; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /styles/package-support/minimap.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the community package "minimap". 8 | * References: 9 | * 1. https://atom.io/packages/minimap 10 | */ 11 | 12 | atom-text-editor atom-text-editor-minimap .minimap-visible-area, 13 | html atom-text-editor-minimap .minimap-visible-area { 14 | opacity: 0.6; 15 | /* stylelint-disable-next-line function-name-case,function-no-unknown */ 16 | background-color: fade(@base-background-color, 30%); 17 | } 18 | -------------------------------------------------------------------------------- /styles/package-support/project-manager.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the community package "project-manager". 8 | * References: 9 | * 1. https://atom.io/packages/project-manager 10 | */ 11 | 12 | .project-manager atom-text-editor[mini]::before, 13 | .project-manager-dialog atom-text-editor[mini]::before { 14 | content: "\f001" !important; 15 | } 16 | -------------------------------------------------------------------------------- /styles/package-support/script.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the community package "script". 8 | * References: 9 | * 1. https://atom.io/packages/script 10 | */ 11 | 12 | .script-view { 13 | pre { 14 | border: 0; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /styles/package-support/timecop.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the core package "timecop". 8 | * References: 9 | * 1. https://atom.io/packages/timecop 10 | */ 11 | 12 | .timecop .timecop-panel .tool-panel { 13 | background: @app-background-color; 14 | display: block; 15 | } 16 | -------------------------------------------------------------------------------- /styles/package-support/tool-bar.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* 7 | * Support for the community package "tool-bar". 8 | * References: 9 | * 1. https://atom.io/packages/tool-bar 10 | */ 11 | 12 | .tool-bar { 13 | background-color: @base-background-color; 14 | border: none; 15 | 16 | button.tool-bar-btn { 17 | background-color: @base-background-color; 18 | background-image: none; 19 | border-color: @base-background-color; 20 | } 21 | 22 | hr.tool-bar-spacer { 23 | /* stylelint-disable-next-line property-no-vendor-prefix */ 24 | -webkit-mask-image: none !important; 25 | border-top: 1px solid @tool-bar-spacer-border-color !important; 26 | margin: 2px 5px !important; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | atom-panel { 7 | .text(normal); 8 | 9 | background: @tool-panel-background-color; 10 | 11 | &.bottom { 12 | background: @app-background-color; 13 | } 14 | 15 | &.bottom > *:not(:empty) { 16 | background: @app-background-color; 17 | padding-top: @component-padding / 2; 18 | z-index: 3; 19 | } 20 | } 21 | 22 | atom-panel-container { 23 | background: @base-background-color; 24 | 25 | &.bottom { 26 | margin-top: 2px; 27 | border-top: 1px solid @tool-panel-border-color; 28 | z-index: 3; 29 | } 30 | } 31 | 32 | atom-pane-container atom-pane .item-views, 33 | .pane-item { 34 | background: @app-background-color !important; 35 | border: 0; 36 | } 37 | 38 | .focusable-panel, 39 | .item-views .focusable-panel { 40 | padding: @component-padding; 41 | } 42 | 43 | .inset-panel .panel-heading, 44 | .panel-heading { 45 | .text(heading); 46 | 47 | font-size: 24px; 48 | border-radius: 0; 49 | 50 | & .btn { 51 | .button(@button-border-color); 52 | 53 | &.btn-primary { 54 | .button-variant(@text-color-info); 55 | } 56 | 57 | &.btn-info { 58 | .button-variant(@text-color-info); 59 | } 60 | 61 | &.btn-success { 62 | .button-variant(@text-color-success); 63 | } 64 | 65 | &.btn-warning { 66 | .button-variant(@text-color-warning); 67 | } 68 | 69 | &.btn-error { 70 | .button-variant(@text-color-error); 71 | } 72 | 73 | font-size: 11px !important; 74 | padding: 0 8px !important; 75 | height: 24px !important; 76 | line-height: 24px !important; 77 | } 78 | } 79 | 80 | .panel-body { 81 | background: @tool-panel-background-color; 82 | border-radius: @component-border-radius; 83 | } 84 | 85 | atom-pane-container atom-pane-axis.horizontal > *:last-child { 86 | border-right: none; 87 | } 88 | 89 | atom-pane-container atom-pane-axis.horizontal > * { 90 | border-right: 1px solid @base-border-color; 91 | } 92 | 93 | atom-pane-container atom-pane-axis.vertical > atom-pane-resize-handle.vertical { 94 | border-bottom: 1px solid @base-border-color; 95 | margin-bottom: -1px; 96 | } 97 | -------------------------------------------------------------------------------- /styles/progress-indicator.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* +---------+ 7 | + Spinner + 8 | +---------+ */ 9 | .loading-spinner(@size) { 10 | width: @size; 11 | height: @size; 12 | display: block; 13 | background-image: url("images/octocat-spinner-128.gif"); 14 | background-repeat: no-repeat; 15 | background-size: cover; 16 | 17 | &.inline-block { 18 | display: inline-block; 19 | } 20 | } 21 | 22 | .loading-spinner-large { 23 | .loading-spinner(64px); 24 | } 25 | 26 | .loading-spinner-medium { 27 | .loading-spinner(48px); 28 | } 29 | 30 | .loading-spinner-small { 31 | .loading-spinner(32px); 32 | } 33 | 34 | .loading-spinner-tiny { 35 | .loading-spinner(20px); 36 | } 37 | 38 | /* +-------------+ 39 | + Loading Bar + 40 | +-------------+ */ 41 | progress { 42 | /* stylelint-disable-next-line property-no-vendor-prefix */ 43 | -webkit-appearance: none; 44 | height: 8px; 45 | border-radius: @component-border-radius; 46 | background-color: @input-background-color; 47 | box-shadow: inset 0 0 0 1px @input-border-color; 48 | 49 | &::-webkit-progress-bar { 50 | background-color: transparent; 51 | } 52 | 53 | &::-webkit-progress-value { 54 | border-radius: @component-border-radius; 55 | background-color: @progress-loading-bar-background-color; 56 | } 57 | 58 | &:indeterminate { 59 | background-image: linear-gradient( 60 | -45deg, 61 | transparent 33%, 62 | @progress-loading-bar-background-color 33%, 63 | @progress-loading-bar-background-color 66%, 64 | transparent 66% 65 | ); 66 | background-size: 24px 8px, 100% 100%, 100% 100%; 67 | /* stylelint-disable-next-line property-no-vendor-prefix */ 68 | -webkit-animation: progress-buffering 5s linear 6; 69 | } 70 | } 71 | 72 | /* stylelint-disable-next-line at-rule-no-vendor-prefix */ 73 | @-webkit-keyframes progress-buffering { 74 | 100% { 75 | /* stylelint-disable-next-line at-rule-no-vendor-prefix */ 76 | background-position: -100px 0; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /styles/settings-view.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | .settings-view { 7 | font-size: @font-size; 8 | .text(normal); 9 | 10 | .breadcrumb { 11 | .text(normal); 12 | 13 | font-weight: 200; 14 | } 15 | 16 | input[type="checkbox"]:checked { 17 | background-color: @text-color-info; 18 | } 19 | 20 | .alert { 21 | border: 0; 22 | 23 | button.close { 24 | background: transparent; 25 | text-shadow: none; 26 | border: 0 !important; 27 | padding: 0 !important; 28 | opacity: 1; 29 | 30 | &:hover { 31 | background: transparent; 32 | 33 | &::before { 34 | color: @text-color-highlight; 35 | } 36 | } 37 | 38 | &::before { 39 | margin-right: 0; 40 | transition: color @transition-time ease; 41 | } 42 | } 43 | } 44 | 45 | .alert-info { 46 | color: @text-color-info; 47 | /* stylelint-disable-next-line function-no-unknown */ 48 | background: mix(@text-color-info, @base-background-color, 32%); 49 | 50 | button.close::before { 51 | color: @text-color-info; 52 | } 53 | } 54 | 55 | .alert-danger { 56 | color: @text-color-error; 57 | /* stylelint-disable-next-line function-no-unknown */ 58 | background: mix(@text-color-error, @base-background-color, 32%); 59 | 60 | button.close::before { 61 | color: @text-color-error; 62 | } 63 | } 64 | 65 | .setting-title, 66 | .setting-title.themes-label { 67 | .text(normal); 68 | } 69 | 70 | label { 71 | .text(normal); 72 | 73 | &.control-label { 74 | .theme-description { 75 | min-height: 36px; 76 | } 77 | } 78 | } 79 | 80 | .section { 81 | background-color: @app-background-color; 82 | 83 | .section-heading { 84 | .text(heading); 85 | 86 | font-size: 24px; 87 | } 88 | 89 | .sub-section-heading { 90 | .text(heading); 91 | 92 | font-size: 16px; 93 | } 94 | } 95 | 96 | .section:first-of-type { 97 | border-top: 0; 98 | } 99 | 100 | .config-menu { 101 | background-color: @app-background-color; 102 | z-index: +1; 103 | 104 | .nav > li > a { 105 | transition: color @transition-time ease; 106 | } 107 | 108 | .nav > li > a:hover { 109 | background: transparent; 110 | } 111 | 112 | .nav > li.active > a:hover { 113 | background: @background-color-selected; 114 | } 115 | } 116 | 117 | .sub-section .row div { 118 | background-color: transparent; 119 | } 120 | 121 | .package-card { 122 | .text(normal); 123 | 124 | background: transparent; 125 | border-width: 1px solid @base-border-color; 126 | padding: @component-padding; 127 | 128 | &:hover { 129 | background: transparent; 130 | } 131 | 132 | .card-name { 133 | .text(highlight); 134 | } 135 | 136 | .meta-controls { 137 | .install-button, 138 | .uninstall-button { 139 | &.is-installing, 140 | &.is-uninstalling { 141 | background-image: none; 142 | /* stylelint-disable-next-line property-no-vendor-prefix */ 143 | -webkit-animation: none; 144 | 145 | &::before { 146 | /* stylelint-disable-next-line property-no-vendor-prefix */ 147 | -webkit-animation: spin 1s linear infinite; 148 | content: "\f087"; 149 | } 150 | } 151 | } 152 | 153 | .status-indicator { 154 | width: @component-padding / 2; 155 | } 156 | } 157 | } 158 | 159 | .package-detail .package-card:hover { 160 | background-color: transparent; 161 | } 162 | 163 | .collapsed .package-container .row { 164 | border: 0; 165 | } 166 | 167 | .package-update-view { 168 | .thumbnail { 169 | background-color: @tool-panel-background-color !important; 170 | } 171 | 172 | .package-status.icon-check { 173 | color: @text-color-success; 174 | } 175 | 176 | .package-status.icon-cloud-download { 177 | color: @text-color-info; 178 | } 179 | } 180 | 181 | .package-readme { 182 | font-size: 1em; 183 | 184 | h1, 185 | h2, 186 | h3, 187 | h4 { 188 | .text(heading); 189 | } 190 | } 191 | } 192 | -------------------------------------------------------------------------------- /styles/sites.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | .ui-site(@num, @color) { 7 | .ui-site-@{num} { 8 | background-color: @color; 9 | } 10 | } 11 | 12 | .ui-site(1, @ui-site-color-1); 13 | .ui-site(2, @ui-site-color-2); 14 | .ui-site(3, @ui-site-color-3); 15 | .ui-site(4, @ui-site-color-4); 16 | .ui-site(5, @ui-site-color-5); 17 | -------------------------------------------------------------------------------- /styles/status-bar.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | status-bar { 7 | .text(subtle); 8 | 9 | background: @base-border-color; 10 | height: @input-height; 11 | line-height: @component-line-height; 12 | font-size: 11px; 13 | 14 | & > .flexbox-repaint-hack { 15 | padding-top: 3px; 16 | } 17 | 18 | span { 19 | font-size: 11px; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | .tab-bar { 7 | background: @tab-bar-background-color; 8 | width: 100%; 9 | height: @tab-height; 10 | padding: 0; 11 | display: table; 12 | table-layout: fixed; 13 | /* stylelint-disable-next-line property-no-vendor-prefix */ 14 | -webkit-transform: scale(1); 15 | 16 | .tab { 17 | .text(normal); 18 | 19 | text-align: center; 20 | color: @text-color-subtle; 21 | background: @tab-background-color; 22 | display: table-cell; 23 | width: 100%; 24 | height: @tab-height; 25 | line-height: @tab-height; 26 | box-sizing: border-box; 27 | border: 0; 28 | padding-left: 20px !important; 29 | padding-right: 20px !important; 30 | position: relative; 31 | transition: color @transition-time ease, border @transition-time ease, background @transition-time ease; 32 | 33 | .close-icon:hover::before { 34 | color: @text-color-highlight; 35 | } 36 | 37 | .status-added, 38 | .status-ignored, 39 | .status-modified { 40 | transition: color @transition-time ease, background @transition-time ease; 41 | } 42 | 43 | .status-modified { 44 | color: @text-color-modified; 45 | } 46 | 47 | .status-added { 48 | color: @text-color-added; 49 | } 50 | 51 | &:hover { 52 | color: @text-color-highlight; 53 | background: @tab-background-color-hover; 54 | } 55 | } 56 | 57 | .tab.active, 58 | .tab:hover.active { 59 | color: @text-color-selected; 60 | background-color: @tab-background-color-active; 61 | width: 100%; 62 | 63 | &:only-child { 64 | background-color: @base-background-color; 65 | } 66 | 67 | &.title { 68 | color: @text-color-selected; 69 | padding: 0; 70 | } 71 | 72 | .status-modified { 73 | color: @text-color-modified; 74 | } 75 | 76 | .status-added { 77 | color: @text-color-added; 78 | } 79 | 80 | .status-ignored { 81 | color: @text-color-ignored; 82 | } 83 | } 84 | 85 | .tab.modified:hover .close-icon::before { 86 | color: @text-color-info; 87 | } 88 | 89 | .tab.modified:not(:hover) .close-icon { 90 | opacity: 1; 91 | transform: scale(1); 92 | top: (@tab-height - 6) / 2; 93 | right: 8px; 94 | display: inline-block; 95 | border-color: @background-color-info; 96 | border-width: 2px; 97 | } 98 | 99 | .tab .close-icon { 100 | top: (@tab-height - 16) / 2; 101 | height: 16px; 102 | width: 16px; 103 | left: auto; 104 | right: 4px; 105 | position: absolute; 106 | transform: scale(0); 107 | opacity: 0; 108 | border-radius: 2px; 109 | transition: transform @transition-time ease, color @transition-time ease, background @transition-time ease; 110 | 111 | &::before { 112 | color: @text-color-subtle; 113 | font-size: 12px; 114 | position: absolute; 115 | top: 2px; 116 | left: 2px; 117 | width: 13px; 118 | height: 12px; 119 | transition: transform @transition-time ease, color @transition-time ease, background @transition-time ease; 120 | } 121 | } 122 | 123 | .tab:hover .close-icon { 124 | transform: scale(1); 125 | opacity: 1; 126 | } 127 | 128 | .placeholder { 129 | display: none; 130 | } 131 | } 132 | 133 | @media (width <= 1280px), (height <= 800px) { 134 | .tab-bar { 135 | height: @tab-height * 0.8; 136 | 137 | .tab { 138 | height: @tab-height * 0.8; 139 | line-height: @tab-height * 0.8; 140 | 141 | &.modified:not(:hover) .close-icon { 142 | top: ((@tab-height * 0.8) - 6) / 2; 143 | } 144 | 145 | .close-icon { 146 | top: ((@tab-height * 0.8) - 16) / 2; 147 | } 148 | } 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /styles/text.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | body { 7 | font-weight: 400; 8 | } 9 | 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | h5, 15 | h6, 16 | .h1, 17 | .h2, 18 | .h3, 19 | .h4, 20 | .h5, 21 | .h6 { 22 | .text(heading); 23 | 24 | small { 25 | font-weight: 200; 26 | } 27 | } 28 | 29 | h1, 30 | .h1 { 31 | font-size: 1.6em; 32 | } 33 | 34 | h2, 35 | .h2 { 36 | font-size: 1.5em; 37 | } 38 | 39 | h3, 40 | .h3 { 41 | font-size: 1.4em; 42 | } 43 | 44 | h4, 45 | .h4 { 46 | font-size: 1.3em; 47 | } 48 | 49 | h5, 50 | .h5 { 51 | font-size: 1.2em; 52 | } 53 | 54 | h6, 55 | .h6 { 56 | font-size: 1.1em; 57 | } 58 | 59 | .text-subtle { 60 | .text(subtle); 61 | } 62 | 63 | .text-highlight { 64 | .text(highlight); 65 | } 66 | 67 | .text-selected { 68 | .text(selected); 69 | } 70 | 71 | .text-info { 72 | .text(info); 73 | } 74 | 75 | .text-success { 76 | .text(success); 77 | } 78 | 79 | .text-warning { 80 | .text(warning); 81 | } 82 | 83 | .text-error { 84 | .text(error); 85 | } 86 | 87 | .highlight { 88 | .highlight-type(@text-color); 89 | } 90 | 91 | .highlight-info { 92 | .highlight-type(@text-color-info); 93 | } 94 | 95 | .highlight-success { 96 | .highlight-type(@text-color-success); 97 | } 98 | 99 | .highlight-warning { 100 | .highlight-type(@text-color-warning); 101 | } 102 | 103 | .highlight-error { 104 | .highlight-type(@text-color-error); 105 | } 106 | 107 | .highlight-type(@color) { 108 | .text(normal); 109 | 110 | font-family: inherit !important; 111 | padding-left: @component-padding / 2; 112 | padding-right: @component-padding / 2; 113 | color: @base-background-color !important; 114 | border-radius: @component-border-radius; 115 | background-color: @color; 116 | } 117 | 118 | pre { 119 | .text(normal); 120 | 121 | border-color: @base-border-color; 122 | background: @base-background-color; 123 | } 124 | 125 | code { 126 | padding: 2px 4px; 127 | font-size: 90%; 128 | color: @text-color-info; 129 | background-color: @base-border-color; 130 | border-radius: 4px; 131 | } 132 | -------------------------------------------------------------------------------- /styles/tooltips.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | .tooltip { 7 | white-space: nowrap; 8 | 9 | .keystroke { 10 | .text(normal); 11 | 12 | color: @tooltip-key-text-color; 13 | background: @tooltip-key-background-color; 14 | font-size: 90%; 15 | border: 1px solid @tooltip-key-text-color; 16 | border-radius: @component-border-radius / 2; 17 | padding: 2px 4px; 18 | } 19 | 20 | &.in { 21 | opacity: 1; 22 | } 23 | 24 | .tooltip-inner { 25 | .text(normal); 26 | .overlay-shadow(); 27 | 28 | line-height: @component-line-height; 29 | border-radius: @component-border-radius; 30 | background-color: @tooltip-background-color; 31 | color: @tooltip-text-color !important; 32 | white-space: nowrap; 33 | max-width: none; 34 | } 35 | 36 | &.top .tooltip-arrow { 37 | border-top-color: @tooltip-background-color; 38 | } 39 | 40 | &.top-left .tooltip-arrow { 41 | border-top-color: @tooltip-background-color; 42 | } 43 | 44 | &.top-right .tooltip-arrow { 45 | border-top-color: @tooltip-background-color; 46 | } 47 | 48 | &.right .tooltip-arrow { 49 | border-right-color: @tooltip-background-color; 50 | } 51 | 52 | &.left .tooltip-arrow { 53 | border-left-color: @tooltip-background-color; 54 | } 55 | 56 | &.bottom .tooltip-arrow { 57 | border-bottom-color: @tooltip-background-color; 58 | } 59 | 60 | &.bottom-left .tooltip-arrow { 61 | border-bottom-color: @tooltip-background-color; 62 | } 63 | 64 | &.bottom-right .tooltip-arrow { 65 | border-bottom-color: @tooltip-background-color; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | .tree-view { 7 | font-size: @font-size; 8 | background: @tree-view-background-color; 9 | padding-top: 0; 10 | 11 | .project-root { 12 | padding-bottom: @component-padding / 2; 13 | 14 | &::before { 15 | height: @tab-height; 16 | background-clip: padding-box; 17 | } 18 | 19 | & > .header { 20 | & .name { 21 | .text(normal); 22 | 23 | font-weight: 600; 24 | color: @text-color-highlight; 25 | height: @tab-height + 1px; 26 | line-height: @tab-height; 27 | } 28 | 29 | &::before { 30 | color: @text-color-highlight; 31 | transition: all @transition-time ease; 32 | opacity: 0; 33 | } 34 | 35 | &:hover { 36 | &::before { 37 | opacity: 1; 38 | } 39 | } 40 | } 41 | } 42 | 43 | .project-root.project-root.collapsed { 44 | & > .header { 45 | &::before { 46 | opacity: 0; 47 | } 48 | 49 | &:hover { 50 | &::before { 51 | opacity: 1; 52 | } 53 | } 54 | } 55 | } 56 | } 57 | 58 | .list-group .icon, 59 | .list-tree .icon { 60 | display: inline-block; 61 | height: inherit; 62 | 63 | &::before { 64 | top: initial; 65 | line-height: inherit; 66 | height: inherit; 67 | vertical-align: top; 68 | } 69 | } 70 | 71 | .tree-view-resizer { 72 | .tree-view-resize-handle { 73 | width: 8px; 74 | } 75 | } 76 | 77 | @media (width <= 1280px), (height <= 800px) { 78 | .tree-view { 79 | .project-root.project-root { 80 | &::before { 81 | height: @tab-height * 0.8; 82 | } 83 | 84 | & > .header { 85 | & .name { 86 | height: @tab-height * 0.8 + 1px; 87 | line-height: @tab-height * 0.8; 88 | } 89 | } 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /styles/ui-animations.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* stylelint-disable-next-line at-rule-no-vendor-prefix */ 7 | @-webkit-keyframes spin { 8 | from { 9 | transform: rotate(0deg); 10 | } 11 | 12 | to { 13 | transform: rotate(359deg); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /styles/ui-mixins.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* +---------+ 7 | + Buttons + 8 | +---------+ */ 9 | .button(@color) { 10 | color: @text-color; 11 | font-size: 12px; 12 | font-weight: 400; 13 | background: transparent; 14 | height: @input-height; 15 | line-height: @input-height; 16 | border-radius: @component-border-radius; 17 | border-color: @color; 18 | border-width: 1px !important; 19 | border-style: solid !important; 20 | box-shadow: none !important; 21 | transition: all @transition-time ease; 22 | padding: 0 10px; 23 | 24 | &:focus { 25 | outline: none; 26 | } 27 | 28 | &:focus, 29 | &:hover { 30 | color: @base-background-color !important; 31 | background: @color !important; 32 | border-color: @color !important; 33 | } 34 | 35 | &:active, 36 | &:active:focus { 37 | color: @base-background-color; 38 | background: @color; 39 | border: 1px solid @text-color-selected !important; 40 | } 41 | 42 | &.selected { 43 | color: @base-background-color; 44 | background: @button-background-color-selected; 45 | border: 1px solid @color !important; 46 | 47 | &:hover { 48 | color: @base-background-color !important; 49 | border: 1px solid @text-color-highlight !important; 50 | background: @color !important; 51 | } 52 | } 53 | 54 | &[disabled], 55 | &.disabled { 56 | opacity: 1; 57 | background-color: transparent !important; 58 | border-color: transparent !important; 59 | color: @text-color-subtle !important; 60 | } 61 | } 62 | 63 | .button-variant(@color) { 64 | .button(@color); 65 | 66 | color: @color !important; 67 | border-color: @color !important; 68 | background: transparent; 69 | 70 | &:hover { 71 | border-color: @color !important; 72 | } 73 | 74 | &.selected { 75 | color: @base-background-color !important; 76 | background: @color !important; 77 | } 78 | 79 | &[disabled], 80 | &.disabled { 81 | opacity: 1; 82 | background-color: transparent !important; 83 | border-color: transparent !important; 84 | color: @text-color-subtle !important; 85 | } 86 | } 87 | 88 | /* +------+ 89 | + Text + 90 | +------+ */ 91 | .text(error) { 92 | .text(normal); 93 | 94 | color: @text-color-error; 95 | } 96 | 97 | .text(heading) { 98 | color: @text-color; 99 | font-family: @font-family; 100 | font-weight: 200; 101 | } 102 | 103 | .text(highlight) { 104 | .text(normal); 105 | 106 | font-size: inherit; 107 | color: @text-color-highlight; 108 | } 109 | 110 | .text(info) { 111 | .text(normal); 112 | 113 | color: @text-color-info; 114 | } 115 | 116 | .text(normal) { 117 | color: @text-color; 118 | font-family: @font-family; 119 | font-size: @font-size; 120 | font-weight: 400; 121 | } 122 | 123 | .text(selected) { 124 | .text(normal); 125 | 126 | font-size: inherit; 127 | color: @text-color-selected; 128 | } 129 | 130 | .text(subtle) { 131 | .text(normal); 132 | 133 | font-size: inherit; 134 | color: @text-color-subtle; 135 | } 136 | 137 | .text(success) { 138 | .text(normal); 139 | 140 | color: @text-color-success; 141 | } 142 | 143 | .text(warning) { 144 | .text(normal); 145 | 146 | color: @text-color-warning; 147 | } 148 | 149 | /* +---------+ 150 | + Overlay + 151 | +---------+ */ 152 | .overlay-shadow() { 153 | /* stylelint-disable-next-line color-function-notation */ 154 | box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 40%) !important; 155 | } 156 | -------------------------------------------------------------------------------- /styles/ui-theme-settings.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | /* +-----------+ 7 | + Variables + 8 | +-----------+ */ 9 | @theme-setting-formfocuseffect: ~"theme-@{ui-theme-name}-form-focus-effect"; 10 | @theme-setting-tabsizing: ~"theme-@{ui-theme-name}-tabsizing"; 11 | 12 | @theme-setting-formfocuseffect-background-color: @nord3; 13 | @theme-setting-formfocuseffect-border-color: @nord3; 14 | @theme-setting-formfocuseffect-text-selection-color: @nord1; 15 | 16 | /* +----------------+ 17 | + User Interface + 18 | +----------------+ */ 19 | 20 | /* +--- Darker Form-Focusing Effect ---+ */ 21 | [@{theme-setting-formfocuseffect}="nosnowlight"] { 22 | .theme-setting-formfocuseffect-nosnowlight(); 23 | } 24 | 25 | .theme-setting-formfocuseffect-nosnowlight() { 26 | .find-and-replace, 27 | .settings-view { 28 | atom-text-editor[mini].is-focused { 29 | border: 1px solid @theme-setting-formfocuseffect-border-color; 30 | background-color: @theme-setting-formfocuseffect-background-color; 31 | 32 | .syntax--text, 33 | .syntax--source { 34 | color: @text-color; 35 | 36 | .regexp { 37 | color: @text-color; 38 | } 39 | } 40 | 41 | .highlights .region { 42 | background-color: @theme-setting-formfocuseffect-text-selection-color; 43 | } 44 | } 45 | } 46 | } 47 | 48 | /* +--- Full Width Tab Sizing ---+ */ 49 | [@{theme-setting-tabsizing}="nofullwidth"] { 50 | .theme-setting-tabsizing-nofullwidth(); 51 | } 52 | 53 | .theme-setting-tabsizing-nofullwidth() { 54 | .tab-bar { 55 | width: auto; 56 | 57 | .tab { 58 | width: inherit; 59 | } 60 | 61 | .tab.active, 62 | .tab:hover.active { 63 | width: inherit; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2016-present Sven Greb 3 | * This source code is licensed under the MIT license found in the license file. 4 | */ 5 | 6 | @import url("nord"); 7 | 8 | /* +------------+ 9 | + Animations + 10 | +------------+ */ 11 | @ui-theme-name: nord-atom-ui; 12 | @transition-time: 400ms; 13 | 14 | /* +------+ 15 | + Base + 16 | +------+ */ 17 | @base-background-color: @nord0; 18 | @base-border-color: @nord1; 19 | @app-background-color: @base-background-color; 20 | 21 | /* +--- Background ---+ */ 22 | @background-color-highlight: @nord2; 23 | @background-color-selected: @nord1; 24 | @background-color-info: @nord8; 25 | @background-color-success: @nord14; 26 | @background-color-warning: @nord12; 27 | @background-color-error: @nord11; 28 | 29 | /* +--- Text ---+ */ 30 | @text-color: @nord4; 31 | @text-color-subtle: fade(@text-color, 40%); 32 | @text-color-highlight: @nord6; 33 | @text-color-selected: @text-color-highlight; 34 | @text-color-info: @nord8; 35 | @text-color-success: @nord14; 36 | @text-color-warning: @nord12; 37 | @text-color-error: @nord11; 38 | @text-color-ignored: @text-color-subtle; 39 | @text-color-added: @nord14; 40 | @text-color-renamed: @nord8; 41 | @text-color-modified: @nord13; 42 | @text-color-removed: @nord11; 43 | 44 | /* +------------+ 45 | + Components + 46 | +------------+ */ 47 | 48 | /* +--- Button ---+ */ 49 | @button-background-color: transparent; 50 | @button-background-color-hover: @input-border-color; 51 | @button-background-color-selected: @input-border-color; 52 | @button-border-color: @input-border-color; 53 | 54 | /* +--- Gutter ---+ */ 55 | @gutter-background-color: transparent; 56 | @gutter-background-color-selected: transparent; 57 | @gutter-text-color: @text-color-subtle; 58 | @gutter-text-color-selected: @text-color-selected; 59 | 60 | /* +--- Input ---+ */ 61 | @input-background-color: @nord1; 62 | @input-border-color: @text-color; 63 | @input-border-color-active: @input-background-color-active; 64 | @input-background-color-active: @text-color; 65 | @input-text-color-active: @base-background-color; 66 | 67 | /* +--- Overlay ---+ */ 68 | @overlay-background-color: @tool-panel-background-color; 69 | @overlay-border-color: @base-border-color; 70 | 71 | /* +--- Pane ---+ */ 72 | @pane-item-background-color: @nord2; 73 | @pane-item-border-color: @base-border-color; 74 | 75 | /* +--- Panel ---+ */ 76 | @tool-panel-background-color: @base-background-color; 77 | @tool-panel-border-color: @base-border-color; 78 | @inset-panel-background-color: @nord1; 79 | @inset-panel-border-color: @base-border-color; 80 | @panel-heading-background-color: @nord1; 81 | @panel-heading-border-color: @base-border-color; 82 | 83 | /* +--- Progress Indicator ---+ */ 84 | @progress-loading-bar-background-color: @nord8; 85 | 86 | /* +--- Scrollbar ---+ */ 87 | @scrollbar-color: @nord1; 88 | @scrollbar-color-active: @nord1; 89 | @scrollbar-border-color: @nord0; 90 | @scrollbar-track-color: transparent; 91 | 92 | /* +--- Site ---+ */ 93 | @ui-site-color-1: @nord8; 94 | @ui-site-color-2: @nord14; 95 | @ui-site-color-3: @nord12; 96 | @ui-site-color-4: @nord11; 97 | @ui-site-color-5: @nord13; 98 | 99 | /* +--- Tab ---+ */ 100 | @tab-bar-background-color: @app-background-color; 101 | @tab-bar-border-color: @base-border-color; 102 | @tab-background-color: @tool-panel-background-color; 103 | @tab-background-color-active: @nord1; 104 | @tab-background-color-hover: @nord1; 105 | @tab-border-color: @base-border-color; 106 | 107 | /* +--- Tooltip ---+ */ 108 | @tooltip-text-color: @base-background-color; 109 | @tooltip-background-color: @text-color; 110 | @tooltip-key-text-color: @nord8; 111 | @tooltip-key-background-color: @base-background-color; 112 | 113 | /* +--- Tree View ---+ */ 114 | @tree-view-background-color: @tool-panel-background-color; 115 | @tree-view-border-color: @base-border-color; 116 | 117 | /* +----------------+ 118 | + Configurations + 119 | +----------------+ */ 120 | @use-custom-controls: true; 121 | 122 | /* +-------+ 123 | + Fonts + 124 | +-------+ */ 125 | @font-family: "BlinkMacSystemFont", "System Font", "Helvetica Neue", "Roboto", "Cantarell", "Ubuntu", "Lucida Grande", "Segoe UI", "Noto Sans", sans-serif; 126 | 127 | /* +-----------------+ 128 | + Package Support + 129 | +-----------------+ */ 130 | 131 | /* +--- build ---+ */ 132 | @build-terminal-background-color: darken(@nord0, 2%); 133 | 134 | /* +--- imdone-atom ---+ */ 135 | @imdone-atom-task-background-color: darken(@nord1, 2%); 136 | @imdone-atom-task-background-color-draged: @nord1; 137 | 138 | /* +--- indent-guide-improved ---+ */ 139 | @indent-guide-improved-base-color: @nord2; 140 | @indent-guide-improved-active-color: @nord3; 141 | 142 | /* +--- markdown-preview ---+ */ 143 | @markdown-preview-background-color: @nord6; 144 | @markdown-preview-border-color: @nord4; 145 | @markdown-preview-code-background-color: @nord4; 146 | @markdown-preview-table-body-color: @nord5; 147 | @markdown-preview-text-color: @nord0; 148 | 149 | /* +--- tool-bar ---+ */ 150 | @tool-bar-spacer-border-color: @nord4; 151 | 152 | /* +-------+ 153 | + Sizes + 154 | +-------+ */ 155 | 156 | /* +--- Base ---+ */ 157 | @disclosure-arrow-size: 12px; 158 | @component-icon-size: 16px; 159 | @component-icon-padding: 5px; 160 | @component-padding: 10px; 161 | @component-line-height: 26px; 162 | @component-border-radius: 4px; 163 | 164 | /* +--- Font ---+ */ 165 | @font-size: 14px; 166 | @input-font-size: 14px; 167 | 168 | /* +--- Input ---+ */ 169 | @input-height: 32px; 170 | 171 | /* +--- List ---+ */ 172 | @list-active-icon-size: 14px; 173 | 174 | /* +--- Tab ---+ */ 175 | @tab-height: 40px; 176 | --------------------------------------------------------------------------------