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

Button styles plus color scheme updates.

Rafał Pitoń 11 years ago
parent
bdfe457768
commit
e8efd5dd9f
8 changed files with 414 additions and 147 deletions
Unified View Show Diff Stats
  1. 4 0
      uiframework/header.html
  2. 73 0
      uiframework/misago/css/misago/buttons.less
  3. 15 3
      uiframework/misago/css/misago/header.less
  4. 1 0
      uiframework/misago/css/misago/misago.less
  5. 4 0
      uiframework/misago/css/misago/navbar.less
  6. 72 31
      uiframework/misago/css/misago/variables.less
  7. 239 109
      uiframework/misago/css/style.css
  8. 6 4
      uiframework/navbar.html

+ 4 - 0
uiframework/header.html
View File 

@@ -78,6 +78,10 @@
 
 
 
         <div class="page-actions">
 
         <div class="page-actions">
 
 
 
+          <a href="#" class="btn btn-primary">Primary</a>
 
+          <a href="#" class="btn btn-info">Secondary</a>
 
+          <a href="#" class="btn btn-success">Success</a>
 
+
 
           <div class="btn-group">
 
           <div class="btn-group">
 
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 
               Action <span class="caret"></span>
 
               Action <span class="caret"></span>

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

@@ -0,0 +1,73 @@
 
+//
 
+// Forum Buttons
 
+// --------------------------------------------------
 
+
 
+.misago-button-flavour(@btn-color, @btn-bg, @btn-border) {
 
+    background: @btn-bg;
 
+    border-color: @btn-border;
 
+    box-shadow: inset 0px 0px 0px 1px @btn-border;
 
+
 
+    color: @btn-color;
 
+
 
+    &:hover {
 
+      background: lighten(@btn-bg, 10%);
 
+      border-color: lighten(@btn-border, 10%);
 
+      box-shadow: inset 0px 0px 0px 1px lighten(@btn-border, 10%);
 
+
 
+      color: @btn-color;
 
+    }
 
+
 
+    &:active, &:focus {
 
+      background: darken(@btn-bg, 15%);
 
+      border-color: darken(@btn-border, 15%);
 
+      box-shadow: inset 0px 0px 0px 1px darken(@btn-border, 15%);
 
+      outline: none;
 
+
 
+      color: @btn-color;
 
+    }
 
+}
 
+
 
+.btn {
 
+  &.btn-default {
 
+    box-shadow: inset 0px 0px 0px 1px @btn-default-border;
 
+
 
+    color: @btn-default-color;
 
+
 
+    &:hover {
 
+      background: @btn-default-hover-bg;
 
+      border-color: @btn-default-hover-border;
 
+      box-shadow: inset 0px 0px 0px 1px @btn-default-hover-border;
 
+
 
+      color: @btn-default-hover-color;
 
+    }
 
+
 
+    &:active, &:focus {
 
+      background: @btn-default-active-bg;
 
+      border-color: @btn-default-active-border;
 
+      box-shadow: inset 0px 0px 0px 1px @btn-default-active-border;
 
+      outline: none;
 
+
 
+      color: @btn-default-active-color;
 
+    }
 
+  }
 
+
 
+  &.btn-primary {
 
+    .misago-button-flavour(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
 
+  }
 
+
 
+  &.btn-info {
 
+    .misago-button-flavour(@btn-info-color, @btn-info-bg, @btn-info-border);
 
+  }
 
+
 
+  &.btn-success {
 
+    .misago-button-flavour(@btn-success-color, @btn-success-bg, @btn-success-border);
 
+  }
 
+
 
+  &.btn-warning {
 
+    .misago-button-flavour(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
 
+  }
 
+
 
+  &.btn-danger {
 
+    .misago-button-flavour(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
 
+  }
 
+}

+ 15 - 3
uiframework/misago/css/misago/header.less
View File 

@@ -81,7 +81,7 @@
 
       }
 
       }
 
 
 
       a:active, a:hover {
 
       a:active, a:hover {
 
-        color: @link-muted-hover-color;
 
+        color: @text-color;
 
         text-decoration: none;
 
         text-decoration: none;
 
       }
 
       }
 
     }
 
     }
 
@@ -96,8 +96,20 @@
 
   .nav-pills {
 
   .nav-pills {
 
     margin: 0px;
 
     margin: 0px;
 
 
 
-    a {
 
-      padding: @page-pills-padding;
 
+    &>li {
 
+      &>a {
 
+        padding: @page-pills-padding;
 
+
 
+        &:hover, &:active {
 
+          text-decoration: underline;
 
+        }
 
+      }
 
+
 
+      &.active {
 
+        a:hover, a:active {
 
+          text-decoration: none;
 
+        }
 
+      }
 
     }
 
     }
 
   }
 
   }
 
 }
 
 }

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

@@ -1,4 +1,5 @@
 
 // Components
 
 // Components
 
+@import "buttons.less";
 
 @import "dropdowns.less";
 
 @import "dropdowns.less";
 
 @import "navs.less";
 
 @import "navs.less";

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

@@ -264,6 +264,10 @@
 
         margin: -6px 0px;
 
         margin: -6px 0px;
 
         margin-left: 8px;
 
         margin-left: 8px;
 
       }
 
       }
 
+
 
