├── screenshot.png ├── styles ├── badges.less ├── messages.less ├── atom.less ├── settings.less ├── dropdowns.less ├── utilities.less ├── nav.less ├── panes.less ├── _deprecated.less ├── ui-mixins.less ├── editor.less ├── scrollbars.less ├── tree-view.less ├── panels.less ├── git.less ├── tooltips.less ├── core.less ├── progress.less ├── text.less ├── overlays.less ├── lists.less ├── buttons.less ├── tabs.less ├── ui-variables.less └── _settings.less ├── package.json ├── index.less ├── LICENSE └── README.md /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dracula/atom-ui/HEAD/screenshot.png -------------------------------------------------------------------------------- /styles/badges.less: -------------------------------------------------------------------------------- 1 | .badge { 2 | .text(highlight); 3 | background-color: @badge-background-color; 4 | } 5 | -------------------------------------------------------------------------------- /styles/messages.less: -------------------------------------------------------------------------------- 1 | ul.background-message { 2 | font-weight: bold; 3 | color: @text-color-faded; 4 | } 5 | -------------------------------------------------------------------------------- /styles/atom.less: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | atom-workspace { 6 | background-color: @app-background-color; 7 | } 8 | 9 | .status-bar .icon:before { 10 | font-size: 16px; // keeps them sharp 11 | width: 16px; 12 | height: 16px; 13 | } 14 | -------------------------------------------------------------------------------- /styles/settings.less: -------------------------------------------------------------------------------- 1 | 2 | // Settings 3 | 4 | .settings-view .config-menu { 5 | position: relative; 6 | background: @level-2-color; 7 | border-width: 0 1px 0 0; 8 | border-image: linear-gradient(@level-2-color 10px, @base-border-color 200px) 0 1 0 0 stretch; 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dracula-ui", 3 | "theme": "ui", 4 | "version": "0.6.0", 5 | "description": "dracula UI theme for Atom", 6 | "license": "MIT", 7 | "repository": "https://github.com/dracula/atom-ui", 8 | "engines": { 9 | "atom": ">1.13.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /styles/dropdowns.less: -------------------------------------------------------------------------------- 1 | .dropdown-menu { 2 | background-color: @overlay-background-color; 3 | border-radius: @component-border-radius; 4 | border: 1px solid @base-border-color; 5 | padding: 0; 6 | 7 | > li > a { 8 | .text(normal); 9 | } 10 | 11 | > li > a:hover { 12 | .text(highlight); 13 | background-color: @background-color-highlight; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /styles/utilities.less: -------------------------------------------------------------------------------- 1 | .key-binding { 2 | display: inline-block; 3 | margin-left: @component-icon-padding; 4 | padding: @component-padding/2; 5 | line-height: 1; 6 | font-family: Helvetica, Arial, sans-serif; 7 | font-size: @font-size - 1px; 8 | border-radius: @component-border-radius; 9 | border: 1px solid @key-binding-border-color; 10 | background-color: @key-binding-background-color; 11 | } 12 | -------------------------------------------------------------------------------- /styles/nav.less: -------------------------------------------------------------------------------- 1 | .nav-tabs { 2 | border-bottom: 1px solid @base-border-color; 3 | li { 4 | a, 5 | &.active a { 6 | border: none; 7 | margin-right: 0px; 8 | margin-bottom: 1px; 9 | } 10 | 11 | a:hover, 12 | &.active a, 13 | &.active a:hover { 14 | background-color: @background-color-highlight; 15 | border: none; 16 | color: @text-color-selected; 17 | border-bottom-left-radius: 0px; 18 | border-bottom-right-radius: 0px; 19 | } 20 | 21 | &.active a { 22 | background-color: @tab-background-color-active; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /styles/panes.less: -------------------------------------------------------------------------------- 1 | .pane-item { 2 | .panel { 3 | // Not sure if this is still needed. Disabled for now 4 | //border-color: fadeout(@inset-panel-border-color, 30%); 5 | } 6 | } 7 | 8 | atom-pane-container { 9 | atom-pane { 10 | position: relative; 11 | background-color: @app-background-color; 12 | } 13 | 14 | atom-pane-axis { 15 | &.horizontal > * { 16 | border-right: 1px solid @pane-item-border-color; 17 | &:last-child { border-right: none; } 18 | } 19 | 20 | &.vertical > * { 21 | border-bottom: 1px solid @pane-item-border-color; 22 | &:last-child { border-bottom: none; } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /styles/_deprecated.less: -------------------------------------------------------------------------------- 1 | 2 | // Deprecated Styles 3 | // Kept for backwards compatibilty but not actively used 4 | 5 | 6 | // Site Colors 7 | 8 | @ui-site-color-1: hsl(208, 100%, 50%); // green 9 | @ui-site-color-2: hsl(160, 70%, 42%); // blue 10 | @ui-site-color-3: hsl(32, 60%, 50%); // orange 11 | @ui-site-color-4: #D831B0; // pink 12 | @ui-site-color-5: #EBDD5B; // yellow 13 | 14 | .ui-site(@num, @color) { 15 | .ui-site-@{num} { 16 | background-color: @color; 17 | } 18 | } 19 | 20 | .ui-site(1, @ui-site-color-1); 21 | .ui-site(2, @ui-site-color-2); 22 | .ui-site(3, @ui-site-color-3); 23 | .ui-site(4, @ui-site-color-4); 24 | .ui-site(5, @ui-site-color-5); 25 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | 2 | // Atom UI Theme: Dracula 3 | 4 | @import (reference) "styles/ui-variables"; 5 | @import (reference) "styles/ui-mixins"; 6 | @import (reference) "octicon-mixins"; 7 | 8 | @import "styles/atom"; 9 | @import "styles/scrollbars"; 10 | @import "styles/badges"; 11 | @import "styles/buttons"; 12 | @import "styles/editor"; 13 | @import "styles/git"; 14 | @import "styles/lists"; 15 | @import "styles/messages"; 16 | @import "styles/nav"; 17 | @import "styles/overlays"; 18 | @import "styles/panels"; 19 | @import "styles/panes"; 20 | @import "styles/progress"; 21 | @import "styles/tabs"; 22 | @import "styles/text"; 23 | @import "styles/tooltips"; 24 | @import "styles/tree-view"; 25 | @import "styles/utilities"; 26 | 27 | @import "styles/settings"; 28 | @import "styles/core"; 29 | 30 | @import "styles/_deprecated"; 31 | -------------------------------------------------------------------------------- /styles/ui-mixins.less: -------------------------------------------------------------------------------- 1 | // Pattern matching; ish is cray. 2 | // http://lesscss.org/#-pattern-matching-and-guard-expressions 3 | 4 | .text(normal) { 5 | font-weight: normal; 6 | color: @text-color; 7 | } 8 | .text(subtle) { 9 | font-weight: normal; 10 | color: @text-color-subtle; 11 | } 12 | .text(highlight) { 13 | font-weight: normal; 14 | color: @text-color-highlight; 15 | } 16 | .text(selected) { 17 | .text(highlight) 18 | } 19 | 20 | .text(info) { 21 | color: @text-color-info; 22 | } 23 | .text(success) { 24 | color: @text-color-success; 25 | } 26 | .text(warning) { 27 | color: @text-color-warning; 28 | } 29 | .text(error) { 30 | color: @text-color-error; 31 | } 32 | 33 | .focus() { 34 | outline: none; 35 | border-color: @base-accent-color; 36 | box-shadow: 0 0 0 1px @base-accent-color; 37 | } 38 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | atom-text-editor[mini] { 2 | padding-left: 0; 3 | border-radius: @component-border-radius; 4 | color: @text-color-highlight; 5 | border: 1px solid @input-border-color; 6 | background-color: @input-background-color; 7 | padding-left: @component-padding/2; 8 | 9 | &, 10 | &.editor { 11 | .placeholder-text { 12 | color: @text-color-subtle; 13 | } 14 | .selection .region { 15 | background-color: @input-selection-color; 16 | } 17 | .cursor { 18 | border-color: @base-accent-color; 19 | border-width: 2px; 20 | } 21 | } 22 | 23 | &.is-focused, 24 | &.is-focused.editor { 25 | .focus(); 26 | background-color: @input-background-color-focus; 27 | .selection .region { 28 | background-color: @input-selection-color-focus; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /styles/scrollbars.less: -------------------------------------------------------------------------------- 1 | // Scrollbars 2 | 3 | .scrollbars-visible-always { 4 | /deep/ ::-webkit-scrollbar { 5 | width: @component-padding; 6 | height: @component-padding; 7 | } 8 | 9 | /deep/ ::-webkit-scrollbar-track { 10 | background: @scrollbar-background-color; 11 | } 12 | 13 | /deep/ ::-webkit-scrollbar-thumb { 14 | border: 3px solid @scrollbar-background-color; 15 | background: @scrollbar-color; 16 | background-clip: content-box; 17 | } 18 | 19 | /deep/ ::-webkit-scrollbar-corner { 20 | background: @scrollbar-background-color; 21 | } 22 | 23 | /deep/ ::-webkit-scrollbar-thumb:vertical:active { 24 | border-radius: 0; 25 | border-left-width: 0; 26 | border-right-width: 0; 27 | } 28 | 29 | /deep/ ::-webkit-scrollbar-thumb:horizontal:active { 30 | border-radius: 0; 31 | border-top-width: 0; 32 | border-bottom-width: 0; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Dracula Theme 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/tree-view.less: -------------------------------------------------------------------------------- 1 | .tree-view { 2 | font-size: @font-size; 3 | background: @tree-view-background-color; 4 | 5 | .project-root { 6 | &:before { 7 | height: @tab-height + 1px; // + 1px border 8 | border-bottom: 1px solid @base-border-color; 9 | } 10 | & > .header .name { 11 | line-height: @tab-height + 1px; // + 1px border 12 | } 13 | } 14 | 15 | .selected:before { 16 | background: @background-color-highlight; 17 | } 18 | } 19 | 20 | .tree-view-resizer { 21 | .tree-view-resize-handle { 22 | width: 8px; 23 | } 24 | /deep/ ::-webkit-scrollbar-track { 25 | background: @tree-view-scrollbar-background-color; 26 | } 27 | 28 | /deep/ ::-webkit-scrollbar-thumb { 29 | border: 3px solid @tree-view-scrollbar-background-color; 30 | } 31 | 32 | /deep/ ::-webkit-scrollbar-corner { 33 | background: @tree-view-scrollbar-background-color; 34 | } 35 | } 36 | 37 | .focusable-panel { 38 | opacity: 1; 39 | background: @tree-view-background-color; 40 | 41 | &:focus { 42 | .selected { 43 | color: @text-color-selected; 44 | &:before { 45 | background: @background-color-selected; 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | .panel { 2 | &.bordered { 3 | border: 1px solid @base-border-color; 4 | border-radius: @component-border-radius; 5 | } 6 | } 7 | 8 | atom-panel { 9 | .text(normal); 10 | position: relative; 11 | 12 | &.left { 13 | border-right: 1px solid @tool-panel-border-color; 14 | } 15 | &.right { 16 | border-left: 1px solid @tool-panel-border-color; 17 | } 18 | &.bottom { 19 | border-top: 1px solid @tool-panel-border-color; 20 | } 21 | } 22 | 23 | .inset-panel { 24 | position: relative; 25 | background-color: @inset-panel-background-color; 26 | &.bordered { 27 | border: 1px solid @base-border-color; 28 | border-radius: @component-border-radius; 29 | } 30 | & .panel-heading { 31 | border-color: @inset-panel-border-color; 32 | } 33 | } 34 | 35 | .panel-heading { 36 | .text(normal); 37 | border-bottom: 1px solid @panel-heading-border-color; 38 | background-color: @panel-heading-background-color; 39 | 40 | .btn { 41 | padding-left: 8px; 42 | padding-right: 8px; 43 | 44 | @bg: lighten(@button-background-color, 10%); 45 | @hover: lighten(@button-background-color-hover, 10%); 46 | @selected: lighten(@button-background-color-selected, 10%); 47 | @text: lighten(@text-color, 10%); 48 | .btn-background(@bg, @hover, @selected, @text); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /styles/git.less: -------------------------------------------------------------------------------- 1 | // Git power-ups for Tree View and for Status Bar 2 | 3 | status-bar { 4 | .git-view { 5 | .status { 6 | color: @text-color; 7 | } 8 | 9 | .status-added { 10 | color: @git-color-added; 11 | } 12 | 13 | .status-ignored { 14 | color: @git-color-ignored; 15 | } 16 | 17 | .status-modified { 18 | color: @git-color-modified; 19 | } 20 | 21 | .status-removed { 22 | color: @git-color-removed; 23 | } 24 | 25 | .status-renamed { 26 | color: @git-color-renamed; 27 | } 28 | } 29 | } 30 | 31 | .list-group, 32 | .list-tree { 33 | .generate-list-item-status-color(@color, @status) { 34 | li:not(.list-nested-item).status-@{status}, 35 | li.list-nested-item.status-@{status} > .list-item { 36 | color: @color; 37 | } 38 | 39 | li:not(.list-nested-item).selected.status-@{status}, 40 | li.list-nested-item.selected.status-@{status} > .list-item { 41 | color: @color; 42 | } 43 | } 44 | 45 | .generate-list-item-status-color(@git-color-added, added); 46 | .generate-list-item-status-color(@git-color-ignored, ignored); 47 | .generate-list-item-status-color(@git-color-modified, modified); 48 | .generate-list-item-status-color(@git-color-removed, removed); 49 | .generate-list-item-status-color(@git-color-renamed, renamed); 50 | } 51 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dracula for Atom UI 2 | 3 | > A dark theme for Atom UI 4 | 5 | ![Screenshot](https://github.com/dracula/atom-ui/blob/master/screenshot.png?raw=true) 6 | 7 | ## Install 8 | 9 | Install using Atom 10 | 11 | 1. Go to Atom -> Preferences... 12 | 2. Then select the Install tab 13 | 3. Click the Themes button to the right of the search box 14 | 4. Enter dracula-ui in the search box 15 | 16 | ## Team 17 | 18 | This theme is maintained by the following person(s) and a bunch of [awesome contributors](https://github.com/dracula/atom-ui/graphs/contributors). 19 | 20 | | [![ichi](https://avatars.githubusercontent.com/ichi0g0y?v=3&s=70)](https://github.com/ichi0g0y) | 21 | | ----------------------------------------------------------------------------------------------- | 22 | | [ichi](https://github.com/ichi0g0y) | 23 | 24 | ## Thanks to 25 | 26 | - [madhead](https://github.com/madhead/lavender-ui) 27 | - [One Dark UI](https://github.com/atom/one-dark-ui) Team 28 | 29 | ## Community 30 | 31 | - [Twitter](https://twitter.com/draculatheme) - Best for getting updates about themes and new stuff. 32 | - [GitHub](https://github.com/dracula/dracula-theme/discussions) - Best for asking questions and discussing issues. 33 | - [Discord](https://draculatheme.com/discord-invite) - Best for hanging out with the community. 34 | 35 | ## License 36 | 37 | [MIT License](./LICENSE) 38 | -------------------------------------------------------------------------------- /styles/tooltips.less: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | white-space: nowrap; 3 | 4 | &.in { 5 | opacity: 1; 6 | transition: opacity .12s ease-out; 7 | } 8 | 9 | .tooltip-inner { 10 | line-height: 19px; 11 | border-radius: @component-border-radius; 12 | background-color: @tooltip-background-color; 13 | color: @tooltip-text-color; 14 | white-space: nowrap; 15 | max-width: none; 16 | } 17 | 18 | .keystroke { 19 | font-family: "Helvetica Neue", Arial, sans-serif; 20 | font-size: 13px; 21 | padding: 1px 3px; 22 | margin: 0 -4px 0 3px; 23 | border-radius: max(2px, @component-border-radius / 2); 24 | color: @tooltip-text-key-color; 25 | background: @tooltip-background-key-color; 26 | } 27 | 28 | &.top .tooltip-arrow { 29 | border-top-color: @tooltip-background-color; 30 | } 31 | &.top-left .tooltip-arrow { 32 | border-top-color: @tooltip-background-color; 33 | } 34 | &.top-right .tooltip-arrow { 35 | border-top-color: @tooltip-background-color; 36 | } 37 | &.right .tooltip-arrow { 38 | border-right-color: @tooltip-background-color; 39 | } 40 | &.left .tooltip-arrow { 41 | border-left-color: @tooltip-background-color; 42 | } 43 | &.bottom .tooltip-arrow { 44 | border-bottom-color: @tooltip-background-color; 45 | } 46 | &.bottom-left .tooltip-arrow { 47 | border-bottom-color: @tooltip-background-color; 48 | } 49 | &.bottom-right .tooltip-arrow { 50 | border-bottom-color: @tooltip-background-color; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /styles/core.less: -------------------------------------------------------------------------------- 1 | // These might be better part of the Atom core. 2 | 3 | .preview-pane .results-view .path-match-number { 4 | // show number also on selected item 5 | color: inherit; 6 | opacity: .6; 7 | } 8 | 9 | .tool-panel.incompatible-packages { 10 | // incompatible-packages isn't really a tool-panel and more a whole pane 11 | .text(normal); 12 | background-color: @level-2-color; 13 | } 14 | 15 | 16 | // Styleguide ---------------------------------------------- 17 | 18 | .styleguide section.bordered, 19 | .styleguide section.collapsed { 20 | padding: @component-padding 0; // stops jumping of the title when collapsing 21 | } 22 | 23 | .styleguide .section-heading { 24 | font-size: 1.5em; 25 | line-height: 1.2; 26 | } 27 | 28 | .styleguide h2 { 29 | font-size: 1.4em; 30 | line-height: 1.2; 31 | margin-bottom: 0; 32 | } 33 | 34 | .styleguide atom-panel.modal:after { 35 | position: absolute; // prevent overlay backdrop from leaking outside 36 | left: -@component-padding/2; 37 | right: -@component-padding/2; 38 | bottom: -@component-padding/2; 39 | } 40 | 41 | .styleguide atom-panel.modal:after { 42 | position: absolute; // prevent overlay backdrop from leaking outside 43 | } 44 | 45 | .styleguide .select-list atom-text-editor[mini], 46 | .styleguide .popover-list atom-text-editor[mini] { 47 | line-height: 25px; 48 | } 49 | 50 | 51 | .example { 52 | border: none; 53 | 54 | .example-rendered { 55 | border: 1px solid @base-border-color; 56 | border-right: none; 57 | background: @level-3-color; 58 | } 59 | 60 | .example-code { 61 | border: 1px solid @base-border-color; 62 | border-radius: 0 @component-border-radius @component-border-radius 0; 63 | 64 | .btn-group .btn.selected { 65 | background: @level-3-color; 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /styles/progress.less: -------------------------------------------------------------------------------- 1 | // Spinner 2 | 3 | .loading-spinner(@size) { 4 | width: @size; 5 | height: @size; 6 | display: block; 7 | 8 | background-image: url(images/octocat-spinner-128.gif); 9 | background-repeat: no-repeat; 10 | background-size: cover; 11 | 12 | &.inline-block { 13 | display: inline-block; 14 | } 15 | } 16 | 17 | .loading-spinner-large { 18 | .loading-spinner(64px); 19 | } 20 | 21 | .loading-spinner-medium { 22 | .loading-spinner(50px); 23 | } 24 | 25 | .loading-spinner-small { 26 | .loading-spinner(32px); 27 | } 28 | 29 | .loading-spinner-tiny { 30 | .loading-spinner(20px); 31 | } 32 | 33 | 34 | // Progress Bar 35 | 36 | // Much learning from: 37 | // http://css-tricks.com/html5-progress-element/ 38 | 39 | @progress-height: 8px; 40 | @progress-buffer-color: fade(@progress-background-color, 20%); 41 | 42 | progress { 43 | -webkit-appearance: none; 44 | height: @progress-height; 45 | border-radius: @component-border-radius; 46 | 47 | background-color: @input-background-color; 48 | box-shadow: inset 0 0 0 1px @input-border-color; 49 | 50 | background-image: 51 | linear-gradient(-45deg, transparent 33%, @progress-buffer-color 33%, 52 | @progress-buffer-color 66%, transparent 66%); 53 | background-size: 25px @progress-height, 100% 100%, 100% 100%; 54 | -webkit-animation: animate-stripes 5s linear infinite; 55 | } 56 | 57 | progress::-webkit-progress-bar { 58 | background-color: transparent; 59 | } 60 | 61 | progress::-webkit-progress-value { 62 | border-radius: @component-border-radius; 63 | background-color: @progress-background-color; 64 | } 65 | 66 | progress[value] { 67 | background-image: none; 68 | -webkit-animation: none; 69 | } 70 | 71 | @-webkit-keyframes animate-stripes { 72 | 100% { background-position: -100px 0px; } 73 | } 74 | -------------------------------------------------------------------------------- /styles/text.less: -------------------------------------------------------------------------------- 1 | h1, 2 | h2, 3 | h3 { 4 | line-height: 1em; 5 | margin-bottom: 15px 6 | } 7 | h1 { font-size: 2em; } 8 | h2 { font-size: 1.5em; } 9 | h3 { font-size: 1.2em; } 10 | 11 | p { 12 | line-height: 1.6; 13 | margin-bottom: 15px; 14 | } 15 | 16 | label { 17 | font-weight: normal; 18 | } 19 | 20 | pre { 21 | box-shadow: none; 22 | color: @text-color; 23 | background: @inset-panel-background-color; 24 | border-radius: @component-border-radius; 25 | border: none; 26 | margin: 0; 27 | } 28 | 29 | code { 30 | .text(highlight); 31 | background: @background-color-highlight; 32 | border-radius: @component-border-radius; 33 | } 34 | 35 | .selected { .text(highlight); } 36 | 37 | .text-smaller { font-size: 0.9em; } 38 | 39 | .text-subtle { .text(subtle); } 40 | .text-highlight { .text(highlight); } 41 | 42 | .text-error { .text(error); } 43 | .text-info { 44 | .text(info); 45 | &:hover { color: @text-color-info; } 46 | } 47 | .text-warning { 48 | .text(warning); 49 | &:hover { color: @text-color-warning; } 50 | } 51 | .text-success { 52 | .text(success); 53 | &:hover { color: @text-color-success; } 54 | } 55 | 56 | .highlight-mixin { 57 | padding: 1px 4px; 58 | font-weight: bold; 59 | text-shadow: none; 60 | border-radius: @component-border-radius; 61 | color: @text-color-highlight; 62 | } 63 | 64 | .highlight { 65 | .highlight-mixin(); 66 | background-color: @background-color-highlight; 67 | } 68 | 69 | .highlight-color(@name, @color, @text-color) { 70 | .highlight-@{name} { 71 | .highlight-mixin(); 72 | background-color: fadeout(@color, 50%); 73 | } 74 | } 75 | .highlight-color(info, @background-color-info, @text-color-info); 76 | .highlight-color(warning, @background-color-warning, @text-color-warning); 77 | .highlight-color(error, @background-color-error, @text-color-error); 78 | .highlight-color(success, @background-color-success, @text-color-success); 79 | 80 | .results-view .path-details.list-item { 81 | color: darken(@text-color-highlight, 18%); 82 | } 83 | -------------------------------------------------------------------------------- /styles/overlays.less: -------------------------------------------------------------------------------- 1 | atom-panel.modal { 2 | color: @text-color; 3 | background-color: transparent; 4 | padding: @component-padding; 5 | 6 | atom-text-editor[mini] { 7 | margin-bottom: @component-padding; 8 | } 9 | 10 | .select-list ol.list-group, 11 | &.select-list ol.list-group { 12 | border: 1px solid @overlay-border-color; 13 | background-color: lighten(@overlay-background-color, 2%); 14 | 15 | &:empty { 16 | border: none; 17 | margin-top: 0; 18 | } 19 | 20 | li { 21 | padding: @component-padding; 22 | border-bottom: 1px solid @overlay-border-color; 23 | 24 | &:last-of-type { 25 | border-bottom: none; 26 | } 27 | 28 | &.two-lines { 29 | padding: @component-padding/2 @component-padding; 30 | } 31 | 32 | .status.icon { 33 | float: right; 34 | margin-left: @component-icon-padding; 35 | &:before { 36 | margin-right: 0; 37 | } 38 | } 39 | 40 | &.selected { 41 | .status.icon { 42 | color: @text-color-selected; 43 | } 44 | } 45 | } 46 | } 47 | 48 | 49 | & > * { 50 | position: relative; // fixes stacking order 51 | } 52 | 53 | 54 | // Container 55 | &:before { 56 | content: ""; 57 | position: absolute; 58 | top: 0; 59 | left: 0; 60 | right: 0; 61 | bottom: 0; 62 | z-index: 0; 63 | background-color: @overlay-background-color; 64 | border-top: 1px solid hsla(0,0%,0%,.2); 65 | border-radius: 0 0 @component-border-radius*2 @component-border-radius*2; 66 | box-shadow: 0 6px 12px -2px hsla(0,0%,0%,.4); 67 | } 68 | 69 | // Backdrop 70 | // TODO: Add extra wrapper to translate individually or easier positioning 71 | 72 | &:after { 73 | content: ""; 74 | position: fixed; 75 | top: 0; 76 | left: 0; 77 | right: 0; 78 | bottom: 0; 79 | z-index: -1; 80 | background: @overlay-backdrop-color; 81 | -webkit-animation: overlay-fade .1s cubic-bezier(0.215, 0.61, 0.355, 1); 82 | } 83 | 84 | @-webkit-keyframes overlay-fade { 85 | 0% { opacity: 0; } 86 | 100% { opacity: 1; } 87 | } 88 | 89 | } 90 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | .list-group, 2 | .list-tree { 3 | li:not(.list-nested-item), 4 | li.list-nested-item > .list-item { 5 | .text(normal); 6 | } 7 | 8 | .generate-list-item-text-color(@class) { 9 | li:not(.list-nested-item).text-@{class}, 10 | li.list-nested-item.text-@{class} > .list-item { 11 | .text(@class); 12 | } 13 | } 14 | .generate-list-item-text-color(subtle); 15 | .generate-list-item-text-color(info); 16 | .generate-list-item-text-color(success); 17 | .generate-list-item-text-color(warning); 18 | .generate-list-item-text-color(error); 19 | .generate-list-item-text-color(selected); 20 | 21 | li:not(.list-nested-item).selected, 22 | li.list-nested-item.selected > .list-item { 23 | .text(selected); 24 | } 25 | } 26 | 27 | .select-list ol.list-group, 28 | &.select-list ol.list-group { 29 | li.two-lines { 30 | .secondary-line { 31 | color: @text-color-subtle; 32 | } 33 | &.selected .secondary-line { 34 | color: fade(@text-color-highlight, 50%); 35 | text-shadow: none; 36 | } 37 | } 38 | 39 | // We want to highlight the background of the list items because we dont 40 | // know their size. 41 | li.selected { 42 | background-color: @background-color-selected; 43 | &:before{ display: none; } 44 | } 45 | 46 | &.mark-active { 47 | @active-icon-size: 14px; 48 | 49 | // pad in front of the text where the icon would be We'll pad the non- 50 | // active items with a 'fake' icon so other classes can pad the item 51 | // without worrying about the icon padding. 52 | li:before { 53 | content: ''; 54 | background-color: transparent; 55 | position: static; 56 | display: inline-block; 57 | left: auto; right: auto; 58 | height: @active-icon-size; 59 | width: @active-icon-size; 60 | } 61 | > li:not(.active):before { 62 | margin-right: @component-icon-padding; 63 | } 64 | li.active { 65 | .octicon(check, @active-icon-size); 66 | &:before { 67 | margin-right: @component-icon-padding; 68 | color: @text-color-success; 69 | } 70 | } 71 | } 72 | } 73 | 74 | .select-list.popover-list { 75 | background-color: @overlay-background-color; 76 | box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.3); 77 | padding: @component-padding/2; 78 | border-radius: @component-border-radius; 79 | 80 | atom-text-editor[mini] { 81 | margin-bottom: @component-padding/2; 82 | } 83 | 84 | .list-group li { 85 | padding-left: @component-padding/2; 86 | } 87 | } 88 | 89 | .ui-sortable { 90 | li { 91 | line-height: 2.5; 92 | } 93 | 94 | // For sortable lists in the settings view 95 | li.ui-sortable-placeholder { 96 | visibility: visible !important; 97 | background-color: darken(@pane-item-background-color, 10%); 98 | } 99 | } 100 | 101 | li.ui-draggable-dragging, 102 | li.ui-sortable-helper { 103 | line-height: @component-line-height; 104 | height: @component-line-height; 105 | border: 0; 106 | border-radius: 0; 107 | list-style: none; 108 | padding: 0 @component-padding; 109 | background: @background-color-highlight; 110 | box-shadow: 0 0 1px @base-border-color; 111 | } 112 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | 2 | @btn-border: 1px solid @button-border-color; 3 | 4 | .btn-background (@color, @hover-color, @selected-color, @text-color) { 5 | color: @text-color; 6 | text-shadow: none; 7 | border: @btn-border; 8 | background-color: @color; 9 | background-image: linear-gradient(lighten(@color, 2%), @color); 10 | 11 | &:focus { 12 | //.focus(); // disabled for now, since :focus styles stay even after releasing mouse. 13 | outline: none; 14 | } 15 | &:focus, 16 | &:hover { 17 | color: @text-color-highlight; 18 | background-image: linear-gradient(lighten(@hover-color, 2%), @hover-color); 19 | } 20 | &:active { 21 | background: darken(@color, 4%); 22 | box-shadow: none; 23 | } 24 | &.selected { 25 | background: @selected-color; 26 | } 27 | &.selected:focus, 28 | &.selected:hover { 29 | background: lighten(@selected-color, 2%); 30 | } 31 | } 32 | 33 | .btn-variant (@color) { 34 | @text-color: contrast(@color, hsl(0,0%,25%), white, 70% ); 35 | @bg: @color; 36 | @hover: lighten(@bg, 3%); 37 | @selected: saturate(darken(@bg, 12%), 20%); 38 | .btn-background(@bg, @hover, @selected, @text-color-highlight); 39 | color: @text-color; 40 | text-shadow: 0 1px 0 hsla(0,0%,0%,.2); 41 | 42 | & when (@ui-lightness > 50%) { 43 | border-color: transparent; // hide border on light backgrounds 44 | } 45 | 46 | &:hover, 47 | &:focus { 48 | color: @text-color; 49 | } 50 | } 51 | 52 | .btn, 53 | .btn.btn-default { 54 | .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color); 55 | } 56 | 57 | .btn.btn-primary { 58 | .btn-variant(@base-accent-color); 59 | } 60 | .btn.btn-info { 61 | .btn-variant(@background-color-info); 62 | } 63 | .btn.btn-success { 64 | .btn-variant(@background-color-success); 65 | } 66 | .btn.btn-warning { 67 | .btn-variant(@background-color-warning); 68 | } 69 | .btn.btn-error { 70 | .btn-variant(@background-color-error); 71 | } 72 | 73 | 74 | // Button Group 75 | 76 | .btn-group > .btn { 77 | z-index: 0; 78 | &:hover { 79 | z-index: 0; 80 | } 81 | 82 | &:first-child { 83 | border-left: @btn-border; 84 | } 85 | &:last-child { 86 | border-right: @btn-border; 87 | } 88 | 89 | // hide border on light backgrounds 90 | & when (@ui-lightness > 50%) { 91 | &.btn-primary:first-child, 92 | &.btn-info:first-child, 93 | &.btn-success:first-child, 94 | &.btn-warning:first-child, 95 | &.btn-error:first-child { 96 | border-left-color: transparent; 97 | } 98 | 99 | &.btn-primary:last-child, 100 | &.btn-info:last-child, 101 | &.btn-success:last-child, 102 | &.btn-warning:last-child, 103 | &.btn-error:last-child { 104 | border-right-color: transparent; 105 | } 106 | } 107 | 108 | &.btn:focus { 109 | z-index: 1; 110 | } 111 | 112 | &.selected, 113 | &.selected:first-child, 114 | &.selected:last-child { 115 | color: @button-text-color-selected; 116 | border: 1px solid @button-border-color-selected; 117 | } 118 | &.selected + .btn { 119 | border-left-color: @button-border-color-selected; 120 | } 121 | } 122 | 123 | 124 | // TODO: Move to a better place, not sure where it gets used 125 | .caret { 126 | border-top: 5px solid #fff; 127 | margin-top: -1px; 128 | } 129 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | @modified-icon-width: 8px; 2 | @tab-top-padding: 0; 3 | @tab-bottom-border-height: 1px; 4 | @tab-border: 1px solid @tab-border-color; 5 | @tab-max-width: 160px; 6 | @tab-min-width: 28px; 7 | 8 | .tab-bar { 9 | height: @tab-height + @tab-top-padding + @tab-bottom-border-height; 10 | box-shadow: inset 0 -1px 0 @tab-border-color; 11 | background: @tab-bar-background-color; 12 | overflow-x: auto; 13 | overflow-y: hidden; 14 | 15 | &::-webkit-scrollbar { 16 | display: none; 17 | } 18 | 19 | .tab { 20 | position: relative; 21 | top: @tab-top-padding; 22 | max-width: @tab-max-width; 23 | min-width: @tab-min-width; 24 | height: @tab-height; 25 | line-height: @tab-height; 26 | padding: 0; 27 | margin: 0; 28 | color: @tab-text-color; 29 | background: @tab-background-color; 30 | border-right: @tab-border; 31 | opacity: @tab-inactive-transparency; 32 | transition: opacity .3s; 33 | 34 | &:last-of-type { 35 | border-right-color: transparent; 36 | } 37 | 38 | &:hover .close-icon { 39 | transform: scale(1); 40 | } 41 | 42 | .title{ 43 | position: relative; 44 | z-index: 1; 45 | padding: 0 8px 46 | } 47 | 48 | .close-icon { 49 | right: 0; 50 | z-index: 3; 51 | margin-right: 8px; 52 | text-align: right; 53 | line-height: @tab-height - 2px; 54 | color: @tab-icon-color; 55 | background: inherit; 56 | transform: scale(0); 57 | transition: transform .1s; 58 | 59 | &:hover { 60 | color: inherit; 61 | } 62 | 63 | &:active { 64 | opacity: .3; 65 | } 66 | } 67 | } 68 | 69 | .tab.active { 70 | z-index: 1; 71 | flex: 2 0 auto; 72 | padding-right: @modified-icon-width + 2px; 73 | background-color: @tab-background-color-active; 74 | opacity: 1; 75 | 76 | &:last-of-type { 77 | border-right-color: @tab-border-color; 78 | } 79 | 80 | & .close-icon { 81 | transform: scale(1); 82 | } 83 | 84 | // Seamless tab border cover 85 | &:after { 86 | content: ""; 87 | position: absolute; 88 | left: 0; 89 | right: 0; 90 | bottom: -1px; 91 | border-bottom: @tab-bottom-border-height solid @tab-background-color-active; 92 | } 93 | } 94 | 95 | .tab.modified { 96 | &:not(:hover) .close-icon { 97 | right: 0; 98 | top: @tab-height/2 - @modified-icon-width/2 + 1px; 99 | width: @modified-icon-width; 100 | height: @modified-icon-width; 101 | border-color: @tab-accent-color; 102 | transform: scale(1); 103 | } 104 | 105 | &:hover .close-icon:hover { 106 | color: @text-color-highlight; 107 | } 108 | } 109 | 110 | .tab.is-dragging { 111 | background: darken(@tab-background-color, 6%); 112 | border-color: transparent; 113 | opacity: .5; 114 | & .close-icon, 115 | &:before, 116 | &:after { 117 | visibility: hidden; 118 | } 119 | } 120 | 121 | .tab.active[data-type="TextEditor"] { 122 | color: @tab-text-color-editor; 123 | background-color: @tab-background-color-editor; 124 | &:after { 125 | border-bottom-color: @tab-background-color-editor; 126 | } 127 | } 128 | 129 | .placeholder { 130 | margin: 0; 131 | height: @tab-height + @tab-top-padding; 132 | background: @tab-accent-color; 133 | pointer-events: none; 134 | &:after { 135 | top: @tab-height/2 + @tab-top-padding - 5px ; 136 | width: 10px; 137 | height: 10px; 138 | margin: 0; 139 | border-radius: 0; 140 | border: 5px solid; 141 | border-color: transparent transparent transparent @tab-accent-color; 142 | background: transparent; 143 | } 144 | 145 | &:last-child { 146 | margin-left: -2px; 147 | 148 | &:after { 149 | margin-left: -10px; 150 | border-color: transparent @tab-accent-color transparent transparent; 151 | } 152 | } 153 | } 154 | } 155 | 156 | 157 | // Active pane marker -------------- 158 | 159 | .tab-bar:empty:before, 160 | .tab-bar .tab:before { 161 | content: ""; 162 | position: absolute; 163 | pointer-events: none; 164 | z-index: 2; 165 | top: 0; 166 | left: 0; 167 | width: 2px; 168 | height: @tab-height + @tab-bottom-border-height; 169 | background: @tab-accent-color; 170 | transform: scaleY(0); 171 | transition: transform .08s; 172 | } 173 | 174 | atom-pane.active .tab-bar:empty:before, 175 | atom-pane.active .tab.active:before { 176 | transform: scaleY(1); 177 | } 178 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | @import "syntax-variables"; 2 | 3 | // Dracula UI variables 4 | // ----------------------------------- 5 | 6 | // Debug (console.log for Less) 7 | // html:before { 8 | // content: "@{variable}"; 9 | // } 10 | 11 | // Color Palette --------------------------------- 12 | @ui-background: hsl(231, 15%, 18%); 13 | @ui-currentline: hsl(232, 14%, 31%); 14 | @ui-selection: hsl(232, 14%, 31%); 15 | @ui-foreground: hsl(60, 30%, 96%); 16 | @ui-comment: hsl(225, 27%, 51%); 17 | @ui-cyan: hsl(191, 97%, 77%); 18 | @ui-green: hsl(135, 94%, 65%); 19 | @ui-orange: hsl(31, 100%, 71%); 20 | @ui-pink: hsl(326, 100%, 74%); 21 | @ui-purple: hsl(265, 89%, 78%); 22 | @ui-red: hsl(0, 100%, 67%); 23 | @ui-yellow: hsl(65, 92%, 76%); 24 | 25 | @ui-hue: hue(@ui-background); 26 | @ui-saturation: saturation(@ui-background); 27 | @ui-lightness: lightness(@ui-background); 28 | @ui-color: @ui-background; 29 | 30 | 31 | // Base colors ----------------------------------- 32 | 33 | @base-accent-color: @ui-pink; 34 | @base-background-color: @ui-background; 35 | @base-border-color: darken(@ui-background, 3%); 36 | 37 | // Level Colors ----------------------------------- 38 | 39 | @level-1-color: lighten(@base-background-color, 6%); 40 | @level-2-color: @base-background-color; 41 | @level-3-color: darken(@base-background-color, 3%); 42 | 43 | 44 | // Var + State Background Colors ------------------------------------- 45 | 46 | @background-color-info: @ui-cyan; 47 | @background-color-success: @ui-pink; 48 | @background-color-warning: @ui-purple; 49 | @background-color-error: @ui-red; 50 | 51 | @background-color-highlight: lighten(@base-background-color, 4%); 52 | @background-color-selected: lighten(@base-background-color, 8%); 53 | 54 | 55 | // Component Colors ------------------------------------- 56 | 57 | @app-background-color: @base-border-color; 58 | 59 | @tree-view-background-color: @level-3-color; 60 | @tree-view-border-color: @base-border-color; 61 | @tree-view-scrollbar-background-color: @base-border-color; 62 | 63 | @tab-accent-color: @ui-green; 64 | @tab-background-color: @level-3-color; 65 | @tab-background-color-active: @level-2-color; 66 | @tab-bar-background-color: @level-3-color; 67 | @tab-bar-border-color: @base-border-color; 68 | @tab-border-color: @base-border-color; 69 | @tab-text-color: @text-color-highlight; 70 | @tab-icon-color: @text-color-subtle; 71 | @tab-inactive-transparency: .5; 72 | @tab-background-color-editor: @ui-background; 73 | @tab-text-color-editor: contrast(@ui-background, darken(@ui-background, 50%), @text-color-highlight ); 74 | 75 | @pane-item-background-color: @base-background-color; 76 | @pane-item-border-color: @base-border-color; 77 | 78 | @panel-heading-background-color: @level-2-color; 79 | @panel-heading-border-color: @base-border-color; 80 | 81 | @tool-panel-background-color: @level-3-color; 82 | @tool-panel-border-color: @base-border-color; 83 | 84 | @inset-panel-background-color: lighten(@level-2-color, 4%); 85 | @inset-panel-border-color: fadeout(@base-border-color, 15%); 86 | 87 | @overlay-background-color: @level-2-color; 88 | @overlay-border-color: @base-border-color; 89 | @overlay-backdrop-color: hsla(@ui-hue,@ui-saturation,5%,.5); 90 | 91 | @badge-background-color: lighten(@background-color-highlight, 6%); 92 | 93 | @button-background-color: @level-1-color; 94 | @button-background-color-hover: lighten(@button-background-color, 2%); 95 | @button-background-color-selected: @base-accent-color; 96 | @button-text-color-selected: contrast(@button-background-color-selected, white, hsl(@ui-hue,100%,10%), 40% ); 97 | @button-border-color: @base-border-color; 98 | @button-border-color-selected: @base-border-color; 99 | 100 | @input-border-color: hsla(0,0%,0%,.2); 101 | @input-background-color: hsla(0,0%,0%,.2); 102 | @input-background-color-focus: fadein(@input-background-color, 6%); 103 | @input-selection-color: darken(@background-color-selected, 6%); 104 | @input-selection-color-focus: @background-color-selected; 105 | 106 | @tooltip-background-color: @base-accent-color; 107 | @tooltip-text-color: contrast(@tooltip-background-color, white, hsl(@ui-hue,100%,10%), 40% ); 108 | @tooltip-text-key-color: @tooltip-background-color; 109 | @tooltip-background-key-color: @tooltip-text-color; 110 | 111 | @progress-background-color: @base-accent-color; 112 | 113 | @checkbox-background-color: fade(@base-accent-color, 33%); 114 | 115 | @scrollbar-color: @base-accent-color; 116 | @scrollbar-background-color: @base-background-color; 117 | 118 | 119 | // Utilities 120 | 121 | @key-binding-border-color: hsla(0,0%,100%,.1); 122 | @key-binding-background-color: hsla(0,0%,100%,.1); 123 | 124 | 125 | // Text Colors ------------------------------------- 126 | 127 | @text-color: hsl(@ui-hue, @ui-saturation, max(30%, @ui-lightness * 3) ); 128 | @text-color-subtle: fadeout(@text-color, 40%); 129 | @text-color-faded: fade(@text-color, 20%); 130 | @text-color-highlight: hsl(@ui-hue, @ui-saturation*8, 88%); 131 | @text-color-selected: @ui-foreground; 132 | 133 | @text-color-info: @ui-cyan; 134 | @text-color-success: @ui-green; 135 | @text-color-warning: @ui-orange; 136 | @text-color-error: @ui-red; 137 | 138 | @text-color-added: @text-color-success; 139 | @text-color-ignored: @text-color-subtle; 140 | @text-color-modified: @text-color-warning; 141 | @text-color-removed: @text-color-error; 142 | @text-color-renamed: @text-color-info; 143 | 144 | 145 | // Sizes ------------------------------------- 146 | 147 | @font-size: 11px; 148 | @input-font-size: 14px; 149 | 150 | @disclosure-arrow-size: 12px; 151 | 152 | @component-padding: 10px; 153 | @component-icon-padding: 5px; 154 | @component-icon-size: 16px; 155 | @component-line-height: 25px; 156 | @component-border-radius: 3px; 157 | 158 | @tab-height: 30px; 159 | 160 | 161 | // Font ------------------------------------- 162 | 163 | @font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif; 164 | 165 | 166 | // Settings View ------------------------------------- 167 | 168 | @settings-list-background-color: darken(@level-2-color, 1.5%); 169 | @theme-config-box-shadow: inset 0 0 3px hsla(0, 0%, 100%, .4), 0 1px 3px hsla(0, 0%, 0%, .2); 170 | @theme-config-box-shadow-selected: inset 0 1px 3px hsla(0, 0%, 0%, .1); 171 | @theme-config-border-selected: hsla(0, 0%, 100%, .75); 172 | 173 | // Git 174 | @git-color-added: desaturate(@text-color-added, 25%); 175 | @git-color-ignored: desaturate(@text-color-ignored, 25%); 176 | @git-color-modified: desaturate(@text-color-modified, 25%); 177 | @git-color-removed: desaturate(@text-color-removed, 25%); 178 | @git-color-renamed: desaturate(@text-color-renamed, 25%); 179 | -------------------------------------------------------------------------------- /styles/_settings.less: -------------------------------------------------------------------------------- 1 | 2 | // Themed Settings 3 | // Based on https://github.com/postcasio/themed-settings 4 | 5 | body .settings-view { 6 | .panels { 7 | background: @level-2-color; 8 | color: @text-color; 9 | } 10 | 11 | .settings-panel { 12 | label { 13 | color: @text-color; 14 | } 15 | } 16 | 17 | .section .section-heading, 18 | section .section-heading { 19 | color: @text-color; 20 | border-color: @base-border-color; 21 | } 22 | 23 | .thumbnail { 24 | background: @inset-panel-background-color; 25 | border: @inset-panel-border-color; 26 | 27 | .caption { 28 | color: @text-color; 29 | } 30 | } 31 | 32 | select.form-control { 33 | .btn(); 34 | box-shadow: none; 35 | } 36 | 37 | atom-text-editor[mini][mini][mini] { 38 | color: @text-color-highlight; 39 | background-color: @input-background-color; 40 | border: 1px solid @input-border-color; 41 | border-radius: @component-border-radius; 42 | padding-left: @component-padding/2; 43 | 44 | &, 45 | &::shadow { 46 | .placeholder-text { 47 | color: @text-color-subtle; 48 | } 49 | .text { 50 | color: @text-color-highlight; 51 | } 52 | .selection .region { 53 | background-color: lighten(@input-background-color, 10%); 54 | } 55 | .cursor { 56 | border-color: @base-accent-color; 57 | } 58 | } 59 | 60 | &.is-focused, 61 | &.is-focused::shadow { 62 | .focus(); 63 | background-color: darken(@input-background-color, 2%); 64 | 65 | .placeholder-text { 66 | color: @text-color-subtle; 67 | } 68 | .selection .region { 69 | background-color: @background-color-selected; 70 | } 71 | .cursor { 72 | border-color: @base-accent-color; 73 | } 74 | } 75 | 76 | } 77 | 78 | .text, .text-subtle { 79 | color: @text-color; 80 | } 81 | 82 | .btn { 83 | .btn(); 84 | } 85 | 86 | .btn.btn-primary { 87 | .btn-variant(@background-color-info); 88 | } 89 | .btn.btn-info { 90 | .btn-variant(@background-color-info); 91 | } 92 | .btn.btn-success { 93 | .btn-variant(@background-color-success); 94 | } 95 | .btn.btn-warning { 96 | .btn-variant(@background-color-warning); 97 | } 98 | .btn.btn-error { 99 | .btn-variant(@background-color-error); 100 | } 101 | .btn-group > .btn-default { 102 | .btn(); 103 | } 104 | 105 | .config-menu { 106 | position: relative; 107 | background: @level-2-color; 108 | box-shadow: none; 109 | border-right: 1px solid @base-border-color; 110 | 111 | // smoothen border with a gradient 112 | &:after { 113 | content: ""; 114 | position: absolute; 115 | top: 0; 116 | right: -1px; 117 | width: 1px; 118 | height: 100px; 119 | background: linear-gradient(@level-2-color 10%, @base-border-color); 120 | } 121 | 122 | .nav-stacked > li + li { 123 | margin-top: 0; 124 | } 125 | 126 | .nav > li > a { 127 | color: @text-color; 128 | } 129 | .nav > li > a:hover { 130 | background: @background-color-highlight; 131 | color: @text-color; 132 | box-shadow: none; 133 | } 134 | .nav > li.active > a { 135 | color: @text-color-selected; 136 | box-shadow: inset 0 1px 0 @base-border-color, inset 0 -1px 0 @base-border-color; 137 | background: @background-color-selected; 138 | .package-author { 139 | color: @text-color-selected; 140 | } 141 | } 142 | } 143 | 144 | .table > tbody > tr > td, 145 | .table > thead > tr > th { 146 | border-color: @base-border-color; 147 | } 148 | 149 | .table > tbody > .success > td { 150 | background: @background-color-highlight; 151 | } 152 | 153 | .config-menu .panels-menu .panel-menu-separator { 154 | border: none; 155 | } 156 | 157 | .config-menu .panels-packages { 158 | background: @settings-list-background-color; 159 | border-top: 1px solid @base-border-color; 160 | border-bottom: 1px solid @base-border-color; 161 | 162 | li { 163 | a { 164 | border-radius: 0 !important; 165 | box-shadow: none !important; 166 | border-bottom: 1px solid @base-border-color; 167 | } 168 | a:hover { 169 | box-shadow: none !important; 170 | } 171 | &.active { 172 | a, a:hover { 173 | box-shadow: none !important; 174 | } 175 | } 176 | &:first-child { 177 | margin-top: 0; 178 | } 179 | &:last-child { 180 | margin-bottom: 0; 181 | } 182 | } 183 | 184 | .package-title { 185 | color: @text-color-highlight; 186 | } 187 | 188 | .package-version { 189 | color: @text-color !important; 190 | } 191 | 192 | .package-author { 193 | color: @text-color !important; 194 | } 195 | } 196 | 197 | .packages .available-package-view { 198 | .package-name { 199 | color: @text-color-highlight; 200 | } 201 | .downloads { 202 | color: @text-color; 203 | } 204 | .description { 205 | color: @text-color; 206 | } 207 | } 208 | 209 | .packages { 210 | 211 | .theme-chooser { 212 | .col-md-4 { 213 | min-width: 300px; // temporarly prevent wrapping 214 | } 215 | } 216 | 217 | .theme-base-color, 218 | .theme-saturation { 219 | box-shadow: @theme-config-box-shadow; 220 | } 221 | 222 | .theme-base-color-selected, 223 | .theme-saturation-selected, 224 | .theme-contrast-selected { 225 | border-color: @theme-config-border-selected; 226 | box-shadow: @theme-config-box-shadow-selected; 227 | } 228 | 229 | .theme-contrast { 230 | background-color: transparent; 231 | } 232 | 233 | // TODO: Remove once these get moved to inline styles 234 | .theme-base-color-1 { background-color: @theme-base-color-1; } 235 | .theme-base-color-2 { background-color: @theme-base-color-2; } 236 | .theme-base-color-3 { background-color: @theme-base-color-3; } 237 | .theme-base-color-4 { background-color: @theme-base-color-4; } 238 | .theme-base-color-5 { background-color: @theme-base-color-5; } 239 | 240 | .theme-saturation-1 { background-color: @theme-saturation-1; } // 40% 241 | .theme-saturation-2 { background-color: @theme-saturation-2; } // 20% 242 | .theme-saturation-3 { background-color: @theme-saturation-3; } // 0% 243 | .theme-saturation-4 { background-color: @theme-saturation-4; } // -10% 244 | .theme-saturation-5 { background-color: @theme-saturation-5; } // -100% 245 | 246 | .theme-contrast-1 { color: @theme-contrast-1; } // 40% 247 | .theme-contrast-2 { color: @theme-contrast-2; } // 20% 248 | .theme-contrast-3 { color: @theme-contrast-3; } // 0% 249 | .theme-contrast-4 { color: @theme-contrast-4; } // -10% 250 | .theme-contrast-5 { color: @theme-contrast-5; } // -20% 251 | } 252 | 253 | .error-message .error-details { 254 | background: @inset-panel-background-color; 255 | border: @inset-panel-border-color; 256 | color: @text-color; 257 | } 258 | 259 | .setting-description { 260 | color: @text-color-subtle; 261 | } 262 | 263 | 264 | .alert (@color) { 265 | @faded-color: fade(mix(@color, @level-1-color), 20%); 266 | color: @color; 267 | border-color: @faded-color; 268 | background-color: @faded-color; 269 | .alert-link { 270 | color: inherit; 271 | text-decoration: underline; 272 | } 273 | } 274 | 275 | .alert { .alert( @text-color ); } 276 | .alert-success { .alert( @text-color-success ); } 277 | .alert-info { .alert( @text-color-info ); } 278 | .alert-warning { .alert( @text-color-warning ); } 279 | .alert-danger { .alert( @text-color-error ); } 280 | 281 | } 282 | --------------------------------------------------------------------------------