From 06d0621a12e057028e492f22249905c06e7a63b4 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Tue, 13 Apr 2021 10:43:52 +0200
Subject: [PATCH] menu.less: Use appropriate color variables based on usage

---
 public/css/icinga/base.less |  3 ++-
 public/css/icinga/menu.less | 16 ++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less
index dcb7c6753..e74b521f6 100644
--- a/public/css/icinga/base.less
+++ b/public/css/icinga/base.less
@@ -62,10 +62,11 @@
 // Menu colors
 @menu-bg-color: #06062B;
 @menu-active-bg-color: #181742;
-@menu-flyout-bg-color: @body-bg-color;
 @menu-color: #DBDBDB;
+@menu-active-color: @text-color;
 @menu-highlight-color: @icinga-blue;
 @menu-2ndlvl-color: #c4c4c4;
+@menu-2ndlvl-highlight-bg-color: @tr-hover-color;
 @menu-2ndlvl-highlight-color: @text-color-inverted;
 @menu-flyout-bg-color: @body-bg-color;
 @menu-flyout-color: @text-color;
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 2f1e6e28e..ccea1f3b3 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -68,7 +68,7 @@
   color: @menu-color;
 
   &.active {
-    color: @text-color;
+    color: @menu-active-color;
 
     > a > .badge {
       display: none;
@@ -92,7 +92,7 @@
 
   &:not(.selected) > a:hover,
   &:not(.selected) > a:focus {
-    background-color: fade(@text-color-inverted, 50%)
+    background-color: fade(@menu-bg-color, 50%)
   }
 
   // Balance icon weight for non active menu items
@@ -123,7 +123,7 @@
     position: absolute;
     right: -.75em;
 
-    background-color: @body-bg-color;
+    background-color: @menu-bg-color;
     box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
     content: "";
     display: block;
@@ -167,7 +167,7 @@
   }
 
   &.active > a {
-    color: @body-bg-color;
+    color: @menu-2ndlvl-highlight-color;
   }
 }
 
@@ -324,7 +324,7 @@
       }
 
       a.badge {
-         color: white;
+         color: @text-color-inverted;
          flex: 0 1 auto;
          margin-right: 1em;
          padding: .25em;
@@ -500,7 +500,7 @@ html.no-js  #toggle-sidebar {
   &.nav-item:not(.badge-nav-item) {
     &:not(.selected):not(.active):hover,
     &:not(.selected):not(.active):focus {
-      background-color: @tr-hover-color;
+      background-color: @menu-2ndlvl-highlight-bg-color;
     }
   }
 }
@@ -518,7 +518,7 @@ html.no-js  #toggle-sidebar {
   }
 
   &.badge-nav-item a.badge {
-    color: @body-bg-color;
+    color: @text-color-inverted;
     flex: 0 1 auto;
     margin-right: 1em;
     padding: .25em;
@@ -533,7 +533,7 @@ 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 {
-      background-color: @tr-hover-color;
+      background-color: @menu-2ndlvl-highlight-bg-color;
     }
   }
 }