Focus/hover for buttons in toolbar

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;

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 {