Working on Admin navbars

uiframework/admin/signin.html

@@ -55,12 +55,14 @@
                       <input type="password" name="password" class="form-control input-lg" placeholder="Password">
                     </div>
                   </div>
+                  <div class="form-group">
+                    <div class="control-input">
+                      <button class="btn btn-primary btn-block btn-lg">Sign in</button>
+                    </div>
+                  </div>
 
                 </div>
 
-                <div class="form-footer">
-                  <button class="btn btn-primary btn-block">Sign in</button>
-                </div>
 
               </form>
             </div>

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

@@ -12,41 +12,6 @@
 }
 
 
-// Breadcrumb
-//
-//##
-.page-header {
-  &>.container {
-    .breadcrumb {
-      margin-bottom: (@line-height-computed * @headings-line-height) * -1;
-
-      color: @breadcrumb-color;
-      font-size: @font-size-small;
-
-      &>li {
-        + li:before {
-          /* Tinysh hack to remove BS3's style */
-          display: none;
-        }
-
-        a:link, a:visited {
-          color: @breadcrumb-color;
-        }
-
-        a:hover, a:active {
-          color: @breadcrumb-active-color;
-          text-decoration: none;
-        }
-
-        span {
-          margin: 0px 4px 0px 6px;
-        }
-      }
-    }
-  }
-}
-
-
 // Actions
 //
 //##
@@ -81,82 +46,3 @@
     }
   }
 }
-
-
-// Details
-//
-//##
-.page-header {
-  &>.container {
-    .page-details {
-      display: block;
-      clear: both;
-
-      color: @text-muted;
-
-      a:link, a:visited {
-        color: @text-muted;
-      }
-
-      a:active, a:hover {
-        color: @text-color;
-        text-decoration: none;
-      }
-    }
-  }
-}
-
-/* Small displays */
-@media (max-width: @screen-sm-min) {
-  .page-header {
-    &>.container {
-      .page-details {
-        margin-top: @line-height-computed;
-      }
-    }
-  }
-}
-
-
-// Pills
-//
-//##
-.page-pills {
-  border-bottom: 1px solid @page-header-border-color;
-  margin: @line-height-computed * -1 0px @line-height-computed;
-  padding: (@line-height-computed / 2) 0px;
-
-  .nav-pills {
-    margin: 0px;
-
-    &>li {
-      &>a {
-        padding: @page-pills-padding;
-
-        font-size: @font-size-large;
-
-        &>.badge {
-          border-radius: @border-radius-small;
-          position: relative;
-          bottom: 3px;
-        }
-
-        &:hover {
-          &>.badge {
-            background-color: @nav-link-hover-color;
-          }
-        }
-      }
-
-      &.active {
-        &>a {
-          &:link, &:active, &:visited, &:hover {
-            &>.badge {
-              background-color: @nav-link-active-color;
-            }
-          }
-        }
-      }
-    }
-  }
-}

uiframework/misago/admin/css/misago/login.less

@@ -18,10 +18,27 @@
     margin-left: auto;
   }
 
-  /* Padding for spacing */
   .inner {
     padding: 30px;
   }
+
+  .form-panel {
+    background: darken(@body-bg, 1%);
+    border: none;
+    box-shadow: 0px 0px 0px 4px darken(@body-bg, 40%);
+
+    .form-header {
+      background: darken(@body-bg, 3%);
+      border-radius: @border-radius-large @border-radius-large 0px 0px;
+      border-bottom: 1px solid darken(@body-bg, 8%);
+
+      text-align: center;
+    }
+
+    .form-body {
+      border: none;
+    }
+  }
 }
 
 /* Big displays */

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

