diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less index 06a075715..34fe6539f 100644 --- a/skins/elastic/styles/colors.less +++ b/skins/elastic/styles/colors.less @@ -47,21 +47,27 @@ // Toolbar -@color-toolbar-button: @color-font; +@color-toolbar-button: @color-font; +@color-toolbar-button-background-hover: tint(@color-main, 96%); +@color-searchbar-icon-active: green; + + +// Toolbar menu +@color-toolbarmenu-hover: #fff; +@color-toolbarmenu-hover-background: darken(@color-main, 20%); -@color-searchbar-icon-active: green; // Listings @color-list: @color-font; @color-list-selected: inherit; -@color-list-selected-background: tint(@color-main, 96%); /*#f8fafb;*/ +@color-list-selected-background: tint(@color-main, 96%); @color-list-flagged: #ff5c33; @color-list-deleted: #ccc; @color-list-secondary: #666; @color-list-droptarget-background: #ffffcc; -@color-list-focus-indicator: #ccc; +@color-list-focus-indicator: lighten(@color-main, 20%); @color-list-border: #f4f4f4; @color-list-badge: #fff; @@ -71,11 +77,6 @@ @color-list-recent-badge-background: @color-list-recent; -// Toolbar menu -@color-toolbarmenu-hover: #fff; -@color-toolbarmenu-hover-background: blue; - - // Drag-n-drop layer @color-drag-layer: #fff; @color-drag-layer-background: #444; diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less index 004e74377..fd701e9cd 100644 --- a/skins/elastic/styles/widgets/toolbar.less +++ b/skins/elastic/styles/widgets/toolbar.less @@ -23,6 +23,7 @@ a.button { padding: 0 .3em; display: inline-block; + border: 0 !important; &:before { &:extend(.font-icon-class); @@ -120,10 +121,6 @@ } .dropbutton { - a.button:first-child { - padding-right: 0; - } - a.button.dropdown { font-size: 75%; @@ -328,7 +325,14 @@ margin: 0; line-height: 1.75; } + + &:not(.disabled):focus, + &:not(.disabled):hover { + background-color: @color-toolbar-button-background-hover; + outline: 0; + } } + a span.inner { font-size: 90%; } @@ -345,7 +349,7 @@ display: inline-block; &:hover { - background-color: #f4f4f4; /* TODO */ + background-color: @color-toolbar-button-background-hover; } a.button.dropdown { @@ -353,7 +357,7 @@ padding: 0 .3rem; &:hover { - background-color: #f0f0f0; /* TODO */ + background-color: darken(@color-toolbar-button-background-hover, 5%); } &:before {