├── styles ├── messages.less ├── atom.less ├── git.less ├── sites.less ├── utilities.less ├── panes.less ├── tree-view.less ├── ui-mixins.less ├── editor.less ├── tooltips.less ├── overlays.less ├── text.less ├── progress.less ├── panels.less ├── buttons.less ├── tabs.less ├── ui-variables.less └── lists.less ├── package.json ├── index.less ├── LICENSE.md └── README.md /styles/messages.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | ul.background-message { 4 | font-weight: bold; 5 | color: rgba(0, 0, 0, .18); 6 | } 7 | -------------------------------------------------------------------------------- /styles/atom.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | atom-workspace { 4 | background-color: @app-background-color; 5 | border-top: 1px solid rgba(0, 0, 0, .4); 6 | } 7 | -------------------------------------------------------------------------------- /styles/git.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | .status { .text(normal); } 5 | .status-added { .text(success); } 6 | .status-ignored { .text(subtle); } 7 | .status-modified { .text(warning); } 8 | .status-removed { .text(error); } 9 | .status-renamed { .text(info); } 10 | -------------------------------------------------------------------------------- /styles/sites.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | .ui-site(@num, @color) { 5 | .ui-site-@{num} { 6 | background-color: @color; 7 | } 8 | } 9 | 10 | .ui-site(1, @ui-site-color-1); 11 | .ui-site(2, @ui-site-color-2); 12 | .ui-site(3, @ui-site-color-3); 13 | .ui-site(4, @ui-site-color-4); 14 | .ui-site(5, @ui-site-color-5); 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slack-ui", 3 | "theme": "ui", 4 | "version": "0.8.0", 5 | "description": "A light UI theme for Atom that is inspired by Slack's aubergine sidebar theme", 6 | "keywords": [ 7 | "ui", 8 | "theme", 9 | "slack", 10 | "slack interface" 11 | ], 12 | "repository": "https://github.com/tony-jones/slack-ui", 13 | "license": "MIT", 14 | "engines": { 15 | "atom": ">0.50.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | @import "styles/atom"; 2 | @import "styles/utilities"; 3 | @import "styles/text"; 4 | @import "styles/git"; 5 | @import "styles/sites"; 6 | @import "styles/messages"; 7 | @import "styles/progress"; 8 | @import "styles/buttons"; 9 | @import "styles/panels"; 10 | @import "styles/panes"; 11 | @import "styles/lists"; 12 | @import "styles/overlays"; 13 | @import "styles/editor"; 14 | @import "styles/tabs"; 15 | @import "styles/tooltips"; 16 | @import "styles/tree-view"; 17 | -------------------------------------------------------------------------------- /styles/utilities.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | .key-binding { 5 | background: @background-key-bindings; 6 | text-shadow: none; 7 | display: inline-block; 8 | line-height: 100%; 9 | border-radius: @component-border-radius; 10 | margin-left: @component-icon-padding; 11 | font-family: Helvetica, Arial, sans-serif; 12 | font-size: @font-size - 1px; 13 | padding: @component-padding / 2; 14 | } 15 | 16 | .badge { 17 | .text(highlight); 18 | background: @background-color-highlight; 19 | } 20 | -------------------------------------------------------------------------------- /styles/panes.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | @import "buttons"; 4 | 5 | atom-pane-container { 6 | atom-pane { 7 | background-color: lighten(@app-background-color, 3%); 8 | 9 | &:focus { 10 | background-color: @app-background-color; 11 | } 12 | } 13 | 14 | atom-pane-axis.horizontal > * { 15 | border-right: 1px solid @pane-item-border-color; 16 | &:last-child { border-right: none; } 17 | } 18 | 19 | atom-pane-axis.vertical > * { 20 | border-bottom: 1px solid @pane-item-border-color; 21 | &:last-child { border-bottom: none; } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .tree-view-scroller{ 4 | background: @tree-view-background-color; 5 | .tree-view { 6 | font-size: @font-size; 7 | background: @tree-view-background-color; 8 | 9 | .selected:before { 10 | background: @background-color-slack-red; 11 | border-bottom-right-radius: 5px; 12 | border-top-right-radius: 5px; 13 | margin-right: 15px; 14 | } 15 | } 16 | } 17 | 18 | .tree-view-resizer { 19 | .tree-view-resize-handle { 20 | width: 8px; 21 | } 22 | } 23 | 24 | .focusable-panel { 25 | opacity: 1; 26 | 27 | &:focus { 28 | //background-color: @tree-view-background-color; //might change in next release 29 | 30 | .selected:before { 31 | background: @background-color-selected; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /styles/ui-mixins.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | // Pattern matching; ish is cray. 4 | // http://lesscss.org/#-pattern-matching-and-guard-expressions 5 | .text(normal) { 6 | font-weight: normal; 7 | color: @text-color; 8 | //text-shadow: 0 1px 0 rgba(255, 255, 255, .5); 9 | } 10 | .text(subtle) { 11 | font-weight: normal; 12 | color: @text-color-subtle; 13 | text-shadow: none; 14 | } 15 | .text(highlight) { 16 | font-weight: normal; 17 | color: @text-color-highlight; 18 | } 19 | .text(selected) { 20 | font-weight: normal; 21 | color: @text-color-selected; 22 | text-shadow: none; 23 | } 24 | 25 | .text(info) { 26 | color: @text-color-info; 27 | text-shadow: none; 28 | } 29 | .text(success) { 30 | color: @text-color-success; 31 | text-shadow: none; 32 | } 33 | .text(warning) { 34 | color: @text-color-warning; 35 | text-shadow: none; 36 | } 37 | .text(error) { 38 | color: @text-color-error; 39 | text-shadow: none; 40 | } 41 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Anthony Jones 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/editor.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | 4 | atom-text-editor[mini], atom-text-editor[mini].editor { 5 | color: lighten(@text-color, 15%); 6 | background-color: darken(@input-background-color, 1%); 7 | border: 1px solid lighten(@input-border-color, 10%); 8 | 9 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 10 | border-radius: @component-border-radius; 11 | padding-left: @component-padding/2; 12 | 13 | .cursor { border-color: #000; } 14 | .selection .region { background-color: rgba(0, 0, 0, .2); } 15 | .placeholder-text { 16 | color: lighten(@text-color-subtle, 10%); 17 | } 18 | } 19 | 20 | atom-text-editor[mini].is-focused, atom-text-editor[mini].is-focused.editor { 21 | color: @text-color; 22 | background-color: @input-background-color; 23 | border-color: @input-border-color; 24 | .placeholder-text { 25 | color: @text-color-subtle; 26 | } 27 | .selection .region { 28 | background-color: lighten(@background-color-info, 30%); 29 | } 30 | } 31 | 32 | // FIXME: these should go in syntax themes? 33 | atom-text-editor, atom-text-editor.editor { 34 | .gutter.drop-shadow { 35 | -webkit-box-shadow: -2px 0 10px 2px #222; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /styles/tooltips.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | .tooltip { 4 | @tip-background-color: #333; 5 | @tip-text-color: #fff; 6 | white-space: nowrap; 7 | 8 | .keystroke { 9 | font-family: Helvetica, Arial, sans-serif; 10 | font-size: 13px; 11 | color: #c0c0c0; 12 | padding-left: 2px; 13 | } 14 | 15 | &.in { opacity: 1; } 16 | 17 | .tooltip-inner { 18 | line-height: 19px; 19 | border-radius: @component-border-radius; 20 | background-color: @tip-background-color; 21 | color: @tip-text-color; 22 | white-space: nowrap; 23 | max-width: none; 24 | } 25 | 26 | &.top .tooltip-arrow { 27 | border-top-color: @tip-background-color; 28 | } 29 | &.top-left .tooltip-arrow { 30 | border-top-color: @tip-background-color; 31 | } 32 | &.top-right .tooltip-arrow { 33 | border-top-color: @tip-background-color; 34 | } 35 | &.right .tooltip-arrow { 36 | border-right-color: @tip-background-color; 37 | } 38 | &.left .tooltip-arrow { 39 | border-left-color: @tip-background-color; 40 | } 41 | &.bottom .tooltip-arrow { 42 | border-bottom-color: @tip-background-color; 43 | } 44 | &.bottom-left .tooltip-arrow { 45 | border-bottom-color: @tip-background-color; 46 | } 47 | &.bottom-right .tooltip-arrow { 48 | border-bottom-color: @tip-background-color; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /styles/overlays.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | 3 | atom-panel.modal, .overlay { 4 | color: @text-color; 5 | background-color: @overlay-background-color; 6 | padding: @component-padding; 7 | border: 1px solid @overlay-border-color; 8 | box-shadow: 0 0 10px @base-border-color; 9 | border-radius: @component-border-radius; 10 | 11 | atom-text-editor[mini] { 12 | margin-bottom: @component-padding; 13 | } 14 | 15 | .select-list ol.list-group, 16 | &.select-list ol.list-group { 17 | 18 | background-color: @inset-panel-background-color; 19 | 20 | li { 21 | padding: @component-padding; 22 | border-top: 1px solid @inset-panel-border-color; 23 | border-left: 1px solid @inset-panel-border-color; 24 | border-right: 1px solid @inset-panel-border-color; 25 | &:last-child { border-bottom: 1px solid @inset-panel-border-color; } 26 | 27 | &.two-lines { padding: @component-padding/2 @component-padding; } 28 | &.selected { 29 | color: @text-color-selected; 30 | background-color: @background-color-other; 31 | 32 | span { 33 | color: @panel-text-color; 34 | } 35 | 36 | } 37 | 38 | .status.icon { 39 | float: right; 40 | margin-left: @component-icon-padding; 41 | &:before { 42 | margin-right: 0; 43 | } 44 | } 45 | } 46 | 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Slack UI 2 | 3 | A light UI theme for Atom that is inspired by Slack's aubergine theme. 4 | https://atom.io/themes/slack-ui 5 | ###### Made by [@iamtonybagels](http://www.twitter.com/iamtonybagels) 6 | 7 | ![screen shot 2015-10-16 at 3 27 27 am](https://cloud.githubusercontent.com/assets/6729106/10536027/e2dd1b32-73b5-11e5-90c6-0a391080773f.png) 8 | 9 | ![ss-timecop](https://cloud.githubusercontent.com/assets/6729106/10560778/2c087a12-74e3-11e5-9581-7849cb53ce66.png) 10 | 11 | ## Recent Updates 12 | * Improved Layout of Search Results 13 | ![screen shot 2015-11-16 at 1 09 53 pm](https://cloud.githubusercontent.com/assets/6729106/11190470/9fdd787e-8c63-11e5-9931-4c202ed69e43.png) 14 | 15 | ## Installation 16 | 17 | Fire up a console and type: 18 | 19 | `$ apm install slack-ui` 20 | 21 | Or, inside Atom's settings select Install and then search for this package. 22 | 23 | ## Configuration 24 | 25 | screen shot 2015-10-16 at 3 01 25 am 26 | 27 | Use with Atom's 'Atom Light' Syntax theme. 28 | 29 | ## Contributing 30 | Contributions, questions and comments are all welcome and encouraged. For code contributions, please submit a [pull request](https://github.com/tony-jones/slack-ui/pulls). Related issues, bugs, and feature requests should be filed on the [Slack-UI](https://github.com/tony-jones/slack-ui/issues/new) issue tracker. 31 | 32 | If you like the theme, I'd appreciate you [Sharing with others on Twitter](https://twitter.com/intent/tweet?text=Slack%20UI,%20a%20light%20Atom%20theme%20inspired%20by%20Slack's%20Aubergine%20sidebar%20theme&url=http%3A%2F%2Fatom.io/themes/slack-ui&via=iamtonybagels)! 33 | 34 | ## Change Log 35 | No v1.0.0 Yet Released 36 | -------------------------------------------------------------------------------- /styles/text.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | 4 | h1, 5 | h2, 6 | h3 { 7 | line-height: 1em; 8 | margin-bottom: 15px; 9 | } 10 | h1 { font-size: 2em; } 11 | h2 { font-size: 1.5em; } 12 | h3 { font-size: 1.2em; } 13 | 14 | p { 15 | line-height: 1.6; 16 | margin-bottom: 15px; 17 | } 18 | 19 | label { 20 | font-weight: normal; 21 | } 22 | 23 | pre { 24 | box-shadow: none; 25 | color: @text-color; 26 | background: @inset-panel-background-color; 27 | border-radius: @component-border-radius; 28 | border: none; 29 | margin: 0; 30 | } 31 | 32 | code { 33 | .text(highlight); 34 | background: @background-color-highlight; 35 | border-radius: @component-border-radius; 36 | } 37 | 38 | .selected { .text(highlight); } 39 | 40 | .text-smaller { font-size: 0.9em; } 41 | 42 | .text-subtle { .text(subtle); } 43 | .text-highlight { .text(highlight); } 44 | 45 | .text-error { .text(error); } 46 | .text-info { 47 | .text(info); 48 | &:hover { color: @text-color-info; } 49 | } 50 | .text-warning { 51 | .text(warning); 52 | &:hover { color: @text-color-warning; } 53 | } 54 | .text-success { 55 | .text(success); 56 | &:hover { color: @text-color-success; } 57 | } 58 | 59 | .highlight { 60 | color: @text-color-highlight; 61 | font-weight: bold; 62 | text-shadow: none; 63 | background-color: @background-color-highlight; 64 | border-radius: @component-border-radius; 65 | padding: 1px 3px; 66 | } 67 | 68 | .highlight-color(@name, @color) { 69 | .highlight-@{name} { 70 | color: @text-color-highlight; 71 | font-weight: bold; 72 | text-shadow: none; 73 | background-color: @color; 74 | border-radius: @component-border-radius; 75 | padding: 1px 3px; 76 | } 77 | } 78 | .highlight-color(info, @background-color-info); 79 | .highlight-color(warning, @background-color-warning); 80 | .highlight-color(error, @background-color-error); 81 | .highlight-color(success, @background-color-success); 82 | -------------------------------------------------------------------------------- /styles/progress.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | 4 | .loading-spinner(@size) { 5 | width: @size; 6 | height: @size; 7 | display: block; 8 | 9 | background-image: url(images/octocat-spinner-128.gif); 10 | background-repeat: no-repeat; 11 | background-size: cover; 12 | 13 | &.inline-block { 14 | display: inline-block; 15 | } 16 | } 17 | 18 | .loading-spinner-large { 19 | .loading-spinner(64px); 20 | } 21 | 22 | .loading-spinner-medium { 23 | .loading-spinner(50px); 24 | } 25 | 26 | .loading-spinner-small { 27 | .loading-spinner(32px); 28 | } 29 | 30 | .loading-spinner-tiny { 31 | .loading-spinner(20px); 32 | } 33 | 34 | // Much learning from: 35 | // http://css-tricks.com/html5-progress-element/ 36 | 37 | @progress-height: 16px; 38 | @progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15)); 39 | 40 | progress { 41 | height: @progress-height; 42 | -webkit-appearance: none; 43 | border-radius: @component-border-radius; 44 | background-color: #ccc; 45 | background-image: 46 | -webkit-linear-gradient(-30deg, 47 | transparent 33%, rgba(0, 0, 0, .1) 33%, 48 | rgba(0,0, 0, .1) 66%, transparent 66%), 49 | @progress-shine-gradient; 50 | border-radius: 2px; 51 | background-size: 25px @progress-height, 100% 100%, 100% 100%; 52 | -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage 53 | } 54 | 55 | progress::-webkit-progress-bar { 56 | background-color: transparent; 57 | } 58 | 59 | progress::-webkit-progress-value { 60 | border-radius: @component-border-radius; 61 | background-image: @progress-shine-gradient; 62 | background-color: @background-color-info; 63 | } 64 | 65 | progress[value] { 66 | background-image: @progress-shine-gradient; 67 | -webkit-animation: none; 68 | } 69 | 70 | @-webkit-keyframes animate-stripes { 71 | 100% { background-position: 100px 0px; } 72 | } 73 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | @import "ui-mixins"; 2 | @import "ui-variables"; 3 | @import "buttons"; 4 | 5 | .panel { 6 | &.bordered { 7 | border: 1px solid @base-border-color; 8 | border-radius: @component-border-radius; 9 | } 10 | } 11 | 12 | atom-panel, .tool-panel { 13 | .text(normal); 14 | position: relative; 15 | 16 | background-color: @tool-panel-background-color; 17 | 18 | &.bottom, &.panel-bottom { 19 | border-top: 1px solid @tool-panel-border-color; 20 | } 21 | 22 | &.left, &.panel-left { 23 | border-right: 1px solid @tool-panel-border-color; 24 | } 25 | 26 | &.right, &.panel-right { 27 | border-left: 1px solid @tool-panel-border-color; 28 | } 29 | 30 | .inset-panel { 31 | border-radius: @component-border-radius; 32 | 33 | border: 1px solid @tool-panel-border-color; 34 | } 35 | } 36 | 37 | .inset-panel { 38 | position: relative; 39 | background-color: @inset-panel-background-color; 40 | padding: 10px; 41 | } 42 | 43 | .panel-heading { 44 | border-bottom: none; 45 | padding: @component-padding - 2px @component-padding; 46 | 47 | background-color: transparent; 48 | font-size:16px; 49 | 50 | .btn { 51 | @bg: lighten(@button-background-color, 10%); 52 | @hover: lighten(@button-background-color-hover, 10%); 53 | @selected: lighten(@button-background-color-selected, 10%); 54 | @text: lighten(@text-color, 10%); 55 | .btn-background(@bg, @hover, @selected, @button-border-color, @text, @text); 56 | } 57 | } 58 | .tool-panel { 59 | .icon { 60 | &::before { 61 | font-size: 16px; 62 | } 63 | } 64 | } 65 | 66 | .settings-view .package-card { 67 | border: 1px solid #C7CACD; 68 | } 69 | .settings-view .section { 70 | border-top: 1px solid #C7CACD; 71 | } 72 | .settings-view .config-menu { 73 | border-right: 1px solid #C7CACD; 74 | } 75 | .settings-view .config-menu .button-area > .btn { 76 | width: 108%; 77 | margin-left: -6px; 78 | } 79 | .settings-view select.form-control:hover, .settings-view select.form-control:focus { 80 | border-color: @text-color-info; 81 | } 82 | .settings-view .package-card .meta-controls .status-indicator { 83 | background: @text-color-info; 84 | } 85 | atom-panel.bottom, .tool-panel.bottom, atom-panel.panel-bottom, .tool-panel.panel-bottom { 86 | border-top: 1px solid #C7CACD; 87 | } 88 | .icon { 89 | &::before { 90 | font-size: 14px; 91 | } 92 | } 93 | .preview-pane .panel-heading { 94 | align-self: center; 95 | } 96 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | 4 | .btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) { 5 | @border-shadow: inset 0 0 0 1px @border-color; 6 | @active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); 7 | color: @text-color; 8 | background-color: @color; 9 | 10 | &:hover { 11 | color: @text-color-hover; 12 | background-color: darken(@hover-color, 15%); 13 | } 14 | &:active, 15 | &.selected:hover:active { 16 | box-shadow: @active-shadow, @border-shadow; 17 | } 18 | &.selected, 19 | &.selected:hover { 20 | color: @text-color-selected; 21 | box-shadow: inset 0 2px 5px rgba(0, 0, 0,.3), @border-shadow; 22 | text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); 23 | background-image: -webkit-linear-gradient(darken(@selected-color, 8%), @selected-color); 24 | } 25 | &.selected:hover { 26 | box-shadow: @border-shadow; 27 | background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 8%)); 28 | } 29 | } 30 | 31 | .btn-variant (@color) { 32 | @bg: @color; 33 | @hover: darken(@color, 10%); 34 | @selected: @color; 35 | @border: fadeout(darken(@color, 20%), 50%); 36 | .btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected); 37 | } 38 | 39 | .btn { 40 | .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight); 41 | } 42 | 43 | .btn.btn-primary { 44 | .btn-variant(@background-color-info); 45 | } 46 | .btn.btn-info { 47 | .btn-variant(@background-color-info); 48 | } 49 | .btn.btn-success { 50 | .btn-variant(@background-color-success); 51 | } 52 | .btn.btn-warning { 53 | .btn-variant(@background-color-warning); 54 | } 55 | .btn.btn-error { 56 | .btn-variant(@background-color-error); 57 | } 58 | 59 | .btn-group > .btn.btn.selected { 60 | background-color: @button-group-color; 61 | box-shadow: none; 62 | border: none; 63 | text-shadow: none; 64 | background-image: none; 65 | color: @text-white; 66 | } 67 | 68 | .btn.btn-default { 69 | border: 1px solid lightgrey !important; 70 | } 71 | 72 | .btn.uninstall-button { 73 | background-color: @background-color-slack-red; 74 | color: @text-white; 75 | 76 | &:hover { 77 | background-color: darken(@background-color-slack-red, 10%); 78 | color: @text-white; 79 | } 80 | } 81 | .badge { 82 | color: @text-white; 83 | background: @text-color-info; 84 | } 85 | .highlight-info { 86 | color: @text-white; 87 | } 88 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @tab-radius: 3px; 3 | @modified-icon-width: 8px; 4 | @tab-skew: 30deg; 5 | @tab-top-padding: 5px; 6 | @tab-bottom-border-height: 5px; 7 | @tab-border: 1px solid @tab-border-color; 8 | @tab-max-width: 160px; 9 | 10 | .tab-bar { 11 | height: @tab-height + @tab-top-padding + @tab-bottom-border-height; 12 | padding: 0 10px 0 25px; 13 | overflow-x: auto; 14 | overflow-y: hidden; 15 | 16 | &::-webkit-scrollbar { 17 | display: none; 18 | } 19 | 20 | &:after { 21 | content: ""; 22 | position: absolute; 23 | bottom: 0; 24 | height: @tab-bottom-border-height; 25 | left: 0; 26 | right: 0; 27 | pointer-events: none; 28 | } 29 | 30 | .tab { 31 | position: relative; 32 | top: @tab-top-padding; 33 | max-width: @tab-max-width; 34 | height: @tab-height; 35 | line-height: @tab-height - 1px; 36 | color: #3aa3e3; 37 | transition: color .1s ease-in; 38 | padding-left: 0px; 39 | padding-right: 0px; 40 | border-bottom: 1px solid @tab-background-color; 41 | border-top: 1px solid #ffffff; 42 | 43 | .close-icon { 44 | right: 0; 45 | z-index: 3; 46 | text-align: right; 47 | line-height: @tab-height; 48 | color: rgba(255, 255, 255, 0); 49 | margin-right: 10px; 50 | 51 | &:hover { 52 | color: inherit; 53 | background-color: @panel-text-color; 54 | } 55 | &:before { 56 | font-size:18px; 57 | } 58 | } 59 | 60 | &.modified:not(:hover) .close-icon { 61 | right: 0; 62 | top: @tab-height/2 - @modified-icon-width/2 + 1px; 63 | width: @modified-icon-width; 64 | height: @modified-icon-width; 65 | border: 2px solid @slack-red; 66 | } 67 | 68 | &.modified:hover .close-icon:hover { 69 | color: @text-color-highlight; 70 | } 71 | 72 | .title { 73 | position: relative; 74 | z-index: 1; 75 | padding-left: 20px; 76 | font-weight: bold; 77 | 78 | } 79 | } 80 | 81 | .tab.active { 82 | border: 1px solid @tab-background-color; 83 | background: @panel-text-color; 84 | border-bottom-color: @panel-text-color; 85 | z-index: 1; 86 | color: @text-color-highlight; 87 | border-top-left-radius: 3px; 88 | border-top-right-radius: 3px; 89 | 90 | .close-icon { 91 | line-height: @tab-height - 1px; 92 | color: @text-color; 93 | } 94 | .title { 95 | position: relative; 96 | z-index: 1; 97 | padding-right: 10px; 98 | border-bottom: 1px solid @panel-text-color; 99 | } 100 | } 101 | 102 | .tab:hover .close-icon { 103 | color: @text-color-highlight; 104 | } 105 | 106 | .tab.active:hover .close-icon { 107 | color: @text-color; 108 | 109 | &:hover { 110 | color: inherit; 111 | } 112 | } 113 | 114 | .placeholder { 115 | height: @tab-height + @tab-top-padding + @tab-bottom-border-height; 116 | margin-left: -9px; // center between tabs 117 | pointer-events: none; 118 | &:after { 119 | top: @tab-height + @tab-top-padding + @tab-bottom-border-height - 2px; 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | // Colors 2 | 3 | //slack primary palette 4 | @slack-red: #eb4d5c; 5 | @slack-yellow: #edb431; 6 | @slack-blue: #3aa3e3; 7 | @slack-green: #38978d; 8 | @slack-purple: #8a74b9; 9 | @slack-orange: #efb57c; 10 | @slack-border: #e8e8e8; 11 | @slack-bg: #F9F9F9; 12 | 13 | @text-color: #444; 14 | @text-color-subtle: #6E6E6E; 15 | @text-color-highlight: #000; 16 | @text-color-selected: #fff; 17 | @text-color-unmodified: #ab9ba9; 18 | 19 | @text-color-info: @slack-green; 20 | @text-color-success: @slack-blue; 21 | @text-color-warning: @slack-yellow; 22 | @text-color-error: @slack-red; 23 | 24 | @text-color-ignored: @text-color-subtle; 25 | @text-color-added: @text-color-success; 26 | @text-color-renamed: @text-color-info; 27 | @text-color-modified: @text-color-warning; 28 | @text-color-removed: @text-color-error; 29 | @text-white: @text-color-selected; 30 | 31 | @panel-text-color: @text-color-selected; 32 | 33 | @background-color-info: @slack-green; 34 | @background-color-success: @slack-blue; 35 | @background-color-warning: @slack-yellow; 36 | @background-color-error: @slack-red; 37 | @background-color-highlight: rgba(0, 0, 0, .1); 38 | @background-color-other: @slack-blue; 39 | @background-color-selected: @slack-green; 40 | @background-color-slack-red: @slack-red; 41 | @background-key-bindings: #414141; 42 | 43 | @app-background-color: #ccc; 44 | 45 | @base-background-color: @slack-bg; 46 | @base-border-color: @slack-border; 47 | 48 | @pane-item-background-color: @base-background-color; 49 | @pane-item-border-color: @base-border-color; 50 | 51 | @input-background-color: white; 52 | @input-border-color: fadeout(@base-border-color, 10%); 53 | 54 | @tool-panel-background-color: @base-background-color; 55 | @tool-panel-border-color: @tab-background-color; 56 | 57 | @inset-panel-background-color: #fff; 58 | @inset-panel-border-color: fadeout(@base-border-color, 80%); 59 | 60 | @panel-heading-background-color: #c3c3c3; 61 | @panel-heading-border-color: transparent; 62 | 63 | @overlay-background-color: #ececec; 64 | @overlay-border-color: @base-border-color; 65 | 66 | @button-background-color: @base-background-color; 67 | @button-background-color-hover: lighten(@button-background-color, 5%); 68 | @button-background-color-selected: #888; 69 | @button-border-color: rgba(0, 0, 0, 0.15); 70 | @button-group-color: #E0AA34; 71 | 72 | @tab-bar-background-color: #d8d8d8; 73 | @tab-bar-border-color: #ddd; 74 | @tab-background-color: #e8e8e8; 75 | @tab-background-color-active: #f0f0f0; 76 | @tab-border-color: lighten(@base-border-color, 10%); 77 | 78 | @tree-view-background-color: #4D394B; 79 | @tree-view-border-color: @base-border-color; 80 | 81 | @ui-site-color-1: @slack-green; 82 | @ui-site-color-2: @slack-blue; 83 | @ui-site-color-3: @slack-orange; 84 | @ui-site-color-4: @slack-purple; 85 | @ui-site-color-5: @slack-yellow; 86 | 87 | 88 | // Sizes 89 | 90 | @font-size: 13px; 91 | @input-font-size: 14px; 92 | @disclosure-arrow-size: 12px; 93 | @sidebar-icon-size: 13px; 94 | 95 | @component-margin: 10px; 96 | @component-padding: 10px; 97 | @component-icon-padding: 5px; 98 | @component-icon-size: 16px; 99 | @component-line-height: 25px; 100 | @component-border-radius: 2px; 101 | 102 | @tab-height: 36px; 103 | 104 | // Other 105 | 106 | @font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif; 107 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | @import "ui-variables"; 2 | @import "ui-mixins"; 3 | @import "octicon-mixins"; 4 | 5 | .results-view > .list-nested-item { 6 | background-color: @slack-bg; 7 | border: 1px solid @slack-border; 8 | padding: @component-padding; 9 | border-radius: @component-border-radius; 10 | margin-top: @component-margin; 11 | } 12 | 13 | .list-group, .list-tree { 14 | li:not(.list-nested-item), 15 | li.list-nested-item > .list-item { 16 | .text(normal); 17 | color: @text-color-unmodified; 18 | } 19 | 20 | .generate-list-item-text-color(@class) { 21 | li:not(.list-nested-item).text-@{class}, 22 | li.list-nested-item.text-@{class} > .list-item { 23 | .text(@class); 24 | } 25 | } 26 | .generate-list-item-text-color(subtle); 27 | .generate-list-item-text-color(info); 28 | .generate-list-item-text-color(success); 29 | .generate-list-item-text-color(warning); 30 | .generate-list-item-text-color(error); 31 | .generate-list-item-text-color(selected); 32 | 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: @text-color-selected; 42 | } 43 | } 44 | .generate-list-item-status-color(@text-color-subtle, ignored); 45 | .generate-list-item-status-color(@text-color-added, added); 46 | .generate-list-item-status-color(@text-color-renamed, renamed); 47 | .generate-list-item-status-color(@text-color-modified, modified); 48 | .generate-list-item-status-color(@text-color-removed, removed); 49 | 50 | li:not(.list-nested-item).selected, 51 | li.list-nested-item.selected > .list-item { 52 | .text(selected); 53 | } 54 | } 55 | 56 | .list-tree.has-collapsable-children li.list-item { 57 | margin-left: 0; 58 | } 59 | 60 | .list-tree.has-collapsable-children .list-nested-item > .list-item::before, 61 | .list-tree.has-collapsable-children .list-nested-item.selected > .list-item::before, 62 | .list-tree.has-collapsable-children .list-nested-item.collapsed > .list-item::before { 63 | top: 6px; 64 | float: right; 65 | font-size: @sidebar-icon-size; 66 | margin-right: 20px; 67 | } 68 | 69 | .select-list ol.list-group, 70 | &.select-list ol.list-group { 71 | li.two-lines { 72 | .secondary-line { color: @text-color-subtle; } 73 | &.selected .secondary-line { 74 | color: darken(@text-color-subtle, 40%); 75 | text-shadow: none; 76 | } 77 | } 78 | 79 | // We want to highlight the background of the list items because we dont 80 | // know their size. 81 | li.selected { 82 | background-color: @background-color-selected; 83 | &:before{ display: none; } 84 | } 85 | 86 | &.mark-active{ 87 | @active-icon-size: 14px; 88 | 89 | // pad in front of the text where the icon would be We'll pad the non- 90 | // active items with a 'fake' icon so other classes can pad the item 91 | // without worrying about the icon padding. 92 | li:before { 93 | content: ''; 94 | background-color: transparent; 95 | position: static; 96 | display: inline-block; 97 | left: auto; right: auto; 98 | height: @active-icon-size; 99 | width: @active-icon-size; 100 | } 101 | > li:not(.active):before { 102 | margin-right: @component-icon-padding; 103 | } 104 | li.active { 105 | .octicon(check, @active-icon-size); 106 | &:before { 107 | margin-right: @component-icon-padding; 108 | color: @text-color-success; 109 | } 110 | } 111 | } 112 | } 113 | 114 | .select-list.popover-list { 115 | background-color: @overlay-background-color; 116 | box-shadow: 0 0 10px @base-border-color; 117 | padding: @component-padding/2; 118 | border-radius: @component-border-radius; 119 | border: 1px solid @overlay-border-color; 120 | 121 | atom-text-editor { 122 | margin-bottom: @component-padding/2; 123 | } 124 | 125 | .list-group li { 126 | padding-left: @component-padding/2; 127 | } 128 | } 129 | 130 | .ui-sortable { 131 | li { 132 | line-height: 2.5; 133 | } 134 | 135 | // For sortable lists in the settings view 136 | li.ui-sortable-placeholder { 137 | visibility: visible !important; 138 | background-color: darken(@pane-item-background-color, 10%); 139 | } 140 | } 141 | 142 | // checkbox in the settings view 143 | .settings-view input[type="checkbox"]:checked { 144 | background-color: @background-color-slack-red; 145 | } 146 | 147 | li.ui-draggable-dragging, li.ui-sortable-helper { 148 | line-height: @component-line-height; 149 | height: @component-line-height; 150 | border: 0; 151 | border-radius: 0; 152 | list-style: none; 153 | padding: 0 @component-padding; 154 | background: @background-color-highlight; 155 | box-shadow: 0 0 1px @base-border-color; 156 | } 157 | .list-inline > li { 158 | padding-left: 0px; 159 | padding-right: 0px; 160 | } 161 | .list-nested-item { 162 | &.selected { 163 | .path-match-number { 164 | color: @text-white; 165 | } 166 | } 167 | } 168 | .list-group .selected::before, .list-tree .selected::before { 169 | left: 10px; 170 | right: 10px; 171 | } 172 | .tree-view-scroller .tree-view .selected:before { 173 | left: 0px; 174 | right: 0px; 175 | } 176 | --------------------------------------------------------------------------------