Fix contrast for white-label header

Author: tzi

plugins/CoreHome/stylesheets/layout.less

@@ -68,6 +68,28 @@ ul.browser-default {
   ul.right.hide-on-med-and-down {
     margin-right: 4px;
 
+    .navbar-icon {
+      padding: 8px;
+    }
+    .navbar-label {
+      padding: 4px;
+    }
+    .navbar-label, .navbar-icon {
+      position: relative;
+      z-index: 1;
+      border-radius: 8px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: 8px;
+        background: transparent;
+        opacity: 0.051;
+      }
+    }
+
     > li[role="menuitem"].active {
       background: transparent;
 
@@ -77,7 +99,10 @@ ul.browser-default {
 
       .navbar-icon,
       .navbar-label {
-        background-color: @theme-color-background-tinyContrast;
+        &::after {
+          // contrast + opacity to create an effect that work in light and dark mode, with our without white-label customization
+          background: light-dark(black, white);
+        }
       }
     }
 
@@ -89,21 +114,14 @@ ul.browser-default {
         background: transparent;
       }
 
-      .navbar-icon {
-        padding: 8px;
-      }
-      .navbar-label {
-        padding: 4px;
-      }
-      .navbar-label, .navbar-icon {
-        border-radius: 8px;
-      }
-
       &:hover .navbar-icon,
       &:hover .navbar-label,
       &:focus .navbar-icon,
       &:focus .navbar-label {
-        background-color: @theme-color-background-tinyContrast;
+        &::after {
+          // contrast + opacity to create an effect that work in light and dark mode, with our without white-label customization
+          background: light-dark(black, white);
+        }
       }
     }
   }
@@ -115,6 +133,10 @@ ul.browser-default {
   }
 
   ul:not(#mobile-top-menu) {
+    a {
+      color: @theme-color-header-text;
+    }
+
     .languageSelection {
       .title {
         color: @theme-color-header-text;
@@ -124,7 +146,6 @@ ul.browser-default {
   }
 
   ul a {
-    color: @theme-color-header-text;
     text-decoration: none;
     font-size: 14px;
     padding: 0 8px;