diff --git a/index.less b/index.less index 1026805..2c1a586 100644 --- a/index.less +++ b/index.less @@ -1,15 +1,15 @@ -@import 'stylesheets/atom'; -@import 'stylesheets/utilities'; -@import 'stylesheets/text'; -@import 'stylesheets/git'; -@import 'stylesheets/sites'; -@import 'stylesheets/progress'; -@import 'stylesheets/buttons'; -@import 'stylesheets/panels'; -@import 'stylesheets/panes'; -@import 'stylesheets/lists'; -@import 'stylesheets/editor'; -@import 'stylesheets/tabs'; -@import 'stylesheets/tooltips'; -@import 'stylesheets/overlays'; -@import 'stylesheets/dropdowns'; +@import "stylesheets/atom"; +@import "stylesheets/buttons"; +@import "stylesheets/editor"; +@import "stylesheets/git"; +@import "stylesheets/lists"; +@import "stylesheets/overlays"; +@import "stylesheets/panels"; +@import "stylesheets/panes"; +@import "stylesheets/progress"; +@import "stylesheets/sites"; +@import "stylesheets/tabs"; +@import "stylesheets/text"; +@import "stylesheets/tooltips"; +@import "stylesheets/tree-view"; +@import "stylesheets/utilities"; diff --git a/stylesheets/lists.less b/stylesheets/lists.less index a4f84b6..ead064c 100644 --- a/stylesheets/lists.less +++ b/stylesheets/lists.less @@ -21,17 +21,23 @@ .generate-list-item-text-color(error); .generate-list-item-text-color(selected); - .generate-list-item-status-color(@textClass, @status) { + .generate-list-item-status-color(@color, @status) { li:not(.list-nested-item).status-@{status}, li.list-nested-item.status-@{status} > .list-item { - .text(@textClass); + color: @color; } } - .generate-list-item-status-color(subtle, ignored); - .generate-list-item-status-color(info, added); - .generate-list-item-status-color(success, renamed); - .generate-list-item-status-color(warning, modified); - .generate-list-item-status-color(error, removed); + + .generate-list-item-status-color(@text-color-subtle, ignored); + .generate-list-item-status-color(@text-color-added, added); + .generate-list-item-status-color(@text-color-renamed, renamed); + .generate-list-item-status-color(@text-color-modified, modified); + .generate-list-item-status-color(@text-color-removed, removed); + + li:not(.list-nested-item).selected, + li.list-nested-item.selected > .list-item { + .text(selected); + } li:not(.list-nested-item):hover, li.list-nested-item:hover > .list-item, // i.e. highlight directory when hover child file @@ -47,13 +53,16 @@ &.select-list ol.list-group { li.two-lines { .secondary-line { color: @text-color-subtle; } - &.selected .secondary-line { color: lighten(@text-color-subtle, 10%); } + &.selected .secondary-line { + color: @text-color; + text-shadow: none; + } } // We want to highlight the background of the list items because we dont // know their size. li.selected { - background-color: @background-color-highlight; + background-color: @background-color-selected; &:before{ display: none; } } @@ -87,7 +96,7 @@ .select-list.popover-list { background-color: @overlay-background-color; - -webkit-box-shadow: 0 0 3px 3px @base-border-color; + box-shadow: 0 0 10px @base-border-color; padding: @component-padding/2; border-radius: @component-border-radius; border: 1px solid @overlay-border-color; @@ -109,7 +118,7 @@ // For sortable lists in the settings view li.ui-sortable-placeholder { visibility: visible !important; - background-color: darken(@pane-item-background-color, 3%); + background-color: darken(@pane-item-background-color, 10%); } } diff --git a/stylesheets/tree-view.less b/stylesheets/tree-view.less new file mode 100644 index 0000000..fa03ea0 --- /dev/null +++ b/stylesheets/tree-view.less @@ -0,0 +1,32 @@ +@import "ui-variables"; + +.tree-view { + font-size: @font-size; + background: @tree-view-background-color; + + .selected:before { + background: #444; + box-shadow: inset -3px 0 0 rgba(0,0,0, .05); + } +} + +.focusable-panel { + opacity: 1; + background: #303030; + box-shadow: inset -3px 0 0 rgba(0,0,0, .05); + + &:focus { + background: #282828; + + .selected:before { + background: @background-color-selected; + } + + .selected > .name, + .selected > .name:before, + .selected > .list-item > .name, + .selected > .list-item > .name:before { + color: #fff !important; + } + } +} diff --git a/stylesheets/ui-mixins.less b/stylesheets/ui-mixins.less index 04b74f7..9895c6b 100644 --- a/stylesheets/ui-mixins.less +++ b/stylesheets/ui-mixins.less @@ -5,7 +5,7 @@ .text(normal) { font-weight: normal; color: @text-color; - text-shadow: 0 -1px 0 #333; + text-shadow: none; } .text(subtle) { font-weight: normal; @@ -15,7 +15,7 @@ .text(highlight) { font-weight: normal; color: @text-color-highlight; - text-shadow: 0 -1px 0 #333; + text-shadow: 0 1px 0 rgba(0,0,0, .5); } .text(selected) { .text(highlight) diff --git a/stylesheets/ui-variables.less b/stylesheets/ui-variables.less index cb38be6..c76e73f 100644 --- a/stylesheets/ui-variables.less +++ b/stylesheets/ui-variables.less @@ -6,16 +6,22 @@ @text-color-selected: @text-color-highlight; @text-color-info: #5293d8; -@text-color-success: #1fe977; -@text-color-warning: #f78a46; +@text-color-success: #529b2f; +@text-color-warning: #ff982d; @text-color-error: #c00; +@text-color-ignored: @text-color-subtle; +@text-color-added: @text-color-success; +@text-color-renamed: @text-color-info; +@text-color-modified: @text-color-warning; +@text-color-removed: @text-color-error; + @background-color-info: #0098ff; @background-color-success: #17ca65; @background-color-warning: #ff4800; @background-color-error: #c00; @background-color-highlight: rgba(255, 255, 255, 0.07); -@background-color-selected: @background-color-highlight; +@background-color-selected: #4182C4; @app-background-color: #333;