CSS: design user logout and preferences

library/Icinga/Application/Web.php

@@ -311,6 +311,7 @@ class Web extends EmbeddedWeb
                     ),
                     'cssClass'  => 'user-nav-item',
                     'label'     => $this->user->getUsername(),
+                    'icon'	=> 'user',
                     'url'       => 'account',
                     'priority'  => 900,
                     'renderer'  => array(
@@ -320,6 +321,7 @@ class Web extends EmbeddedWeb
                 'logout' => array(
                     'cssClass'  => 'user-nav-item',
                     'label'     => t('Logout'),
+                    'icon'	=> 'starttime',
                     'priority'  => 990,
                     'renderer'  => array(
                         'LogoutNavigationItemRenderer',

public/css/icinga/login.less

@@ -5,12 +5,16 @@
   width: 100%;
   height: 100%;
 
+  .control-group {
+    padding: 0px 0px 0px 0px;
+  }
+
   .logo {
     text-align: center;
   }
 
   .image {
-    padding-top: 5%;
+    padding-top: 3%;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
@@ -22,7 +26,7 @@
   }
 
   .image img {
-    width: 375px;
+    width: 355px;
   }
 
   .form {

public/css/icinga/menu.less

@@ -68,6 +68,7 @@
 }
 
 #menu > nav > ul > li a:hover {
+  color: @icinga-blue;
 }
 
 #menu > nav > ul > li li {
@@ -152,6 +153,7 @@
   transition: border 0.5s;
 }
 
+
 /* BEGIN OF Hoverable menu */
 
 #menu li.hover {
@@ -328,3 +330,46 @@ a:focus {
     }
   }
 }
+
+.user-nav-item {
+  margin-top: 39px;
+}
+.user-nav-item ~ .user-nav-item {
+  margin-top: 0px;
+}
+
+#menu .user-nav-item {
+  background-color: @color-ok;
+  border-left: solid 5px @color-ok;
+
+  .user-avatar {
+    border: 1px solid @gray;
+    float: right;
+    margin-top: 5px;
+    margin-right: 5px;
+    border-radius: 150px;
+    height: 30px;
+    width: 30px;
+  }
+
+  a {
+    color: @text-color-inverted;
+  };
+
+  a:hover {
+    background-color: white;
+    color: @color-ok;
+  };
+}
+
+#menu > nav > ul > li.user-nav-item.active > div.clearfix > a {
+  color: @color-ok;
+}
+
+#menu > nav > ul > li.user-nav-item.active {
+  border-left: solid 5px @color-ok;
+  -webkit-transition: border 0.5s;
+  -moz-transition: border 0.5s;
+  -o-transition: border 0.5s;
+  transition: border 0.5s;
+}

public/css/icinga/themes/icinga.less

@@ -6,6 +6,7 @@
 
 // Icinga colors
 @icinga-blue: #0095BF;
+@icinga-blue-dark: #AA95BF;
 @color-ok: #44bb77;
 @color-warning: #ffaa44;
 @color-warning-handled: #ffcc66;