├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── index.less ├── package.json └── styles ├── atom.less ├── buttons.less ├── editor.less ├── git.less ├── lists.less ├── messages.less ├── overlays.less ├── panels.less ├── panes.less ├── progress.less ├── sites.less ├── tabs.less ├── text.less ├── tooltips.less ├── tree-view.less ├── ui-mixins.less ├── ui-variables.less └── utilities.less /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | See the [Atom contributing guide](https://github.com/atom/atom/blob/master/CONTRIBUTING.md) 2 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | ### Prerequisites 10 | 11 | * [ ] Put an X between the brackets on this line if you have done all of the following: 12 | * Reproduced the problem in Safe Mode: http://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode 13 | * Followed all applicable steps in the debugging guide: http://flight-manual.atom.io/hacking-atom/sections/debugging/ 14 | * Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq 15 | * Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom 16 | * Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages 17 | 18 | ### Description 19 | 20 | [Description of the issue] 21 | 22 | ### Steps to Reproduce 23 | 24 | 1. [First Step] 25 | 2. [Second Step] 26 | 3. [and so on...] 27 | 28 | **Expected behavior:** [What you expect to happen] 29 | 30 | **Actual behavior:** [What actually happens] 31 | 32 | **Reproduces how often:** [What percentage of the time does it reproduce?] 33 | 34 | ### Versions 35 | 36 | You can get this information from copy and pasting the output of `atom --version` and `apm --version` from the command line. Also, please include the OS and what version of the OS you're running. 37 | 38 | ### Additional Information 39 | 40 | Any additional information, configuration or data that might be necessary to reproduce the issue. 41 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 GitHub Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Requirements 2 | 3 | * Filling out the template is required. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion. 4 | * All new code requires tests to ensure against regressions 5 | 6 | ### Description of the Change 7 | 8 | 13 | 14 | ### Alternate Designs 15 | 16 | 17 | 18 | ### Benefits 19 | 20 | 21 | 22 | ### Possible Drawbacks 23 | 24 | 25 | 26 | ### Applicable Issues 27 | 28 | 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### This package is now a part of the [core Atom repository](https://github.com/atom/atom/tree/master/packages/atom-light-ui), please direct all issues and pull requests there in the future! 2 | 3 | --- 4 | 5 | # Atom Light UI theme 6 | 7 | A light UI theme for Atom. 8 | 9 | This theme is installed by default with Atom and can be activated by going to 10 | the _Themes_ section in the Settings view (`cmd-,`) and selecting it from the 11 | _UI Themes_ drop-down menu. 12 | 13 | ![](https://f.cloud.github.com/assets/671378/2265022/bb148a20-9e7a-11e3-81c8-bf5965d48183.png) 14 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | 2 | // Atom Dark UI theme 3 | 4 | @import "styles/ui-variables.less"; 5 | @import "styles/ui-mixins.less"; 6 | 7 | @import "styles/atom.less"; 8 | @import "styles/utilities.less"; 9 | @import "styles/text.less"; 10 | @import "styles/git.less"; 11 | @import "styles/sites.less"; 12 | @import "styles/messages.less"; 13 | @import "styles/progress.less"; 14 | @import "styles/buttons.less"; 15 | @import "styles/panels.less"; 16 | @import "styles/panes.less"; 17 | @import "styles/lists.less"; 18 | @import "styles/overlays.less"; 19 | @import "styles/editor.less"; 20 | @import "styles/tabs.less"; 21 | @import "styles/tooltips.less"; 22 | @import "styles/tree-view.less"; 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atom-light-ui", 3 | "theme": "ui", 4 | "version": "0.46.3", 5 | "description": "A light UI theme for Atom", 6 | "repository": "https://github.com/atom/atom-light-ui.git", 7 | "license": "MIT", 8 | "engines": { 9 | "atom": ">0.50.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /styles/atom.less: -------------------------------------------------------------------------------- 1 | atom-workspace { 2 | background-color: @app-background-color; 3 | } 4 | 5 | .scrollbars-visible-always { 6 | ::-webkit-scrollbar { 7 | width: 10px; 8 | height: 10px; 9 | } 10 | 11 | ::-webkit-scrollbar-track, 12 | ::-webkit-scrollbar-corner { 13 | background: @scrollbar-background-color; 14 | } 15 | 16 | ::-webkit-scrollbar-thumb { 17 | background: @scrollbar-color; 18 | border-radius: 5px; 19 | box-shadow: 0 0 1px white inset; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | .btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) { 2 | @border-shadow: inset 0 0 0 1px @border-color; 3 | @active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); 4 | color: @text-color; 5 | background-color: transparent; 6 | background-image: -webkit-linear-gradient(@color, darken(@color, 8%)); 7 | box-shadow: @border-shadow; 8 | 9 | &:hover { 10 | color: @text-color-hover; 11 | background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 8%)); 12 | } 13 | &:active, 14 | &.selected:hover:active { 15 | box-shadow: @active-shadow, @border-shadow; 16 | } 17 | &.selected, 18 | &.selected:hover { 19 | color: @text-color-selected; 20 | box-shadow: inset 0 2px 5px rgba(0, 0, 0,.3), @border-shadow; 21 | text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); 22 | background-image: -webkit-linear-gradient(darken(@selected-color, 8%), @selected-color); 23 | } 24 | &.selected:hover { 25 | box-shadow: @border-shadow; 26 | background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 8%)); 27 | } 28 | } 29 | 30 | .btn-variant (@color) { 31 | @bg: darken(@color, 10%); 32 | @hover: @color; 33 | @selected: @color; 34 | @border: fadeout(darken(@color, 20%), 50%); 35 | .btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected); 36 | } 37 | 38 | .btn { 39 | .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight); 40 | } 41 | 42 | .btn.btn-primary { 43 | .btn-variant(@background-color-info); 44 | } 45 | .btn.btn-info { 46 | .btn-variant(@background-color-info); 47 | } 48 | .btn.btn-success { 49 | .btn-variant(@background-color-success); 50 | } 51 | .btn.btn-warning { 52 | .btn-variant(@background-color-warning); 53 | } 54 | .btn.btn-error { 55 | .btn-variant(@background-color-error); 56 | } 57 | 58 | .btn-group > .btn { 59 | border: none; 60 | } 61 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | atom-text-editor[mini] { 2 | color: lighten(@text-color, 15%); 3 | background-color: darken(@input-background-color, 1%); 4 | border: 1px solid lighten(@input-border-color, 10%); 5 | 6 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 7 | border-radius: @component-border-radius; 8 | padding-left: @component-padding/2; 9 | 10 | .cursor { border-color: #000; } 11 | .selection .region { background-color: rgba(0, 0, 0, .2); } 12 | .placeholder-text { 13 | color: lighten(@text-color-subtle, 10%); 14 | } 15 | } 16 | 17 | atom-text-editor[mini].is-focused { 18 | color: @text-color; 19 | background-color: @input-background-color; 20 | border-color: @input-border-color; 21 | .placeholder-text { 22 | color: @text-color-subtle; 23 | } 24 | .selection .region { 25 | background-color: lighten(@background-color-info, 30%); 26 | } 27 | } 28 | 29 | // FIXME: these should go in syntax themes? 30 | atom-text-editor { 31 | .gutter.drop-shadow { 32 | -webkit-box-shadow: -2px 0 10px 2px #222; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /styles/git.less: -------------------------------------------------------------------------------- 1 | .status { .text(normal); } 2 | .status-added { .text(success); } 3 | .status-ignored { .text(subtle); } 4 | .status-modified { .text(warning); } 5 | .status-removed { .text(error); } 6 | .status-renamed { .text(info); } 7 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | @import "octicon-mixins.less"; // https://github.com/atom/atom/blob/master/static/variables/octicon-mixins.less 2 | 3 | .list-group, .list-tree { 4 | li:not(.list-nested-item), 5 | li.list-nested-item > .list-item { 6 | .text(normal); 7 | } 8 | 9 | .generate-list-item-text-color(@class) { 10 | li:not(.list-nested-item).text-@{class}, 11 | li.list-nested-item.text-@{class} > .list-item { 12 | .text(@class); 13 | } 14 | } 15 | .generate-list-item-text-color(subtle); 16 | .generate-list-item-text-color(info); 17 | .generate-list-item-text-color(success); 18 | .generate-list-item-text-color(warning); 19 | .generate-list-item-text-color(error); 20 | .generate-list-item-text-color(selected); 21 | 22 | .generate-list-item-status-color(@color, @status) { 23 | li:not(.list-nested-item).status-@{status}, 24 | li.list-nested-item.status-@{status} > .list-item { 25 | color: @color; 26 | } 27 | 28 | li:not(.list-nested-item).selected.status-@{status}, 29 | li.list-nested-item.selected.status-@{status} > .list-item { 30 | color: darken(@color, 7%); 31 | } 32 | } 33 | .generate-list-item-status-color(@text-color-subtle, ignored); 34 | .generate-list-item-status-color(@text-color-added, added); 35 | .generate-list-item-status-color(@text-color-renamed, renamed); 36 | .generate-list-item-status-color(@text-color-modified, modified); 37 | .generate-list-item-status-color(@text-color-removed, removed); 38 | 39 | li:not(.list-nested-item).selected, 40 | li.list-nested-item.selected > .list-item { 41 | .text(selected); 42 | } 43 | } 44 | 45 | .select-list ol.list-group, 46 | &.select-list ol.list-group { 47 | li.two-lines { 48 | .secondary-line { color: @text-color-subtle; } 49 | &.selected .secondary-line { 50 | color: lighten(@text-color-subtle, 10%); 51 | text-shadow: none; 52 | } 53 | } 54 | 55 | // We want to highlight the background of the list items because we dont 56 | // know their size. 57 | li.selected { 58 | background-color: @background-color-selected; 59 | &:before{ display: none; } 60 | } 61 | 62 | &.mark-active{ 63 | @active-icon-size: 14px; 64 | 65 | // pad in front of the text where the icon would be We'll pad the non- 66 | // active items with a 'fake' icon so other classes can pad the item 67 | // without worrying about the icon padding. 68 | li:before { 69 | content: ''; 70 | background-color: transparent; 71 | position: static; 72 | display: inline-block; 73 | left: auto; right: auto; 74 | height: @active-icon-size; 75 | width: @active-icon-size; 76 | } 77 | > li:not(.active):before { 78 | margin-right: @component-icon-padding; 79 | } 80 | li.active { 81 | .octicon(check, @active-icon-size); 82 | &:before { 83 | margin-right: @component-icon-padding; 84 | color: @text-color-success; 85 | } 86 | } 87 | } 88 | } 89 | 90 | .select-list.popover-list { 91 | background-color: @overlay-background-color; 92 | box-shadow: 0 0 10px @base-border-color; 93 | padding: @component-padding/2; 94 | border-radius: @component-border-radius; 95 | border: 1px solid @overlay-border-color; 96 | 97 | atom-text-editor { 98 | margin-bottom: @component-padding/2; 99 | } 100 | 101 | .list-group li { 102 | padding-left: @component-padding/2; 103 | } 104 | } 105 | 106 | .ui-sortable { 107 | li { 108 | line-height: 2.5; 109 | } 110 | 111 | // For sortable lists in the settings view 112 | li.ui-sortable-placeholder { 113 | visibility: visible !important; 114 | background-color: darken(@pane-item-background-color, 10%); 115 | } 116 | } 117 | 118 | li.ui-draggable-dragging, li.ui-sortable-helper { 119 | line-height: @component-line-height; 120 | height: @component-line-height; 121 | border: 0; 122 | border-radius: 0; 123 | list-style: none; 124 | padding: 0 @component-padding; 125 | background: @background-color-highlight; 126 | box-shadow: 0 0 1px @base-border-color; 127 | } 128 | -------------------------------------------------------------------------------- /styles/messages.less: -------------------------------------------------------------------------------- 1 | ul.background-message { 2 | font-weight: bold; 3 | color: rgba(0, 0, 0, .18); 4 | } 5 | -------------------------------------------------------------------------------- /styles/overlays.less: -------------------------------------------------------------------------------- 1 | atom-panel.modal, .overlay { 2 | color: @text-color; 3 | background-color: @overlay-background-color; 4 | padding: @component-padding; 5 | border: 1px solid @overlay-border-color; 6 | box-shadow: 0 0 10px @base-border-color; 7 | border-radius: @component-border-radius; 8 | 9 | atom-text-editor[mini] { 10 | margin-bottom: @component-padding; 11 | } 12 | 13 | .select-list ol.list-group, 14 | &.select-list ol.list-group { 15 | 16 | background-color: @inset-panel-background-color; 17 | 18 | li { 19 | padding: @component-padding; 20 | border-top: 1px solid @inset-panel-border-color; 21 | border-left: 1px solid @inset-panel-border-color; 22 | border-right: 1px solid @inset-panel-border-color; 23 | &:last-child { border-bottom: 1px solid @inset-panel-border-color; } 24 | 25 | &.two-lines { padding: @component-padding/2 @component-padding; } 26 | &.selected { 27 | color: @text-color; 28 | background-color: @background-color-highlight; 29 | } 30 | 31 | .status.icon { 32 | float: right; 33 | margin-left: @component-icon-padding; 34 | &:before { 35 | margin-right: 0; 36 | } 37 | } 38 | } 39 | 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | @import "buttons.less"; 2 | 3 | .panel { 4 | &.bordered { 5 | border: 1px solid @base-border-color; 6 | border-radius: @component-border-radius; 7 | } 8 | } 9 | 10 | atom-panel, .tool-panel { 11 | .text(normal); 12 | position: relative; 13 | 14 | background-color: @tool-panel-background-color; 15 | 16 | &.bottom, &.panel-bottom, 17 | &.footer, &.footer-bottom { 18 | border-top: 1px solid @tool-panel-border-color; 19 | } 20 | 21 | &.left, &.panel-left { 22 | border-right: 1px solid @tool-panel-border-color; 23 | } 24 | 25 | &.right, &.panel-right { 26 | border-left: 1px solid @tool-panel-border-color; 27 | } 28 | 29 | .inset-panel { 30 | border-radius: @component-border-radius; 31 | 32 | border: 1px solid @tool-panel-border-color; 33 | } 34 | } 35 | 36 | .inset-panel { 37 | position: relative; 38 | background-color: @inset-panel-background-color; 39 | } 40 | 41 | .panel-heading { 42 | border-bottom: none; 43 | padding: @component-padding - 2px @component-padding; 44 | 45 | background-color: transparent; 46 | background-image: -webkit-linear-gradient(@panel-heading-background-color, darken(@panel-heading-background-color, 10%)); 47 | 48 | .btn { 49 | @bg: lighten(@button-background-color, 10%); 50 | @hover: lighten(@button-background-color-hover, 10%); 51 | @selected: lighten(@button-background-color-selected, 10%); 52 | @text: lighten(@text-color, 10%); 53 | .btn-background(@bg, @hover, @selected, @button-border-color, @text, @text); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /styles/panes.less: -------------------------------------------------------------------------------- 1 | atom-pane-container { 2 | atom-pane { 3 | background-color: lighten(@app-background-color, 3%); 4 | 5 | &:focus { 6 | background-color: @app-background-color; 7 | } 8 | } 9 | 10 | atom-pane-axis.horizontal > * { 11 | border-right: 1px solid @pane-item-border-color; 12 | &:last-child { border-right: none; } 13 | } 14 | 15 | atom-pane-axis.vertical > * { 16 | border-bottom: 1px solid @pane-item-border-color; 17 | &:last-child { border-bottom: none; } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /styles/progress.less: -------------------------------------------------------------------------------- 1 | .loading-spinner(@size) { 2 | width: @size; 3 | height: @size; 4 | display: block; 5 | 6 | background-image: url(images/octocat-spinner-128.gif); 7 | background-repeat: no-repeat; 8 | background-size: cover; 9 | 10 | &.inline-block { 11 | display: inline-block; 12 | } 13 | } 14 | 15 | .loading-spinner-large { 16 | .loading-spinner(64px); 17 | } 18 | 19 | .loading-spinner-medium { 20 | .loading-spinner(50px); 21 | } 22 | 23 | .loading-spinner-small { 24 | .loading-spinner(32px); 25 | } 26 | 27 | .loading-spinner-tiny { 28 | .loading-spinner(20px); 29 | } 30 | 31 | // Much learning from: 32 | // http://css-tricks.com/html5-progress-element/ 33 | 34 | @progress-height: 16px; 35 | @progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15)); 36 | 37 | progress { 38 | height: @progress-height; 39 | -webkit-appearance: none; 40 | border-radius: @component-border-radius; 41 | background-color: #ccc; 42 | background-image: 43 | -webkit-linear-gradient(-30deg, 44 | transparent 33%, rgba(0, 0, 0, .1) 33%, 45 | rgba(0,0, 0, .1) 66%, transparent 66%), 46 | @progress-shine-gradient; 47 | border-radius: 2px; 48 | background-size: 25px @progress-height, 100% 100%, 100% 100%; 49 | -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage 50 | } 51 | 52 | progress::-webkit-progress-bar { 53 | background-color: transparent; 54 | } 55 | 56 | progress::-webkit-progress-value { 57 | border-radius: @component-border-radius; 58 | background-image: @progress-shine-gradient; 59 | background-color: @background-color-info; 60 | } 61 | 62 | progress[value] { 63 | background-image: @progress-shine-gradient; 64 | -webkit-animation: none; 65 | } 66 | 67 | @-webkit-keyframes animate-stripes { 68 | 100% { background-position: 100px 0px; } 69 | } 70 | -------------------------------------------------------------------------------- /styles/sites.less: -------------------------------------------------------------------------------- 1 | .ui-site(@num, @color) { 2 | .ui-site-@{num} { 3 | background-color: @color; 4 | } 5 | } 6 | 7 | .ui-site(1, @ui-site-color-1); 8 | .ui-site(2, @ui-site-color-2); 9 | .ui-site(3, @ui-site-color-3); 10 | .ui-site(4, @ui-site-color-4); 11 | .ui-site(5, @ui-site-color-5); 12 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | @tab-radius: 3px; 2 | @modified-icon-width: 8px; 3 | @tab-skew: 30deg; 4 | @tab-top-padding: 5px; 5 | @tab-bottom-border-height: 5px; 6 | @tab-border: 1px solid @tab-border-color; 7 | @tab-bar-bottom-border-color: @tab-border-color; 8 | @tab-max-width: 160px; 9 | 10 | .tab-bar { 11 | height: @tab-height + @tab-top-padding + @tab-bottom-border-height; 12 | background-image: -webkit-linear-gradient(top, @tab-bar-background-color, lighten(@tab-bar-background-color, 9%)); 13 | box-shadow: inset 0 -8px 8px -4px rgba(0,0,0, .15); 14 | padding: 0 10px 0 25px; 15 | overflow-x: auto; 16 | overflow-y: hidden; 17 | 18 | &::-webkit-scrollbar { 19 | display: none; 20 | } 21 | 22 | .tab { 23 | position: relative; 24 | top: @tab-top-padding; 25 | max-width: @tab-max-width; 26 | height: @tab-height; 27 | line-height: @tab-height; 28 | color: @text-color; 29 | padding: 0; 30 | margin: 0 20px 0 5px; 31 | 32 | box-shadow: inset -1px -1px 1px rgba(0,0,0, .05); 33 | transition: color .1s ease-in; 34 | 35 | &, &:before, &:after { 36 | background-image: -webkit-linear-gradient(top, @tab-background-color, darken(@tab-background-color, 6%)); 37 | border-top: @tab-border; 38 | } 39 | 40 | &:before, &:after { 41 | content: ''; 42 | position: absolute; 43 | top: -1px; 44 | width: 25px; 45 | height: @tab-height; 46 | } 47 | 48 | // left angled edge 49 | &:before { 50 | left: -14px; 51 | border-top-left-radius: @tab-radius; 52 | border-left: @tab-border; 53 | box-shadow: inset 1px -1px 1px rgba(0,0,0, .05); 54 | -webkit-transform: skewX(-@tab-skew); 55 | } 56 | 57 | // right angled edge 58 | &:after { 59 | right: -14px; 60 | border-top-right-radius: @tab-radius; 61 | border-right: @tab-border; 62 | box-shadow: inset -1px -1px 1px rgba(0,0,0, .05); 63 | -webkit-transform: skewX(@tab-skew); 64 | } 65 | 66 | .close-icon { 67 | right: 0; 68 | z-index: 3; 69 | text-align: right; 70 | line-height: @tab-height; 71 | color: @text-color; 72 | 73 | &:hover { 74 | color: inherit; 75 | } 76 | } 77 | 78 | &.modified:not(:hover) .close-icon { 79 | right: 0; 80 | top: @tab-height/2 - @modified-icon-width/2 + 1px; 81 | width: @modified-icon-width; 82 | height: @modified-icon-width; 83 | } 84 | 85 | &.modified:hover .close-icon:hover { 86 | color: @text-color-highlight; 87 | } 88 | 89 | .title { 90 | position: relative; 91 | z-index: 1; 92 | margin-top: -@tab-top-padding - 1px; 93 | padding-top: @tab-top-padding + 1px; 94 | padding-right: 10px; 95 | } 96 | } 97 | 98 | .tab.active { 99 | z-index: 1; 100 | color: @text-color-highlight; 101 | 102 | .close-icon { 103 | line-height: @tab-height - 1px; 104 | color: @text-color; 105 | } 106 | 107 | &, &:before, &:after { 108 | background: @tab-background-color-active; 109 | height: @tab-height + 1px; 110 | box-shadow: none; 111 | } 112 | } 113 | 114 | .tab:hover { 115 | color: @text-color-highlight; 116 | } 117 | 118 | .tab.active:hover .close-icon { 119 | color: @text-color; 120 | 121 | &:hover { 122 | color: inherit; 123 | } 124 | } 125 | 126 | .placeholder { 127 | height: @tab-height + @tab-top-padding + @tab-bottom-border-height; 128 | pointer-events: none; 129 | &:before { 130 | margin-left: -9px; // center between tabs 131 | } 132 | &:after { 133 | top: @tab-height + @tab-top-padding + @tab-bottom-border-height - 2px; 134 | margin-left: -10px; // center between tabs 135 | } 136 | } 137 | } 138 | 139 | // border 140 | .tab-bar + .item-views::before { 141 | content: ""; 142 | position: absolute; 143 | top: -5px; 144 | height: @tab-bottom-border-height; 145 | left: 0; 146 | right: 0; 147 | background-color: @tab-background-color-active; 148 | border-top: 1px solid @tab-border-color; 149 | border-bottom: 1px solid @tab-bar-bottom-border-color; 150 | pointer-events: none; 151 | } 152 | -------------------------------------------------------------------------------- /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 { 57 | color: @text-color-highlight; 58 | font-weight: bold; 59 | text-shadow: none; 60 | background-color: @background-color-highlight; 61 | border-radius: @component-border-radius; 62 | padding: 1px 3px; 63 | } 64 | 65 | .highlight-color(@name, @color) { 66 | .highlight-@{name} { 67 | color: @text-color-highlight; 68 | font-weight: bold; 69 | text-shadow: none; 70 | background-color: @color; 71 | border-radius: @component-border-radius; 72 | padding: 1px 3px; 73 | } 74 | } 75 | .highlight-color(info, @background-color-info); 76 | .highlight-color(warning, @background-color-warning); 77 | .highlight-color(error, @background-color-error); 78 | .highlight-color(success, @background-color-success); 79 | -------------------------------------------------------------------------------- /styles/tooltips.less: -------------------------------------------------------------------------------- 1 | .tooltip { 2 | @tip-background-color: #333; 3 | @tip-text-color: #fff; 4 | white-space: nowrap; 5 | 6 | .keystroke { 7 | font-family: Helvetica, Arial, sans-serif; 8 | font-size: 13px; 9 | color: #c0c0c0; 10 | padding-left: 2px; 11 | } 12 | 13 | &.in { opacity: 1; } 14 | 15 | .tooltip-inner { 16 | line-height: 19px; 17 | border-radius: @component-border-radius; 18 | background-color: @tip-background-color; 19 | color: @tip-text-color; 20 | white-space: nowrap; 21 | max-width: none; 22 | } 23 | 24 | &.top .tooltip-arrow { 25 | border-top-color: @tip-background-color; 26 | } 27 | &.top-left .tooltip-arrow { 28 | border-top-color: @tip-background-color; 29 | } 30 | &.top-right .tooltip-arrow { 31 | border-top-color: @tip-background-color; 32 | } 33 | &.right .tooltip-arrow { 34 | border-right-color: @tip-background-color; 35 | } 36 | &.left .tooltip-arrow { 37 | border-left-color: @tip-background-color; 38 | } 39 | &.bottom .tooltip-arrow { 40 | border-bottom-color: @tip-background-color; 41 | } 42 | &.bottom-left .tooltip-arrow { 43 | border-bottom-color: @tip-background-color; 44 | } 45 | &.bottom-right .tooltip-arrow { 46 | border-bottom-color: @tip-background-color; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | .tree-view { 2 | font-size: @font-size; 3 | background: @tree-view-background-color; 4 | 5 | .selected:before { 6 | background: #d0d0d0; 7 | } 8 | } 9 | 10 | .tree-view-resizer { 11 | .tree-view-resize-handle { 12 | width: 8px; 13 | } 14 | } 15 | 16 | .focusable-panel { 17 | opacity: 1; 18 | background-image: -webkit-gradient(linear, left top, left bottom, from(#e8ecf1), to(#ebebeb)); 19 | background-image: -webkit-linear-gradient(top, #e8ecf1, #ebebeb); 20 | 21 | &:focus { 22 | background-image: -webkit-gradient(linear, left top, left bottom, from(#e8ecf1),to(#d1d8e0)); 23 | background-image: -webkit-linear-gradient(top, #e8ecf1, #d1d8e0); 24 | 25 | .selected:before { 26 | background: @background-color-selected; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /styles/ui-mixins.less: -------------------------------------------------------------------------------- 1 | // Pattern matching; ish is cray. 2 | // http://lesscss.org/#-pattern-matching-and-guard-expressions 3 | .text(normal) { 4 | font-weight: normal; 5 | color: @text-color; 6 | text-shadow: 0 1px 0 rgba(255, 255, 255, .5); 7 | } 8 | .text(subtle) { 9 | font-weight: normal; 10 | color: @text-color-subtle; 11 | text-shadow: none; 12 | } 13 | .text(highlight) { 14 | font-weight: normal; 15 | color: @text-color-highlight; 16 | } 17 | .text(selected) { 18 | font-weight: normal; 19 | color: @text-color-selected; 20 | text-shadow: none; 21 | } 22 | 23 | .text(info) { 24 | color: @text-color-info; 25 | text-shadow: none; 26 | } 27 | .text(success) { 28 | color: @text-color-success; 29 | text-shadow: none; 30 | } 31 | .text(warning) { 32 | color: @text-color-warning; 33 | text-shadow: none; 34 | } 35 | .text(error) { 36 | color: @text-color-error; 37 | text-shadow: none; 38 | } 39 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | // Colors 2 | 3 | @text-color: #444; 4 | @text-color-subtle: #999; 5 | @text-color-highlight: #000; 6 | @text-color-selected: #fff; 7 | 8 | @text-color-info: #5293d8; 9 | @text-color-success: #45A815; 10 | @text-color-warning: #CD8E00; 11 | @text-color-error: #c00; 12 | 13 | @text-color-ignored: @text-color-subtle; 14 | @text-color-added: @text-color-success; 15 | @text-color-renamed: @text-color-info; 16 | @text-color-modified: @text-color-warning; 17 | @text-color-removed: @text-color-error; 18 | 19 | @background-color-info: #0098ff; 20 | @background-color-success: #17ca65; 21 | @background-color-warning: #ff4800; 22 | @background-color-error: #c00; 23 | @background-color-highlight: rgba(0, 0, 0, .1); 24 | @background-color-selected: #6aa5e9; 25 | 26 | @app-background-color: #ccc; 27 | 28 | @base-background-color: #f4f4f4; 29 | @base-border-color: #9f9f9f; 30 | 31 | @pane-item-background-color: @base-background-color; 32 | @pane-item-border-color: @base-border-color; 33 | 34 | @input-background-color: white; 35 | @input-border-color: fadeout(@base-border-color, 10%); 36 | 37 | @tool-panel-background-color: @base-background-color; 38 | @tool-panel-border-color: @base-border-color; 39 | 40 | @inset-panel-background-color: #fff; 41 | @inset-panel-border-color: fadeout(@base-border-color, 10%); 42 | 43 | @panel-heading-background-color: #c3c3c3; 44 | @panel-heading-border-color: transparent; 45 | 46 | @overlay-background-color: #ececec; 47 | @overlay-border-color: @base-border-color; 48 | 49 | @button-background-color: @base-background-color; 50 | @button-background-color-hover: lighten(@button-background-color, 5%); 51 | @button-background-color-selected: #888; 52 | @button-border-color: rgba(0, 0, 0, 0.15); 53 | 54 | @tab-bar-background-color: #d8d8d8; 55 | @tab-bar-border-color: #ddd; 56 | @tab-background-color: #e8e8e8; 57 | @tab-background-color-active: #f0f0f0; 58 | @tab-border-color: lighten(@base-border-color, 10%); 59 | 60 | @tree-view-background-color: #eee; 61 | @tree-view-border-color: @base-border-color; 62 | 63 | @scrollbar-background-color: #F9F9F9; // Needs to be opaque -> atom/atom/issues/4578 64 | @scrollbar-color: #C1C1C1; 65 | 66 | @ui-site-color-1: @background-color-success; // green 67 | @ui-site-color-2: @background-color-info; // blue 68 | @ui-site-color-3: @background-color-warning; // orange 69 | @ui-site-color-4: #db2ff4; // purple 70 | @ui-site-color-5: #f5e11d; // yellow 71 | 72 | 73 | // Sizes 74 | 75 | @font-size: 11px; 76 | @input-font-size: 14px; 77 | @disclosure-arrow-size: 12px; 78 | 79 | @component-padding: 10px; 80 | @component-icon-padding: 5px; 81 | @component-icon-size: 16px; 82 | @component-line-height: 25px; 83 | @component-border-radius: 2px; 84 | 85 | @tab-height: 26px; 86 | 87 | 88 | // Other 89 | 90 | @font-family: system-ui; 91 | -------------------------------------------------------------------------------- /styles/utilities.less: -------------------------------------------------------------------------------- 1 | .key-binding { 2 | background: #fff; 3 | border: 1px solid lighten(@base-border-color, 20%); 4 | text-shadow: none; 5 | display: inline-block; 6 | line-height: 100%; 7 | border-radius: @component-border-radius; 8 | margin-left: @component-icon-padding; 9 | font-family: Helvetica, Arial, sans-serif; 10 | font-size: @font-size - 1px; 11 | padding: @component-padding / 2; 12 | } 13 | 14 | .badge { 15 | .text(highlight); 16 | background: @background-color-highlight; 17 | } 18 | --------------------------------------------------------------------------------