Merge pull request #4418 from Icinga/fix/menu-hover-colors-4413

Fix menu hover colors

public/css/icinga/base.less

@@ -63,16 +63,20 @@
 
 // Menu colors
 @menu-bg-color: #06062B;
-@menu-hover-bg-color: fade(@menu-bg-color, 50%);
-@menu-search-hover-bg-color: darken(@menu-bg-color, 20%);
+@menu-hover-bg-color: lighten(@menu-bg-color, 5%);
+@menu-search-hover-bg-color: @menu-hover-bg-color;
 @menu-active-bg-color: #181742;
-@menu-active-hover-bg-color: darken(@menu-active-bg-color, 20%);
+@menu-active-hover-bg-color: lighten(@menu-active-bg-color, 5%);
 @menu-color: #DBDBDB;
 @menu-active-color: @text-color;
 @menu-highlight-color: @icinga-blue;
+@menu-highlight-hover-bg-color: @icinga-blue-dark;
 @menu-2ndlvl-color: #c4c4c4;
 @menu-2ndlvl-highlight-bg-color: @tr-hover-color;
-@menu-2ndlvl-highlight-color: @text-color-inverted;
+@menu-2ndlvl-active-bg-color: @menu-highlight-color;
+@menu-2ndlvl-active-color: @text-color-inverted;
+@menu-2ndlvl-active-hover-bg-color: darken(@menu-2ndlvl-active-bg-color, 5%);
+@menu-2ndlvl-active-hover-color: @menu-2ndlvl-active-color;
 @menu-flyout-bg-color: @body-bg-color;
 @menu-flyout-color: @text-color;
 @tab-hover-bg-color: fade(@body-bg-color, 50%);
@@ -118,10 +122,11 @@
 
     --menu-color: #676767;
     --menu-bg-color: #DEECF1;
-    --menu-hover-bg-color: fade(#DEECF1, 50%);
-    --menu-search-hover-bg-color: darken(#DEECF1, 20%);
+    --menu-hover-bg-color: darken(#DEECF1, 10%);
+    --menu-search-hover-bg-color: darken(#DEECF1, 10%);
     --menu-active-bg-color: #EDF7FC;
     --menu-active-hover-bg-color: darken(#EDF7FC, 20%);
+    --menu-highlight-hover-bg-color: darken(#EDF7FC, 20%);
     --menu-2ndlvl-color: #7E8182;
 
     --text-color: #535353;

public/css/icinga/compat.less

@@ -24,6 +24,7 @@
 @colorFormNotificationWarning: #ffaa44;
 @colorFormNotificationError: #ff5566;
 @colorPetrol: @icinga-blue;
+@menu-2ndlvl-highlight-color: @menu-2ndlvl-active-color;
 
 table.action {
   .common-table();

public/css/icinga/menu.less

@@ -112,9 +112,9 @@
   .var(background-color, menu-highlight-color);
   .var(color, text-color-inverted);
 
-
-  &:hover {
-    .var(color, text-color-inverted);
+  &:hover,
+  &:focus {
+    .var(background-color, menu-highlight-hover-bg-color);
   }
 
   &:after {
@@ -145,7 +145,6 @@
   }
 
   &.active {
-    .var(background-color, menu-highlight-color);
     overflow: hidden;
     position: relative;
   }
@@ -167,7 +166,13 @@
   }
 
   &.active > a {
-    .var(color, menu-2ndlvl-highlight-color);
+    .var(color, menu-2ndlvl-active-color);
+    .var(background-color, menu-2ndlvl-active-bg-color);
+
+    &:hover, &:focus {
+      .var(color, menu-2ndlvl-active-hover-color);
+      .var(background-color, menu-2ndlvl-active-hover-bg-color);
+    }
   }
 }
 
@@ -216,6 +221,13 @@
   padding-left: @icon-width + .75em;
   width: 100%;
 
+  &:focus::placeholder {
+    .var(color, menu-color);
+  }
+  &:focus::-ms-input-placeholder {
+    color: @menu-color;
+  }
+
   &.active {
     .var(background-color, menu-active-bg-color);
   }
@@ -278,8 +290,8 @@
       }
 
       &:not(.active) {
-        &:hover, &:focus {
-          .var(background-color, tr-active-color);
+        a:hover, a:focus {
+          .var(background-color, menu-2ndlvl-highlight-bg-color);
         }
       }
 
@@ -501,8 +513,8 @@ html.no-js  #toggle-sidebar {
 
 #layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
   &.nav-item:not(.badge-nav-item) {
-    &:not(.selected):not(.active):hover,
-    &:not(.selected):not(.active):focus {
+    &:not(.selected):not(.active) a:hover,
+    &:not(.selected):not(.active) a:focus {
       .var(background-color, menu-2ndlvl-highlight-bg-color);
     }
   }
@@ -535,7 +547,8 @@ html.no-js  #toggle-sidebar {
 
 #layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
   &.badge-nav-item:not(.selected) {
-    &:hover {
+    a:hover,
+    a:focus {
       .var(background-color, menu-2ndlvl-highlight-bg-color);
     }
   }

public/css/themes/Winter.less

@@ -8,6 +8,8 @@
 
 @tr-active-color: #dadeea;
 @tr-hover-color: #c6cfe4;
+@menu-2ndlvl-highlight-bg-color: transparent;
+@menu-2ndlvl-active-color: @text-color;
 
 /* Snow, from http://codepen.io/NickyCDK/pen/AIonk */
 #login, #header-logo-container, #main > .container > .controls > .tabs {
@@ -61,4 +63,4 @@
   > a:hover, > a:focus {
     color: white;
   }
-}
+}

public/css/themes/high-contrast.less

@@ -34,6 +34,7 @@
 @menu-highlight-color: white;
 @menu-2ndlvl-color: white;
 @menu-2ndlvl-highlight-color: white;
+@menu-2ndlvl-active-hover-color: @text-color;
 
 #menu ul.nav-level-1 > .nav-item > a {
   &:focus, &:hover {

public/css/themes/solarized-dark.less

@@ -51,6 +51,8 @@
 @menu-bg-color: @base02;
 @menu-active-bg-color: @base03;
 @menu-highlight-color: @icinga-blue;
+@menu-2ndlvl-active-bg-color: lighten(@base03, 5%);
+@menu-highlight-hover-bg-color: @base03;
 @menu-2ndlvl-color: #c4c4c4;
 @menu-flyout-color: @text-color;