├── .gitignore ├── LICENSE.md ├── README.md ├── index.less ├── lib └── unity-ui.coffee ├── package.json └── styles ├── badges.less ├── buttons.less ├── docks.less ├── editor.less ├── git.less ├── images └── loading-spin.svg ├── lists.less ├── overlay.less ├── overrides.less ├── panels.less ├── panes.less ├── project-find.less ├── release-notes.less ├── settings.less ├── site.less ├── spinner.less ├── tabs.less ├── text.less ├── tooltip.less ├── tree-view.less ├── ui-mixins.less └── ui-variables.less /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Steve Smith 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Unity UI 2 | 3 | An Atom theme for a more native experience on OS X 4 | 5 | ![unity](https://cloud.githubusercontent.com/assets/1680/6204067/d17b682c-b50a-11e4-8aa7-77f407583779.png) 6 | 7 | ## Install 8 | 9 | From the command line: 10 | 11 | ```bash 12 | $ apm install unity-ui 13 | ``` 14 | 15 | Alternatively, open Atom Preferences, select Themes > Search for `unity`, 16 | then Install. 17 | 18 | Activate the theme by selecting the Themes section of Preferences. 19 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | @import (reference) "styles/ui-variables"; 2 | @import (reference) "styles/ui-mixins"; 3 | @import (reference) "octicon-mixins"; 4 | 5 | @import "styles/badges"; 6 | @import "styles/buttons"; 7 | @import "styles/docks"; 8 | @import "styles/editor"; 9 | @import "styles/git"; 10 | @import "styles/lists"; 11 | @import "styles/overlay"; 12 | @import "styles/overrides"; 13 | @import "styles/panes"; 14 | @import "styles/panels"; 15 | @import "styles/project-find"; 16 | @import "styles/release-notes"; 17 | @import "styles/settings"; 18 | @import "styles/site"; 19 | @import "styles/spinner"; 20 | @import "styles/tabs"; 21 | @import "styles/text"; 22 | @import "styles/tooltip"; 23 | @import "styles/tree-view"; 24 | -------------------------------------------------------------------------------- /lib/unity-ui.coffee: -------------------------------------------------------------------------------- 1 | addClass = (el, klass) -> 2 | return unless el 3 | el.className = "#{el.className} #{klass}" 4 | 5 | removeClass = (el, klass) -> 6 | return unless el 7 | classes = el.className.split(' ') 8 | index = classes.indexOf(klass) 9 | classes.splice(index, 1) if index >= 0 10 | el.className = classes.join(' ') 11 | 12 | module.exports = 13 | config: 14 | showIcons: 15 | type: 'boolean' 16 | default: false 17 | colorStatusIndicatorsInTreeView: 18 | type: 'boolean' 19 | default: false 20 | 21 | activate: (state) -> 22 | atom.config.observe 'unity-ui.showIcons', -> 23 | body = document.body 24 | if atom.config.get('unity-ui.showIcons') 25 | addClass(body, 'unity-ui-show-icons') 26 | else 27 | removeClass(body, 'unity-ui-show-icons') 28 | atom.config.observe 'unity-ui.colorStatusIndicatorsInTreeView', -> 29 | treeView = document.querySelector('.tree-view') 30 | if atom.config.get('unity-ui.colorStatusIndicatorsInTreeView') 31 | removeClass(treeView, 'unity-ui-fade-status') 32 | else 33 | addClass(treeView, 'unity-ui-fade-status') 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unity-ui", 3 | "theme": "ui", 4 | "version": "2.1.11", 5 | "main": "./lib/unity-ui", 6 | "private": false, 7 | "description": "An Atom theme for a more native experience on OS X.", 8 | "repository": "https://github.com/orderedlist/unity-ui", 9 | "license": "MIT", 10 | "engines": { 11 | "atom": ">0.50.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /styles/badges.less: -------------------------------------------------------------------------------- 1 | .badge.icon { 2 | padding:@component-padding/3 @component-padding/1.5; 3 | } 4 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | .btn { 2 | cursor: default; 3 | font-size:@font-size; 4 | height:24px; 5 | border-top: 1px solid #c8c8c8; 6 | border-left: 1px solid #c2c2c2; 7 | border-right: 1px solid #c2c2c2; 8 | border-bottom: 1px solid #acacac; 9 | 10 | &:active { 11 | background:#f4f4f4; 12 | box-shadow:inset #fff 0 1px 0, rgba(0,0,0,0.1) 0 1px 0; 13 | outline:none; 14 | } 15 | 16 | &:focus, &.selected { 17 | box-shadow:0 0 0px 3px #92bcea; 18 | outline:none; 19 | } 20 | 21 | &.btn-primary { 22 | color:@text-color-selected; 23 | background:@background-color-selected; 24 | 25 | &:hover { 26 | color:@text-color-selected; 27 | } 28 | 29 | &:active, &.selected { 30 | background:darken(@background-color-selected, 10%); 31 | color:@text-color-selected; 32 | } 33 | } 34 | 35 | &.btn-info { 36 | color:@text-color-selected; 37 | background:@background-color-info; 38 | 39 | &:hover { 40 | color:@text-color-selected; 41 | } 42 | 43 | &:active, &.selected { 44 | background:darken(@background-color-info, 10%); 45 | color:@text-color-selected; 46 | } 47 | } 48 | 49 | &.btn-success { 50 | color:@text-color-selected; 51 | background:@background-color-success; 52 | 53 | &:hover { 54 | color:@text-color-selected; 55 | } 56 | 57 | &:active, &.selected { 58 | background:darken(@background-color-success, 10%); 59 | color:@text-color-selected; 60 | } 61 | } 62 | 63 | &.btn-warning { 64 | color:@text-color-selected; 65 | background:@background-color-warning; 66 | 67 | &:hover { 68 | color:@text-color-selected; 69 | } 70 | 71 | &:active, &.selected { 72 | background:darken(@background-color-warning, 10%); 73 | color:@text-color-selected; 74 | } 75 | } 76 | 77 | &.btn-error { 78 | color:@text-color-selected; 79 | background:@background-color-error; 80 | 81 | &:hover { 82 | color:@text-color-selected; 83 | } 84 | 85 | &:active, &.selected { 86 | background:darken(@background-color-error, 10%); 87 | color:@text-color-selected; 88 | } 89 | } 90 | 91 | &.icon:before { 92 | margin-right:5px; 93 | } 94 | 95 | } 96 | 97 | .btn-group { 98 | .btn { 99 | margin:0; 100 | border-top: 1px solid #c8c8c8; 101 | border-left: 1px solid #c2c2c2; 102 | border-right: 1px solid #c2c2c2; 103 | border-bottom: 1px solid #acacac; 104 | 105 | &:first-child { 106 | border-left: 1px solid #c2c2c2; 107 | } 108 | 109 | &:last-child { 110 | border-right: 1px solid #c2c2c2; 111 | } 112 | 113 | &.selected { 114 | background:#6a6a6a; 115 | color:#fff; 116 | box-shadow:inset rgba(0,0,0,0.15) 1px 0 0, inset rgba(0,0,0,0.15) -1px 0 0; 117 | 118 | & + .btn { 119 | box-shadow:rgba(0,0,0,0.1) 0 1px 0; 120 | 121 | &.selected { 122 | box-shadow:inset rgba(0,0,0,0.15) -1px 0 0, rgba(0,0,0,0.1) 0 1px 0; 123 | } 124 | } 125 | } 126 | } 127 | } 128 | 129 | .find-and-replace .btn-group-options.btn-group .btn { 130 | width:35px; 131 | 132 | &:first-child { 133 | width:34px; 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /styles/docks.less: -------------------------------------------------------------------------------- 1 | .atom-dock-inner.atom-dock-open { 2 | &.left { 3 | border-right: 1px solid @tree-view-border-color; 4 | } 5 | 6 | &.right { 7 | border-left: 1px solid @tree-view-border-color; 8 | } 9 | } 10 | 11 | .atom-dock-toggle-button { 12 | width: 200px; 13 | height: 200px; 14 | 15 | &.left, 16 | &.right { 17 | width: 50px; 18 | } 19 | 20 | .atom-dock-toggle-button-inner { 21 | width: 200px; 22 | height: 200px; 23 | border-radius: 100%; 24 | border: 0; 25 | background: rgba(0,0,0,0.4); 26 | 27 | 28 | &.left { 29 | .icon { 30 | font-size: 64px; 31 | transform: translateX(71px) translateY(-10px); 32 | 33 | &:before { 34 | font-size: 32px; 35 | } 36 | } 37 | } 38 | 39 | &.right { 40 | .icon { 41 | font-size: 64px; 42 | transform: translateX(-71px) translateY(-10px); 43 | 44 | &:before { 45 | font-size: 32px; 46 | } 47 | } 48 | } 49 | } 50 | } 51 | 52 | .atom-dock-resize-handle { 53 | position: absolute; 54 | top: 0; 55 | bottom: 0; 56 | z-index: 100; 57 | 58 | &.left { 59 | right: -3px; 60 | width: 8px; 61 | } 62 | 63 | &.right { 64 | left: -3px; 65 | width: 8px; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | atom-text-editor[mini] { 2 | line-height:18px; 3 | font-size:@font-size; 4 | padding:2px 3px; 5 | border-radius: 0; 6 | color: @text-color-highlight; 7 | border: 1px solid #dedede; 8 | font-family:@font-family; 9 | background-color: @input-background-color; 10 | box-shadow:0 0 3px 7px fade(#92bcea, 0); 11 | transition:box-shadow 0.2s ease-in-out; 12 | min-height:24px; 13 | 14 | .placeholder-text { 15 | color: @text-color-subtle; 16 | } 17 | 18 | .selection .region { 19 | background-color: #ededed; 20 | } 21 | 22 | .cursor { 23 | border-color: #222; 24 | border-width: 1px; 25 | } 26 | 27 | &.is-focused { 28 | background-color: #fff; 29 | opacity:1; 30 | outline:none; 31 | box-shadow:0 0 0px 3px #92bcea; 32 | border: 1px solid transparent; 33 | border-radius: @component-border-radius; 34 | 35 | .selection .region { 36 | background-color: #B2D7FF !important; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /styles/git.less: -------------------------------------------------------------------------------- 1 | .status { .text(normal); } 2 | .status-added { .text(success); } // green 3 | .status-ignored { .text(subtle); } // faded 4 | .status-modified { .text(warning); } // orange 5 | .status-removed { .text(error); } // red 6 | .status-renamed { .text(info); } // blue 7 | -------------------------------------------------------------------------------- /styles/images/loading-spin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | @item-height: 21px; 2 | 3 | .list-tree { 4 | li:not(.list-nested-item), 5 | li.list-nested-item > .list-item { 6 | line-height:@item-height; 7 | min-height:@item-height; 8 | } 9 | 10 | &.has-collapsable-children .list-nested-item.collapsed > .list-item:before { 11 | content:'▶'; 12 | font-size:10px; 13 | top:0px; 14 | left:-7px; 15 | opacity:0.5; 16 | } 17 | 18 | &.has-collapsable-children .list-nested-item > .list-item:before { 19 | content:'▼'; 20 | font-size:10px; 21 | top:1px; 22 | left:-7px; 23 | opacity:0.5; 24 | } 25 | } 26 | 27 | .list-group, .list-tree { 28 | li { 29 | min-height:@item-height; 30 | box-sizing:border-box; 31 | } 32 | 33 | .icon:before { 34 | margin-right:4px; 35 | } 36 | 37 | .no-icon { 38 | padding-left:20px; 39 | } 40 | 41 | .icon:before { 42 | display:none; 43 | } 44 | 45 | .unity-ui-show-icons & .icon:before { 46 | display:inline-block; 47 | } 48 | } 49 | 50 | .list-group .character-match { 51 | color: @text-color-highlight; 52 | font-weight: inherit; 53 | } 54 | 55 | .list-group .selected .character-match { 56 | color: @background-color-highlight; 57 | } 58 | 59 | .select-list.popover-list { 60 | color:@text-color; 61 | box-shadow: 0 5px 20px fade(#000, 20%), fade(#000, 10%) 0 0 0 1px; 62 | padding:0 0 0; 63 | border-radius:5px; 64 | font-size:@font-size; 65 | overflow:hidden; 66 | background:@tool-panel-background-color; 67 | background-clip: padding-box; 68 | 69 | .list-group { 70 | margin:0; 71 | width:100%; 72 | border-radius:5px; 73 | background-clip: padding-box; 74 | } 75 | 76 | atom-text-editor[mini] { 77 | margin:@component-padding @component-padding @component-padding+1; 78 | 79 | & ~ .list-group { 80 | border-radius:0 0 5px 5px; 81 | border-top:1px solid fade(@pane-item-border-color, 50%); 82 | } 83 | } 84 | 85 | .list-group li { 86 | background:#fff; 87 | font-size:@font-size + 1; 88 | padding:0 @component-padding; 89 | line-height:@component-padding * 2.5; 90 | border-top: 1px solid fade(@overlay-border-color, 5%); 91 | 92 | &:first-of-type { 93 | border:none; 94 | } 95 | 96 | &.selected { 97 | background:@background-color-selected; 98 | color:@text-color-selected; 99 | } 100 | } 101 | } 102 | 103 | .ui-sortable { 104 | li { 105 | line-height: 2.5; 106 | } 107 | 108 | // For sortable lists in the settings view 109 | li.ui-sortable-placeholder { 110 | visibility: visible !important; 111 | background-color: darken(@pane-item-background-color, 10%); 112 | } 113 | } 114 | 115 | .select-list ol.list-group, 116 | &.select-list ol.list-group { 117 | overflow:hidden; 118 | background-clip:content-box; 119 | // We want to highlight the background of the list items because we dont 120 | // know their size. 121 | li.selected { 122 | background-color: @background-color-selected; 123 | &:before{ display: none; } 124 | } 125 | } 126 | 127 | .list-group { 128 | .key-binding { 129 | background-color:#eee; 130 | margin-right:4px; 131 | font-size:13px; 132 | vertical-align: middle; 133 | } 134 | 135 | .selected .key-binding { 136 | background:#fff; 137 | color:#555; 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /styles/overlay.less: -------------------------------------------------------------------------------- 1 | atom-panel.modal { 2 | color: @text-color; 3 | background-color: transparent; 4 | padding: @component-padding @component-padding 0; 5 | border-top:none !important; 6 | 7 | .loading { 8 | position:absolute; 9 | right:@component-padding * 1.5; 10 | top:4px; 11 | color:@text-color-subtle; 12 | vertical-align:middle; 13 | font-size:@font-size + 1; 14 | 15 | .badge { 16 | margin-top:-1px; 17 | } 18 | } 19 | 20 | .error-message { 21 | border-top:1px solid fade(@pane-item-border-color, 50%); 22 | background:#fff; 23 | padding:@component-padding; 24 | line-height:1; 25 | color:@text-color-subtle; 26 | margin:0 -@component-padding; 27 | font-style:italic; 28 | 29 | &:empty { 30 | display:none; 31 | } 32 | } 33 | 34 | atom-text-editor[mini] { 35 | margin: 0 0 @component-padding; 36 | font-size:@font-size + 1; 37 | } 38 | 39 | .select-list ol.list-group, 40 | &.select-list ol.list-group { 41 | background-color: #fff; 42 | margin:0 -@component-padding; 43 | border-top:1px solid fade(@pane-item-border-color, 50%); 44 | font-size:@font-size + 1; 45 | 46 | li { 47 | padding: @component-padding; 48 | border-bottom: 1px solid fade(@overlay-border-color, 5%); 49 | font-weight:600; 50 | 51 | &:last-of-type { 52 | border-bottom: none; 53 | } 54 | 55 | &.two-lines { 56 | padding: @component-padding/2 @component-padding; 57 | 58 | &.selected .secondary-line { 59 | color:#fff; 60 | } 61 | } 62 | 63 | .status.icon { 64 | float: right; 65 | margin-left: @component-icon-padding; 66 | &:before { 67 | margin-right: 0; 68 | } 69 | } 70 | 71 | &.selected { 72 | background:@background-color-selected; 73 | color:@text-color-selected; 74 | 75 | .status.icon { 76 | color: @text-color-selected; 77 | } 78 | } 79 | } 80 | } 81 | 82 | .primary-line.icon:before { 83 | display:none; 84 | } 85 | 86 | .secondary-line { 87 | opacity:0.6; 88 | font-size:@font-size; 89 | font-weight:normal; 90 | 91 | &.no-icon { 92 | padding-left:0; 93 | } 94 | 95 | &.icon:before { 96 | display:none; 97 | } 98 | } 99 | 100 | & > * { 101 | position: relative; // fixes stacking order 102 | } 103 | 104 | // Container 105 | &:before { 106 | content: ""; 107 | position: absolute; 108 | top: 0; 109 | left: 0; 110 | right: 0; 111 | bottom: 0; 112 | z-index: 0; 113 | background-color: @overlay-background-color; 114 | box-shadow: 0 5px 20px fade(#000, 20%), fade(#000, 10%) 0 0 0 1px; 115 | } 116 | 117 | } 118 | -------------------------------------------------------------------------------- /styles/overrides.less: -------------------------------------------------------------------------------- 1 | .deprecation-cop { 2 | background:@pane-item-background-color !important; 3 | 4 | .deprecation-info:hover { 5 | color:fadeout(@text-color-selected, 50%, @background-color-selected); 6 | 7 | .text-highlight { 8 | color:@text-color-selected; 9 | } 10 | } 11 | } 12 | 13 | autocomplete-suggestion-list.select-list.popover-list { 14 | 15 | .suggestion-list-scroller { 16 | border-radius:5px 5px 0 0; 17 | 18 | .selected .icon { 19 | color:inherit; 20 | background-color:rgba(0,0,0,0.1); 21 | } 22 | } 23 | 24 | .suggestion-description { 25 | border-top:1px solid fade(@pane-item-border-color, 50%); 26 | padding:6px 8px; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /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 | position: relative; 10 | 11 | &.top { 12 | background:@pane-item-background-color; 13 | } 14 | 15 | &.left { 16 | border-right: 1px solid @tool-panel-border-color; 17 | background:@pane-item-background-color; 18 | } 19 | &.right { 20 | border-left: 1px solid @tool-panel-border-color; 21 | background:@pane-item-background-color; 22 | } 23 | &.bottom { 24 | border-top: 1px solid @tool-panel-border-color; 25 | background:@pane-item-background-color; 26 | } 27 | } 28 | 29 | .inset-panel { 30 | position: relative; 31 | background-color: @inset-panel-background-color; 32 | &.bordered { 33 | border: 1px solid @base-border-color; 34 | border-radius: @component-border-radius; 35 | } 36 | & .panel-heading { 37 | border-color: @inset-panel-border-color; 38 | } 39 | } 40 | 41 | .panel-heading { 42 | border-top: 1px solid fade(@panel-heading-border-color, 50%); 43 | border-bottom: 1px solid @panel-heading-border-color; 44 | background-color: @panel-heading-background-color; 45 | font-weight:600; 46 | 47 | &:first-of-type { 48 | border-top:none; 49 | } 50 | } 51 | 52 | .status-bar { 53 | color: fadeout(@text-color-highlight, 30%); 54 | height:26px; 55 | line-height:16px; 56 | background:linear-gradient(#e4e4e4, #d8d8d8); 57 | border-top: 1px solid #c1c1c1; 58 | 59 | .flexbox-repaint-hack { 60 | padding:3px 0; 61 | } 62 | 63 | .status-bar-left { 64 | margin-left:@component-padding; 65 | } 66 | 67 | .status-bar-right { 68 | margin-right:@component-padding; 69 | } 70 | } 71 | 72 | .find-and-replace .find-meta-container { 73 | margin-top:4px; 74 | margin-right: 2px; 75 | font-size:1em; 76 | color:@text-color-subtle; 77 | line-height: 1.5; 78 | top: inherit; 79 | } 80 | -------------------------------------------------------------------------------- /styles/panes.less: -------------------------------------------------------------------------------- 1 | atom-pane-axis.horizontal { 2 | atom-pane:not(:first-child) { 3 | border-left: 1px solid @tool-panel-border-color; 4 | } 5 | } 6 | 7 | atom-pane-axis.vertical { 8 | atom-pane { 9 | border-left: 1px solid @tool-panel-border-color; 10 | } 11 | 12 | &:first-child { 13 | atom-pane { 14 | border-left:none; 15 | } 16 | } 17 | 18 | atom-pane:not(:first-child) { 19 | border-top: 1px solid @tool-panel-border-color; 20 | } 21 | } 22 | 23 | atom-pane-resize-handle { 24 | &.vertical { 25 | margin-top: -4px; 26 | margin-bottom: -4px; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /styles/project-find.less: -------------------------------------------------------------------------------- 1 | .path-details { 2 | background:@tool-panel-background-color; 3 | margin:0 -@component-padding; 4 | padding:@component-padding/4 @component-padding; 5 | } 6 | -------------------------------------------------------------------------------- /styles/release-notes.less: -------------------------------------------------------------------------------- 1 | .release-notes { 2 | padding:20px 24px; 3 | 4 | h1 { 5 | font:100 44px/1 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue"; 6 | border-bottom:1px solid fade(@pane-item-border-color, 20%); 7 | margin:0 0 12px; 8 | padding:0 0 12px; 9 | } 10 | 11 | h3 { 12 | font:500 24px/1.3 "Helvetica Neue"; 13 | margin:12px 0; 14 | padding:0; 15 | } 16 | 17 | ul { 18 | margin-bottom:24px; 19 | margin:0 0 24px 24px; 20 | padding:0; 21 | } 22 | 23 | li { 24 | color:#727272; 25 | margin:0 0 8px; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /styles/settings.less: -------------------------------------------------------------------------------- 1 | .settings-view { 2 | 3 | .setting-title { 4 | font-size: 1em; 5 | color: #222; 6 | } 7 | 8 | .icon:before { 9 | opacity:0.3; 10 | } 11 | 12 | .checkbox { 13 | padding-left: 0; 14 | 15 | input[type="checkbox"] { 16 | all: unset; 17 | -webkit-appearance: checkbox; 18 | cursor: default; 19 | margin: 0 4px 0 0; 20 | &:before { 21 | content: none; 22 | } 23 | &:after { 24 | content: none; 25 | } 26 | } 27 | 28 | .setting-description { 29 | padding-left: 16px; 30 | } 31 | 32 | label { 33 | cursor: default; 34 | } 35 | } 36 | 37 | .config-menu { 38 | background:@pane-item-background-color; 39 | border-color:fade(@pane-item-border-color, 30%); 40 | padding-top:0; 41 | 42 | .button-area { 43 | margin:@component-padding; 44 | } 45 | 46 | .panels-menu { 47 | font-weight:600; 48 | 49 | li { 50 | border-bottom:1px solid fade(@pane-item-border-color, 20%); 51 | 52 | a { 53 | cursor: default; 54 | padding:0 @component-padding; 55 | line-height:@component-padding*3; 56 | } 57 | } 58 | } 59 | } 60 | 61 | div > section.section.settings-panel { 62 | border-top:1px solid fade(@pane-item-border-color, 20%); 63 | } 64 | 65 | .section-heading-count { 66 | margin-left: 1em; 67 | margin-top: -1px; 68 | color: #999; 69 | padding: 0; 70 | background-color: inherit; 71 | } 72 | 73 | .sub-section .sub-section-heading { 74 | cursor: default; 75 | 76 | &:after { 77 | line-height: 36px; 78 | } 79 | } 80 | 81 | .section, .section:first-child, .section:last-child { 82 | padding:@component-padding; 83 | border-color:fade(@pane-item-border-color, 20%); 84 | 85 | .section-container { 86 | max-width:100%; 87 | } 88 | 89 | .section-body { 90 | max-width:800px; 91 | } 92 | 93 | .editor-container { 94 | padding:0 0 @component-padding; 95 | } 96 | 97 | .section-heading, .sub-section h3 { 98 | border-bottom:1px solid fade(@pane-item-border-color, 20%); 99 | background:@tool-panel-background-color; 100 | font-size:13px; 101 | font-weight:600; 102 | margin:-@component-padding -@component-padding @component-padding; 103 | padding:0 @component-padding; 104 | line-height:@component-padding*3; 105 | color:@text-color; 106 | display: block; 107 | 108 | .btn { 109 | top:5px; 110 | 111 | &.pull-right { 112 | margin-left: @component-padding/2; 113 | } 114 | } 115 | 116 | & + .container { 117 | padding-top:0; 118 | } 119 | } 120 | 121 | .updates-heading-container .section-heading { 122 | border: 0; 123 | background: none; 124 | margin: 0; 125 | } 126 | 127 | .sub-section { 128 | margin-top:@component-padding; 129 | clear:both; 130 | } 131 | 132 | .sub-section h3 { 133 | border-top:1px solid fade(@pane-item-border-color, 20%); 134 | } 135 | } 136 | 137 | .updates-heading-container { 138 | border-bottom:1px solid fade(@pane-item-border-color, 20%); 139 | background:@tool-panel-background-color; 140 | margin: -@component-padding -@component-padding @component-padding; 141 | } 142 | 143 | .table { 144 | th { 145 | border:none; 146 | } 147 | 148 | td { 149 | border-color:fade(@pane-item-border-color, 20%); 150 | } 151 | } 152 | 153 | .packages { 154 | .featured-message { 155 | margin:@component-padding 0; 156 | } 157 | 158 | .search-container { 159 | margin:-@component-padding 0 0; 160 | 161 | .btn-group { 162 | margin-top:@component-padding; 163 | } 164 | } 165 | } 166 | 167 | .installed-package-view, .available-package-view, .package-update-view .thumbnail { 168 | background:@tool-panel-background-color; 169 | border-radius:5px; 170 | border-color:fade(@pane-item-border-color, 20%); 171 | padding:@component-padding; 172 | margin-bottom:@component-padding; 173 | 174 | .card-name { 175 | font-weight:600; 176 | } 177 | 178 | .package-description { 179 | color:@text-color-subtle; 180 | } 181 | 182 | .meta > div { 183 | margin-top:@component-padding / 2; 184 | } 185 | 186 | .meta .author { 187 | margin-left:8px; 188 | } 189 | 190 | .link { 191 | margin:0; 192 | } 193 | 194 | .text { 195 | margin:0 0 @component-padding 196 | } 197 | } 198 | 199 | .themes-panel .control-group { 200 | margin-top:@component-padding; 201 | } 202 | 203 | .breadcrumb { 204 | border-bottom:1px solid fade(@pane-item-border-color, 20%); 205 | background:@tool-panel-background-color; 206 | font-size:13px; 207 | font-weight:600; 208 | margin:0; 209 | padding:0 @component-padding; 210 | line-height:@component-padding*3; 211 | color:@text-color; 212 | 213 | & + .section { 214 | margin-top:-1px; 215 | } 216 | } 217 | 218 | .package-update-view.col-md-6 { 219 | padding:0 @component-padding; 220 | } 221 | } 222 | -------------------------------------------------------------------------------- /styles/site.less: -------------------------------------------------------------------------------- 1 | .ui-site-1 { 2 | background-color: @ui-site-color-1; 3 | } 4 | 5 | .ui-site-2 { 6 | background-color: @ui-site-color-2; 7 | } 8 | 9 | .ui-site-3 { 10 | background-color: @ui-site-color-3; 11 | } 12 | 13 | .ui-site-4 { 14 | background-color: @ui-site-color-4; 15 | } 16 | 17 | .ui-site-5 { 18 | background-color: @ui-site-color-5; 19 | } 20 | -------------------------------------------------------------------------------- /styles/spinner.less: -------------------------------------------------------------------------------- 1 | .loading-spinner(@size) { 2 | width: @size; 3 | height: @size; 4 | display: block; 5 | 6 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSIjNzI3MjcyIj4KICA8cGF0aCBvcGFjaXR5PSIuMjUiIGQ9Ik0xNiAwIEExNiAxNiAwIDAgMCAxNiAzMiBBMTYgMTYgMCAwIDAgMTYgMCBNMTYgNCBBMTIgMTIgMCAwIDEgMTYgMjggQTEyIDEyIDAgMCAxIDE2IDQiLz4KICA8cGF0aCBkPSJNMTYgMCBBMTYgMTYgMCAwIDEgMzIgMTYgTDI4IDE2IEExMiAxMiAwIDAgMCAxNiA0eiI+CiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZnJvbT0iMCAxNiAxNiIgdG89IjM2MCAxNiAxNiIgZHVyPSIwLjhzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L3BhdGg+Cjwvc3ZnPgo=); 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(12px); 29 | } 30 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | .tab-bar { 2 | border-top:0; 3 | border-bottom:1px solid #b7b5b7; 4 | border-radius: 0; 5 | font-size:@font-size - 1; 6 | height:@tab-height; 7 | overflow: hidden; 8 | background: linear-gradient(@tab-background-color,#C7C6C7); 9 | width:100%; 10 | padding:0; 11 | -webkit-transform:scale(1); 12 | 13 | .tab { 14 | width:100%; 15 | max-width: 100%; 16 | box-sizing:border-box; 17 | padding:0 20px!important; 18 | line-height:@tab-height; 19 | height: @tab-height; 20 | color:#696869; 21 | text-align:center; 22 | position:relative; 23 | border-left:1px solid #a4a2a4; 24 | background: linear-gradient(#c2c0c2, #bbb9bb); 25 | flex: 1; 26 | 27 | &:first-child { 28 | border-left:none; 29 | } 30 | 31 | &:last-child { 32 | border-right: none; 33 | } 34 | 35 | .title.icon::before { 36 | font-size: 12px; 37 | height: 12px; 38 | width: 12px; 39 | } 40 | 41 | &:hover { 42 | background: linear-gradient(#b9b7b9, #b2b0b2); 43 | } 44 | } 45 | 46 | .tab.active, 47 | .tab:hover.active { 48 | color:#202020; 49 | background: linear-gradient(#dedcde, #d7d5d7); 50 | border-width:1px 0 1px 1px; 51 | border-top-color:#B5B4B5; 52 | border-left-color:#a2a1a2; 53 | border-bottom-color:#A8A7A8; 54 | width:100%; 55 | flex: 1; 56 | 57 | & .title { 58 | padding:0; 59 | } 60 | 61 | &:first-child { 62 | border-left:none; 63 | } 64 | 65 | &:last-child { 66 | border-right: none; 67 | } 68 | } 69 | 70 | .tab .close-icon { 71 | color:rgb(93, 93, 93) !important; 72 | cursor:default; 73 | top:4px; 74 | left:4px; 75 | height:16px; 76 | width:16px; 77 | right:auto; 78 | position:absolute; 79 | opacity:0; 80 | border-radius:2px; 81 | display:none; 82 | transition:opacity 0.2s ease-in-out, background 0.2s ease-in-out; 83 | 84 | &:before { 85 | content:'✕'; 86 | width:16px; 87 | height:16px; 88 | line-height: 17px; 89 | font-size: 11px; 90 | display: block; 91 | } 92 | 93 | &:hover { 94 | background: linear-gradient(#a3a1a3, #9f9d9f); 95 | } 96 | } 97 | 98 | .tab.active .close-icon:hover { 99 | background: linear-gradient(#c5c3c5, #c1bfc1); 100 | } 101 | 102 | &:hover .tab { 103 | transition:background 0.2s linear; 104 | 105 | .close-icon { 106 | display:block; 107 | } 108 | } 109 | 110 | .tab.modified:not(:hover) .close-icon { 111 | opacity:1; 112 | top: 7px; 113 | left: 8px; 114 | display:inline-block; 115 | } 116 | 117 | .tab:hover .close-icon { 118 | opacity:1; 119 | } 120 | 121 | .is-blurred & { 122 | background:#E4E4E4; 123 | 124 | .tab { 125 | border-right-color:#ADADAD; 126 | border-left-color:#ADADAD; 127 | color:#727272; 128 | background:#ECECEC; 129 | } 130 | 131 | .tab.active, 132 | .tab:hover.active { 133 | background:#F5F5F5; 134 | } 135 | } 136 | 137 | .icon:before { 138 | margin-right:3px; 139 | } 140 | 141 | // Dragging ---------------------- 142 | 143 | .tab.is-dragging { 144 | opacity: .5; 145 | .close-icon, 146 | &:before { 147 | visibility: hidden; 148 | } 149 | } 150 | 151 | .placeholder { 152 | margin: 0; 153 | height: @tab-height; 154 | background: @background-color-selected; 155 | pointer-events: none; 156 | 157 | &:last-child { 158 | margin-left: -2px; 159 | } 160 | 161 | &:first-child { 162 | margin-left: 1px; 163 | } 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /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 | .icon:before { 21 | margin-right:4px; 22 | } 23 | 24 | .no-icon { 25 | padding-left:20px; 26 | } 27 | 28 | pre { 29 | box-shadow: none; 30 | color: @text-color; 31 | background: @inset-panel-background-color; 32 | border-radius: @component-border-radius; 33 | border: none; 34 | margin: 0; 35 | } 36 | 37 | code { 38 | .text(highlight); 39 | background: @background-color-highlight; 40 | border-radius: @component-border-radius; 41 | } 42 | 43 | .selected { .text(highlight); } 44 | 45 | .text-smaller { font-size: 0.9em; } 46 | 47 | .text-subtle { .text(subtle); } 48 | .text-highlight { .text(highlight); } 49 | 50 | .text-error { .text(error); } 51 | .text-info { 52 | .text(info); 53 | &:hover { color: @text-color-info; } 54 | } 55 | .text-warning { 56 | .text(warning); 57 | &:hover { color: @text-color-warning; } 58 | } 59 | .text-success { 60 | .text(success); 61 | &:hover { color: @text-color-success; } 62 | } 63 | 64 | .highlight-mixin { 65 | padding: 1px 4px; 66 | font-weight: bold; 67 | text-shadow: none; 68 | border-radius: @component-border-radius; 69 | color: @text-color-highlight; 70 | } 71 | 72 | .highlight { 73 | .highlight-mixin(); 74 | background-color: @background-color-highlight; 75 | } 76 | 77 | .highlight-color(@name, @color, @text-color) { 78 | .highlight-@{name} { 79 | .highlight-mixin(); 80 | background-color: fadeout(@color, 50%); 81 | } 82 | } 83 | .highlight-color(info, @background-color-info, @text-color-info); 84 | .highlight-color(warning, @background-color-warning, @text-color-warning); 85 | .highlight-color(error, @background-color-error, @text-color-error); 86 | .highlight-color(success, @background-color-success, @text-color-success); 87 | 88 | .results-view .path-details.list-item { 89 | color: darken(@text-color-highlight, 18%); 90 | } 91 | 92 | .results-view .selected { 93 | &::before { 94 | content: '\00a0'; 95 | } 96 | 97 | .highlight-info { 98 | color: inherit; 99 | } 100 | 101 | .preview { 102 | color: #fff; 103 | } 104 | } 105 | 106 | .background-message { 107 | font-weight:200; 108 | font-family: ".SFNSDisplay-Light", "Helvetica Neue"; 109 | 110 | .message { 111 | padding:0 10%; 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /styles/tooltip.less: -------------------------------------------------------------------------------- 1 | @tooltip-arrow-color: #f8f8f8; 2 | 3 | .tooltip-inner { 4 | background:#f8f8f8; 5 | border-radius:2px; 6 | font-size:12px; 7 | font-family: @font-family; 8 | color:@text-color-highlight; 9 | text-shadow:#fff 0 1px 0; 10 | padding:4px 8px; 11 | box-shadow:rgba(0,0,0,0.15) 0 0 0 1px, rgba(0,0,0,0.25) 0 1px 3px; 12 | word-wrap:break-word; 13 | max-width: none; 14 | } 15 | 16 | .tooltip { 17 | .tooltip-arrow { 18 | width: 10px; 19 | height: 10px; 20 | clip: rect(auto 9px 9px auto); 21 | 22 | &::after { 23 | content: ''; 24 | border: 1px solid rgba(0,0,0,0.20); 25 | background-color: @tooltip-arrow-color; 26 | width: 11px; 27 | height: 11px; 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | } 32 | } 33 | 34 | &.top .tooltip-arrow, 35 | &.top-left .tooltip-arrow, 36 | &.top-right .tooltip-arrow { 37 | -webkit-transform: rotate(225deg); 38 | transform: rotate(225deg); 39 | border: 0; 40 | } 41 | &.bottom .tooltip-arrow, 42 | &.bottom-left .tooltip-arrow, 43 | &.bottom-right .tooltip-arrow { 44 | -webkit-transform: rotate(45deg); 45 | transform: rotate(45deg); 46 | border: 0; 47 | } 48 | &.left .tooltip-arrow { 49 | -webkit-transform: rotate(135deg); 50 | transform: rotate(135deg); 51 | border: 0; 52 | } 53 | &.right .tooltip-arrow { 54 | -webkit-transform: rotate(315deg); 55 | transform: rotate(315deg); 56 | border: 0; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | @item-height: 21px; 2 | 3 | .tree-view-scroller { 4 | background:@tree-view-background-color; 5 | 6 | .is-blurred & { 7 | background:#f8f8f8; 8 | 9 | .selected:before { 10 | background:greyscale(@background-color-highlight); 11 | } 12 | } 13 | } 14 | 15 | .tree-view { 16 | font-size: @font-size - 1; 17 | -webkit-transform:scale(1); 18 | 19 | -webkit-backface-visibility:hidden; 20 | font-size:@font-size - 1; 21 | padding:4px 0 4px 15px; 22 | color:@text-color; 23 | 24 | .fullscreen & { 25 | border-top:none; 26 | } 27 | 28 | &:focus { 29 | .selected { 30 | & > .name, 31 | & > .header { 32 | color: @text-color-selected; 33 | } 34 | 35 | &:before { 36 | background: @background-color-selected; 37 | } 38 | } 39 | } 40 | 41 | li.selected { 42 | color:@text-color; 43 | 44 | &:before { 45 | background: @background-color-highlight; 46 | height:@item-height; 47 | } 48 | } 49 | 50 | .status, 51 | .status-added, 52 | .status-modified, 53 | .status-removed, 54 | .status-info { 55 | color:@text-color; 56 | } 57 | 58 | .status-added:after { 59 | .text(success); 60 | } 61 | 62 | .status-modified:after { 63 | .text(warning); 64 | } 65 | 66 | .status-removed:after { 67 | .text(error); 68 | } 69 | 70 | .status-renamed:after { 71 | .text(info); 72 | } 73 | 74 | .status-added:after, 75 | .status-modified:after { 76 | font-family:"Octicons Regular"; 77 | font-size:14px; 78 | line-height:1; 79 | content:'\f06b'; 80 | position:absolute; 81 | right:12px; 82 | margin-top:4px; 83 | height:10px; 84 | width:10px; 85 | z-index:5; 86 | -webkit-font-smoothing:antialiased; 87 | } 88 | 89 | &.unity-ui-fade-status { 90 | .status-added:after, 91 | .status-modified:after { 92 | color:@text-color; 93 | opacity:0.2; 94 | } 95 | } 96 | 97 | .expanded.new:before, 98 | .expanded.modified:before { 99 | display:none; 100 | } 101 | 102 | &:focus .selected.status-added:after, 103 | &:focus .selected.status-modified:after { 104 | color:#fff; 105 | } 106 | 107 | .status-modified:after { 108 | content:"\f06d"; 109 | } 110 | 111 | .collapsed.status-added:after, 112 | .collapsed.status-modified:after { 113 | margin-top:-17px; 114 | } 115 | 116 | .expanded.status-added:after, 117 | .expanded.status-modified:after { 118 | display:none; 119 | } 120 | } 121 | 122 | .tree-view-resizer { 123 | border-top:0; 124 | 125 | .tree-view-resize-handle { 126 | width: 8px; 127 | } 128 | } 129 | 130 | // 131 | // .list-tree, .list-group { 132 | // .entry, .list-item, .list-nested-item { 133 | // min-height:@item-height; 134 | // line-height:@item-height; 135 | // position:static; 136 | // padding-right:0; 137 | // } 138 | // 139 | // &.list-group li:not(.list-nested-item), .tree-view.list-tree li:not(.list-nested-item), .tree-view.list-group li.list-nested-item > .list-item, .tree-view.list-tree li.list-nested-item > .list-item { 140 | // line-height:@item-height; 141 | // } 142 | // 143 | // &.has-collapsable-children .list-nested-item.collapsed > .list-item:before { 144 | // content:'▶'; 145 | // font-size:10px; 146 | // top:1px; 147 | // left:-7px; 148 | // opacity:0.5; 149 | // } 150 | // 151 | // &.has-collapsable-children .list-nested-item > .list-item:before { 152 | // content:'▼'; 153 | // font-size:10px; 154 | // top:2px; 155 | // left:-7px; 156 | // opacity:0.5; 157 | // } 158 | // 159 | // .entry .name { 160 | // vertical-align:middle; 161 | // line-height:@item-height; 162 | // padding-right:18px; 163 | // } 164 | // 165 | // .entry.status-new > .name, 166 | // .entry.status-modified > .name { 167 | // padding-right:18px; 168 | // } 169 | // 170 | // .selected:before { 171 | // color:@text-color; 172 | // height:@item-height; 173 | // background:@background-color-highlight; 174 | // } 175 | // 176 | // &:focus .selected { 177 | // & > .name, & > .header { 178 | // color:@text-color-selected; 179 | // } 180 | // 181 | // &:before { 182 | // color:@text-color-selected; 183 | // background:@background-color-selected; 184 | // } 185 | // } 186 | // 187 | // &:focus .selected.new:before, 188 | // &:focus .selected.modified:before { 189 | // opacity:0.7; 190 | // } 191 | // 192 | // .status, 193 | // .status-added, 194 | // .status-modified, 195 | // .status-removed, 196 | // .status-renamed { 197 | // color:@text-color; 198 | // } 199 | // 200 | // .status-added:after { 201 | // .text(success); 202 | // } 203 | // 204 | // .status-modified:after { 205 | // .text(warning); 206 | // } 207 | // 208 | // .status-removed:after { 209 | // .text(error); 210 | // } 211 | // 212 | // .status-renamed:after { 213 | // .text(info); 214 | // } 215 | // 216 | // .status-added:after, 217 | // .status-modified:after { 218 | // font-family:"Octicons Regular"; 219 | // font-size:14px; 220 | // line-height:1; 221 | // content:'\f06b'; 222 | // position:absolute; 223 | // opacity:0.5; 224 | // right:12px; 225 | // margin-top:4px; 226 | // height:10px; 227 | // width:10px; 228 | // z-index:5; 229 | // -webkit-font-smoothing:antialiased; 230 | // } 231 | // 232 | // .expanded.new:before, 233 | // .expanded.modified:before { 234 | // display:none; 235 | // } 236 | // 237 | // &:focus .status-added:after, 238 | // &:focus .status-modified:after { 239 | // opacity:1.0; 240 | // } 241 | // 242 | // &:focus .selected.status-added:after, 243 | // &:focus .selected.status-modified:after { 244 | // color:#fff; 245 | // } 246 | // 247 | // .status-modified:after { 248 | // content:"\f06d"; 249 | // } 250 | // 251 | // .collapsed.status-added:after, 252 | // .collapsed.status-modified:after { 253 | // margin-top:-17px; 254 | // } 255 | // 256 | // .expanded.status-added:after, 257 | // .expanded.status-modified:after { 258 | // display:none; 259 | // } 260 | // 261 | // .icon:before { 262 | // top:1px; 263 | // margin-right:3px; 264 | // display:none; 265 | // } 266 | // 267 | // .icon-repo:before { 268 | // top:2px; 269 | // } 270 | // 271 | // .icon-file-directory:before { 272 | // top:2px; 273 | // } 274 | // } 275 | -------------------------------------------------------------------------------- /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/ui-variables.less: -------------------------------------------------------------------------------- 1 | // Colors 2 | @text-color: #555; 3 | @text-color-subtle: #999; 4 | @text-color-highlight: #333; 5 | @text-color-selected: #fff; 6 | @text-color-info:#389DD4; 7 | @text-color-success:#28BD3E; 8 | @text-color-warning:#E79536; 9 | @text-color-error:#FF6158; 10 | 11 | // Background colors 12 | @background-color-info:@text-color-info; 13 | @background-color-success:@text-color-success; 14 | @background-color-warning:@text-color-warning; 15 | @background-color-error:@text-color-error; 16 | @background-color-highlight:#D0E6E7; 17 | @background-color-selected:#006ed7; 18 | @app-background-color: #e4e4e4; 19 | 20 | // Base colors 21 | @base-background-color:#f8f8f8; 22 | @base-border-color:#b0b0b0; 23 | 24 | // Component colors 25 | @pane-item-background-color:@base-background-color; 26 | @pane-item-border-color: @base-border-color; 27 | @input-background-color:#fff; 28 | @input-border-color:#ededed; 29 | @tool-panel-background-color:darken(@pane-item-background-color, 3%); 30 | @tool-panel-border-color:@pane-item-border-color; 31 | @inset-panel-background-color:@pane-item-background-color; 32 | @inset-panel-border-color:@pane-item-border-color; 33 | @panel-heading-background-color:@tool-panel-background-color; 34 | @panel-heading-border-color:@pane-item-border-color; 35 | @overlay-background-color:@tool-panel-background-color; 36 | @overlay-border-color:rgba(0,0,0,0.2); 37 | @button-background-color:#fff; 38 | @button-background-color-hover:#fff; 39 | @button-background-color-selected:@background-color-selected; 40 | @button-border-color:rgba(255,255,255,0.28); 41 | @tab-bar-background-color:#CDCCCD; 42 | @tab-bar-border-color:#b0b0b0; 43 | @tab-background-color:#CDCCCD; 44 | @tab-background-color-active:#DDDCDD; 45 | @tab-border-color:#b0b0b0; 46 | @tree-view-background-color:#EEF5F6; 47 | @tree-view-border-color:#b0b0b0; 48 | 49 | // Site colors 50 | @ui-site-color-1:@text-color-info; 51 | @ui-site-color-2:@text-color-success; 52 | @ui-site-color-3:@text-color-warning; 53 | @ui-site-color-4:@text-color-error; 54 | @ui-site-color-5:#D088E1; 55 | 56 | // Sizes 57 | @disclosure-arrow-size:8px; 58 | @component-padding:12px; 59 | @component-icon-padding:0; 60 | @component-icon-size:16px; 61 | @component-line-height:1.4; 62 | @tab-height:25px; 63 | @font-size:12px; 64 | 65 | // Misc 66 | @component-border-radius:4px; 67 | @font-family: -apple-system, "Helvetica Neue", Helvetica; 68 | @use-custom-controls: false; // use native controls 69 | --------------------------------------------------------------------------------