Some touches to admin navbar

uiframework/admin/layout.html

@@ -59,16 +59,10 @@
             <p class="navbar-text">
               <img src="../misago/admin/img/mred.png" alt="Avatar">
               Username
+              <a href="#" class="logout" data-toggle="modal" data-target="#logout-modal">
+                <span class="fa fa-power-off"></span>
+              </a>
             </p>
-            <ul class="nav navbar-nav">
-              <li>
-              </li>
-              <li>
-                <a href="#" data-toggle="modal" data-target="#logout-modal">
-                  <span class="fa fa-power-off"></span>
-                </a>
-              </li>
-            </ul>
           </div>
         </div>
       </div>
@@ -123,6 +117,12 @@
 
     </div><!-- /.container -->
 
+    <div class="container">
+      <footer class="page-footer">
+        Lorem ipsum dolor
+      </footer>
+    </div>
+
     <!-- Log out modal -->
     <div class="modal fade" id="logout-modal" tabindex="-1" role="dialog" aria-labelledby="logoutModalLabel" aria-hidden="true">
       <div class="modal-dialog">

uiframework/misago/admin/css/misago/header.less

@@ -14,7 +14,7 @@
   h1 {
   	margin: 0px;
   	padding: 0px;
-  	overflow: auto;
+  	overflow: visible;
 
   	font-size: @font-size-large * 1.5;
 

uiframework/misago/admin/css/misago/navbar.less

@@ -14,9 +14,9 @@
       background-size: cover;
       background-repeat: no-repeat;
       border-radius: 4px;
-      width: @navbar-height - 12;
-      height: @navbar-height - 12;
-      margin-top: 6px;
+      width: @navbar-height - 16;
+      height: @navbar-height - 16;
+      margin-top: 8px;
     }
 
     .fa, .glyphicon {
@@ -28,7 +28,7 @@
 
     .user-nav {
       .navbar-text {
-        color: darken(#fff, 10%);
+        color: @text-color;
       }
 
       img {
@@ -38,6 +38,35 @@
         position: relative;
         bottom: 1px;
       }
+
+      .logout {
+        &:link, &:visited {
+          background-color: @navbar-default-bg;
+          border-radius: @border-radius-base;
+          display: inline-block;
+          margin: -8px 0px;
+          margin-right: 8px;
+          margin-left: @line-height-computed / 2;
+          padding-top: 5px;
+          width: 31px;
+          height: 31px;
+
+          color: @navbar-default-link-color;
+          text-align: center;
+        }
+
+        &:hover {
+          background-color: @navbar-default-link-color;
+
+          color: @navbar-default-bg;
+        }
+
+        &:active {
+          background-color: @body-bg;
+
+          color: @navbar-default-bg;
+        }
+      }
     }
   }
 }

uiframework/misago/admin/css/misago/variables.less

@@ -48,14 +48,14 @@
 @navbar-inverse-link-active-color:         darken(@navbar-inverse-bg, 70%);
 @navbar-inverse-link-active-bg:            @navbar-inverse-bg;
 
-@navbar-default-bg:                        darken(@body-bg, 80%);
-@navbar-default-link-color:                #ccc;
-@navbar-default-link-hover-color:          #fff;
-@navbar-default-link-hover-bg:             lighten(@navbar-default-bg, 5%);
+@navbar-default-bg:                        darken(@body-bg, 10%);
+@navbar-default-link-color:                darken(@navbar-default-bg, 40%);
+@navbar-default-link-hover-color:          darken(@navbar-default-bg, 60%);
+@navbar-default-link-hover-bg:             darken(@navbar-default-bg, 3%);
 @navbar-default-link-active-color:         darken(@navbar-inverse-bg, 70%);
 @navbar-default-link-active-bg:            @navbar-inverse-bg;
 
-@navbar-border:                            3px solid darken(@body-bg, 15%);
+@navbar-border:                            3px solid darken(@body-bg, 20%);
 
 
 //== Dropdowns

uiframework/misago/admin/css/style.css

@@ -3933,27 +3933,27 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-default {
-  background-color: #2e2e2e;
-  border-color: #1d1d1d;
+  background-color: #e0e0e0;
+  border-color: #d0d0d0;
 }
 .navbar-default .navbar-brand {
-  color: #cccccc;
+  color: #7a7a7a;
 }
 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
-  color: #b3b3b3;
+  color: #616161;
   background-color: transparent;
 }
 .navbar-default .navbar-text {
   color: #777777;
 }
 .navbar-default .navbar-nav > li > a {
-  color: #cccccc;
+  color: #7a7a7a;
 }
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
-  color: #ffffff;
-  background-color: #3b3b3b;
+  color: #474747;
+  background-color: #d9d9d9;
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
@@ -3979,7 +3979,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
-  border-color: #1d1d1d;
+  border-color: #d0d0d0;
 }
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
@@ -3989,12 +3989,12 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-    color: #cccccc;
+    color: #7a7a7a;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #ffffff;
-    background-color: #3b3b3b;
+    color: #474747;
+    background-color: #d9d9d9;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
@@ -4010,10 +4010,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-default .navbar-link {
-  color: #cccccc;
+  color: #7a7a7a;
 }
 .navbar-default .navbar-link:hover {
-  color: #ffffff;
+  color: #474747;
 }
 .navbar-inverse {
   background-color: #ededed;
@@ -6162,7 +6162,7 @@ body {
   }
 }
 .navbars-container {
-  border-bottom: 3px solid #d4d4d4;
+  border-bottom: 3px solid #c7c7c7;
 }
 .navbars-container .navbar {
   border-bottom: none;
@@ -6173,9 +6173,9 @@ body {
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 4px;
-  width: 38px;
-  height: 38px;
-  margin-top: 6px;
+  width: 34px;
+  height: 34px;
+  margin-top: 8px;
 }
 .navbars-container .navbar .fa,
 .navbars-container .navbar .glyphicon {
@@ -6184,7 +6184,7 @@ body {
   font-size: 18px;
 }
 .navbars-container .navbar .user-nav .navbar-text {
-  color: #e6e6e6;
+  color: #444444;
 }
 .navbars-container .navbar .user-nav img {
   border-radius: 4px;
@@ -6193,6 +6193,28 @@ body {
   position: relative;
   bottom: 1px;
 }
+.navbars-container .navbar .user-nav .logout:link,
+.navbars-container .navbar .user-nav .logout:visited {
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  display: inline-block;
+  margin: -8px 0px;
+  margin-right: 8px;
+  margin-left: 10px;
+  padding-top: 5px;
+  width: 31px;
+  height: 31px;
+  color: #7a7a7a;
+  text-align: center;
+}
+.navbars-container .navbar .user-nav .logout:hover {
+  background-color: #7a7a7a;
+  color: #e0e0e0;
+}
+.navbars-container .navbar .user-nav .logout:active {
+  background-color: #fafafa;
+  color: #e0e0e0;
+}
 /* Big displays */
 @media (min-width: 768px) {
   .navbars-container {
@@ -6230,7 +6252,7 @@ body {
 .page-header h1 {
   margin: 0px;
   padding: 0px;
-  overflow: auto;
+  overflow: visible;
   font-size: 27px;
 }
 .page-header h1 .main,