├── .gitignore ├── CHANGELOG.md ├── styles ├── plugins.less ├── key-binding.less ├── nebula.less ├── plugins │ ├── highlight-selected.less │ ├── minimap.less │ ├── autocomplete.less │ └── linter.less ├── sites.less ├── git.less ├── tooltips.less ├── base.less ├── status-bar.less ├── scrollbars.less ├── ui-mixins.less ├── editor.less ├── text.less ├── tree-view.less ├── progress.less ├── panels.less ├── buttons.less ├── settings.less ├── find-and-replace.less ├── forms.less ├── ui-variables.less ├── lists.less └── tabs.less ├── spec ├── focus-mode-spec.coffee └── hide-single-tab-spec.coffee ├── index.less ├── lib └── main.coffee ├── LICENSE.md ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | Release notes can be found at https://github.com/tjkohli/nebula-ui/releases -------------------------------------------------------------------------------- /styles/plugins.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Plugins 2 | // ------------------- 3 | // Custom styles for popular plugins 4 | 5 | @import "plugins/minimap"; 6 | 7 | @import "plugins/highlight-selected"; 8 | 9 | @import "plugins/autocomplete"; 10 | 11 | // This won't work until Linter fixes deprecated classes 12 | @import "plugins/linter"; -------------------------------------------------------------------------------- /spec/focus-mode-spec.coffee: -------------------------------------------------------------------------------- 1 | describe "Nebula UI theme", -> 2 | beforeEach -> 3 | waitsForPromise -> 4 | atom.packages.activatePackage('nebula-ui') 5 | 6 | it "enables Focus Mode", -> 7 | expect(document.documentElement.getAttribute('theme-nebula-ui-focusmode')).toBe null 8 | 9 | atom.config.set('nebula-ui.focusMode', false) 10 | expect(document.documentElement.getAttribute('theme-nebula-ui-focusmode')).toBe 'enabled' -------------------------------------------------------------------------------- /styles/key-binding.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Key Binding 2 | // ----------------------- 3 | // Styles key-bindings used in a Select List 4 | // Overrides: Bootstrap's `kbd`. 5 | 6 | .key-binding { 7 | display: inline-block; 8 | margin-left: 1px; 9 | padding: 0 @component-padding/2; 10 | line-height: 2; 11 | font-size: 0.8em; 12 | letter-spacing: 1px; 13 | border-radius: @component-border-radius; 14 | background-color: @app-background-color; 15 | } -------------------------------------------------------------------------------- /styles/nebula.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Custom Styles 2 | // ------------------------- 3 | // The little things make the best things. 4 | 5 | .about-container { 6 | -webkit-font-smoothing: antialiased; 7 | } 8 | ul.background-message { 9 | li, 10 | li.message { 11 | font-size: 20px; 12 | font-weight: 100; 13 | } 14 | li.message { 15 | opacity: 0.4; 16 | 17 | .fade-in { 18 | opacity: 1; 19 | } 20 | } 21 | } 22 | .badge { 23 | border-radius: 0.2em; 24 | } -------------------------------------------------------------------------------- /styles/plugins/highlight-selected.less: -------------------------------------------------------------------------------- 1 | // Highlight Selected 2 | 3 | atom-text-editor { 4 | // highlight-selected 5 | .highlight-selected .region.region.region { 6 | border-radius: 2px; 7 | border: none; 8 | border-bottom: 1px solid @blue; 9 | } 10 | // Remove when resolved in core build 11 | [class="highlight highlight-selected background"] .region.region.region, 12 | .highlight-selected.background .region.region { 13 | background-color: fade(@blue, 15%); 14 | } 15 | } -------------------------------------------------------------------------------- /spec/hide-single-tab-spec.coffee: -------------------------------------------------------------------------------- 1 | describe "Nebula UI theme", -> 2 | beforeEach -> 3 | waitsForPromise -> 4 | atom.packages.activatePackage('nebula-ui') 5 | 6 | it "hides the tab bar when there is only one tab open", -> 7 | expect(document.documentElement.getAttribute('theme-nebula-ui-hidesingletab')).toBe null 8 | 9 | atom.config.set('nebula-ui.hideSingleTab', false) 10 | expect(document.documentElement.getAttribute('theme-nebula-ui-hidesingletab')).toBe 'enabled' -------------------------------------------------------------------------------- /styles/sites.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Site Colors 2 | // ----------------------- 3 | // This @include seems kind of pointless, yet here we are. 4 | 5 | .ui-site-1 { 6 | background-color: @ui-site-color-1; 7 | } 8 | 9 | .ui-site-2 { 10 | background-color: @ui-site-color-2; 11 | } 12 | 13 | .ui-site-3 { 14 | background-color: @ui-site-color-3; 15 | } 16 | 17 | .ui-site-4 { 18 | background-color: @ui-site-color-4; 19 | } 20 | 21 | .ui-site-5 { 22 | background-color: @ui-site-color-5; 23 | } -------------------------------------------------------------------------------- /styles/git.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Git 2 | // --------------- 3 | // Git in here! 4 | 5 | // white 6 | .status { 7 | color: @text-color; 8 | } 9 | 10 | // green 11 | .status-added { 12 | color: @text-color-success; 13 | } 14 | 15 | // fade 16 | .status-ignored { 17 | color: @text-color-subtle; 18 | } 19 | 20 | // orange 21 | .status-modified { 22 | color: @text-color-warning; 23 | } 24 | 25 | // red 26 | .status-removed { 27 | color: @text-color-error; 28 | } 29 | 30 | // blue 31 | .status-renamed { 32 | color: @text-color-info; 33 | } -------------------------------------------------------------------------------- /styles/tooltips.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Tooltips 2 | // -------------------- 3 | // Tips of tools. 4 | 5 | .tooltip { 6 | .tooltip-inner { 7 | line-height: 1; 8 | padding: 0.75em; 9 | white-space: nowrap; 10 | max-width: none; 11 | font-weight: 300; 12 | border-radius: 2px; 13 | letter-spacing: 0.5px; 14 | background-color: @overlay-background-color; 15 | } 16 | 17 | .tooltip-arrow { 18 | display: none; 19 | } 20 | 21 | .keystroke { 22 | padding: 0.15em 0.4em; 23 | margin: 0 -.3em 0 0.25em; 24 | border-radius: max(2px, @component-border-radius / 2); 25 | color: @text-color-selected; 26 | background: @background-color-selected; 27 | } 28 | } -------------------------------------------------------------------------------- /styles/base.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / BASE 2 | // --------------------- 3 | // All your base are belong to us. 4 | 5 | body { 6 | font-size: @font-size; 7 | &:not(.platform-win32) { 8 | font-weight: 300; 9 | } 10 | } 11 | 12 | atom-pane { 13 | border-right: 1px solid @base-border-color; 14 | 15 | &:last-child { 16 | border-right: none; 17 | } 18 | } 19 | 20 | // adds some space above the tabs if a system title bar is used 21 | atom-panel-container.header { 22 | &:empty, 23 | .fullscreen & { 24 | margin-bottom: 5px; 25 | } 26 | } 27 | 28 | .title-bar { 29 | border: none; 30 | color: lighten(@text-color-subtle, 10%); 31 | background: none; 32 | opacity: 1; 33 | .transition(opacity, margin-top;); 34 | atom-workspace[theme-nebula-ui-focusmode=enabled] & { 35 | opacity: 0.5; 36 | } 37 | } -------------------------------------------------------------------------------- /styles/plugins/minimap.less: -------------------------------------------------------------------------------- 1 | // Minimap 2 | 3 | atom-workspace[theme-nebula-ui-focusmode=enabled] & { 4 | atom-text-editor-minimap { 5 | canvas { 6 | opacity: 0.5; 7 | -webkit-filter: grayscale(50%); 8 | .transition(opacity, -webkit-filter;); 9 | } 10 | 11 | &:hover { 12 | canvas { 13 | opacity: 1; 14 | -webkit-filter: grayscale(0%); 15 | } 16 | } 17 | } 18 | // Hide the vertical scrollbar if the minimap exists 19 | atom-text-editor[with-minimap] .vertical-scrollbar { 20 | opacity: 0; 21 | width: 0; 22 | } 23 | } 24 | atom-text-editor { 25 | atom-text-editor-minimap { 26 | .minimap-visible-area { 27 | // the scrolling shape denoting current scroll position 28 | &::after { 29 | background: fade(lighten(@base-background-color, 40%), 20%); 30 | } 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /styles/status-bar.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Status Bar 2 | // ------------------- 3 | // Located at the bottom. 4 | // Displays information about the current editor. 5 | // Overrides: atom/status-bar 6 | 7 | .status-bar { 8 | height: 32px; 9 | font-size: @font-size; 10 | background-color: @status-bar-background-color; 11 | & > div { 12 | padding-top: 4px; 13 | .transition(opacity, -webkit-filter;); 14 | } 15 | 16 | a { 17 | color: @text-color-subtle; 18 | text-decoration: none; 19 | .transition(color;); 20 | 21 | &:hover { 22 | color: @text-color-selected; 23 | } 24 | } 25 | atom-workspace[theme-nebula-ui-focusmode=enabled] & { 26 | & > div { 27 | opacity: 0.6; 28 | -webkit-filter: grayscale(50%); 29 | } 30 | 31 | &:hover { 32 | & > div { 33 | opacity: 1; 34 | -webkit-filter: grayscale(0%); 35 | } 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /styles/scrollbars.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Scrollbars 2 | // ---------------------- 3 | // "I remember the old days when Nebula didn't ship with styled scrollbars" — Everyone 4 | 5 | .scrollbars-visible-always { 6 | ::-webkit-scrollbar { 7 | -webkit-appearance: none; 8 | cursor: pointer !important; 9 | width: 12px; 10 | height: 12px; 11 | } 12 | ::-webkit-scrollbar-corner, 13 | ::-webkit-scrollbar-track { 14 | background: transparent; 15 | } 16 | 17 | ::-webkit-scrollbar-thumb { 18 | background-color: @scrollbar-color; 19 | box-shadow: 20 | inset -4px 0 0 @scrollbar-background-color, 21 | inset 4px 0 0 @scrollbar-background-color; 22 | &:horizontal { 23 | box-shadow: 24 | inset 0 -4px 0 @scrollbar-background-color, 25 | inset 0 4px 0 @scrollbar-background-color; 26 | } 27 | &:active { 28 | background-color: @blue; 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /styles/ui-mixins.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Mixins 2 | // Mixing UI since, well 2017. 3 | // http://lesscss.org/#-pattern-matching-and-guard-expressions 4 | 5 | .text(normal) { 6 | font-weight: normal; 7 | color: @text-color; 8 | text-shadow: none; 9 | } 10 | 11 | .text(subtle) { 12 | font-weight: normal; 13 | color: @text-color-subtle; 14 | text-shadow: none; 15 | } 16 | 17 | .text(highlight) { 18 | font-weight: normal; 19 | color: @text-color-highlight; 20 | text-shadow: 0 1px 0 rgba(0,0,0, .5); 21 | } 22 | 23 | .text(selected) { 24 | .text(highlight) 25 | } 26 | 27 | .text(info) { 28 | color: @text-color-info; 29 | text-shadow: none; 30 | } 31 | 32 | .text(success) { 33 | color: @text-color-success; 34 | text-shadow: none; 35 | } 36 | 37 | .text(warning) { 38 | color: @text-color-warning; 39 | text-shadow: none; 40 | } 41 | 42 | .text(error) { 43 | color: @text-color-error; 44 | text-shadow: none; 45 | } 46 | 47 | .transition(@property: color, background-color;) { 48 | transition-property: @property; 49 | transition-duration: 0.4s; 50 | transition-timing-function: ease; 51 | } -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | // Nebula UI 2 | // An Atom theme that's out of this world. 3 | // 4 | // Copyright (c) 2017 TJ Kohli / tjkohli.com 5 | // ----------------------------------------- 6 | 7 | // REFERENCE / The important stuff 8 | // ------------------------------- 9 | @import (reference) "octicon-mixins"; 10 | @import (reference) "styles/ui-variables"; 11 | @import (reference) "styles/ui-mixins"; 12 | 13 | // CORE / The meat of the sandwich 14 | // ------------------------------- 15 | @import "styles/base"; 16 | @import "styles/buttons"; 17 | @import "styles/editor"; 18 | @import "styles/find-and-replace"; 19 | @import "styles/forms"; 20 | @import "styles/git"; 21 | @import "styles/key-binding"; 22 | @import "styles/lists"; 23 | @import "styles/panels"; 24 | @import "styles/progress"; 25 | @import "styles/scrollbars"; 26 | @import "styles/settings"; 27 | @import "styles/sites"; 28 | @import "styles/status-bar"; 29 | @import "styles/tabs"; 30 | @import "styles/text"; 31 | @import "styles/tooltips"; 32 | @import "styles/tree-view"; 33 | 34 | // CUSTOM / Meh 35 | // ------------ 36 | @import "styles/nebula"; 37 | @import "styles/plugins"; -------------------------------------------------------------------------------- /lib/main.coffee: -------------------------------------------------------------------------------- 1 | # Target the atom-workspace element 2 | # It returns a collection of one, so get the first one '[0]' 3 | root = document.getElementsByTagName('atom-workspace').item(0); 4 | 5 | # Modules 6 | 7 | module.exports = 8 | activate: (state) -> 9 | atom.config.observe 'nebula-ui.focusMode', (value) -> 10 | setFocusMode(value) 11 | 12 | atom.config.observe 'nebula-ui.hideSingleTab', (value) -> 13 | setHideSingleTab(value) 14 | 15 | deactivate: -> 16 | unsetFocusMode() 17 | unsetHideSingleTab() 18 | 19 | # Focus Mode ----------------------- 20 | 21 | setFocusMode = (focusMode) -> 22 | if (focusMode) 23 | unsetFocusMode() 24 | else 25 | root.removeAttribute('theme-nebula-ui-focusmode') 26 | 27 | unsetFocusMode = -> 28 | root.setAttribute('theme-nebula-ui-focusmode', "enabled") 29 | 30 | 31 | # Hide Single Tab ----------------------- 32 | 33 | setHideSingleTab = (hideSingleTab) -> 34 | if (hideSingleTab) 35 | unsetHideSingleTab() 36 | else 37 | root.removeAttribute('theme-nebula-ui-hidesingletab') 38 | 39 | unsetHideSingleTab = -> 40 | root.setAttribute('theme-nebula-ui-hidesingletab', "enabled") -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / EDITOR 2 | // ------------------ 3 | 4 | atom-text-editor { 5 | // transform: translateX(0.0001px); 6 | // -webkit-font-smoothing: subpixel-antialiased; 7 | // -webkit-backface-visibility: hidden; 8 | // -webkit-font-smoothing: antialiased; 9 | .cursor { 10 | border-width: 2px; 11 | transition: opacity 0.2s ease; 12 | -webkit-backface-visibility: hidden; 13 | // rest of .cursor is in nebula-syntax 14 | } 15 | .gutter { 16 | background-color: transparent; 17 | } 18 | } 19 | 20 | // Mini Editors are the "text inputs" used in find+replace or in the settings. 21 | atom-text-editor[mini] { 22 | padding-left: @component-padding/2; 23 | color: @text-color; 24 | background-color: transparent; 25 | border-bottom: 1px solid lighten(@base-background-color, 5%); 26 | .transition(border-color, opacity;); 27 | 28 | &.is-focused { 29 | border-bottom-color: @text-color-info; 30 | } 31 | 32 | .selection .region { 33 | background-color: @background-color-selected; 34 | } 35 | } 36 | 37 | .bracket-matcher { 38 | .region { 39 | border: none; 40 | box-shadow: inset 0 -1px 0 @blue, 0 7px 14px fade(@blue, 10%); 41 | } 42 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 TJ Kohli (tjkohli.com) 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 | -------------------------------------------------------------------------------- /styles/text.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Text 2 | // ---------------- 3 | // Words. 4 | 5 | .text-smaller { 6 | font-size: smaller; 7 | } 8 | 9 | .text-subtle { 10 | color: @text-color-subtle; 11 | } 12 | 13 | .text-highlight { 14 | color: @text-color-highlight; 15 | } 16 | 17 | .text-info { 18 | color: @text-color-info; 19 | } 20 | 21 | .text-success { 22 | color: @text-color-success; 23 | } 24 | 25 | .text-warning { 26 | color: @text-color-warning; 27 | } 28 | 29 | .text-error { 30 | color: @text-color-error; 31 | } 32 | // Highlights --------------- 33 | .highlight { 34 | .highlight-mixin(@background-color-highlight); 35 | } 36 | 37 | .highlight-info { 38 | .highlight-mixin(@background-color-info); 39 | } 40 | 41 | .highlight-warning { 42 | .highlight-mixin(@background-color-warning); 43 | } 44 | 45 | .highlight-error { 46 | .highlight-mixin(@background-color-error); 47 | } 48 | 49 | .highlight-success { 50 | .highlight-mixin(@background-color-success); 51 | } 52 | 53 | .highlight-mixin(@color) { 54 | padding: 1px 4px; 55 | color: @text-color-highlight; 56 | border-radius: @component-border-radius; 57 | background-color: @color; 58 | } 59 | // Background Message --------------- 60 | // Shown when no tabs are open. 61 | 62 | .background-message { 63 | font-weight: bold; 64 | color: @text-color-subtle; 65 | } -------------------------------------------------------------------------------- /styles/plugins/autocomplete.less: -------------------------------------------------------------------------------- 1 | // Autocomplete 2 | 3 | autocomplete-suggestion-list { 4 | &.select-list.popover-list { 5 | ol.list-group { 6 | li { 7 | .word { 8 | color: @text-color-subtle; 9 | .transition(color;); 10 | .character-match { 11 | color: @text-color-subtle; 12 | text-shadow: 0 0 10px transparent; 13 | .transition(color, text-shadow;); 14 | } 15 | } 16 | &.selected { 17 | .word { 18 | color: @text-color; 19 | .character-match { 20 | color: lighten(@blue, 22%); 21 | text-shadow: 0 0 10px fade(@blue, 50%); 22 | } 23 | } 24 | } 25 | } 26 | } 27 | } 28 | .icon { 29 | &.snippet { 30 | color: @text-color-highlight; 31 | background: fade(@text-color-highlight, 10%); 32 | } 33 | &.attribute { 34 | color: @green; 35 | background: fade(@green, 10%); 36 | } 37 | &.variable { 38 | color: @orange; 39 | background: fade(@orange, 10%); 40 | } 41 | &.value { 42 | color: @purple; 43 | background: fade(@purple, 10%); 44 | } 45 | &.tag { 46 | color: @red; 47 | background: fade(@red, 10%); 48 | } 49 | &.property { 50 | color: @blue; 51 | background: fade(@blue, 10%); 52 | } 53 | &.selector { 54 | color: @green; 55 | background: fade(@green, 10%); 56 | } 57 | } 58 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nebula-ui", 3 | "author": "TJ Kohli ", 4 | "main": "./lib/main", 5 | "theme": "ui", 6 | "version": "0.9.3", 7 | "description": "A beautifully minimal, subtly animated, and carefully designed Atom UI theme that lets you focus on what matters: your code. For best results, use with the nebula-syntax theme.", 8 | "keywords": [ 9 | "atom", 10 | "ui", 11 | "theme", 12 | "nebula", 13 | "minimal", 14 | "focus", 15 | "distraction free" 16 | ], 17 | "repository": "https://github.com/tjkohli/nebula-ui", 18 | "license": "MIT", 19 | "engines": { 20 | "atom": ">=1.0.0 <2.0.0" 21 | }, 22 | "configSchema": { 23 | "focusMode": { 24 | "title": "Focus Mode", 25 | "description": "Gracefully fades certain panes and comments into the background when you're not using them, letting you focus on your code. Disabling this option will persist the brightened state.", 26 | "type": "boolean", 27 | "default": true 28 | }, 29 | "hideSingleTab": { 30 | "title": "Hide single-tab tab bar", 31 | "description": "Gradually hides the tab bar if there is only one, unmodified tab open. Unsaved changes will show the tab bar. Disabling this option will persist the tab bar regardless of number of tabs.", 32 | "type": "boolean", 33 | "default": true 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /styles/plugins/linter.less: -------------------------------------------------------------------------------- 1 | // Linter 2 | 3 | .highlight-underline(@color) { 4 | border-bottom: none; 5 | // We are using mix() instead of fade() to work around 6 | // an ugly issue where 'transparent' passed through 7 | // fade reveals an ugly, darker color. 8 | // The things we do for good design. 9 | background: mix(@color, @base-background-color, 10%); 10 | box-shadow: 11 | inset 0 -1px 0 @color, 12 | 0 7px 17px mix(@color, @base-background-color, 50%); 13 | } 14 | .highlight-underline(@color1; @color2) { 15 | @name: replace("pulse-underline-@{color1}", "#", ""); 16 | 17 | animation: ~"@{name}" 3s ease infinite; 18 | @keyframes ~"@{name}" { 19 | 0%, 100% { 20 | // make sure the highlight color is color1 21 | // this ensures the error is highlighted the instant it's typed 22 | .highlight-underline(@color1); 23 | } 24 | 20% { 25 | .highlight-underline(@color2); 26 | } 27 | } 28 | } 29 | 30 | 31 | .linter-highlight, 32 | atom-text-editor.editor .linter-highlight { 33 | &.syntax--error .region { 34 | .highlight-underline( 35 | mix(@background-color-error, @base-background-color, 30%); 36 | @background-color-error 37 | ); 38 | } 39 | 40 | &.syntax--warning .region { 41 | .highlight-underline(@background-color-warning); 42 | } 43 | 44 | &.syntax--info .region, 45 | &.syntax--trace .region { 46 | .highlight-underline(@background-color-info); 47 | } 48 | } -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Tree View 2 | // --------------------- 3 | // Used to explore and open files in the current project. 4 | // If you want to tree view, go to a park. 5 | 6 | .list-tree { 7 | background: none; 8 | 9 | &.tree-view-root { 10 | padding-top: 10px; 11 | padding-bottom: 40px; 12 | will-change: opacity, -webkit-filter; 13 | .transition(opacity, -webkit-filter;); 14 | 15 | atom-workspace[theme-nebula-ui-focusmode=enabled] & { 16 | -webkit-filter: grayscale(50%); 17 | opacity: 0.6; 18 | &:hover { 19 | -webkit-filter: grayscale(0%); 20 | opacity: 1; 21 | } 22 | } 23 | } 24 | 25 | .entry { 26 | cursor: pointer; 27 | 28 | &:before { 29 | display: none; 30 | } 31 | } 32 | 33 | .list-item { 34 | border-radius: @component-border-radius; 35 | 36 | &:hover { 37 | background-color: @background-color-highlight; 38 | } 39 | } 40 | // shifts the expander arrow a bit away from the edge 41 | &.has-collapsable-children { 42 | .list-nested-item { 43 | // expanded tree items 44 | > .list-item { 45 | &:before { 46 | left: 2px; 47 | margin: 0 3px 0 2px; 48 | text-align: center; 49 | // override the icon 50 | content: "\f078"; 51 | // rotates it to simulate a different icon 52 | transform: rotate(90deg); 53 | transition: transform 0.2s ease; 54 | transform-origin: center; 55 | } 56 | } 57 | // collapsed tree items 58 | &.collapsed { 59 | > .list-item { 60 | &:before { 61 | left: 2px; 62 | transform: rotate(0); 63 | } 64 | } 65 | } 66 | } 67 | } 68 | } -------------------------------------------------------------------------------- /styles/progress.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Progress 2 | // -------------------- 3 | // The `progress` element is unstyled and defined by the OS. 4 | // See https://css-tricks.com/html5-progress-element/ in case you want to customize it. 5 | 6 | // Spinner 7 | .loading-spinner-large { 8 | .loading-spinner(64px); 9 | } 10 | 11 | .loading-spinner-medium { 12 | .loading-spinner(48px); 13 | } 14 | 15 | .loading-spinner-small { 16 | .loading-spinner(32px); 17 | } 18 | 19 | .loading-spinner-tiny { 20 | .loading-spinner(16px); 21 | } 22 | 23 | .loading-spinner(@size) { 24 | display: block; 25 | width: @size; 26 | height: @size; 27 | background-image: url("images/octocat-spinner-128.gif"); 28 | background-repeat: no-repeat; 29 | background-size: @size @size; 30 | 31 | &.inline-block { 32 | display: inline-block; 33 | } 34 | } 35 | 36 | // Nebula UI / Progress Bars 37 | // ------------------------- 38 | // Are we there yet? Let's check the bar! 39 | 40 | @keyframes progressPulse { 41 | 0%, 50%, 100% { 42 | background-color: fade(@blue, 20%); 43 | box-shadow: 0 0 10px fade(@blue, 50%); 44 | } 45 | 25% { 46 | background-color: @blue; 47 | box-shadow: 0 0 10px @blue; 48 | } 49 | 75% { 50 | background-color: @text-color; 51 | box-shadow: 0 0 10px @text-color; 52 | } 53 | } 54 | 55 | progress { 56 | -webkit-appearance: none; 57 | height: 2px; 58 | animation: progressPulse 2s ease infinite; 59 | &::-webkit-progress-bar { 60 | background-color: @background-color-selected; 61 | } 62 | &[value] { 63 | animation: none; 64 | &::-webkit-progress-bar { 65 | background-color: @background-color-selected; 66 | } 67 | &::-webkit-progress-value { 68 | background-color: @blue; 69 | box-shadow: 0 0 10px fade(@blue, 50%); 70 | } 71 | } 72 | } -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Panels 2 | // ------------------ 3 | // Overrides: atom/static/panels.less 4 | 5 | .tool-panel, 6 | .panel, 7 | atom-panel { 8 | background: transparent; 9 | } 10 | 11 | .panel-heading { 12 | border-bottom: 1px solid @panel-heading-border-color; 13 | background-color: @panel-heading-background-color; 14 | } 15 | 16 | .inset-panel { 17 | background-color: @inset-panel-background-color; 18 | 19 | .panel-heading { 20 | background-color: lighten(@inset-panel-background-color, 4%); 21 | } 22 | } 23 | 24 | // Modal ------------------- 25 | // Used on top of the editor, like the Command Palette. 26 | 27 | atom-panel.modal { 28 | // border: 1px solid @overlay-border-color; 29 | border-radius: 3px !important; 30 | background-color: @overlay-background-color; 31 | border-top: none; 32 | box-shadow: 0 25px 100px hsla(0, 0, 0, 0.3); 33 | padding: 20px; 34 | 35 | &.overlay.from-top { 36 | top: 10%; 37 | } 38 | } 39 | 40 | .panel-bottom { 41 | header { 42 | background: transparent; 43 | .transition(opacity); 44 | } 45 | atom-workspace[theme-nebula-ui-focusmode=enabled] & { 46 | header { 47 | opacity: 0.4; 48 | } 49 | &:hover { 50 | header { 51 | opacity: 1; 52 | } 53 | } 54 | } 55 | } 56 | 57 | // Atom Dock 58 | 59 | .atom-dock-resize-handle.atom-dock-resize-handle-resizable.left, .atom-dock-resize-handle.atom-dock-resize-handle-resizable.right { 60 | width: 1px; 61 | margin-left: 3px; 62 | opacity: 0.1; 63 | background: @base-border-color; 64 | .transition(opacity); 65 | } 66 | atom-panel-container { 67 | &:hover { 68 | .atom-dock-resize-handle.atom-dock-resize-handle-resizable.left, .atom-dock-resize-handle.atom-dock-resize-handle-resizable.right { 69 | opacity: 1; 70 | } 71 | } 72 | } -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / BUTTONS 2 | // ------------------- 3 | // Overrides: atom/atom/static/buttons.less 4 | 5 | .btn { 6 | color: lighten(@text-color, 6%); 7 | background-color: @button-background-color; 8 | border: 1px solid @button-background-color; 9 | border-radius: @component-border-radius; 10 | .transition(color, border, box-shadow, background-color, opacity;); 11 | 12 | &:hover { 13 | color: @text-color-highlight; 14 | background-color: @button-background-color-hover; 15 | border-color: @button-border-color-hover; 16 | } 17 | 18 | &:active { 19 | box-shadow: inset 0 -60px 20px -20px @blue; 20 | border-color: @blue; 21 | } 22 | &.disabled { 23 | pointer-events: none; 24 | } 25 | &.selected { 26 | color: @text-color-selected; 27 | box-shadow: inset 0 -22px 0 -20px @blue; 28 | } 29 | 30 | &:focus, 31 | &:focus:active { 32 | outline: none; 33 | } 34 | &.icon { 35 | &::before { 36 | top: 2px; 37 | } 38 | } 39 | } 40 | 41 | // Colored buttons 42 | .btn.btn-primary { 43 | .btn-color(@background-color-info); 44 | } 45 | 46 | .btn.btn-info { 47 | .btn-color(@background-color-info); 48 | } 49 | 50 | .btn.btn-success { 51 | .btn-color(@background-color-success); 52 | } 53 | 54 | .btn.btn-warning { 55 | .btn-color(@background-color-warning); 56 | } 57 | 58 | .btn.btn-error { 59 | .btn-color(@background-color-error); 60 | } 61 | 62 | .btn-color(@bg) { 63 | color: @text-color; 64 | background-color: @bg; 65 | border: 1px solid @bg; 66 | 67 | &:focus, 68 | &:hover { 69 | background-color: lighten(@bg, 4%); 70 | } 71 | 72 | &:active { 73 | box-shadow: inset 0 -60px 20px -20px lighten(@bg, 22%); 74 | border-color: lighten(@bg, 25%); 75 | } 76 | 77 | &.selected { 78 | box-shadow: inset 0 -22px 0 -20px lighten(@bg, 22%); 79 | } 80 | 81 | &.selected:hover { 82 | background-color: lighten(@bg, 8%); 83 | } 84 | } 85 | 86 | // Button Group 87 | .btn-group > .btn { 88 | border: none; 89 | } -------------------------------------------------------------------------------- /styles/settings.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Settings 2 | // -------------------- 3 | // Used to style the settings window 4 | 5 | .settings-view { 6 | font-size: 13px; 7 | line-height: 22px; 8 | -webkit-font-smoothing: antialiased; 9 | 10 | .link { 11 | color: @text-color; 12 | text-decoration: none; 13 | .transition(color); 14 | 15 | &:hover { 16 | color: @blue; 17 | } 18 | } 19 | 20 | label { 21 | font-weight: inherit; 22 | } 23 | 24 | .text { 25 | color: @text-color-subtle; 26 | } 27 | 28 | .section { 29 | .section-heading { 30 | font-weight: 300; 31 | margin-bottom: 10px; 32 | } 33 | } 34 | 35 | .config-menu { 36 | border-right: 0; 37 | .nav { 38 | > li { 39 | > a { 40 | .transition(background-color); 41 | } 42 | &:hover { 43 | > a { 44 | background-color: fade(@background-color-highlight, 50%); 45 | } 46 | } 47 | &.active { 48 | > a { 49 | background-color: @background-color-highlight; 50 | color: @text-color; 51 | } 52 | } 53 | } 54 | } 55 | } 56 | 57 | .package-card { 58 | background-color: transparent; 59 | border: none; 60 | border-bottom: 1px solid @base-border-color; 61 | border-radius: 3px 3px 0 0; 62 | margin: 10px 0; 63 | .transition(background-color, border-color, box-shadow;); 64 | 65 | .package-name { 66 | text-decoration: none; 67 | } 68 | 69 | .package-version { 70 | opacity: 0.5; 71 | } 72 | 73 | .package-description { 74 | color: @text-color-subtle; 75 | .transition(color); 76 | } 77 | 78 | .meta-user { 79 | .author { 80 | text-decoration: none; 81 | .transition(color); 82 | 83 | &:hover { 84 | color: @blue; 85 | } 86 | } 87 | } 88 | &:hover { 89 | background-color: @overlay-background-color; 90 | 91 | .package-description { 92 | color: @text-color; 93 | } 94 | } 95 | &:active { 96 | background-color: @overlay-background-color; 97 | box-shadow: inset 0 -250px 50px -50px fade(@blue, 15%); 98 | border-color: @blue; 99 | } 100 | &.disabled { 101 | background-color: inherit; 102 | box-shadow: inset 0 -50px 50px -50px fade(@orange, 15%); 103 | border-color: @orange; 104 | &:active { 105 | box-shadow: inset 0 -250px 50px -50px fade(@orange, 15%); 106 | } 107 | } 108 | } 109 | 110 | .package-container { 111 | .row { 112 | margin: 10px 0; 113 | } 114 | } 115 | .section atom-text-editor[mini] { 116 | opacity: 1; 117 | } 118 | } -------------------------------------------------------------------------------- /styles/find-and-replace.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Find + Replace 2 | // -------------------------- 3 | // Find and replace in the current buffer or across the entire project. 4 | // Overrides: atom/find-and-replace 5 | 6 | @keyframes resultsPulse { 7 | 0%, 8 | 100% { 9 | box-shadow: 0; 10 | } 11 | 12 | 20%, 13 | 30% { 14 | box-shadow: inset 0 -80px 40px -40px fade(@blue, 15%); 15 | } 16 | } 17 | @keyframes noResultsPulse { 18 | 0%, 19 | 100% { 20 | box-shadow: 0; 21 | } 22 | 23 | 20%, 24 | 30% { 25 | box-shadow: inset 0 -80px 40px -40px fade(@red, 15%); 26 | } 27 | } 28 | @keyframes highlightPulse { 29 | 0%, 30 | 100% { 31 | box-shadow: 0; 32 | } 33 | 34 | 20%, 35 | 30% { 36 | box-shadow: 0 0 40px fade(@blue, 90%); 37 | } 38 | } 39 | 40 | .find-and-replace { 41 | border-top: 1px solid @base-border-color; 42 | 43 | .find-container { 44 | atom-text-editor[mini].is-focused { 45 | border-radius: 3px 3px 0 0; 46 | } 47 | 48 | .find-meta-container { 49 | .result-counter { 50 | .transition(color); 51 | } 52 | } 53 | } 54 | // when the find has valid results 55 | &.has-results { 56 | .find-container { 57 | // flash the input area blue 58 | atom-text-editor[mini].is-focused { 59 | animation: resultsPulse 1s ease; 60 | } 61 | 62 | .find-meta-container { 63 | .result-counter { 64 | color: @blue; 65 | } 66 | } 67 | } 68 | } 69 | 70 | &.has-no-results { 71 | .find-container { 72 | // flash the input area red 73 | atom-text-editor[mini].is-focused { 74 | border-bottom-color: @red; 75 | animation: noResultsPulse 1s ease; 76 | } 77 | 78 | .find-meta-container { 79 | .result-counter { 80 | color: @red; 81 | } 82 | } 83 | } 84 | } 85 | } 86 | 87 | atom-text-editor { 88 | 89 | // find and replace results 90 | .current-result .region.region.region, 91 | .find-result .region.region.region { 92 | border-radius: 3px; 93 | background-color: fade(@blue, 10%); 94 | transition: border-color 0.4s; 95 | } 96 | 97 | // non-current results 98 | .find-result .region.region.region { 99 | border: 2px solid transparent; 100 | } 101 | 102 | // current result 103 | .current-result .region.region.region { 104 | border: 2px solid lighten(@blue, 10%); 105 | transition-duration: 0; 106 | background-color: fade(@blue, 15%); 107 | animation: highlightPulse 1s ease; 108 | } 109 | } 110 | 111 | // Why styling the flash no work :( 112 | 113 | // @syntax-selection-flash-color: #FFFF00; 114 | // 115 | // @-webkit-keyframes flash { 116 | // from { background-color: @syntax-selection-flash-color; } 117 | // to { background-color: null; } 118 | // } -------------------------------------------------------------------------------- /styles/forms.less: -------------------------------------------------------------------------------- 1 | // Nebula UI / Form Elements 2 | // ------------------------- 3 | // Used to style various form elements, I hope. 4 | 5 | // labels 6 | 7 | label { 8 | font-weight: inherit; 9 | } 10 | 11 | .input-color, 12 | .input-label, 13 | .settings-view .input-label { 14 | cursor: pointer; 15 | } 16 | 17 | // radio buttons 18 | 19 | .settings-view input[type="radio"], 20 | input[type="radio"] { 21 | background-color: @background-color-highlight; 22 | cursor: pointer; 23 | 24 | &:checked, 25 | &:hover { 26 | background-color: lighten(@background-color-highlight, 5%); 27 | } 28 | 29 | &:checked { 30 | background-color: @blue; 31 | } 32 | 33 | &:active { 34 | background-color: lighten(@background-color-highlight, 15%); 35 | } 36 | } 37 | 38 | // checkboxes 39 | 40 | .settings-view input[type="checkbox"], 41 | input[type="checkbox"] { 42 | background-color: @background-color-highlight; 43 | cursor: pointer; 44 | border: 1px solid @button-background-color; 45 | margin-top: 3px; 46 | // box-shadow: inset 0 0 5px -5px @blue; 47 | .transition(border, box-shadow, background-color;); 48 | 49 | // color of checkmark 50 | &:after, 51 | &:before { 52 | background-color: @blue; 53 | top: 0.9rem; 54 | left: 0.4rem; 55 | } 56 | 57 | &:hover, 58 | &:checked { 59 | background-color: @button-background-color-hover; 60 | border-color: lighten(@button-background-color, 5%); 61 | } 62 | 63 | &:active, 64 | &:checked:active { 65 | // color of checkmark 66 | &:after, 67 | &:before { 68 | background-color: @text-color; 69 | } 70 | background-color: @blue; 71 | // box-shadow: inset 0 -25px 5px -5px @blue; 72 | border-color: @blue; 73 | } 74 | 75 | &:focus { 76 | border-color: @blue; 77 | } 78 | 79 | &.input-toggle { 80 | &:before { 81 | top: -0.1em; 82 | left: -0.1em; 83 | } 84 | } 85 | } 86 | 87 | .form-control { 88 | height: 27px; 89 | } 90 | 91 | // dropdowns 92 | 93 | select, 94 | .settings-view select, 95 | select.form-control, 96 | .settings-view select.form-control { 97 | -webkit-appearance: none; 98 | // background-image adds the down arrow after removing -webkit-appearance 99 | background-image: url("data:image/svg+xml;utf8,"); 100 | background-position: 99% 50%; 101 | background-repeat: no-repeat; 102 | padding: 0 10px; 103 | cursor: pointer; 104 | background-color: @button-background-color; 105 | border: 1px solid @button-background-color; 106 | border-radius: @component-border-radius; 107 | .transition(color, border, box-shadow, background-color;); 108 | 109 | &:focus, 110 | &:hover { 111 | color: @text-color-highlight; 112 | color: @text-color-highlight; 113 | background-color: @button-background-color-hover; 114 | border-color: lighten(@button-background-color, 5%); 115 | } 116 | 117 | &.disabled { 118 | pointer-events: none; 119 | } 120 | 121 | // Disabled this since it doesn't work on