CSS: Dark styles for sidebar

public/css/icinga/base.less

@@ -2,6 +2,7 @@
 
 // Black colors
 @black: #535353;
+@deep-black: #333;
 
 // Gray colors
 @gray: #7F7F7F;

public/css/icinga/layout.less

@@ -138,10 +138,6 @@
   }
 }
 
-#sidebar {
-  background-color: @gray-lighter;
-}
-
 .container,
 .error-message {
   // Don't outline containers and error messages when focused because they receive focus for accessibility only
@@ -243,6 +239,7 @@ html.no-js .controls > .tabs {
 }
 
 #sidebar {
+  background: #494949;
   z-index: 2;
 }
 
@@ -282,15 +279,31 @@ html.no-js .controls > .tabs {
       white-space: nowrap;
     }
 
+    .nav-item > a {
+      text-overflow: clip;
+    }
+
     .nav-level-1 > .nav-item i {
       font-size: 1.5em;
       margin-right: .5em;
     }
+
+    .search-control {
+      height: 3.333em;
+      background: none;
+      overflow: hidden;
+    }
+
+    #toggle-sidebar {
+      left: 1.5em;
+    }
   }
 
   #search:focus {
-    background-color: @gray-lighter;
+    background-color: @deep-black;
+    color: @text-color-inverted;
     box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2);
+    border-radius: 0 .25em .25em 0;
     padding-left: 3.75em;
     position: fixed;
     width: 20em;

public/css/icinga/menu.less

@@ -12,6 +12,7 @@
 #menu {
   height: 100%;
   overflow: auto;
+  box-shadow: inset -.5em 0 1em rgba(0,0,0,.3);
 }
 
 #menu a {
@@ -40,16 +41,21 @@
 }
 
 #menu .nav-level-1 > .nav-item {
-  border-left: 5px solid transparent;
   line-height: 2.167em; // 26 px
+  color: @text-color-inverted;
 
   &.active {
+    > a {
+      color: white;
+      font-weight: bold;
+      letter-spacing: .02em;
+    }
+
     > a > .badge {
       display: none;
     }
 
-    background-color: @body-bg-color;
-    border-color: @icinga-blue;
+    background-color: @deep-black;
   }
 
   &.no-icon > a {
@@ -57,7 +63,12 @@
   }
 
   > a {
-    padding: 0.5em 0.5em; // 6px 6px
+    padding: 0.5em 0.5em 0.5em .75em; // 6px 6px
+  }
+
+  // Balance icon weight for non active menu items
+  &:not(.active) > a > i {
+    opacity: 0.8
   }
 
   > a:active ~ .nav-level-2 > li {
@@ -65,15 +76,65 @@
   }
 }
 
+.collapsed #menu .nav-level-1 > .nav-item.active {
+  background: @icinga-blue;
+}
+
 #menu .nav-level-2 > .nav-item {
   // Collapse menu by default
   display: none;
   line-height: 1.833em; // 22px
-  margin-left: @icon-width;
+
+  &.no-icon {
+    padding-left: @icon-width;
+  }
 
   > a {
     font-size: @font-size-small;
-    padding: 0.364em 0.545em; // 4px 6px
+    color: #c4c4c4;
+    padding: 0.364em 0.545em 0.364em .8em; // 4px 6px
+  }
+
+  &:hover > a {
+    color: @body-bg-color;
+  }
+
+  &.active {
+    margin-left: 0;
+    background: @icinga-blue;
+    padding-left: 1.75em;
+    overflow: hidden;
+    position: relative;
+  }
+
+  // little caret on active level-2 item
+  &.active:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: .5em;
+    right: -.75em;
+    background: @body-bg-color;
+    width: 1.25em;
+    height: 1.25em;
+    box-shadow: 0 0 1em 0 rgba(0,0,0,.6);
+    -webkit-transform: rotate(45deg);
+       -moz-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+            transform: rotate(45deg)
+  }
+
+  &.active > a {
+    color: white;
+    font-weight: bold;
+  }
+}
+
+#menu .nav-level-1 > .nav-item:hover .nav-level-2 > .nav-item.active {
+  background: @icinga-blue;
+
+  > a {
+    color: white !important;
   }
 }
 
@@ -92,10 +153,14 @@
   line-height: 1;
   margin: 0 0.5em -.05em 0.25em;
   width: 1em;
+  -webkit-filter: invert(100%);
+     -moz-filter: invert(100%);
+      -ms-filter: invert(100%);
+          filter: invert(100%);
 }
 
-#menu .user-nav-item {
-  background-color: @gray-light;
+.nav-item:hover img.icon {
+  opacity: .6;
 }
 
 #menu input.search {
@@ -120,6 +185,7 @@
 
 #menu .nav-level-2 > .badge-nav-item > a > .badge {
   margin-top: 0.2em;
+  margin-right: .5em
 }
 
 // Hovered menu
@@ -127,28 +193,44 @@
 #menu .nav-level-1 > .nav-item:not(.active):hover {
   > .nav-level-2 {
     &:before {
-      border: 0.5em solid rgba(0, 0, 0, 0);
-      border-right-color: @text-color;
       content: "";
-      width: 1em;
-      position: fixed;
-      margin-left: -1em;
-      margin-top: 0.5em;
+      width:  1em;
+      height: 1em;
+      background: @text-color-inverted;
+      position: absolute;
+      margin-left: -.5em;
+      margin-top: 0.625em;
+      transform: rotate(45deg);
+      border-left:   1px solid @gray-light;
+      border-bottom: 1px solid @gray-light;
     }
 
-    background-color: @text-color;
-    color: @text-color-inverted;
+    background-color: @text-color-inverted;
+    box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
+    border-radius: .25em;
+    border: 1px solid @gray-light;
+    color: @text-color;
     padding: @vertical-padding 0;
     position: fixed;
     width: 14em;
 
     > .nav-item {
       display: block;
-      margin-left: 0.5em;
+      position: relative;
+      padding-left: .5em;
 
-      > a:hover {
-        color: @text-color-inverted;
-        text-decoration: underline;
+      > a {
+        padding-left: 1em;
+        color: @text-color-light;
+      }
+
+      // Hide activity caret when displayes as flyout
+      &:after {
+        display: none;
+      }
+
+      &:hover {
+        background: @tr-active-color;
       }
     }
   }
@@ -165,7 +247,7 @@
 #menu .nav-level-1 > .nav-item:not(.active):hover {
   > .nav-level-2 {
     // Position relative to parent
-    margin-left: 15.583em;
+    margin-left: 16em;
     margin-top: -3.167em;
   }
 }
@@ -173,7 +255,7 @@
 #layout.sidebar-collapsed #menu .nav-level-1 > .nav-item:hover {
   > .nav-level-2 {
     // Position relative to parent
-    margin-left: 3.583em;
+    margin-left: 4em;
     margin-top: -3.333em;
   }
 }
@@ -227,6 +309,7 @@
   right: 0;
   top: 0;
   user-select: none;
+  color: @text-color-inverted;
 }
 
 .search-reset:focus {