@@ -7,7 +7,6 @@ html, body {
 @import "alerts.less";
 @import "buttons.less";
 @import "dropdowns.less";
-@import "navs.less";
 
 // Layout elements
 @import "navbar.less";

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

@@ -3,6 +3,8 @@
 // --------------------------------------------------
 
 .navbars-container {
+  border-bottom: @navbar-border;
+
   .navbar {
     border-bottom: none;
     margin-bottom: 0px;
@@ -24,6 +26,37 @@
 /* Big displays */
 @media (min-width: @screen-sm-min) {
   .navbars-container {
-    border-bottom: 2px solid @navbar-border;
+    .navbar-brand {
+      margin-left: @line-height-computed / 2;
+      margin-right: @line-height-computed / 2;
+    }
+
+    /* Bolden active links */
+    .navbar {
+      li.active {
+        a {
+          font-weight: bold;
+        }
+      }
+    }
+
+    /* Put fancy blue bar under active link */
+    .navbar:last-child {
+      li.active {
+        a:link, a:active, a:visited, a:hover {
+          border-bottom: 3px solid @brand-primary;
+          margin-bottom: -3px;
+        }
+      }
+    }
+
+    .navbar-inverse {
+      li {
+        a:hover {
+          border-bottom: 3px solid fadeOut(@navbar-inverse-link-active-color, 50%);
+          margin-bottom: -3px;
+        }
+      }
+    }
   }
 }

uiframework/misago/admin/css/misago/navs.less

@@ -1,32 +0,0 @@
-//
-// Navs
-// --------------------------------------------------
-
-
-.nav {
-  &>li {
-    &>a {
-      &:link, &:visited {
-        background-color: @nav-link-bg;
-
-        color: @nav-link-color;
-      }
-
-      &:hover, &:active {
-        background-color: @nav-link-hover-bg;
-
-        color: @nav-link-hover-color;
-      }
-    }
-
-    &.active {
-      &>a {
-        &:link, &:active, &:hover, &:visited {
-          background-color: @nav-link-active-bg;
-
-          color: @nav-link-active-color;
-        }
-      }
-    }
-  }
-}

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

@@ -36,11 +36,21 @@
 //
 //## Navbar style
 
-@navbar-default-bg:                darken(@body-bg, 10%);
-@navbar-default-link-color:        fadeOut(@text-color, 80%);
+@navbar-inverse-bg:                        darken(@body-bg, 5%);
+@navbar-inverse-link-color:                darken(@navbar-inverse-bg, 30%);
+@navbar-inverse-link-hover-color:          darken(@navbar-inverse-bg, 60%);
+@navbar-inverse-link-hover-bg:             transparent;
+@navbar-inverse-link-active-color:         darken(@navbar-inverse-bg, 70%);
+@navbar-inverse-link-active-bg:            @navbar-inverse-bg;
 
-@navbar-inverse-bg:                darken(@body-bg, 5%);
-@navbar-border:                    darken(@body-bg, 15%);
+@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-link-active-color:         darken(@navbar-inverse-bg, 70%);
+@navbar-default-link-active-bg:            @navbar-inverse-bg;
+
+@navbar-border:                            3px solid darken(@body-bg, 15%);
 
 
 //== Dropdowns
@@ -68,20 +78,6 @@
 //
 //##
 
-// Shared navs styles
-@nav-link-color:                            darken(@body-bg, 35%);
-@nav-link-bg:                               transparent;
-
-@nav-link-hover-color:                      @text-color;
-@nav-link-hover-bg:                         darken(@body-bg, 5%);
-
-@nav-link-active-color:                     @body-bg;
-@nav-link-active-bg:                        @brand-primary;
-
-// Pills
-@nav-pills-active-link-hover-bg:            @component-active-bg;
-@nav-pills-active-link-hover-color:         @component-active-color;
-
 //== Page header
 @page-header-border-color:       darken(@body-bg, 9%);
 @page-pills-padding:             @padding-small-vertical @padding-small-horizontal;

uiframework/misago/admin/css/style.css

@@ -3455,7 +3455,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav > li > a:hover,
 .nav > li > a:focus {
   text-decoration: none;
-  background-color: #f0f0f0;
+  background-color: #eeeeee;
 }
 .nav > li.disabled > a {
   color: #999999;
@@ -3470,7 +3470,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav .open > a,
 .nav .open > a:hover,
 .nav .open > a:focus {
-  background-color: #f0f0f0;
+  background-color: #eeeeee;
   border-color: #3498db;
 }
 .nav .nav-divider {
@@ -3933,33 +3933,33 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-default {
-  background-color: #e3e3e3;
-  border-color: #d2d2d2;
+  background-color: #303030;
+  border-color: #202020;
 }
 .navbar-default .navbar-brand {
-  color: rgba(44, 62, 80, 0.2);
+  color: #cccccc;
 }
 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
-  color: rgba(26, 36, 47, 0.2);
+  color: #b3b3b3;
   background-color: transparent;
 }
 .navbar-default .navbar-text {
   color: #777777;
 }
 .navbar-default .navbar-nav > li > a {
-  color: rgba(44, 62, 80, 0.2);
+  color: #cccccc;
 }
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
-  color: #333333;
-  background-color: transparent;
+  color: #ffffff;
+  background-color: #3d3d3d;
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
-  color: #555555;
-  background-color: #d2d2d2;
+  color: #3d3d3d;
+  background-color: #f0f0f0;
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
@@ -3979,28 +3979,28 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
-  border-color: #d2d2d2;
+  border-color: #202020;
 }
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #d2d2d2;
-  color: #555555;
+  background-color: #f0f0f0;
+  color: #3d3d3d;
 }
 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-    color: rgba(44, 62, 80, 0.2);
+    color: #cccccc;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #333333;
-    background-color: transparent;
+    color: #ffffff;
+    background-color: #3d3d3d;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
-    color: #555555;
-    background-color: #d2d2d2;
+    color: #3d3d3d;
+    background-color: #f0f0f0;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -4010,17 +4010,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-default .navbar-link {
-  color: rgba(44, 62, 80, 0.2);
+  color: #cccccc;
 }
 .navbar-default .navbar-link:hover {
-  color: #333333;
+  color: #ffffff;
 }
 .navbar-inverse {
   background-color: #f0f0f0;
   border-color: #d6d6d6;
 }
 .navbar-inverse .navbar-brand {
-  color: #999999;
+  color: #a3a3a3;
 }
 .navbar-inverse .navbar-brand:hover,
 .navbar-inverse .navbar-brand:focus {
@@ -4031,18 +4031,18 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   color: #999999;
 }
 .navbar-inverse .navbar-nav > li > a {
-  color: #999999;
+  color: #a3a3a3;
 }
 .navbar-inverse .navbar-nav > li > a:hover,
 .navbar-inverse .navbar-nav > li > a:focus {
-  color: #ffffff;
+  color: #575757;
   background-color: transparent;
 }
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > a:hover,
 .navbar-inverse .navbar-nav > .active > a:focus {
-  color: #ffffff;
-  background-color: #d6d6d6;
+  color: #3d3d3d;
+  background-color: #f0f0f0;
 }
 .navbar-inverse .navbar-nav > .disabled > a,
 .navbar-inverse .navbar-nav > .disabled > a:hover,
@@ -4067,8 +4067,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .open > a:hover,
 .navbar-inverse .navbar-nav > .open > a:focus {
-  background-color: #d6d6d6;
-  color: #ffffff;
+  background-color: #f0f0f0;
+  color: #3d3d3d;
 }
 @media (max-width: 767px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
@@ -4078,18 +4078,18 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     background-color: #d6d6d6;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
-    color: #999999;
+    color: #a3a3a3;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #ffffff;
+    color: #575757;
     background-color: transparent;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
-    color: #ffffff;
-    background-color: #d6d6d6;
+    color: #3d3d3d;
+    background-color: #f0f0f0;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -4099,10 +4099,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-inverse .navbar-link {
-  color: #999999;
+  color: #a3a3a3;
 }
 .navbar-inverse .navbar-link:hover {
-  color: #ffffff;
+  color: #575757;
 }
 .breadcrumb {
   padding: 8px 15px;
@@ -6155,22 +6155,8 @@ body {
     color: #fcfcfc;
   }
 }
-.nav > li > a:link,
-.nav > li > a:visited {
-  background-color: transparent;
-  color: #a3a3a3;
-}
-.nav > li > a:hover,
-.nav > li > a:active {
-  background-color: #f0f0f0;
-  color: #2c3e50;
-}
-.nav > li.active > a:link,
-.nav > li.active > a:active,
-.nav > li.active > a:hover,
-.nav > li.active > a:visited {
-  background-color: #3498db;
-  color: #fcfcfc;
+.navbars-container {
+  border-bottom: 3px solid #d6d6d6;
 }
 .navbars-container .navbar {
   border-bottom: none;
@@ -6189,7 +6175,26 @@ body {
 /* Big displays */
 @media (min-width: 768px) {
   .navbars-container {
-    border-bottom: 2px solid #d6d6d6;
+    /* Bolden active links */
+    /* Put fancy blue bar under active link */
+  }
+  .navbars-container .navbar-brand {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .navbars-container .navbar li.active a {
+    font-weight: bold;
+  }
+  .navbars-container .navbar:last-child li.active a:link,
+  .navbars-container .navbar:last-child li.active a:active,
+  .navbars-container .navbar:last-child li.active a:visited,
+  .navbars-container .navbar:last-child li.active a:hover {
+    border-bottom: 3px solid #3498db;
+    margin-bottom: -3px;
+  }
+  .navbars-container .navbar-inverse li a:hover {
+    border-bottom: 3px solid rgba(61, 61, 61, 0.5);
+    margin-bottom: -3px;
   }
 }
 .jumbotron {
@@ -6199,27 +6204,6 @@ body {
   border-bottom-width: 2px;
   margin-top: -20px;
 }
-.page-header > .container .breadcrumb {
-  margin-bottom: -22px;
-  color: #cccccc;
-  font-size: 12px;
-}
-.page-header > .container .breadcrumb > li + li:before {
-  /* Tinysh hack to remove BS3's style */
-  display: none;
-}
-.page-header > .container .breadcrumb > li a:link,
-.page-header > .container .breadcrumb > li a:visited {
-  color: #cccccc;
-}
-.page-header > .container .breadcrumb > li a:hover,
-.page-header > .container .breadcrumb > li a:active {
-  color: #999999;
-  text-decoration: none;
-}
-.page-header > .container .breadcrumb > li span {
-  margin: 0px 4px 0px 6px;
-}
 .page-header > .container .page-actions {
   float: right;
   margin-top: -47px;
@@ -6240,52 +6224,6 @@ body {
     margin-top: 20px;
   }
 }
-.page-header > .container .page-details {
-  display: block;
-  clear: both;
-  color: #969696;
-}
-.page-header > .container .page-details a:link,
-.page-header > .container .page-details a:visited {
-  color: #969696;
-}
-.page-header > .container .page-details a:active,
-.page-header > .container .page-details a:hover {
-  color: #2c3e50;
-  text-decoration: none;
-}
-/* Small displays */
-@media (max-width: 768px) {
-  .page-header > .container .page-details {
-    margin-top: 20px;
-  }
-}
-.page-pills {
-  border-bottom: 1px solid #e6e6e6;
-  margin: -20px 0px 20px;
-  padding: 10px 0px;
-}
-.page-pills .nav-pills {
-  margin: 0px;
-}
-.page-pills .nav-pills > li > a {
-  padding: 5px 10px;
-  font-size: 18px;
-}
-.page-pills .nav-pills > li > a > .badge {
-  border-radius: 3px;
-  position: relative;
-  bottom: 3px;
-}
-.page-pills .nav-pills > li > a:hover > .badge {
-  background-color: #2c3e50;
-}
-.page-pills .nav-pills > li.active > a:link > .badge,
-.page-pills .nav-pills > li.active > a:active > .badge,
-.page-pills .nav-pills > li.active > a:visited > .badge,
-.page-pills .nav-pills > li.active > a:hover > .badge {
-  background-color: #fcfcfc;
-}
 .main-footer {
   margin-top: 30px;
   margin-bottom: 30px;
@@ -6477,7 +6415,6 @@ body {
   width: 100%;
   height: 100%;
   min-height: 100%;
-  /* Padding for spacing */
 }
 .login-form .site-wrapper-inner {
   display: table-cell;
@@ -6490,6 +6427,20 @@ body {
 .login-form .inner {
   padding: 30px;
 }
+.login-form .form-panel {
+  background: #fafafa;
+  border: none;
+  box-shadow: 0px 0px 0px 4px #969696;
+}
+.login-form .form-panel .form-header {
+  background: #f5f5f5;
+  border-radius: 6px 6px 0px 0px;
+  border-bottom: 1px solid #e8e8e8;
+  text-align: center;
+}
+.login-form .form-panel .form-body {
+  border: none;
+}
 /* Big displays */
 @media (min-width: 768px) {
   .login-form .site-wrapper-inner {