Modify top bar and menu style

config/modules/monitoring/menu.ini

@@ -17,20 +17,33 @@ Services.title      = "Services"
 Services.route       = "/monitoring/list/services"
 Services.iconClass   = "icinga-icon-service-petrol"
 
-Downtimes       = "/monitoring/list/downtimes"
+Downtimes.title      = "Downtimes"
-Notifications   = "/monitoring/list/notifications"
+Downtimes.route      = "/monitoring/list/downtimes"
-Comments        = "/monitoring/list/comments"
+Downtimes.iconClass  = "icinga-icon-down-petrol"
+
+Notifications.title  = "Notifications"
+Notifications.route  = "/monitoring/list/notifications"
+Notifications.iconClass  = "icinga-icon-notification-petrol"
+
+Comments.title       = "Comments"
+Comments.route       = "/monitoring/list/comments"
+Comments.iconClass   = "icinga-icon-comment-petrol"
+
 Contacts             = "/monitoring/list/contacts"
+
 Contact Groups  = "/monitoring/list/contactgroups"
 
 Servicegroups.title  = "Servicegroups"
 Servicegroups.route  = "/monitoring/list/servicegroups"
+Servicegroups.iconClass   = "icinga-icon-servicegroup-petrol"
 
 Hostgroups.title     = "Hostgroups"
 Hostgroups.route     = "/monitoring/list/hostgroups"
+Hostgroups.iconClass = "icinga-icon-hostgroup-petrol"
 
 History.title        = "History"
 History.route        = "/monitoring/list/eventhistory"
+History.iconClass    = "icinga-icon-history-petrol"
 
 Performance.title    = "Performance"
 Performance.route    ="/monitoring/process/performance"

public/css/icinga/main.less

@@ -28,7 +28,7 @@
 @white : white;
 @black : #262625;
 @petrol : #049baf;
-@lightgrey : #ddd;
+@lightgrey : #dddddd;
 @darkgrey : #555555;
 
 /* =========================================================================
@@ -151,7 +151,7 @@ p {
    ========================================================================= */
 
 .icinga-logo {
-  background: transparent url("@{baseurl}/img/logo_icinga.png") center center no-repeat;
+  background: transparent url("@{baseurl}/img/logo_icinga-inv.png") center center no-repeat;
   width: 94px;
   height: 33px;
   display: block;

public/css/icinga/navigation.less

@@ -23,9 +23,15 @@
  * @author    Icinga Development Team <info@icinga.org>
  */
 
+@white:      #ffffff;
+@lightgrey : #dddddd;
+
 /* =========================================================================
    Icinga Navigation
    ========================================================================= */
+.navbar {
+  background-image: linear-gradient(to bottom, #444444, #333333);
+}
 
 .navigation-tile-mixin {
   border-style: solid;
@@ -41,7 +47,6 @@
 }
 
 .nav-stacked {
-  background-color: @lightgrey;
 }
 
 .icinga-subnavigation {
@@ -49,26 +54,34 @@
 }
 
 .nav-stacked > li {
-  padding-left: 8px;
+  padding-left: 4px;
-  padding-top: 1px;
+  padding-top: 10px;
-  padding-bottom: 1px;
+  padding-bottom: 10px;
-  border-bottom: 1px dotted @petrol;
+  border-bottom: 1px solid @lightgrey;
-  border-right: 1px dotted @petrol;
+  border-right: 1px solid @lightgrey;
-
+  font-size: 11px;
+  background-color: rgb(248, 248, 248);
+  background-image: linear-gradient(rgb(255, 255, 255) 0px, rgb(248, 248, 248) 100%);
 }
+
+.nav-stacked > li > a {
+  letter-spacing: 1px;
+  padding-top: 0px;
+  padding-bottom: 3px;
+}
+
 .nav-stacked > li:first-child {
-  border-top: 1px dotted @petrol;
 }
 
 .icinga-subnavigation > li {
   padding-top: 8px;
   padding-bottom: 8px;
-  border-bottom: 1px dotted @petrol;
+  border-bottom: 1px solid @lightgrey;
-  border-right: 1px dotted @petrol;
+  border-right: 1px solid @lightgrey;
 }
 
 ul.icinga-subnavigation {
-  border-bottom: 1px dotted @petrol;
+  border-bottom: 1px solid @lightgrey;
   margin-left: 0;
   padding-left: 15px;
 }
@@ -81,9 +94,9 @@ ul.icinga-subnavigation {
 
 .nav-stacked > li > a,
 .icinga-subnavigation > li > a {
-  padding-left: 40px;
+  padding-left: 20px;
   padding-right: 3px;
-  border-left: 6px solid @petrol;
+  /* border-left: 6px solid @petrol; */
   display: inline-block;
 }
 
@@ -108,8 +121,8 @@ ul.icinga-subnavigation {
 
 .nav-stacked > li.active,
 .icinga-subnavigation > li.active {
-  background-color: @white;
+  background: none;
-  border-right: 0;
+  border-right: none;
 }
 
 .badge-container-nav {