+      &:link, &:visited {
 
+        color: @navbar-default-link-color;
 
+      }
 
     }
 
     }
 
 
 
     .dropdown-menu {
 
     .dropdown-menu {

+ 72 - 31
uiframework/misago/css/misago/variables.less
View File 

@@ -7,22 +7,23 @@
 
 //
 
 //
 
 //## Basic colors for use in this flavor
 
 //## Basic colors for use in this flavor
 
 
 
-@brand-primary:         #3498db;
 
-@brand-success:         #5cb85c;
 
+@brand-primary:         #e74c3c;
 
+@brand-secondary:       #3498db;
 
+@brand-success:         #2ecc71;
 
 @brand-info:            #5bc0de;
 
 @brand-info:            #5bc0de;
 
 @brand-warning:         #f0ad4e;
 
 @brand-warning:         #f0ad4e;
 
-@brand-danger:          #d9534f;
 
+@brand-danger:          #e74c3c;
 
 
 
 // Background color for `<body>`.
 
 // Background color for `<body>`.
 
 @body-bg:               darken(#fff, 1%);
 
 @body-bg:               darken(#fff, 1%);
 
 // Global text color on `<body>`.
 
 // Global text color on `<body>`.
 
-@text-color:            #2c3e50;
 
+@text-color:            #333;
 
 
 
 // Headings color
 
 // Headings color
 
 @headings-small-color:  darken(@body-bg, 30%);
 
 @headings-small-color:  darken(@body-bg, 30%);
 
 
 
 // Global textual link color.
 
 // Global textual link color.
 
-@link-color:            @brand-primary;
 
+@link-color:            @brand-secondary;
 
 @link-hover-color:      darken(@link-color, 15%);
 
 @link-hover-color:      darken(@link-color, 15%);
 
 
 
 // Text muted color
 
 // Text muted color
 
@@ -39,20 +40,20 @@
 
 // Navbar brand
 
 // Navbar brand
 
 @navbar-brand-size:                        @font-size-large * 1.6;
 
 @navbar-brand-size:                        @font-size-large * 1.6;
 
 
 
-@navbar-default-brand-color:               @text-color;
 
-@navbar-default-brand-hover-color:         @text-color;
 
+@navbar-default-brand-color:               desaturate(@brand-primary, 15%);
 
+@navbar-default-brand-hover-color:         @navbar-default-brand-color;
 
 
 
 
 
 // Navbar icon-based menu
 
 // Navbar icon-based menu
 
-@navbar-primary-link-color:                #7f8c8d;
 
+@navbar-primary-link-color:                @gray-light;
 
 @navbar-primary-link-bg:                   @navbar-default-bg;
 
 @navbar-primary-link-bg:                   @navbar-default-bg;
 
 @navbar-primary-link-border:               @navbar-default-border;
 
 @navbar-primary-link-border:               @navbar-default-border;
 
-@navbar-primary-link-hover-color:          @brand-primary;
 
+@navbar-primary-link-hover-color:          @gray;
 
 @navbar-primary-link-hover-bg:             @navbar-default-bg;
 
 @navbar-primary-link-hover-bg:             @navbar-default-bg;
 
-@navbar-primary-link-hover-border:         @brand-primary;
 
+@navbar-primary-link-hover-border:         @brand-secondary;
 
 @navbar-primary-link-active-color:         @body-bg;
 
 @navbar-primary-link-active-color:         @body-bg;
 
-@navbar-primary-link-active-bg:            @brand-primary;
 
-@navbar-primary-link-active-border:        @brand-primary;
 
+@navbar-primary-link-active-bg:            @brand-secondary;
 
+@navbar-primary-link-active-border:        @brand-secondary;
 
 
 
 
 
 // Same as above, but important items
 
 // Same as above, but important items
 
@@ -79,40 +80,40 @@
 
 @navbar-new-link-active-border:        #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;
 
+// Only User dropdown switch uses those colors
 
+@navbar-default-link-color:                @text-color;
 
+@navbar-default-link-hover-color:          @brand-secondary;
 
 @navbar-default-link-hover-bg:             transparent;
 
 @navbar-default-link-hover-bg:             transparent;
 
 @navbar-default-link-active-color:         @brand-primary;
 
 @navbar-default-link-active-color:         @brand-primary;
 
 @navbar-default-link-active-bg:            transparent;
 
 @navbar-default-link-active-bg:            transparent;
 
 
 
 
 
 // Guest Sign in button
 
 // Guest Sign in button
 
-@btn-signin-color:                 lighten(desaturate(@brand-primary, 45%), 5%);
 
+@btn-signin-color:                 lighten(desaturate(@brand-secondary, 35%), 5%);
 
 @btn-signin-bg:                    transparent;
 
 @btn-signin-bg:                    transparent;
 
-@btn-signin-border:                lighten(desaturate(@brand-primary, 45%), 10%);
 
+@btn-signin-border:                lighten(desaturate(@brand-secondary, 35%), 10%);
 
 
 
-@btn-signin-hover-color:           @brand-primary;
 
+@btn-signin-hover-color:           @brand-secondary;
 
 @btn-signin-hover-bg:              transparent;
 
 @btn-signin-hover-bg:              transparent;
 
-@btn-signin-hover-border:          @brand-primary;
 
+@btn-signin-hover-border:          @brand-secondary;
 
 
 
 @btn-signin-active-color:          @body-bg;
 
 @btn-signin-active-color:          @body-bg;
 
-@btn-signin-active-bg:             @text-color;
 
-@btn-signin-active-border:         @text-color;
 
+@btn-signin-active-bg:             darken(@brand-secondary, 15%);
 
+@btn-signin-active-border:         @btn-signin-active-bg;
 
 
 
 
 
 // Guest Register button
 
 // Guest Register button
 
 @btn-register-color:                 @body-bg;
 
 @btn-register-color:                 @body-bg;
 
-@btn-register-bg:                    #2ecc71;
 
-@btn-register-border:                #2ecc71;
 
+@btn-register-bg:                    desaturate(@brand-primary, 15%);
 
+@btn-register-border:                @btn-register-bg;
 
 
 
 @btn-register-hover-color:           @body-bg;
 
 @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-hover-bg:              @brand-primary;
 
+@btn-register-hover-border:          @btn-register-hover-bg;
 
 
 
 @btn-register-active-color:          @body-bg;
 
 @btn-register-active-color:          @body-bg;
 
-@btn-register-active-bg:             darken(@btn-register-bg, 5%);
 
-@btn-register-active-border:         darken(@btn-register-border, 5%);
 
+@btn-register-active-bg:             darken(@btn-register-bg, 15%);
 
+@btn-register-active-border:         @btn-register-active-bg;
 
 
 
 
 
 //== Dropdowns
 
 //== Dropdowns
 
@@ -124,12 +125,12 @@
 
 // Hover color for dropdown links.
 
 // Hover color for dropdown links.
 
 @dropdown-link-hover-color:      @body-bg;
 
 @dropdown-link-hover-color:      @body-bg;
 
 // Hover background for dropdown links.
 
 // Hover background for dropdown links.
 
-@dropdown-link-hover-bg:         @brand-primary;
 
+@dropdown-link-hover-bg:         @gray;
 
 
 
 // Active dropdown menu item text color.
 
 // Active dropdown menu item text color.
 
 @dropdown-link-active-color:     @body-bg;
 
 @dropdown-link-active-color:     @body-bg;
 
 // Active dropdown menu item background color.
 
 // Active dropdown menu item background color.
 
-@dropdown-link-active-bg:        #34495e;
 
+@dropdown-link-active-bg:        @brand-primary;
 
 
 
 
 
 // Open dropdown shadow color.
 
 // Open dropdown shadow color.
 
@@ -151,7 +152,7 @@
 
 @nav-link-color:                            darken(@body-bg, 35%);
 
 @nav-link-color:                            darken(@body-bg, 35%);
 
 @nav-link-bg:                               transparent;
 
 @nav-link-bg:                               transparent;
 
 
 
-@nav-link-hover-color:                      @brand-primary;
 
+@nav-link-hover-color:                      @brand-secondary;
 
 @nav-link-hover-bg:                         transparent;
 
 @nav-link-hover-bg:                         transparent;
 
 
 
 @nav-link-active-color:                     @body-bg;
 
 @nav-link-active-color:                     @body-bg;
 
@@ -176,4 +177,44 @@
 
 
 
 @breadcrumb-bg:                 transparent;
 
 @breadcrumb-bg:                 transparent;
 
 @breadcrumb-color:              darken(@body-bg, 40%);
 
 @breadcrumb-color:              darken(@body-bg, 40%);
 
-@breadcrumb-active-color:       @text-color;
 
+@breadcrumb-active-color:       @brand-secondary;
 
+
 
+
 
+//== Buttons
 
+//
 
+//## For each of Bootstrap's buttons, define text, background and border color.
 
+
 
+@btn-font-weight:                normal;
 
+
 
+
 
+@btn-default-color:              #888;
 
+@btn-default-bg:                 @body-bg;
 
+@btn-default-border:             #ddd;
 
+
 
+@btn-default-hover-color:        @text-color;
 
+@btn-default-hover-bg:           @body-bg;
 
+@btn-default-hover-border:       #ccc;
 
+
 
+@btn-default-active-color:       @text-color;
 
+@btn-default-active-bg:          @body-bg;
 
+@btn-default-active-border:      #666;
 
+
 
+@btn-primary-color:              #fff;
 
+@btn-primary-bg:                 @brand-secondary;
 
+@btn-primary-border:             @btn-primary-bg;
 
+
 
+@btn-success-color:              #fff;
 
+@btn-success-bg:                 @brand-success;
 
+@btn-success-border:             @btn-success-bg;
 
+
 
+@btn-info-color:                 #fff;
 
+@btn-info-bg:                    @brand-info;
 
+@btn-info-border:                @btn-info-bg;
 
+
 
+@btn-warning-color:              #fff;
 
+@btn-warning-bg:                 @brand-warning;
 
+@btn-warning-border:             @btn-warning-bg;
 
+
 
+@btn-danger-color:               #fff;
 
+@btn-danger-bg:                  @brand-danger;
 
+@btn-danger-border:              @btn-danger-bg;

+ 239 - 109
uiframework/misago/css/style.css
View File 

@@ -269,7 +269,7 @@ body {
 
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   font-size: 14px;
 
   font-size: 14px;
 
   line-height: 1.42857143;
 
   line-height: 1.42857143;
 
-  color: #2c3e50;
 
+  color: #333333;
 
   background-color: #fcfcfc;
 
   background-color: #fcfcfc;
 
 }
 
 }
 
 input,
 
 input,
 
@@ -495,10 +495,10 @@ cite {
 
   color: #969696;
 
   color: #969696;
 
 }
 
 }
 
 .text-primary {
 
 .text-primary {
 
-  color: #3498db;
 
+  color: #e74c3c;
 
 }
 
 }
 
 a.text-primary:hover {
 
 a.text-primary:hover {
 
-  color: #217dbb;
 
+  color: #d62c1a;
 
 }
 
 }
 
 .text-success {
 
 .text-success {
 
   color: #3c763d;
 
   color: #3c763d;
 
@@ -526,10 +526,10 @@ a.text-danger:hover {
 
 }
 
 }
 
 .bg-primary {
 
 .bg-primary {
 
   color: #fff;
 
   color: #fff;
 
-  background-color: #3498db;
 
+  background-color: #e74c3c;
 
 }
 
 }
 
 a.bg-primary:hover {
 
 a.bg-primary:hover {
 
-  background-color: #217dbb;
 
+  background-color: #d62c1a;
 
 }
 
 }
 
 .bg-success {
 
 .bg-success {
 
   background-color: #dff0d8;
 
   background-color: #dff0d8;
 
@@ -1917,7 +1917,7 @@ select[multiple].input-lg {
 
   display: block;
 
   display: block;
 
   margin-top: 5px;
 
   margin-top: 5px;
 
   margin-bottom: 10px;
 
   margin-bottom: 10px;
 
-  color: #597ea2;
 
+  color: #737373;
 
 }
 
 }
 
 @media (min-width: 768px) {
 
 @media (min-width: 768px) {
 
   .form-inline .form-group {
 
   .form-inline .form-group {
 
@@ -2011,7 +2011,7 @@ select[multiple].input-lg {
 
 }
 
 }
 
 .btn:hover,
 
 .btn:hover,
 
 .btn:focus {
 
 .btn:focus {
 
-  color: #333333;
 
+  color: #888888;
 
   text-decoration: none;
 
   text-decoration: none;
 
 }
 
 }
 
 .btn:active,
 
 .btn:active,
 
@@ -2032,18 +2032,18 @@ fieldset[disabled] .btn {
 
   box-shadow: none;
 
   box-shadow: none;
 
 }
 
 }
 
 .btn-default {
 
 .btn-default {
 
-  color: #333333;
 
-  background-color: #ffffff;
 
-  border-color: #cccccc;
 
+  color: #888888;
 
+  background-color: #fcfcfc;
 
+  border-color: #dddddd;
 
 }
 
 }
 
 .btn-default:hover,
 
 .btn-default:hover,
 
 .btn-default:focus,
 
 .btn-default:focus,
 
 .btn-default:active,
 
 .btn-default:active,
 
 .btn-default.active,
 
 .btn-default.active,
 
 .open .dropdown-toggle.btn-default {
 
 .open .dropdown-toggle.btn-default {
 
-  color: #333333;
 
-  background-color: #ebebeb;
 
-  border-color: #adadad;
 
+  color: #888888;
 
+  background-color: #e8e8e8;
 
+  border-color: #bebebe;
 
 }
 
 }
 
 .btn-default:active,
 
 .btn-default:active,
 
 .btn-default.active,
 
 .btn-default.active,
 
@@ -2065,17 +2065,17 @@ fieldset[disabled] .btn-default:active,
 
 .btn-default.disabled.active,
 
 .btn-default.disabled.active,
 
 .btn-default[disabled].active,
 
 .btn-default[disabled].active,
 
 fieldset[disabled] .btn-default.active {
 
 fieldset[disabled] .btn-default.active {
 
-  background-color: #ffffff;
 
-  border-color: #cccccc;
 
+  background-color: #fcfcfc;
 
+  border-color: #dddddd;
 
 }
 
 }
 
 .btn-default .badge {
 
 .btn-default .badge {
 
-  color: #ffffff;
 
-  background-color: #333333;
 
+  color: #fcfcfc;
 
+  background-color: #888888;
 
 }
 
 }
 
 .btn-primary {
 
 .btn-primary {
 
   color: #ffffff;
 
   color: #ffffff;
 
   background-color: #3498db;
 
   background-color: #3498db;
 
-  border-color: #258cd1;
 
+  border-color: #3498db;
 
 }
 
 }
 
 .btn-primary:hover,
 
 .btn-primary:hover,
 
 .btn-primary:focus,
 
 .btn-primary:focus,
 
@@ -2084,7 +2084,7 @@ fieldset[disabled] .btn-default.active {
 
 .open .dropdown-toggle.btn-primary {
 
 .open .dropdown-toggle.btn-primary {
 
   color: #ffffff;
 
   color: #ffffff;
 
   background-color: #2383c4;
 
   background-color: #2383c4;
 
-  border-color: #1c699d;
 
+  border-color: #2077b2;
 
 }
 
 }
 
 .btn-primary:active,
 
 .btn-primary:active,
 
 .btn-primary.active,
 
 .btn-primary.active,
 
@@ -2107,7 +2107,7 @@ fieldset[disabled] .btn-primary:active,
 
 .btn-primary[disabled].active,
 
 .btn-primary[disabled].active,
 
 fieldset[disabled] .btn-primary.active {
 
 fieldset[disabled] .btn-primary.active {
 
   background-color: #3498db;
 
   background-color: #3498db;
 
-  border-color: #258cd1;
 
+  border-color: #3498db;
 
 }
 
 }
 
 .btn-primary .badge {
 
 .btn-primary .badge {
 
   color: #3498db;
 
   color: #3498db;
 
@@ -2115,8 +2115,8 @@ fieldset[disabled] .btn-primary.active {
 
 }
 
 }
 
 .btn-success {
 
 .btn-success {
 
   color: #ffffff;
 
   color: #ffffff;
 
-  background-color: #5cb85c;
 
-  border-color: #4cae4c;
 
+  background-color: #2ecc71;
 
+  border-color: #2ecc71;
 
 }
 
 }
 
 .btn-success:hover,
 
 .btn-success:hover,
 
 .btn-success:focus,
 
 .btn-success:focus,
 
@@ -2124,8 +2124,8 @@ fieldset[disabled] .btn-primary.active {
 
 .btn-success.active,
 
 .btn-success.active,
 
 .open .dropdown-toggle.btn-success {
 
 .open .dropdown-toggle.btn-success {
 
   color: #ffffff;
 
   color: #ffffff;
 
-  background-color: #47a447;
 
-  border-color: #398439;
 
+  background-color: #26ab5f;
 
+  border-color: #239a55;
 
 }
 
 }
 
 .btn-success:active,
 
 .btn-success:active,
 
 .btn-success.active,
 
 .btn-success.active,
 
@@ -2147,17 +2147,17 @@ fieldset[disabled] .btn-success:active,
 
 .btn-success.disabled.active,
 
 .btn-success.disabled.active,
 
 .btn-success[disabled].active,
 
 .btn-success[disabled].active,
 
 fieldset[disabled] .btn-success.active {
 
 fieldset[disabled] .btn-success.active {
 
-  background-color: #5cb85c;
 
-  border-color: #4cae4c;
 
+  background-color: #2ecc71;
 
+  border-color: #2ecc71;
 
 }
 
 }
 
 .btn-success .badge {
 
 .btn-success .badge {
 
-  color: #5cb85c;
 
+  color: #2ecc71;
 
   background-color: #ffffff;
 
   background-color: #ffffff;
 
 }
 
 }
 
 .btn-info {
 
 .btn-info {
 
   color: #ffffff;
 
   color: #ffffff;
 
   background-color: #5bc0de;
 
   background-color: #5bc0de;
 
-  border-color: #46b8da;
 
+  border-color: #5bc0de;
 
 }
 
 }
 
 .btn-info:hover,
 
 .btn-info:hover,
 
 .btn-info:focus,
 
 .btn-info:focus,
 
@@ -2166,7 +2166,7 @@ fieldset[disabled] .btn-success.active {
 
 .open .dropdown-toggle.btn-info {
 
 .open .dropdown-toggle.btn-info {
 
   color: #ffffff;
 
   color: #ffffff;
 
   background-color: #39b3d7;
 
   background-color: #39b3d7;
 
-  border-color: #269abc;
 
+  border-color: #2aabd2;
 
 }
 
 }
 
 .btn-info:active,
 
 .btn-info:active,
 
 .btn-info.active,
 
 .btn-info.active,
 
@@ -2189,7 +2189,7 @@ fieldset[disabled] .btn-info:active,
 
 .btn-info[disabled].active,
 
 .btn-info[disabled].active,
 
 fieldset[disabled] .btn-info.active {
 
 fieldset[disabled] .btn-info.active {
 
   background-color: #5bc0de;
 
   background-color: #5bc0de;
 
-  border-color: #46b8da;
 
+  border-color: #5bc0de;
 
 }
 
 }
 
 .btn-info .badge {
 
 .btn-info .badge {
 
   color: #5bc0de;
 
   color: #5bc0de;
 
@@ -2198,7 +2198,7 @@ fieldset[disabled] .btn-info.active {
 
 .btn-warning {
 
 .btn-warning {
 
   color: #ffffff;
 
   color: #ffffff;
 
   background-color: #f0ad4e;
 
   background-color: #f0ad4e;
 
-  border-color: #eea236;
 
+  border-color: #f0ad4e;
 
 }
 
 }
 
 .btn-warning:hover,
 
 .btn-warning:hover,
 
 .btn-warning:focus,
 
 .btn-warning:focus,
 
@@ -2207,7 +2207,7 @@ fieldset[disabled] .btn-info.active {
 
 .open .dropdown-toggle.btn-warning {
 
 .open .dropdown-toggle.btn-warning {
 
   color: #ffffff;
 
   color: #ffffff;
 
   background-color: #ed9c28;
 
   background-color: #ed9c28;
 
-  border-color: #d58512;
 
+  border-color: #eb9316;
 
 }
 
 }
 
 .btn-warning:active,
 
 .btn-warning:active,
 
 .btn-warning.active,
 
 .btn-warning.active,
 
@@ -2230,7 +2230,7 @@ fieldset[disabled] .btn-warning:active,
 
 .btn-warning[disabled].active,
 
 .btn-warning[disabled].active,
 
 fieldset[disabled] .btn-warning.active {
 
 fieldset[disabled] .btn-warning.active {
 
   background-color: #f0ad4e;
 
   background-color: #f0ad4e;
 
-  border-color: #eea236;
 
+  border-color: #f0ad4e;
 
 }
 
 }
 
 .btn-warning .badge {
 
 .btn-warning .badge {
 
   color: #f0ad4e;
 
   color: #f0ad4e;
 
@@ -2238,8 +2238,8 @@ fieldset[disabled] .btn-warning.active {
 
 }
 
 }
 
 .btn-danger {
 
 .btn-danger {
 
   color: #ffffff;
 
   color: #ffffff;
 
-  background-color: #d9534f;
 
-  border-color: #d43f3a;
 
+  background-color: #e74c3c;
 
+  border-color: #e74c3c;
 
 }
 
 }
 
 .btn-danger:hover,
 
 .btn-danger:hover,
 
 .btn-danger:focus,
 
 .btn-danger:focus,
 
@@ -2247,8 +2247,8 @@ fieldset[disabled] .btn-warning.active {
 
 .btn-danger.active,
 
 .btn-danger.active,
 
 .open .dropdown-toggle.btn-danger {
 
 .open .dropdown-toggle.btn-danger {
 
   color: #ffffff;
 
   color: #ffffff;
 
-  background-color: #d2322d;
 
-  border-color: #ac2925;
 
+  background-color: #df2e1b;
 
+  border-color: #cd2a19;
 
 }
 
 }
 
 .btn-danger:active,
 
 .btn-danger:active,
 
 .btn-danger.active,
 
 .btn-danger.active,
 
@@ -2270,11 +2270,11 @@ fieldset[disabled] .btn-danger:active,
 
 .btn-danger.disabled.active,
 
 .btn-danger.disabled.active,
 
 .btn-danger[disabled].active,
 
 .btn-danger[disabled].active,
 
 fieldset[disabled] .btn-danger.active {
 
 fieldset[disabled] .btn-danger.active {
 
-  background-color: #d9534f;
 
-  border-color: #d43f3a;
 
+  background-color: #e74c3c;
 
+  border-color: #e74c3c;
 
 }
 
 }
 
 .btn-danger .badge {
 
 .btn-danger .badge {
 
-  color: #d9534f;
 
+  color: #e74c3c;
 
   background-color: #ffffff;
 
   background-color: #ffffff;
 
 }
 
 }
 
 .btn-link {
 
 .btn-link {
 
@@ -3034,14 +3034,14 @@ input[type="button"].btn-block {
 
   clear: both;
 
   clear: both;
 
   font-weight: normal;
 
   font-weight: normal;
 
   line-height: 1.42857143;
 
   line-height: 1.42857143;
 
-  color: #3e5771;
 
+  color: #4d4d4d;
 
   white-space: nowrap;
 
   white-space: nowrap;
 
 }
 
 }
 
 .dropdown-menu > li > a:hover,
 
 .dropdown-menu > li > a:hover,
 
 .dropdown-menu > li > a:focus {
 
 .dropdown-menu > li > a:focus {
 
   text-decoration: none;
 
   text-decoration: none;
 
   color: #fcfcfc;
 
   color: #fcfcfc;
 
-  background-color: #3498db;
 
+  background-color: #555555;
 
 }
 
 }
 
 .dropdown-menu > .active > a,
 
 .dropdown-menu > .active > a,
 
 .dropdown-menu > .active > a:hover,
 
 .dropdown-menu > .active > a:hover,
 
@@ -3049,7 +3049,7 @@ input[type="button"].btn-block {
 
   color: #fcfcfc;
 
   color: #fcfcfc;
 
   text-decoration: none;
 
   text-decoration: none;
 
   outline: 0;
 
   outline: 0;
 
-  background-color: #34495e;
 
+  background-color: #e74c3c;
 
 }
 
 }
 
 .dropdown-menu > .disabled > a,
 
 .dropdown-menu > .disabled > a,
 
 .dropdown-menu > .disabled > a:hover,
 
 .dropdown-menu > .disabled > a:hover,
 
@@ -3564,7 +3564,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
 .nav-pills > li.active > a:hover,
 
 .nav-pills > li.active > a:hover,
 
 .nav-pills > li.active > a:focus {
 
 .nav-pills > li.active > a:focus {
 
   color: #ffffff;
 
   color: #ffffff;
 
-  background-color: #3498db;
 
+  background-color: #e74c3c;
 
 }
 
 }
 
 .nav-stacked > li {
 
 .nav-stacked > li {
 
   float: none;
 
   float: none;
 
@@ -3937,18 +3937,18 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
   border-color: #e7e7e7;
 
   border-color: #e7e7e7;
 
 }
 
 }
 
 .navbar-default .navbar-brand {
 
 .navbar-default .navbar-brand {
 
-  color: #2c3e50;
 
+  color: #d7594c;
 
 }
 
 }
 
 .navbar-default .navbar-brand:hover,
 
 .navbar-default .navbar-brand:hover,
 
 .navbar-default .navbar-brand:focus {
 
 .navbar-default .navbar-brand:focus {
 
-  color: #2c3e50;
 
+  color: #d7594c;
 
   background-color: transparent;
 
   background-color: transparent;
 
 }
 
 }
 
 .navbar-default .navbar-text {
 
 .navbar-default .navbar-text {
 
   color: #777777;
 
   color: #777777;
 
 }
 
 }
 
 .navbar-default .navbar-nav > li > a {
 
 .navbar-default .navbar-nav > li > a {
 
-  color: #7f8c8d;
 
+  color: #333333;
 
 }
 
 }
 
 .navbar-default .navbar-nav > li > a:hover,
 
 .navbar-default .navbar-nav > li > a:hover,
 
 .navbar-default .navbar-nav > li > a:focus {
 
 .navbar-default .navbar-nav > li > a:focus {
 
@@ -3958,7 +3958,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
 .navbar-default .navbar-nav > .active > a,
 
 .navbar-default .navbar-nav > .active > a,
 
 .navbar-default .navbar-nav > .active > a:hover,
 
 .navbar-default .navbar-nav > .active > a:hover,
 
 .navbar-default .navbar-nav > .active > a:focus {
 
 .navbar-default .navbar-nav > .active > a:focus {
 
-  color: #3498db;
 
+  color: #e74c3c;
 
   background-color: transparent;
 
   background-color: transparent;
 
 }
 
 }
 
 .navbar-default .navbar-nav > .disabled > a,
 
 .navbar-default .navbar-nav > .disabled > a,
 
@@ -3985,11 +3985,11 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
 .navbar-default .navbar-nav > .open > a:hover,
 
 .navbar-default .navbar-nav > .open > a:hover,
 
 .navbar-default .navbar-nav > .open > a:focus {
 
 .navbar-default .navbar-nav > .open > a:focus {
 
   background-color: transparent;
 
   background-color: transparent;
 
-  color: #3498db;
 
+  color: #e74c3c;
 
 }
 
 }
 
 @media (max-width: 767px) {
 
 @media (max-width: 767px) {
 
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
 
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
 
-    color: #7f8c8d;
 
+    color: #333333;
 
   }
 
   }
 
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
 
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
 
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
 
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
 
@@ -3999,7 +3999,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
 
   .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:hover,
 
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
 
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
 
-    color: #3498db;
 
+    color: #e74c3c;
 
     background-color: transparent;
 
     background-color: transparent;
 
   }
 
   }
 
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
 
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
 
@@ -4010,7 +4010,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
   }
 
   }
 
 }
 
 }
 
 .navbar-default .navbar-link {
 
 .navbar-default .navbar-link {
 
-  color: #7f8c8d;
 
+  color: #333333;
 
 }
 
 }
 
 .navbar-default .navbar-link:hover {
 
 .navbar-default .navbar-link:hover {
 
   color: #3498db;
 
   color: #3498db;
 
@@ -4120,7 +4120,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
   color: #969696;
 
   color: #969696;
 
 }
 
 }
 
 .breadcrumb > .active {
 
 .breadcrumb > .active {
 
-  color: #2c3e50;
 
+  color: #3498db;
 
 }
 
 }
 
 .pagination {
 
 .pagination {
 
   display: inline-block;
 
   display: inline-block;
 
@@ -4170,8 +4170,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
 .pagination > .active > span:focus {
 
 .pagination > .active > span:focus {
 
   z-index: 2;
 
   z-index: 2;
 
   color: #ffffff;
 
   color: #ffffff;
 
-  background-color: #3498db;
 
-  border-color: #3498db;
 
+  background-color: #e74c3c;
 
+  border-color: #e74c3c;
 
   cursor: default;
 
   cursor: default;
 
 }
 
 }
 
 .pagination > .disabled > span,
 
 .pagination > .disabled > span,
 
@@ -4286,18 +4286,18 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
   background-color: #808080;
 
   background-color: #808080;
 
 }
 
 }
 
 .label-primary {
 
 .label-primary {
 
-  background-color: #3498db;
 
+  background-color: #e74c3c;
 
 }
 
 }
 
 .label-primary[href]:hover,
 
 .label-primary[href]:hover,
 
 .label-primary[href]:focus {
 
 .label-primary[href]:focus {
 
-  background-color: #217dbb;
 
+  background-color: #d62c1a;
 
 }
 
 }
 
 .label-success {
 
 .label-success {
 
-  background-color: #5cb85c;
 
+  background-color: #2ecc71;
 
 }
 
 }
 
 .label-success[href]:hover,
 
 .label-success[href]:hover,
 
 .label-success[href]:focus {
 
 .label-success[href]:focus {
 
-  background-color: #449d44;
 
+  background-color: #25a25a;
 
 }
 
 }
 
 .label-info {
 
 .label-info {
 
   background-color: #5bc0de;
 
   background-color: #5bc0de;
 
@@ -4314,11 +4314,11 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
   background-color: #ec971f;
 
   background-color: #ec971f;
 
 }
 
 }
 
 .label-danger {
 
 .label-danger {
 
-  background-color: #d9534f;
 
+  background-color: #e74c3c;
 
 }
 
 }
 
 .label-danger[href]:hover,
 
 .label-danger[href]:hover,
 
 .label-danger[href]:focus {
 
 .label-danger[href]:focus {
 
-  background-color: #c9302c;
 
+  background-color: #d62c1a;
 
 }
 
 }
 
 .badge {
 
 .badge {
 
   display: inline-block;
 
   display: inline-block;
 
@@ -4417,7 +4417,7 @@ a.thumbnail.active {
 
 }
 
 }
 
 .thumbnail .caption {
 
 .thumbnail .caption {
 
   padding: 9px;
 
   padding: 9px;
 
-  color: #2c3e50;
 
+  color: #333333;
 
 }
 
 }
 
 .alert {
 
 .alert {
 
   padding: 15px;
 
   padding: 15px;
 
@@ -4525,7 +4525,7 @@ a.thumbnail.active {
 
   line-height: 20px;
 
   line-height: 20px;
 
   color: #ffffff;
 
   color: #ffffff;
 
   text-align: center;
 
   text-align: center;
 
-  background-color: #3498db;
 
+  background-color: #e74c3c;
 
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
 
   -webkit-transition: width 0.6s ease;
 
   -webkit-transition: width 0.6s ease;
 
@@ -4541,7 +4541,7 @@ a.thumbnail.active {
 
   animation: progress-bar-stripes 2s linear infinite;
 
   animation: progress-bar-stripes 2s linear infinite;
 
 }
 
 }
 
 .progress-bar-success {
 
 .progress-bar-success {
 
-  background-color: #5cb85c;
 
+  background-color: #2ecc71;
 
 }
 
 }
 
 .progress-striped .progress-bar-success {
 
 .progress-striped .progress-bar-success {
 
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
@@ -4562,7 +4562,7 @@ a.thumbnail.active {
 
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
 }
 
 }
 
 .progress-bar-danger {
 
 .progress-bar-danger {
 
-  background-color: #d9534f;
 
+  background-color: #e74c3c;
 
 }
 
 }
 
 .progress-striped .progress-bar-danger {
 
 .progress-striped .progress-bar-danger {
 
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 
@@ -4639,8 +4639,8 @@ a.list-group-item.active:hover,
 
 a.list-group-item.active:focus {
 
 a.list-group-item.active:focus {
 
   z-index: 2;
 
   z-index: 2;
 
   color: #ffffff;
 
   color: #ffffff;
 
-  background-color: #3498db;
 
-  border-color: #3498db;
 
+  background-color: #e74c3c;
 
+  border-color: #e74c3c;
 
 }
 
 }
 
 a.list-group-item.active .list-group-item-heading,
 
 a.list-group-item.active .list-group-item-heading,
 
 a.list-group-item.active:hover .list-group-item-heading,
 
 a.list-group-item.active:hover .list-group-item-heading,
 
@@ -4650,7 +4650,7 @@ a.list-group-item.active:focus .list-group-item-heading {
 
 a.list-group-item.active .list-group-item-text,
 
 a.list-group-item.active .list-group-item-text,
 
 a.list-group-item.active:hover .list-group-item-text,
 
 a.list-group-item.active:hover .list-group-item-text,
 
 a.list-group-item.active:focus .list-group-item-text {
 
 a.list-group-item.active:focus .list-group-item-text {
 
-  color: #e1f0fa;
 
+  color: #fdf3f2;
 
 }
 
 }
 
 .list-group-item-success {
 
 .list-group-item-success {
 
   color: #3c763d;
 
   color: #3c763d;
 
@@ -4960,18 +4960,18 @@ a.list-group-item-danger.active:focus {
 
   border-bottom-color: #dddddd;
 
   border-bottom-color: #dddddd;
 
 }
 
 }
 
 .panel-primary {
 
 .panel-primary {
 
-  border-color: #3498db;
 
+  border-color: #e74c3c;
 
 }
 
 }
 
 .panel-primary > .panel-heading {
 
 .panel-primary > .panel-heading {
 
   color: #ffffff;
 
   color: #ffffff;
 
-  background-color: #3498db;
 
-  border-color: #3498db;
 
+  background-color: #e74c3c;
 
+  border-color: #e74c3c;
 
 }
 
 }
 
 .panel-primary > .panel-heading + .panel-collapse .panel-body {
 
 .panel-primary > .panel-heading + .panel-collapse .panel-body {
 
-  border-top-color: #3498db;
 
+  border-top-color: #e74c3c;
 
 }
 
 }
 
 .panel-primary > .panel-footer + .panel-collapse .panel-body {
 
 .panel-primary > .panel-footer + .panel-collapse .panel-body {
 
-  border-bottom-color: #3498db;
 
+  border-bottom-color: #e74c3c;
 
 }
 
 }
 
 .panel-success {
 
 .panel-success {
 
   border-color: #d6e9c6;
 
   border-color: #d6e9c6;
 
@@ -5777,6 +5777,124 @@ button.close {
 
     display: none !important;
 
     display: none !important;
 
   }
 
   }
 
 }
 
 }
 
+.btn.btn-default {
 
+  box-shadow: inset 0px 0px 0px 1px #dddddd;
 
+  color: #888888;
 
+}
 
+.btn.btn-default:hover {
 
+  background: #fcfcfc;
 
+  border-color: #cccccc;
 
+  box-shadow: inset 0px 0px 0px 1px #cccccc;
 
+  color: #333333;
 
+}
 
+.btn.btn-default:active,
 
+.btn.btn-default:focus {
 
+  background: #fcfcfc;
 
+  border-color: #666666;
 
+  box-shadow: inset 0px 0px 0px 1px #666666;
 
+  outline: none;
 
+  color: #333333;
 
+}
 
+.btn.btn-primary {
 
+  background: #3498db;
 
+  border-color: #3498db;
 
+  box-shadow: inset 0px 0px 0px 1px #3498db;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-primary:hover {
 
+  background: #5faee3;
 
+  border-color: #5faee3;
 
+  box-shadow: inset 0px 0px 0px 1px #5faee3;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-primary:active,
 
+.btn.btn-primary:focus {
 
+  background: #1d6fa5;
 
+  border-color: #1d6fa5;
 
+  box-shadow: inset 0px 0px 0px 1px #1d6fa5;
 
+  outline: none;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-info {
 
+  background: #5bc0de;
 
+  border-color: #5bc0de;
 
+  box-shadow: inset 0px 0px 0px 1px #5bc0de;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-info:hover {
 
+  background: #85d0e7;
 
+  border-color: #85d0e7;
 
+  box-shadow: inset 0px 0px 0px 1px #85d0e7;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-info:active,
 
+.btn.btn-info:focus {
 
+  background: #28a1c5;
 
+  border-color: #28a1c5;
 
+  box-shadow: inset 0px 0px 0px 1px #28a1c5;
 
+  outline: none;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-success {
 
+  background: #2ecc71;
 
+  border-color: #2ecc71;
 
+  box-shadow: inset 0px 0px 0px 1px #2ecc71;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-success:hover {
 
+  background: #54d98c;
 
+  border-color: #54d98c;
 
+  box-shadow: inset 0px 0px 0px 1px #54d98c;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-success:active,
 
+.btn.btn-success:focus {
 
+  background: #208e4e;
 
+  border-color: #208e4e;
 
+  box-shadow: inset 0px 0px 0px 1px #208e4e;
 
+  outline: none;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-warning {
 
+  background: #f0ad4e;
 
+  border-color: #f0ad4e;
 
+  box-shadow: inset 0px 0px 0px 1px #f0ad4e;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-warning:hover {
 
+  background: #f4c37d;
 
+  border-color: #f4c37d;
 
+  box-shadow: inset 0px 0px 0px 1px #f4c37d;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-warning:active,
 
+.btn.btn-warning:focus {
 
+  background: #df8a13;
 
+  border-color: #df8a13;
 
+  box-shadow: inset 0px 0px 0px 1px #df8a13;
 
+  outline: none;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-danger {
 
+  background: #e74c3c;
 
+  border-color: #e74c3c;
 
+  box-shadow: inset 0px 0px 0px 1px #e74c3c;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-danger:hover {
 
+  background: #ed7669;
 
+  border-color: #ed7669;
 
+  box-shadow: inset 0px 0px 0px 1px #ed7669;
 
+  color: #ffffff;
 
+}
 
+.btn.btn-danger:active,
 
+.btn.btn-danger:focus {
 
+  background: #bf2718;
 
+  border-color: #bf2718;
 
+  box-shadow: inset 0px 0px 0px 1px #bf2718;
 
+  outline: none;
 
+  color: #ffffff;
 
+}
 
 /* All Displays */
 
 /* All Displays */
 
 .dropdown-menu {
 
 .dropdown-menu {
 
   border: none;
 
   border: none;
 
@@ -5806,17 +5924,17 @@ button.close {
 
   border: none;
 
   border: none;
 
   padding: 3px 20px;
 
   padding: 3px 20px;
 
   width: 100%;
 
   width: 100%;
 
-  color: #3e5771;
 
+  color: #4d4d4d;
 
   text-align: left;
 
   text-align: left;
 
   white-space: nowrap;
 
   white-space: nowrap;
 
 }
 
 }
 
 .dropdown-menu li button:hover {
 
 .dropdown-menu li button:hover {
 
-  background-color: #3498db;
 
+  background-color: #555555;
 
   color: #fcfcfc;
 
   color: #fcfcfc;
 
 }
 
 }
 
 .dropdown-menu li button:active,
 
 .dropdown-menu li button:active,
 
 .dropdown-menu li button:focus {
 
 .dropdown-menu li button:focus {
 
-  background-color: #34495e;
 
+  background-color: #e74c3c;
 
   color: #fcfcfc;
 
   color: #fcfcfc;
 
 }
 
 }
 
 .dropdown-menu li a .glyphicon,
 
 .dropdown-menu li a .glyphicon,
 
@@ -5834,13 +5952,13 @@ button.close {
 
 }
 
 }
 
 .dropdown-menu li a:link .badge,
 
 .dropdown-menu li a:link .badge,
 
 .dropdown-menu li a:visited .badge {
 
 .dropdown-menu li a:visited .badge {
 
-  background-color: #d9534f;
 
+  background-color: #e74c3c;
 
   color: #ffffff;
 
   color: #ffffff;
 
 }
 
 }
 
 .dropdown-menu li a:hover .badge,
 
 .dropdown-menu li a:hover .badge,
 
 .dropdown-menu li a:active .badge {
 
 .dropdown-menu li a:active .badge {
 
   background-color: #ffffff;
 
   background-color: #ffffff;
 
-  color: #d9534f;
 
+  color: #e74c3c;
 
 }
 
 }
 
 /* Move arrow to right on pull-right dropdowns */
 
 /* Move arrow to right on pull-right dropdowns */
 
 .pull-right .dropdown-menu:after {
 
 .pull-right .dropdown-menu:after {
 
@@ -5854,16 +5972,16 @@ button.close {
 
     border: none;
 
     border: none;
 
     padding: 3px 20px;
 
     padding: 3px 20px;
 
     width: 100%;
 
     width: 100%;
 
-    color: #3e5771;
 
+    color: #4d4d4d;
 
     text-align: left;
 
     text-align: left;
 
   }
 
   }
 
   .dropdown-menu li button:hover {
 
   .dropdown-menu li button:hover {
 
-    background-color: #3498db;
 
+    background-color: #555555;
 
     color: #fcfcfc;
 
     color: #fcfcfc;
 
   }
 
   }
 
   .dropdown-menu li button:active,
 
   .dropdown-menu li button:active,
 
   .dropdown-menu li button:focus {
 
   .dropdown-menu li button:focus {
 
-    background-color: #34495e;
 
+    background-color: #e74c3c;
 
     color: #fcfcfc;
 
     color: #fcfcfc;
 
   }
 
   }
 
 }
 
 }
 
@@ -5881,7 +5999,7 @@ button.close {
 
 .nav > li.active > a:active,
 
 .nav > li.active > a:active,
 
 .nav > li.active > a:hover,
 
 .nav > li.active > a:hover,
 
 .nav > li.active > a:visited {
 
 .nav > li.active > a:visited {
 
-  background-color: #3498db;
 
+  background-color: #e74c3c;
 
   color: #fcfcfc;
 
   color: #fcfcfc;
 
 }
 
 }
 
 .navbar .navbar-brand {
 
 .navbar .navbar-brand {
 
@@ -5951,20 +6069,20 @@ button.close {
 
   .navbar-nav-primary > li > a:visited {
 
   .navbar-nav-primary > li > a:visited {
 
     background: #f8f8f8 !important;
 
     background: #f8f8f8 !important;
 
     border: 2px solid #e7e7e7 !important;
 
     border: 2px solid #e7e7e7 !important;
 
-    color: #7f8c8d !important;
 
+    color: #999999 !important;
 
   }
 
   }
 
   .navbar-nav-primary > li > a:link .badge,
 
   .navbar-nav-primary > li > a:link .badge,
 
   .navbar-nav-primary > li > a:visited .badge {
 
   .navbar-nav-primary > li > a:visited .badge {
 
-    background-color: #7f8c8d;
 
+    background-color: #999999;
 
     color: #f8f8f8;
 
     color: #f8f8f8;
 
   }
 
   }
 
   .navbar-nav-primary > li > a:hover {
 
   .navbar-nav-primary > li > a:hover {
 
     background: #f8f8f8 !important;
 
     background: #f8f8f8 !important;
 
     border: 2px solid #3498db !important;
 
     border: 2px solid #3498db !important;
 
-    color: #3498db !important;
 
+    color: #555555 !important;
 
   }
 
   }
 
   .navbar-nav-primary > li > a:hover .badge {
 
   .navbar-nav-primary > li > a:hover .badge {
 
-    background-color: #3498db;
 
+    background-color: #555555;
 
     color: #f8f8f8;
 
     color: #f8f8f8;
 
   }
 
   }
 
   .navbar-nav-primary > li > a:active {
 
   .navbar-nav-primary > li > a:active {
 
@@ -6070,6 +6188,10 @@ button.close {
 
     margin: -6px 0px;
 
     margin: -6px 0px;
 
     margin-left: 8px;
 
     margin-left: 8px;
 
   }
 
   }
 
+  .navbar-nav-user .user-toggle:link,
 
+  .navbar-nav-user .user-toggle:visited {
 
+    color: #333333;
 
+  }
 
   .navbar-nav-user .dropdown-menu {
 
   .navbar-nav-user .dropdown-menu {
 
     min-width: 256px;
 
     min-width: 256px;
 
   }
 
   }
 
@@ -6090,9 +6212,9 @@ button.close {
 
 .navbar-nav-guest .btn-sign-in:link,
 
 .navbar-nav-guest .btn-sign-in:link,
 
 .navbar-nav-guest .btn-sign-in:visited {
 
 .navbar-nav-guest .btn-sign-in:visited {
 
   background-color: transparent;
 
   background-color: transparent;
 
-  border-color: #8aa6b8;
 
-  box-shadow: 0px 0px 0px 1px #8aa6b8;
 
-  color: #7a99af;
 
+  border-color: #80a7c2;
 
+  box-shadow: 0px 0px 0px 1px #80a7c2;
 
+  color: #6f9cb9;
 
 }
 
 }
 
 .navbar-nav-guest .btn-sign-in:hover {
 
 .navbar-nav-guest .btn-sign-in:hover {
 
   background-color: transparent;
 
   background-color: transparent;
 
@@ -6102,30 +6224,30 @@ button.close {
 
 }
 
 }
 
 .navbar-nav-guest .btn-sign-in:active,
 
 .navbar-nav-guest .btn-sign-in:active,
 
 .navbar-nav-guest .btn-sign-in:focus {
 
 .navbar-nav-guest .btn-sign-in:focus {
 
-  background-color: #2c3e50;
 
-  border-color: #2c3e50;
 
-  box-shadow: 0px 0px 0px 1px #2c3e50;
 
+  background-color: #1d6fa5;
 
+  border-color: #1d6fa5;
 
+  box-shadow: 0px 0px 0px 1px #1d6fa5;
 
   color: #fcfcfc;
 
   color: #fcfcfc;
 
 }
 
 }
 
 .navbar-nav-guest .btn-register,
 
 .navbar-nav-guest .btn-register,
 
 .navbar-nav-guest .btn-register:link,
 
 .navbar-nav-guest .btn-register:link,
 
 .navbar-nav-guest .btn-register:visited {
 
 .navbar-nav-guest .btn-register:visited {
 
-  background-color: #2ecc71;
 
-  border-color: #2ecc71;
 
-  box-shadow: 0px 0px 0px 1px #2ecc71;
 
+  background-color: #d7594c;
 
+  border-color: #d7594c;
 
+  box-shadow: 0px 0px 0px 1px #d7594c;
 
   color: #fcfcfc;
 
   color: #fcfcfc;
 
 }
 
 }
 
 .navbar-nav-guest .btn-register:hover {
 
 .navbar-nav-guest .btn-register:hover {
 
-  background-color: #69dd9a;
 
-  border-color: #69dd9a;
 
-  box-shadow: 0px 0px 0px 1px #69dd9a;
 
+  background-color: #e74c3c;
 
+  border-color: #e74c3c;
 
+  box-shadow: 0px 0px 0px 1px #e74c3c;
 
   color: #fcfcfc;
 
   color: #fcfcfc;
 
 }
 
 }
 
 .navbar-nav-guest .btn-register:active,
 
 .navbar-nav-guest .btn-register:active,
 
 .navbar-nav-guest .btn-register:focus {
 
 .navbar-nav-guest .btn-register:focus {
 
-  background-color: #29b765;
 
-  border-color: #29b765;
 
-  box-shadow: 0px 0px 0px 1px #29b765;
 
+  background-color: #af3428;
 
+  border-color: #af3428;
 
+  box-shadow: 0px 0px 0px 1px #af3428;
 
   color: #fcfcfc;
 
   color: #fcfcfc;
 
 }
 
 }
 
 /* On big displays put some distance between guest nav and other nav */
 
 /* On big displays put some distance between guest nav and other nav */
 
@@ -6145,13 +6267,13 @@ button.close {
 
   .navbar .dropdown-menu li a:visited .badge,
 
   .navbar .dropdown-menu li a:visited .badge,
 
   .navbar .dropdown-menu li a:hover .badge,
 
   .navbar .dropdown-menu li a:hover .badge,
 
   .navbar .dropdown-menu li a:active .badge {
 
   .navbar .dropdown-menu li a:active .badge {
 
-    background-color: #d9534f;
 
+    background-color: #e74c3c;
 
     border-radius: 4px;
 
     border-radius: 4px;
 
     color: #ffffff;
 
     color: #ffffff;
 
   }
 
   }
 
   /* Dropdown links and buttons */
 
   /* Dropdown links and buttons */
 
   .navbar .dropdown-menu li form button {
 
   .navbar .dropdown-menu li form button {
 
-    color: #7f8c8d;
 
+    color: #333333;
 
   }
 
   }
 
   .navbar .dropdown-menu li form button:hover {
 
   .navbar .dropdown-menu li form button:hover {
 
     background: none;
 
     background: none;
 
@@ -6160,7 +6282,7 @@ button.close {
 
   .navbar .dropdown-menu li form button:active,
 
   .navbar .dropdown-menu li form button:active,
 
   .navbar .dropdown-menu li form button:focus {
 
   .navbar .dropdown-menu li form button:focus {
 
     background: none;
 
     background: none;
 
-    color: #3498db;
 
+    color: #e74c3c;
 
   }
 
   }
 
   .navbar-inverse .dropdown-menu button {
 
   .navbar-inverse .dropdown-menu button {
 
     color: #999999;
 
     color: #999999;
 
@@ -6217,7 +6339,7 @@ button.close {
 
 }
 
 }
 
 .page-header > .container .breadcrumb > li a:hover,
 
 .page-header > .container .breadcrumb > li a:hover,
 
 .page-header > .container .breadcrumb > li a:active {
 
 .page-header > .container .breadcrumb > li a:active {
 
-  color: #2c3e50;
 
+  color: #3498db;
 
 }
 
 }
 
 .page-header > .container .breadcrumb > li span {
 
 .page-header > .container .breadcrumb > li span {
 
   margin: 0px 4px 0px 6px;
 
   margin: 0px 4px 0px 6px;
 
@@ -6243,7 +6365,7 @@ button.close {
 
 }
 
 }
 
 .page-header > .container .page-details a:active,
 
 .page-header > .container .page-details a:active,
 
 .page-header > .container .page-details a:hover {
 
 .page-header > .container .page-details a:hover {
 
-  color: #3498db;
 
+  color: #333333;
 
   text-decoration: none;
 
   text-decoration: none;
 
 }
 
 }
 
 .page-pills {
 
 .page-pills {
 
@@ -6254,21 +6376,29 @@ button.close {
 
 .page-pills .nav-pills {
 
 .page-pills .nav-pills {
 
   margin: 0px;
 
   margin: 0px;
 
 }
 
 }
 
-.page-pills .nav-pills a {
 
+.page-pills .nav-pills > li > a {
 
   padding: 6px 20px;
 
   padding: 6px 20px;
 
 }
 
 }
 
+.page-pills .nav-pills > li > a:hover,
 
+.page-pills .nav-pills > li > a:active {
 
+  text-decoration: underline;
 
+}
 
+.page-pills .nav-pills > li.active a:hover,
 
+.page-pills .nav-pills > li.active a:active {
 
+  text-decoration: none;
 
+}
 
 .misago-branding a {
 
 .misago-branding a {
 
   display: inline-block;
 
   display: inline-block;
 
   margin-top: 30px;
 
   margin-top: 30px;
 
   -webkit-transition: opacity 0.4s;
 
   -webkit-transition: opacity 0.4s;
 
   transition: opacity 0.4s;
 
   transition: opacity 0.4s;
 
-  color: #2c3e50;
 
+  color: #333333;
 
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   font-size: 28.8px;
 
   font-size: 28.8px;
 
   text-align: center;
 
   text-align: center;
 
 }
 
 }
 
 .misago-branding a .brand-border {
 
 .misago-branding a .brand-border {
 
-  background: #2c3e50;
 
+  background: #333333;
 
   border-radius: 4.32px;
 
   border-radius: 4.32px;
 
   display: inline-block;
 
   display: inline-block;
 
   margin-right: 2.88px;
 
   margin-right: 2.88px;

+ 6 - 4
uiframework/navbar.html
View File 

@@ -135,9 +135,9 @@
 
 
 
         <h1>Misago UI: Kitchen Sink Navbar Template</h1>
 
         <h1>Misago UI: Kitchen Sink Navbar Template</h1>
 
 
 
-        <button type="button" class="demo-all btn btn-default">Kitchen sink</button>
 
-        <button type="button" class="demo-registered btn btn-success">Registered</button>
 
-        <button type="button" class="demo-guest btn btn-danger">Guest</button>
 
+        <a href="#" class="demo-all btn btn-primary">Kitchen sink</a>
 
+        <a href="#" class="demo-registered btn btn-default">Registered</a>
 
+        <a href="#" class="demo-guest btn btn-default">Guest</a>
 
 
 
     </div><!-- /.container -->
 
     </div><!-- /.container -->
 
 
 
@@ -157,19 +157,21 @@
 
           $('.badged').show();
 
           $('.badged').show();
 
           $('.navbar-nav-user').show();
 
           $('.navbar-nav-user').show();
 
           $('.navbar-nav-guest').show();
 
           $('.navbar-nav-guest').show();
 
+          return true;
 
         });
 
         });
 
 
 
         $('.demo-registered').click(function() {
 
         $('.demo-registered').click(function() {
 
           $('.badged').show();
 
           $('.badged').show();
 
           $('.navbar-nav-user').show();
 
           $('.navbar-nav-user').show();
 
           $('.navbar-nav-guest').hide();
 
           $('.navbar-nav-guest').hide();
 
-
 
+          return true;
 
         });
 
         });
 
 
 
         $('.demo-guest').click(function() {
 
         $('.demo-guest').click(function() {
 
           $('.badged').hide();
 
           $('.badged').hide();
 
           $('.navbar-nav-user').hide();
 
           $('.navbar-nav-user').hide();
 
           $('.navbar-nav-guest').show();
 
           $('.navbar-nav-guest').show();
 
+          return true;
 
         });
 
         });
 
       });
 
       });
 
     </script>
 
     </script>