Home Explore Help
Sign In
221V
/
Misago
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Moar styles for navbar, emptied flavor for custom overrides

Rafał Pitoń 11 years ago
parent
bb70e7dfd5
commit
ae159c6d4e
12 changed files with 760 additions and 499 deletions
Unified View Show Diff Stats
  1. 0 10
      uiframework/misago/css/flavor/buttons.less
  2. 4 6
      uiframework/misago/css/flavor/flavor.less
  3. 0 150
      uiframework/misago/css/flavor/navbar.less
  4. 1 101
      uiframework/misago/css/flavor/variables.less
  5. 2 2
      uiframework/misago/css/misago/dropdowns.less
  6. 0 0
      uiframework/misago/css/misago/jumbotron.less
  7. 1 0
      uiframework/misago/css/misago/misago.less
  8. 336 51
      uiframework/misago/css/misago/navbar.less
  9. 131 3
      uiframework/misago/css/misago/variables.less
  10. 259 171
      uiframework/misago/css/style.css
  11. 4 4
      uiframework/misago/js/misago.js
  12. 22 1
      uiframework/navbar.html

+ 0 - 10
uiframework/misago/css/flavor/buttons.less
View File 

@@ -1,10 +0,0 @@
 
-//
 
-// Buttons
 
-// --------------------------------------------------
 
-
 
-
 
-.btn {
 
-  &, &:link, &:active, &:visited, &:hover, &:focus {
 
-    border-width: 2px;
 
-  }
 
-}

+ 4 - 6
uiframework/misago/css/flavor/flavor.less
View File 

@@ -1,6 +1,4 @@
 
-// Components
 
-@import "buttons.less";
 
-
 
-// Layout elements
 
-@import "navbar.less";
 
-@import "jumbotron.less";
 
+// Custom flavor build script
 
+//
 
+// This file should contain imports for custom less files defined by your flavor
 
+//

+ 0 - 150
uiframework/misago/css/flavor/navbar.less
View File 

@@ -1,150 +0,0 @@
 
-//
 
-// Forum Navbar
 
-// --------------------------------------------------
 
-
 
-.navbar {
 
-  .navbar-brand {
 
-    font-size: @font-size-large * 1.6;
 
-  }
 
-
 
-  .navbar-nav-user {
 
-    .user-toggle {
 
-      overflow: auto;
 
-
 
-      img {
 
-        border-radius: @border-radius-base;
 
-        height: 32px;
 
-      }
 
-    }
 
-  }
 
-}
 
-
 
-/* Navbar small dropdowns */
 
-@media (max-width: @screen-sm-min) {
 
-  .navbar {
 
-    .dropdown-menu {
 
-      li {
 
-        form {
 
-          button {
 
-            padding: 3px 25px;
 
-          }
 
-        }
 
-
 
-        a, &:link, &:visited, &:hover, &:active {
 
-          .badge {
 
-            background-color: @brand-danger;
 
-
 
-            color: @dropdown-bg;
 
-          }
 
-        }
 
-      }
 
-    }
 
-  }
 
-
 
-  .navbar-default {
 
-    .dropdown-menu {
 
-      li {
 
-        form {
 
-          button {
 
-            color: @navbar-default-link-color;
 
-
 
-            &:hover {
 
-              background: none;
 
-
 
-              color: @navbar-default-link-hover-color;
 
-            }
 
-
 
-            &:active, &:focus {
 
-              background: none;
 
-
 
-              color: @navbar-default-link-active-color;
 
-            }
 
-          }
 
-        }
 
-      }
 
-    }
 
-
 
-    .dropdown.open {
 
-      background: darken(@navbar-default-bg, 3%);
 
-      border-bottom: 2px solid darken(@navbar-default-bg, 6%);
 
-
 
-      .dropdown-toggle {
 
-        &:link, &:active, &:visited, &:hover {
 
-          background: darken(@navbar-default-bg, 6%);
 
-        }
 
-      }
 
-
 
-      .dropdown-menu {
 
-        li.divider {
 
-          background-color: darken(@navbar-default-bg, 9%);
 
-        }
 
-      }
 
-    }
 
-  }
 
-
 
-  .navbar-inverse {
 
-    .dropdown-menu {
 
-      button {
 
-        color: @navbar-inverse-link-color;
 
-
 
-        &:hover {
 
-          background: none;
 
-
 
-          color: @navbar-inverse-link-hover-color;
 
-        }
 
-
 
-        &:active, &:focus {
 
-          background: none;
 
-
 
-          color: @navbar-inverse-link-active-color;
 
-        }
 
-      }
 
-    }
 
-
 
-    .dropdown.open {
 
-      background: lighten(@navbar-inverse-bg, 3%);
 
-      border-left: 2px solid lighten(@navbar-inverse-bg, 6%);
 
-      border-bottom: 2px solid lighten(@navbar-inverse-bg, 6%);
 
-
 
-      .dropdown-menu {
 
-        li.divider {
 
-          background-color: lighten(@navbar-inverse-bg, 9%);
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-
 
-/* On big displays */
 
-@media (min-width: @screen-sm-min) {
 
-  .navbar-nav-user {
 
-    .user-toggle {
 
-      padding-left: 0px;
 
-      padding-right: 0px;
 
-
 
-      img {
 
-        float: right;
 
-        height: 32px;
 
-        margin: -6px 0px;
 
-        margin-left: 8px;
 
-      }
 
-    }
 
-
 
-    .dropdown-menu {
 
-      min-width: 256px;
 
-
 
-      &:after {
 
-        border: solid transparent;
 
-        border-bottom-color: @dropdown-bg;
 
-        border-width: 6px;
 
-        content: "";
 
-        height: 0;
 
-        position: absolute;
 
-        pointer-events: none;
 
-        right: 10px;
 
-        top: -11px;
 
-        width: 0;
 
-      }
 
-    }
 
-  }
 
-}

+ 1 - 101
uiframework/misago/css/flavor/variables.less
View File 

@@ -2,104 +2,4 @@
 
 // Flavor Variables
 
 // Flavor Variables
 
 // --------------------------------------------------
 
 // --------------------------------------------------
 
 
 
-
 
-//== Colors
 
-//
 
-//## Basic colors for use in this flavor
 
-
 
-@brand-primary:         #3498db;
 
-@brand-success:         #5cb85c;
 
-@brand-info:            #5bc0de;
 
-@brand-warning:         #f0ad4e;
 
-@brand-danger:          #d9534f;
 
-
 
-//** Background color for `<body>`.
 
-@body-bg:               darken(#fff, 1%);
 
-//** Global text color on `<body>`.
 
-@text-color:            #2c3e50;
 
-
 
-//** Global textual link color.
 
-@link-color:            @brand-primary;
 
-//** Link hover color set via `darken()` function.
 
-@link-hover-color:      darken(@link-color, 15%);
 
-
 
-//** Text muted color
 
-@text-muted:            #95a5a6;
 
-
 
-
 
-//== Navbar
 
-//
 
-//## Custom navbar flavor
 
-
 
-// Navbar Colors
 
-@navbar-default-color:             #2c3e50;
 
-@navbar-default-bg:                #ecf0f1;
 
-@navbar-default-border:            darken(@navbar-default-bg, 7%);
 
-
 
-// Navbar links
 
-@navbar-primary-link-color:                #7f8c8d;
 
-@navbar-primary-link-bg:                   @navbar-default-bg;
 
-@navbar-primary-link-border:               @navbar-default-border;
 
-@navbar-primary-link-hover-color:          @brand-primary;
 
-@navbar-primary-link-hover-bg:             @navbar-default-bg;
 
-@navbar-primary-link-hover-border:         @brand-primary;
 
-@navbar-primary-link-active-color:         @body-bg;
 
-@navbar-primary-link-active-bg:            @brand-primary;
 
-@navbar-primary-link-active-border:        @brand-primary;
 
-
 
-@navbar-default-link-color:                #7f8c8d;
 
-@navbar-default-link-hover-color:          @brand-primary;
 
-@navbar-default-link-hover-bg:             transparent;
 
-@navbar-default-link-active-color:         @brand-primary;
 
-@navbar-default-link-active-bg:            transparent;
 
-
 
-// Sign in button
 
-@btn-signin-color:                 lighten(desaturate(@brand-primary, 45%), 5%);
 
-@btn-signin-bg:                    transparent;
 
-@btn-signin-border:                lighten(desaturate(@brand-primary, 45%), 10%);
 
-
 
-@btn-signin-hover-color:           @body-bg;
 
-@btn-signin-hover-bg:              @brand-primary;
 
-@btn-signin-hover-border:          @brand-primary;
 
-
 
-@btn-signin-active-color:          @body-bg;
 
-@btn-signin-active-bg:             @text-color;
 
-@btn-signin-active-border:         @text-color;
 
-
 
-// Register button
 
-@btn-register-color:                 #e67e22;
 
-@btn-register-bg:                    transparent;
 
-@btn-register-border:                #e67e22;
 
-
 
-@btn-register-hover-color:           @body-bg;
 
-@btn-register-hover-bg:              #e67e22;
 
-@btn-register-hover-border:          #e67e22;
 
-
 
-@btn-register-active-color:          @body-bg;
 
-@btn-register-active-bg:             darken(#d35400, 5%);
 
-@btn-register-active-border:         darken(#d35400, 5%);
 
-
 
-// Navbar brand label
 
-@navbar-default-brand-color:               @text-color;
 
-@navbar-default-brand-hover-color:         @text-color;
 
-
 
-
 
-//== Dropdowns
 
-//
 
-//## Custom navbar flavor
 
-
 
-//** Dropdown link text color.
 
-@dropdown-link-color:            lighten(@text-color, 10%);
 
-//** Hover color for dropdown links.
 
-@dropdown-link-hover-color:      @body-bg;
 
-//** Hover background for dropdown links.
 
-@dropdown-link-hover-bg:         @brand-primary;
 
-
 
-//** Active dropdown menu item text color.
 
-@dropdown-link-active-color:     @body-bg;
 
-//** Active dropdown menu item background color.
 
-@dropdown-link-active-bg:        #34495e;
 
-
 
-
 
-//** Open dropdown shadow color.
 
-@dropdown-shadow:                fadeOut(#333, 50%);
 
+// Use this file to define custom variables or override variables coming from Misago and Bootstrap

+ 2 - 2
uiframework/misago/css/misago/dropdowns.less
View File 

@@ -84,7 +84,7 @@
 
   }
 
   }
 
 }
 
 }
 
 
 
-
 
+/* Move arrow to right on pull-right dropdowns */
 
 .pull-right {
 
 .pull-right {
 
   .dropdown-menu:after {
 
   .dropdown-menu:after {
 
     left: auto;
 
     left: auto;
 
@@ -93,7 +93,7 @@
 
 }
 
 }
 
 
 
 
 
-/* On big displays */
 
+/* Big displays */
 
 @media (min-width: @screen-sm-min) {
 
 @media (min-width: @screen-sm-min) {
 
   .dropdown-menu {
 
   .dropdown-menu {
 
     li {
 
     li {

+ 0 - 0
uiframework/misago/css/flavor/jumbotron.less → uiframework/misago/css/misago/jumbotron.less
View File


+ 1 - 0
uiframework/misago/css/misago/misago.less
View File 

@@ -3,4 +3,5 @@
 
 
 
 // Layout elements
 
 // Layout elements
 
 @import "navbar.less";
 
 @import "navbar.less";
 
+@import "jumbotron.less";
 
 @import "footer.less";
 
 @import "footer.less";

+ 336 - 51
uiframework/misago/css/misago/navbar.less
View File 

@@ -3,16 +3,265 @@
 
 // --------------------------------------------------
 
 // --------------------------------------------------
 
 
 
 
 
-/* Navbar Guest Buttons */
 
-.navbar-default {
 
-  .btn-sign-in, .btn-register {
 
+// Brand
 
+// --------------------------------------------------
 
+.navbar {
 
+  .navbar-brand {
 
+    font-size: @navbar-brand-size;
 
+  }
 
+}
 
+
 
+
 
+// Primary menu
 
+// --------------------------------------------------
 
+.navbar-nav-primary {
 
+  li {
 
+    a {
 
+      font-size: @font-size-large;
 
+    }
 
+  }
 
+}
 
+
 
+/* Big displays */
 
+@media (min-width: @screen-sm-min) {
 
+  .navbar-nav-primary {
 
     .navbar-vertical-align(@input-height-base + 2);
 
     .navbar-vertical-align(@input-height-base + 2);
 
+
 
+    &>li {
 
+      /* Some space between icons */
 
+      margin-left: 4px;
 
+
 
+      &>a {
 
+        /* Make button blocky */
 
+        border-radius: @border-radius-base;
 
+        padding: 6px 0px;
 
+        width: 36px;
 
+
 
+        text-align: center;
 
+
 
+        /* Hide item labels on big displays */
 
+        .item-label {
 
+          display: none;
 
+        }
 
+
 
+        /* Links with badges displaying items counts */
 
+        &.badged {
 
+          padding: 6px 8px;
 
+          width: auto;
 
+
 
+          .badge {
 
+            border-radius: @border-radius-base;
 
+            margin-bottom: -2px;
 
+            position: relative;
 
+            bottom: 2px;
 
+          }
 
+        }
 
+
 
+        /* Primary styles */
 
+        &:link, &:visited {
 
+          background: @navbar-primary-link-bg !important;
 
+          border: 2px solid @navbar-primary-link-border !important;
 
+
 
+          color: @navbar-primary-link-color !important;
 
+
 
+          .badge {
 
+            background-color: @navbar-primary-link-color;
 
+
 
+            color: @navbar-primary-link-bg;
 
+          }
 
+        }
 
+
 
+        &:hover {
 
+          background: @navbar-primary-link-hover-bg !important;
 
+          border: 2px solid @navbar-primary-link-hover-border !important;
 
+
 
+          color: @navbar-primary-link-hover-color !important;
 
+
 
+          .badge {
 
+            background-color: @navbar-primary-link-hover-color;
 
+
 
+            color: @navbar-primary-link-hover-bg;
 
+          }
 
+        }
 
+
 
+        &:active {
 
+          background: @navbar-primary-link-active-bg !important;
 
+          border: 2px solid @navbar-primary-link-active-border !important;
 
+
 
+          color: @navbar-primary-link-active-color !important;
 
+
 
+          .badge {
 
+            background-color: @navbar-primary-link-active-color;
 
+
 
+            color: @navbar-primary-link-active-bg;
 
+          }
 
+        }
 
+
 
+        /* Important links styles */
 
+        &.important {
 
+          background-color: @navbar-important-link-bg;
 
+          border-color: @navbar-important-link-border;
 
+
 
+          color: @navbar-important-link-color;
 
+
 
+          &:link, &:visited {
 
+            background: @navbar-important-link-bg !important;
 
+            border: 2px solid @navbar-important-link-border !important;
 
+
 
+            color: @navbar-important-link-color !important;
 
+
 
+            .badge {
 
+              background-color: @navbar-important-link-color;
 
+
 
+              color: @navbar-important-link-bg;
 
+            }
 
+          }
 
+
 
+          &:hover {
 
+            background: @navbar-important-link-hover-bg !important;
 
+            border: 2px solid @navbar-important-link-hover-border !important;
 
+
 
+            color: @navbar-important-link-hover-color !important;
 
+
 
+            .badge {
 
+              background-color: @navbar-important-link-hover-color;
 
+
 
+              color: @navbar-important-link-hover-bg;
 
+            }
 
+          }
 
+
 
+          &:active {
 
+            background: @navbar-important-link-active-bg !important;
 
+            border: 2px solid @navbar-important-link-active-border !important;
 
+
 
+            color: @navbar-important-link-active-color !important;
 
+
 
+            .badge {
 
+              background-color: @navbar-important-link-active-color;
 
+
 
+              color: @navbar-important-link-active-bg;
 
+            }
 
+          }
 
+        }
 
+
 
+        /* "New" links styles */
 
+        &.new {
 
+          background-color: @navbar-new-link-bg;
 
+          border-color: @navbar-new-link-border;
 
+
 
+          color: @navbar-new-link-color;
 
+
 
+          &:link, &:visited {
 
+            background: @navbar-new-link-bg !important;
 
+            border: 2px solid @navbar-new-link-border !important;
 
+
 
+            color: @navbar-new-link-color !important;
 
+
 
+            .badge {
 
+              background-color: @navbar-new-link-color;
 
+
 
+              color: @navbar-new-link-bg;
 
+            }
 
+          }
 
+
 
+          &:hover {
 
+            background: @navbar-new-link-hover-bg !important;
 
+            border: 2px solid @navbar-new-link-hover-border !important;
 
+
 
+            color: @navbar-new-link-hover-color !important;
 
+
 
+            .badge {
 
+              background-color: @navbar-new-link-hover-color;
 
+
 
+              color: @navbar-new-link-hover-bg;
 
+            }
 
+          }
 
+
 
+          &:active {
 
+            background: @navbar-new-link-active-bg !important;
 
+            border: 2px solid @navbar-new-link-active-border !important;
 
+
 
+            color: @navbar-new-link-active-color !important;
 
+
 
+            .badge {
 
+              background-color: @navbar-new-link-active-color;
 
+
 
+              color: @navbar-new-link-active-bg;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+
 
+// User menu
 
+// --------------------------------------------------
 
+.navbar-nav-user {
 
+  &>li {
 
+    &>a.user-toggle {
 
+      overflow: auto;
 
+
 
+      font-size: @font-size-large;
 
+
 
+      img {
 
+        border-radius: @border-radius-base;
 
+        height: 32px;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+/* Big displays */
 
+@media (min-width: @screen-sm-min) {
 
+  /* Put some distance between user menu and primary nav */
 
+  .navbar-nav-user {
 
+    margin-left: @line-height-computed * 2;
 
+  }
 
+
 
+  /* Change way switch and dropdown appears */
 
+  .navbar-nav-user {
 
+    .user-toggle {
 
+      padding-left: 0px;
 
+      padding-right: 0px;
 
+
 
+      img {
 
+        float: right;
 
+        height: 32px;
 
+        margin: -6px 0px;
 
+        margin-left: 8px;
 
+      }
 
+    }
 
+
 
+    .dropdown-menu {
 
+      min-width: 256px;
 
+
 
+      &:after {
 
+        border: solid transparent;
 
+        border-bottom-color: @dropdown-bg;
 
+        border-width: 6px;
 
+        content: "";
 
+        height: 0;
 
+        position: absolute;
 
+        pointer-events: none;
 
+        right: 10px;
 
+        top: -11px;
 
+        width: 0;
 
+      }
 
+    }
 
   }
 
   }
 
+}
 
+
 
 
 
+// Guest buttons
 
+// --------------------------------------------------
 
+.navbar-nav-guest {
 
   .btn-sign-in {
 
   .btn-sign-in {
 
     &, &:link, &:visited {
 
     &, &:link, &:visited {
 
       background-color: @btn-signin-bg;
 
       background-color: @btn-signin-bg;
 
       border-color: @btn-signin-border;
 
       border-color: @btn-signin-border;
 
+      box-shadow: 0px 0px 0px 1px @btn-signin-border;
 
 
 
       color: @btn-signin-color;
 
       color: @btn-signin-color;
 
     }
 
     }
 
@@ -20,6 +269,7 @@
 
     &:hover {
 
     &:hover {
 
       background-color: @btn-signin-hover-bg;
 
       background-color: @btn-signin-hover-bg;
 
       border-color: @btn-signin-hover-border;
 
       border-color: @btn-signin-hover-border;
 
+      box-shadow: 0px 0px 0px 1px @btn-signin-hover-border;
 
 
 
       color: @btn-signin-hover-color;
 
       color: @btn-signin-hover-color;
 
     }
 
     }
 
@@ -27,6 +277,7 @@
 
     &:active, &:focus {
 
     &:active, &:focus {
 
       background-color: @btn-signin-active-bg;
 
       background-color: @btn-signin-active-bg;
 
       border-color: @btn-signin-active-border;
 
       border-color: @btn-signin-active-border;
 
+      box-shadow: 0px 0px 0px 1px @btn-signin-active-border;
 
 
 
       color: @btn-signin-active-color;
 
       color: @btn-signin-active-color;
 
     }
 
     }
 
@@ -36,6 +287,7 @@
 
     &, &:link, &:visited {
 
     &, &:link, &:visited {
 
       background-color: @btn-register-bg;
 
       background-color: @btn-register-bg;
 
       border-color: @btn-register-border;
 
       border-color: @btn-register-border;
 
+      box-shadow: 0px 0px 0px 1px @btn-register-border;
 
 
 
       color: @btn-register-color;
 
       color: @btn-register-color;
 
     }
 
     }
 
@@ -43,6 +295,7 @@
 
     &:hover {
 
     &:hover {
 
       background-color: @btn-register-hover-bg;
 
       background-color: @btn-register-hover-bg;
 
       border-color: @btn-register-hover-border;
 
       border-color: @btn-register-hover-border;
 
+      box-shadow: 0px 0px 0px 1px @btn-register-hover-border;
 
 
 
       color: @btn-register-hover-color;
 
       color: @btn-register-hover-color;
 
     }
 
     }
 
@@ -50,91 +303,123 @@
 
     &:active, &:focus {
 
     &:active, &:focus {
 
       background-color: @btn-register-active-bg;
 
       background-color: @btn-register-active-bg;
 
       border-color: @btn-register-active-border;
 
       border-color: @btn-register-active-border;
 
+      box-shadow: 0px 0px 0px 1px @btn-register-active-border;
 
 
 
       color: @btn-register-active-color;
 
       color: @btn-register-active-color;
 
     }
 
     }
 
   }
 
   }
 
 }
 
 }
 
 
 
-/* Responsiveness */
 
+/* On big displays put some distance between guest nav and other nav */
 
 @media (min-width: @screen-sm-min) {
 
 @media (min-width: @screen-sm-min) {
 
-  .navbar-guest-buttons {
 
+  .navbar-nav-guest {
 
     margin-left: @line-height-computed * 2;
 
     margin-left: @line-height-computed * 2;
 
   }
 
   }
 
 }
 
 }
 
 
 
 
 
-/* Navbar Primary Nav */
 
-.navbar-nav-primary {
 
-  li {
 
-    a {
 
-      font-size: @font-size-large;
 
+// Small displays dropdowns
 
+// --------------------------------------------------
 
+@media (max-width: @screen-sm-min) {
 
+  /* Make buttons size equal to that of links */
 
+  .navbar {
 
+    .dropdown-menu {
 
+      li {
 
+        form {
 
+          button {
 
+            padding: 3px 25px;
 
+          }
 
+        }
 
+      }
 
     }
 
     }
 
   }
 
   }
 
-}
 
 
 
-/* Responsiveness */
 
-@media (min-width: @screen-sm-min) {
 
-  ul.navbar-nav-user {
 
-    &>li {
 
+  /* Color badges in red and white */
 
+  .navbar {
 
+    .dropdown-menu {
 
+      li {
 
+        a, &:link, &:visited, &:hover, &:active {
 
+          .badge {
 
+            background-color: @brand-danger;
 
+
 
+            color: @dropdown-bg;
 
+          }
 
+        }
 
       }
 
       }
 
+    }
 
   }
 
   }
 
 
 
-  ul.navbar-nav-primary {
 
-    margin-top: 7px;
 
+  /* Dropdown look */
 
+  .navbar {
 
+    .dropdown-menu {
 
+      li {
 
+        form {
 
+          button {
 
+            color: @navbar-default-link-color;
 
 
 
-    &>li {
 
-      margin-left: 4px;
 
+            &:hover {
 
+              background: none;
 
 
 
-      &>a {
 
-        border-radius: @border-radius-base;
 
-        padding: 6px 0px;
 
-        width: 36px;
 
+              color: @navbar-default-link-hover-color;
 
+            }
 
 
 
-        text-align: center;
 
+            &:active, &:focus {
 
+              background: none;
 
 
 
-        .item-label {
 
-          display: none;
 
+              color: @navbar-default-link-active-color;
 
+            }
 
+          }
 
         }
 
         }
 
+      }
 
+    }
 
 
 
-        &:link, &:visited {
 
-          background: @navbar-primary-link-bg !important;
 
-          border: 2px solid @navbar-primary-link-border !important;
 
+    .dropdown.open {
 
+      background: darken(@navbar-default-bg, 3%);
 
+      border-bottom: 2px solid darken(@navbar-default-bg, 6%);
 
 
 
-          color: @navbar-primary-link-color !important;
 
+      .dropdown-toggle {
 
+        &:link, &:active, &:visited, &:hover {
 
+          background: darken(@navbar-default-bg, 6%);
 
         }
 
         }
 
+      }
 
+
 
+      .dropdown-menu {
 
+        li.divider {
 
+          background-color: darken(@navbar-default-bg, 9%);
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .navbar-inverse {
 
+    .dropdown-menu {
 
+      button {
 
+        color: @navbar-inverse-link-color;
 
 
 
         &:hover {
 
         &:hover {
 
-          background: @navbar-primary-link-hover-bg !important;
 
-          border: 2px solid @navbar-primary-link-hover-border !important;
 
+          background: none;
 
 
 
-          color: @navbar-primary-link-hover-color !important;
 
+          color: @navbar-inverse-link-hover-color;
 
         }
 
         }
 
 
 
-        &:active {
 
-          background: @navbar-primary-link-active-bg !important;
 
-          border: 2px solid @navbar-primary-link-active-border !important;
 
+        &:active, &:focus {
 
+          background: none;
 
 
 
-          color: @navbar-primary-link-active-color !important;
 
+          color: @navbar-inverse-link-active-color;
 
         }
 
         }
 
       }
 
       }
 
     }
 
     }
 
-  }
 
-}
 
 
 
+    .dropdown.open {
 
+      background: lighten(@navbar-inverse-bg, 3%);
 
+      border-left: 2px solid lighten(@navbar-inverse-bg, 6%);
 
+      border-bottom: 2px solid lighten(@navbar-inverse-bg, 6%);
 
 
 
-/* Navbar User Nav */
 
-.navbar-nav-user {
 
-  &>li {
 
-    &>a {
 
-      font-size: @font-size-large;
 
+      .dropdown-menu {
 
+        li.divider {
 
+          background-color: lighten(@navbar-inverse-bg, 9%);
 
+        }
 
+      }
 
     }
 
     }
 
   }
 
   }
 
 }
 
 }
 
-
 
-/* Responsiveness */
 
-@media (min-width: @screen-sm-min) {
 
-  .navbar-nav-user {
 
-    margin-left: @line-height-computed * 2;
 
-  }
 
-}

+ 131 - 3
uiframework/misago/css/misago/variables.less
View File 

@@ -1,10 +1,138 @@
 
 //
 
 //
 
-// Variables
 
+// Misago Variables
 
 // --------------------------------------------------
 
 // --------------------------------------------------
 
 
 
 
 
+//== Colors
 
+//
 
+//## Basic colors for use in this flavor
 
+
 
+@brand-primary:         #3498db;
 
+@brand-success:         #5cb85c;
 
+@brand-info:            #5bc0de;
 
+@brand-warning:         #f0ad4e;
 
+@brand-danger:          #d9534f;
 
+
 
+//** Background color for `<body>`.
 
+@body-bg:               darken(#fff, 1%);
 
+//** Global text color on `<body>`.
 
+@text-color:            #2c3e50;
 
+
 
+//** Global textual link color.
 
+@link-color:            @brand-primary;
 
+//** Link hover color set via `darken()` function.
 
+@link-hover-color:      darken(@link-color, 15%);
 
+
 
+//** Text muted color
 
+@text-muted:            #95a5a6;
 
+
 
+
 
+//== Navbar
 
+//
 
+//## Navbar style
 
+
 
+// Navbar brand
 
+@navbar-brand-size:                        @font-size-large * 1.6;
 
+
 
+@navbar-default-brand-color:               @text-color;
 
+@navbar-default-brand-hover-color:         @text-color;
 
+
 
+
 
+// Navbar icon-based menu
 
+@navbar-primary-link-color:                #7f8c8d;
 
+@navbar-primary-link-bg:                   @navbar-default-bg;
 
+@navbar-primary-link-border:               @navbar-default-border;
 
+@navbar-primary-link-hover-color:          @brand-primary;
 
+@navbar-primary-link-hover-bg:             @navbar-default-bg;
 
+@navbar-primary-link-hover-border:         @brand-primary;
 
+@navbar-primary-link-active-color:         @body-bg;
 
+@navbar-primary-link-active-bg:            @brand-primary;
 
+@navbar-primary-link-active-border:        @brand-primary;
 
+
 
+
 
+// Same as above, but important items
 
+@navbar-important-link-color:                desaturate(#ea6153, 20%);
 
+@navbar-important-link-bg:                   @navbar-default-bg;
 
+@navbar-important-link-border:               desaturate(lighten(#ea6153, 10%), 20%);
 
+@navbar-important-link-hover-color:          #ea6153;
 
+@navbar-important-link-hover-bg:             @navbar-default-bg;
 
+@navbar-important-link-hover-border:         #ea6153;
 
+@navbar-important-link-active-color:         @body-bg;
 
+@navbar-important-link-active-bg:            #ea6153;
 
+@navbar-important-link-active-border:        #ea6153;
 
+
 
+
 
+// Same as above, but new items
 
+@navbar-new-link-color:                desaturate(#2ecc71, 20%);
 
+@navbar-new-link-bg:                   @navbar-default-bg;
 
+@navbar-new-link-border:               desaturate(lighten(#2ecc71, 10%), 20%);
 
+@navbar-new-link-hover-color:          #2ecc71;
 
+@navbar-new-link-hover-bg:             @navbar-default-bg;
 
+@navbar-new-link-hover-border:         #2ecc71;
 
+@navbar-new-link-active-color:         @body-bg;
 
+@navbar-new-link-active-bg:            #2ecc71;
 
+@navbar-new-link-active-border:        #2ecc71;
 
+
 
+
 
+// Only User  dropdown switch uses those clases
 
+@navbar-default-link-color:                #7f8c8d;
 
+@navbar-default-link-hover-color:          @brand-primary;
 
+@navbar-default-link-hover-bg:             transparent;
 
+@navbar-default-link-active-color:         @brand-primary;
 
+@navbar-default-link-active-bg:            transparent;
 
+
 
+
 
+// Guest Sign in button
 
+@btn-signin-color:                 lighten(desaturate(@brand-primary, 45%), 5%);
 
+@btn-signin-bg:                    transparent;
 
+@btn-signin-border:                lighten(desaturate(@brand-primary, 45%), 10%);
 
+
 
+@btn-signin-hover-color:           @brand-primary;
 
+@btn-signin-hover-bg:              transparent;
 
+@btn-signin-hover-border:          @brand-primary;
 
+
 
+@btn-signin-active-color:          @body-bg;
 
+@btn-signin-active-bg:             @text-color;
 
+@btn-signin-active-border:         @text-color;
 
+
 
+
 
+// Guest Register button
 
+@btn-register-color:                 @body-bg;
 
+@btn-register-bg:                    #2ecc71;
 
+@btn-register-border:                #2ecc71;
 
+
 
+@btn-register-hover-color:           @body-bg;
 
+@btn-register-hover-bg:              lighten(@btn-register-bg, 15%);
 
+@btn-register-hover-border:          lighten(@btn-register-border, 15%);
 
+
 
+@btn-register-active-color:          @body-bg;
 
+@btn-register-active-bg:             darken(@btn-register-bg, 5%);
 
+@btn-register-active-border:         darken(@btn-register-border, 5%);
 
+
 
+
 
+//== Dropdowns
 
+//
 
+//## Misago dropdowns flavor
 
+
 
+//** Dropdown link text color.
 
+@dropdown-link-color:            lighten(@text-color, 10%);
 
+//** Hover color for dropdown links.
 
+@dropdown-link-hover-color:      @body-bg;
 
+//** Hover background for dropdown links.
 
+@dropdown-link-hover-bg:         @brand-primary;
 
+
 
+//** Active dropdown menu item text color.
 
+@dropdown-link-active-color:     @body-bg;
 
+//** Active dropdown menu item background color.
 
+@dropdown-link-active-bg:        #34495e;
 
+
 
+
 
+//** Open dropdown shadow color.
 
+@dropdown-shadow:                fadeOut(#333, 50%);
 
+
 
+
 
 //== Misago Branding
 
 //== Misago Branding
 
 //
 
 //
 
-//## Default branding size
 
+//## Size of Misago's branding in footer
 
 
 
-@misago-branding-size:    @font-size-large * 1.5;
 
+@misago-branding-size:            @font-size-large * 1.6;

+ 259 - 171
uiframework/misago/css/style.css
View File 

@@ -3933,8 +3933,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
   }
 
   }
 
 }
 
 }
 
 .navbar-default {
 
 .navbar-default {
 
-  background-color: #ecf0f1;
 
-  border-color: #d7e0e2;
 
+  background-color: #f8f8f8;
 
+  border-color: #e7e7e7;
 
 }
 
 }
 
 .navbar-default .navbar-brand {
 
 .navbar-default .navbar-brand {
 
   color: #2c3e50;
 
   color: #2c3e50;
 
@@ -3945,7 +3945,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
   background-color: transparent;
 
   background-color: transparent;
 
 }
 
 }
 
 .navbar-default .navbar-text {
 
 .navbar-default .navbar-text {
 
-  color: #2c3e50;
 
+  color: #777777;
 
 }
 
 }
 
 .navbar-default .navbar-nav > li > a {
 
 .navbar-default .navbar-nav > li > a {
 
   color: #7f8c8d;
 
   color: #7f8c8d;
 
@@ -3979,7 +3979,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
 }
 
 }
 
 .navbar-default .navbar-collapse,
 
 .navbar-default .navbar-collapse,
 
 .navbar-default .navbar-form {
 
 .navbar-default .navbar-form {
 
-  border-color: #d7e0e2;
 
+  border-color: #e7e7e7;
 
 }
 
 }
 
 .navbar-default .navbar-nav > .open > a,
 
 .navbar-default .navbar-nav > .open > a,
 
 .navbar-default .navbar-nav > .open > a:hover,
 
 .navbar-default .navbar-nav > .open > a:hover,
 
@@ -5866,176 +5866,240 @@ button.close {
 
     color: #fcfcfc;
 
     color: #fcfcfc;
 
   }
 
   }
 
 }
 
 }
 
-/* Navbar Guest Buttons */
 
-.navbar-default .btn-sign-in,
 
-.navbar-default .btn-register {
 
-  margin-top: 7px;
 
-  margin-bottom: 7px;
 
-}
 
-.navbar-default .btn-sign-in,
 
-.navbar-default .btn-sign-in:link,
 
-.navbar-default .btn-sign-in:visited {
 
-  background-color: transparent;
 
-  border-color: #8aa6b8;
 
-  color: #7a99af;
 
-}
 
-.navbar-default .btn-sign-in:hover {
 
-  background-color: #3498db;
 
-  border-color: #3498db;
 
-  color: #fcfcfc;
 
-}
 
-.navbar-default .btn-sign-in:active,
 
-.navbar-default .btn-sign-in:focus {
 
-  background-color: #2c3e50;
 
-  border-color: #2c3e50;
 
-  color: #fcfcfc;
 
-}
 
-.navbar-default .btn-register,
 
-.navbar-default .btn-register:link,
 
-.navbar-default .btn-register:visited {
 
-  background-color: transparent;
 
-  border-color: #e67e22;
 
-  color: #e67e22;
 
-}
 
-.navbar-default .btn-register:hover {
 
-  background-color: #e67e22;
 
-  border-color: #e67e22;
 
-  color: #fcfcfc;
 
-}
 
-.navbar-default .btn-register:active,
 
-.navbar-default .btn-register:focus {
 
-  background-color: #ba4a00;
 
-  border-color: #ba4a00;
 
-  color: #fcfcfc;
 
-}
 
-/* Responsiveness */
 
-@media (min-width: 768px) {
 
-  .navbar-guest-buttons {
 
-    margin-left: 40px;
 
-  }
 
+.navbar .navbar-brand {
 
+  font-size: 28.8px;
 
 }
 
 }
 
-/* Navbar Primary Nav */
 
 .navbar-nav-primary li a {
 
 .navbar-nav-primary li a {
 
   font-size: 18px;
 
   font-size: 18px;
 
 }
 
 }
 
-/* Responsiveness */
 
+/* Big displays */
 
 @media (min-width: 768px) {
 
 @media (min-width: 768px) {
 
-  ul.navbar-nav-primary {
 
+  .navbar-nav-primary {
 
     margin-top: 7px;
 
     margin-top: 7px;
 
+    margin-bottom: 7px;
 
   }
 
   }
 
-  ul.navbar-nav-primary > li {
 
+  .navbar-nav-primary > li {
 
+    /* Some space between icons */
 
     margin-left: 4px;
 
     margin-left: 4px;
 
   }
 
   }
 
-  ul.navbar-nav-primary > li > a {
 
+  .navbar-nav-primary > li > a {
 
+    /* Make button blocky */
 
     border-radius: 4px;
 
     border-radius: 4px;
 
     padding: 6px 0px;
 
     padding: 6px 0px;
 
     width: 36px;
 
     width: 36px;
 
     text-align: center;
 
     text-align: center;
 
+    /* Hide item labels on big displays */
 
+    /* Links with badges displaying items counts */
 
+    /* Primary styles */
 
+    /* Important links styles */
 
+    /* "New" links styles */
 
   }
 
   }
 
-  ul.navbar-nav-primary > li > a .item-label {
 
+  .navbar-nav-primary > li > a .item-label {
 
     display: none;
 
     display: none;
 
   }
 
   }
 
-  ul.navbar-nav-primary > li > a:link,
 
-  ul.navbar-nav-primary > li > a:visited {
 
-    background: #ecf0f1 !important;
 
-    border: 2px solid #d7e0e2 !important;
 
+  .navbar-nav-primary > li > a.badged {
 
+    padding: 6px 8px;
 
+    width: auto;
 
+  }
 
+  .navbar-nav-primary > li > a.badged .badge {
 
+    border-radius: 4px;
 
+    margin-bottom: -2px;
 
+    position: relative;
 
+    bottom: 2px;
 
+  }
 
+  .navbar-nav-primary > li > a:link,
 
+  .navbar-nav-primary > li > a:visited {
 
+    background: #f8f8f8 !important;
 
+    border: 2px solid #e7e7e7 !important;
 
     color: #7f8c8d !important;
 
     color: #7f8c8d !important;
 
   }
 
   }
 
-  ul.navbar-nav-primary > li > a:hover {
 
-    background: #ecf0f1 !important;
 
+  .navbar-nav-primary > li > a:link .badge,
 
+  .navbar-nav-primary > li > a:visited .badge {
 
+    background-color: #7f8c8d;
 
+    color: #f8f8f8;
 
+  }
 
+  .navbar-nav-primary > li > a:hover {
 
+    background: #f8f8f8 !important;
 
     border: 2px solid #3498db !important;
 
     border: 2px solid #3498db !important;
 
     color: #3498db !important;
 
     color: #3498db !important;
 
   }
 
   }
 
-  ul.navbar-nav-primary > li > a:active {
 
+  .navbar-nav-primary > li > a:hover .badge {
 
+    background-color: #3498db;
 
+    color: #f8f8f8;
 
+  }
 
+  .navbar-nav-primary > li > a:active {
 
     background: #3498db !important;
 
     background: #3498db !important;
 
     border: 2px solid #3498db !important;
 
     border: 2px solid #3498db !important;
 
     color: #fcfcfc !important;
 
     color: #fcfcfc !important;
 
   }
 
   }
 
+  .navbar-nav-primary > li > a:active .badge {
 
+    background-color: #fcfcfc;
 
+    color: #3498db;
 
+  }
 
+  .navbar-nav-primary > li > a.important {
 
+    background-color: #f8f8f8;
 
+    border-color: #e1968f;
 
+    color: #d77166;
 
+  }
 
+  .navbar-nav-primary > li > a.important:link,
 
+  .navbar-nav-primary > li > a.important:visited {
 
+    background: #f8f8f8 !important;
 
+    border: 2px solid #e1968f !important;
 
+    color: #d77166 !important;
 
+  }
 
+  .navbar-nav-primary > li > a.important:link .badge,
 
+  .navbar-nav-primary > li > a.important:visited .badge {
 
+    background-color: #d77166;
 
+    color: #f8f8f8;
 
+  }
 
+  .navbar-nav-primary > li > a.important:hover {
 
+    background: #f8f8f8 !important;
 
+    border: 2px solid #ea6153 !important;
 
+    color: #ea6153 !important;
 
+  }
 
+  .navbar-nav-primary > li > a.important:hover .badge {
 
+    background-color: #ea6153;
 
+    color: #f8f8f8;
 
+  }
 
+  .navbar-nav-primary > li > a.important:active {
 
+    background: #ea6153 !important;
 
+    border: 2px solid #ea6153 !important;
 
+    color: #fcfcfc !important;
 
+  }
 
+  .navbar-nav-primary > li > a.important:active .badge {
 
+    background-color: #fcfcfc;
 
+    color: #ea6153;
 
+  }
 
+  .navbar-nav-primary > li > a.new {
 
+    background-color: #f8f8f8;
 
+    border-color: #69c490;
 
+    color: #47b375;
 
+  }
 
+  .navbar-nav-primary > li > a.new:link,
 
+  .navbar-nav-primary > li > a.new:visited {
 
+    background: #f8f8f8 !important;
 
+    border: 2px solid #69c490 !important;
 
+    color: #47b375 !important;
 
+  }
 
+  .navbar-nav-primary > li > a.new:link .badge,
 
+  .navbar-nav-primary > li > a.new:visited .badge {
 
+    background-color: #47b375;
 
+    color: #f8f8f8;
 
+  }
 
+  .navbar-nav-primary > li > a.new:hover {
 
+    background: #f8f8f8 !important;
 
+    border: 2px solid #2ecc71 !important;
 
+    color: #2ecc71 !important;
 
+  }
 
+  .navbar-nav-primary > li > a.new:hover .badge {
 
+    background-color: #2ecc71;
 
+    color: #f8f8f8;
 
+  }
 
+  .navbar-nav-primary > li > a.new:active {
 
+    background: #2ecc71 !important;
 
+    border: 2px solid #2ecc71 !important;
 
+    color: #fcfcfc !important;
 
+  }
 
+  .navbar-nav-primary > li > a.new:active .badge {
 
+    background-color: #fcfcfc;
 
+    color: #2ecc71;
 
+  }
 
 }
 
 }
 
-/* Navbar User Nav */
 
-.navbar-nav-user > li > a {
 
+.navbar-nav-user > li > a.user-toggle {
 
+  overflow: auto;
 
   font-size: 18px;
 
   font-size: 18px;
 
 }
 
 }
 
-/* Responsiveness */
 
+.navbar-nav-user > li > a.user-toggle img {
 
+  border-radius: 4px;
 
+  height: 32px;
 
+}
 
+/* Big displays */
 
 @media (min-width: 768px) {
 
 @media (min-width: 768px) {
 
+  /* Put some distance between user menu and primary nav */
 
   .navbar-nav-user {
 
   .navbar-nav-user {
 
     margin-left: 40px;
 
     margin-left: 40px;
 
   }
 
   }
 
+  /* Change way switch and dropdown appears */
 
+  .navbar-nav-user .user-toggle {
 
+    padding-left: 0px;
 
+    padding-right: 0px;
 
+  }
 
+  .navbar-nav-user .user-toggle img {
 
+    float: right;
 
+    height: 32px;
 
+    margin: -6px 0px;
 
+    margin-left: 8px;
 
+  }
 
+  .navbar-nav-user .dropdown-menu {
 
+    min-width: 256px;
 
+  }
 
+  .navbar-nav-user .dropdown-menu:after {
 
+    border: solid transparent;
 
+    border-bottom-color: #ffffff;
 
+    border-width: 6px;
 
+    content: "";
 
+    height: 0;
 
+    position: absolute;
 
+    pointer-events: none;
 
+    right: 10px;
 
+    top: -11px;
 
+    width: 0;
 
+  }
 
 }
 
 }
 
-.misago-branding a {
 
-  display: inline-block;
 
-  margin-top: 30px;
 
-  -webkit-transition: opacity 0.4s;
 
-  transition: opacity 0.4s;
 
-  color: #2c3e50;
 
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
-  font-size: 27px;
 
-  text-align: center;
 
+.navbar-nav-guest .btn-sign-in,
 
+.navbar-nav-guest .btn-sign-in:link,
 
+.navbar-nav-guest .btn-sign-in:visited {
 
+  background-color: transparent;
 
+  border-color: #8aa6b8;
 
+  box-shadow: 0px 0px 0px 1px #8aa6b8;
 
+  color: #7a99af;
 
 }
 
 }
 
-.misago-branding a .brand-border {
 
-  background: #2c3e50;
 
-  border-radius: 4.05px;
 
-  display: inline-block;
 
-  margin-right: 2.7px;
 
-  position: relative;
 
-  top: 4.86px;
 
-  overflow: hidden;
 
-  width: 30px;
 
-  height: 30px;
 
+.navbar-nav-guest .btn-sign-in:hover {
 
+  background-color: transparent;
 
+  border-color: #3498db;
 
+  box-shadow: 0px 0px 0px 1px #3498db;
 
+  color: #3498db;
 
 }
 
 }
 
-.misago-branding a .brand-border > span {
 
-  display: inline-block;
 
-  position: absolute;
 
-  bottom: -20%;
 
-  right: -18%;
 
-  -webkit-transform: rotate(-45deg);
 
-  -ms-transform: rotate(-45deg);
 
-  transform: rotate(-45deg);
 
+.navbar-nav-guest .btn-sign-in:active,
 
+.navbar-nav-guest .btn-sign-in:focus {
 
+  background-color: #2c3e50;
 
+  border-color: #2c3e50;
 
+  box-shadow: 0px 0px 0px 1px #2c3e50;
 
   color: #fcfcfc;
 
   color: #fcfcfc;
 
-  font-size: 32.4px;
 
-  font-weight: bold;
 
-}
 
-.misago-branding a .subscript {
 
-  display: inline-block;
 
-  position: relative;
 
-  bottom: 5.4px;
 
-  font-size: 16.2px;
 
 }
 
 }
 
-.misago-branding a,
 
-.misago-branding a:link,
 
-.misago-branding a:visited {
 
-  opacity: 0.4;
 
-  filter: alpha(opacity=40);
 
-}
 
-.misago-branding a:active,
 
-.misago-branding a:hover {
 
-  opacity: 1;
 
-  filter: alpha(opacity=100);
 
-  text-decoration: none;
 
-}
 
-.btn,
 
-.btn:link,
 
-.btn:active,
 
-.btn:visited,
 
-.btn:hover,
 
-.btn:focus {
 
-  border-width: 2px;
 
+.navbar-nav-guest .btn-register,
 
+.navbar-nav-guest .btn-register:link,
 
+.navbar-nav-guest .btn-register:visited {
 
+  background-color: #2ecc71;
 
+  border-color: #2ecc71;
 
+  box-shadow: 0px 0px 0px 1px #2ecc71;
 
+  color: #fcfcfc;
 
 }
 
 }
 
-.navbar .navbar-brand {
 
-  font-size: 28.8px;
 
+.navbar-nav-guest .btn-register:hover {
 
+  background-color: #69dd9a;
 
+  border-color: #69dd9a;
 
+  box-shadow: 0px 0px 0px 1px #69dd9a;
 
+  color: #fcfcfc;
 
 }
 
 }
 
-.navbar .navbar-nav-user .user-toggle {
 
-  overflow: auto;
 
+.navbar-nav-guest .btn-register:active,
 
+.navbar-nav-guest .btn-register:focus {
 
+  background-color: #29b765;
 
+  border-color: #29b765;
 
+  box-shadow: 0px 0px 0px 1px #29b765;
 
+  color: #fcfcfc;
 
 }
 
 }
 
-.navbar .navbar-nav-user .user-toggle img {
 
-  border-radius: 4px;
 
-  height: 32px;
 
+/* On big displays put some distance between guest nav and other nav */
 
+@media (min-width: 768px) {
 
+  .navbar-nav-guest {
 
+    margin-left: 40px;
 
+  }
 
 }
 
 }
 
-/* Navbar small dropdowns */
 
 @media (max-width: 768px) {
 
 @media (max-width: 768px) {
 
+  /* Make buttons size equal to that of links */
 
   .navbar .dropdown-menu li form button {
 
   .navbar .dropdown-menu li form button {
 
     padding: 3px 25px;
 
     padding: 3px 25px;
 
   }
 
   }
 
+  /* Color badges in red and white */
 
   .navbar .dropdown-menu li a .badge,
 
   .navbar .dropdown-menu li a .badge,
 
   .navbar .dropdown-menu li:link .badge,
 
   .navbar .dropdown-menu li:link .badge,
 
   .navbar .dropdown-menu li:visited .badge,
 
   .navbar .dropdown-menu li:visited .badge,
 
@@ -6044,30 +6108,31 @@ button.close {
 
     background-color: #d9534f;
 
     background-color: #d9534f;
 
     color: #ffffff;
 
     color: #ffffff;
 
   }
 
   }
 
-  .navbar-default .dropdown-menu li form button {
 
+  /* Dropdown look */
 
+  .navbar .dropdown-menu li form button {
 
     color: #7f8c8d;
 
     color: #7f8c8d;
 
   }
 
   }
 
-  .navbar-default .dropdown-menu li form button:hover {
 
+  .navbar .dropdown-menu li form button:hover {
 
     background: none;
 
     background: none;
 
     color: #3498db;
 
     color: #3498db;
 
   }
 
   }
 
-  .navbar-default .dropdown-menu li form button:active,
 
-  .navbar-default .dropdown-menu li form button:focus {
 
+  .navbar .dropdown-menu li form button:active,
 
+  .navbar .dropdown-menu li form button:focus {
 
     background: none;
 
     background: none;
 
     color: #3498db;
 
     color: #3498db;
 
   }
 
   }
 
-  .navbar-default .dropdown.open {
 
-    background: #e3e9eb;
 
-    border-bottom: 2px solid #dae2e4;
 
+  .navbar .dropdown.open {
 
+    background: #f0f0f0;
 
+    border-bottom: 2px solid #e9e9e9;
 
   }
 
   }
 
-  .navbar-default .dropdown.open .dropdown-toggle:link,
 
-  .navbar-default .dropdown.open .dropdown-toggle:active,
 
-  .navbar-default .dropdown.open .dropdown-toggle:visited,
 
-  .navbar-default .dropdown.open .dropdown-toggle:hover {
 
-    background: #dae2e4;
 
+  .navbar .dropdown.open .dropdown-toggle:link,
 
+  .navbar .dropdown.open .dropdown-toggle:active,
 
+  .navbar .dropdown.open .dropdown-toggle:visited,
 
+  .navbar .dropdown.open .dropdown-toggle:hover {
 
+    background: #e9e9e9;
 
   }
 
   }
 
-  .navbar-default .dropdown.open .dropdown-menu li.divider {
 
-    background-color: #d2dbde;
 
+  .navbar .dropdown.open .dropdown-menu li.divider {
 
+    background-color: #e1e1e1;
 
   }
 
   }
 
   .navbar-inverse .dropdown-menu button {
 
   .navbar-inverse .dropdown-menu button {
 
     color: #999999;
 
     color: #999999;
 
@@ -6090,34 +6155,57 @@ button.close {
 
     background-color: #393939;
 
     background-color: #393939;
 
   }
 
   }
 
 }
 
 }
 
-/* On big displays */
 
-@media (min-width: 768px) {
 
-  .navbar-nav-user .user-toggle {
 
-    padding-left: 0px;
 
-    padding-right: 0px;
 
-  }
 
-  .navbar-nav-user .user-toggle img {
 
-    float: right;
 
-    height: 32px;
 
-    margin: -6px 0px;
 
-    margin-left: 8px;
 
-  }
 
-  .navbar-nav-user .dropdown-menu {
 
-    min-width: 256px;
 
-  }
 
-  .navbar-nav-user .dropdown-menu:after {
 
-    border: solid transparent;
 
-    border-bottom-color: #ffffff;
 
-    border-width: 6px;
 
-    content: "";
 
-    height: 0;
 
-    position: absolute;
 
-    pointer-events: none;
 
-    right: 10px;
 
-    top: -11px;
 
-    width: 0;
 
-  }
 
-}
 
 .jumbotron {
 
 .jumbotron {
 
   margin-top: -20px;
 
   margin-top: -20px;
 
 }
 
 }
 
+.misago-branding a {
 
+  display: inline-block;
 
+  margin-top: 30px;
 
+  -webkit-transition: opacity 0.4s;
 
+  transition: opacity 0.4s;
 
+  color: #2c3e50;
 
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
+  font-size: 28.8px;
 
+  text-align: center;
 
+}
 
+.misago-branding a .brand-border {
 
+  background: #2c3e50;
 
+  border-radius: 4.32px;
 
+  display: inline-block;
 
+  margin-right: 2.88px;
 
+  position: relative;
 
+  top: 5.184px;
 
+  overflow: hidden;
 
+  width: 31.8px;
 
+  height: 31.8px;
 
+}
 
+.misago-branding a .brand-border > span {
 
+  display: inline-block;
 
+  position: absolute;
 
+  bottom: -20%;
 
+  right: -18%;
 
+  -webkit-transform: rotate(-45deg);
 
+  -ms-transform: rotate(-45deg);
 
+  transform: rotate(-45deg);
 
+  color: #fcfcfc;
 
+  font-size: 34.56px;
 
+  font-weight: bold;
 
+}
 
+.misago-branding a .subscript {
 
+  display: inline-block;
 
+  position: relative;
 
+  bottom: 5.76px;
 
+  font-size: 17.28px;
 
+}
 
+.misago-branding a,
 
+.misago-branding a:link,
 
+.misago-branding a:visited {
 
+  opacity: 0.4;
 
+  filter: alpha(opacity=40);
 
+}
 
+.misago-branding a:active,
 
+.misago-branding a:hover {
 
+  opacity: 1;
 
+  filter: alpha(opacity=100);
 
+  text-decoration: none;
 
+}

+ 4 - 4
uiframework/misago/js/misago.js
View File 

@@ -1,7 +1,7 @@
 
 // Register tooltips
 
 // Register tooltips
 
 $(function() {
 
 $(function() {
 
-  $('.tooltip-top').tooltip({placement: 'top'});
 
-  $('.tooltip-bottom').tooltip({placement: 'bottom'});
 
-  $('.tooltip-left').tooltip({placement: 'left'});
 
-  $('.tooltip-right').tooltip({placement: 'right'});
 
+  $('.tooltip-top').tooltip({placement: 'top', container: 'body'});
 
+  $('.tooltip-bottom').tooltip({placement: 'bottom', container: 'body'});
 
+  $('.tooltip-left').tooltip({placement: 'left', container: 'body'});
 
+  $('.tooltip-right').tooltip({placement: 'right', container: 'body'});
 
 });
 
 });

+ 22 - 1
uiframework/navbar.html
View File 

@@ -37,7 +37,7 @@
 
           <a class="navbar-brand" href="#">Misago UI</a>
 
           <a class="navbar-brand" href="#">Misago UI</a>
 
         </div>
 
         </div>
 
         <div class="collapse navbar-collapse">
 
         <div class="collapse navbar-collapse">
 
-          <div class="navbar-guest-buttons navbar-right">
 
+          <div class="navbar-nav-guest navbar-right">
 
             <a href="#" class="btn btn-sign-in navbar-btn">Sign in</a>
 
             <a href="#" class="btn btn-sign-in navbar-btn">Sign in</a>
 
             <a href="#" class="btn btn-register navbar-btn">Register</a>
 
             <a href="#" class="btn btn-register navbar-btn">Register</a>
 
           </div>
 
           </div>
 
@@ -105,6 +105,27 @@
 
                 <span class="item-label">Search forums</span>
 
                 <span class="item-label">Search forums</span>
 
               </a>
 
               </a>
 
             </li>
 
             </li>
 
+            <li>
 
+              <a href="#" class="badged tooltip-bottom" title="There are 42 new threads">
 
+                <span class="fa fa-plus"></span>
 
+                <span class="item-label">New threads</span>
 
+                <span class="badge">42</span>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="#" class="new badged tooltip-bottom" title="There are 31 threads with new replies">
 
+                <span class="fa fa-leaf"></span>
 
+                <span class="item-label">Threads with new replies</span>
 
+                <span class="badge">31</span>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="#" class="important badged tooltip-bottom" title="You haz new alerts">
 
+                <span class="fa fa-fire"></span>
 
+                <span class="item-label">Alerts</span>
 
+                <span class="badge">21</span>
 
+              </a>
 
+            </li>
 
           </ul>
 
           </ul>
 
         </div><!--/.nav-collapse -->
 
         </div><!--/.nav-collapse -->
 
       </div>
 
       </div>