Cleaned up less some

misago/static/misago/css/misago/alerts.less

@@ -4,25 +4,31 @@
 
 
 .misago-alert-close(@text, @bg) {
-  background-color: @bg;
-  box-shadow: 0px 0px 0px 2px fadeOut(@text, 25%);
+  background-color: lighten(@bg, 10%);
+	border: 1px solid lighten(@bg, 10%);
+  border-radius: @border-radius-small;
+  .box-shadow(none);
+  float: none;
+  margin-left: @alert-padding;
+  padding: 6px 8px;
   .opacity(1);
 
-  color: fadeOut(@text, 10%);
+  color: @text;
+  font-size: @font-size-base;
+  text-shadow: none;
 
   &:hover {
-    background-color: @text;
-    box-shadow: 0px 0px 0px 2px @text;
+    background-color: darken(@bg, 15%);
+  	border-color: darken(@bg, 15%);
 
-    color: darken(@bg, 35%);
+    color: @text;
   }
 
   &:active, &:focus {
-    background-color: darken(@bg, 15%);
-    box-shadow: 0px 0px 0px 2px darken(@bg, 15%);
-    outline: none;
+    background-color: @text;
+  	border: 1px solid @text;
 
-    color: @text;
+    color: @bg;
   }
 }
 
@@ -42,11 +48,9 @@
 
     .alert {
       border: none;
-      border-bottom: 6px solid fadeOut(#000, 85%);
       border-radius: 0;
       margin-bottom: 0px;
-      padding: (@line-height-computed * 0.8) 0px;
-      padding-bottom: (@line-height-computed * 0.8) - 4px;
+      padding: @alert-padding;
 
       .alert-icon {
         margin: -@alert-padding 0px;
@@ -57,16 +61,6 @@
         font-size: @font-size-base * 1.8;
       }
 
-      .close {
-        border-radius: @border-radius-small;
-        float: none;
-        margin-left: @alert-padding;
-        padding: 6px 8px;
-
-        font-size: @font-size-small;
-        text-shadow: none;
-      }
-
       &.alert-success {
         .close {
           .misago-alert-close(@alert-success-text, @alert-success-bg);

misago/static/misago/css/misago/buttons.less

@@ -11,6 +11,7 @@
   top: 2px;
 
   color: darken(@btn-color, 10%);
+  outline: none;
 }
 
 

misago/static/misago/css/misago/dropdowns.less

@@ -24,12 +24,17 @@
   }
 
   li {
+    /* Links */
+    a {
+      padding: @padding-base-vertical @padding-large-horizontal;
+    }
+
     /* Buttons */
     button {
       background: none;
       border: none;
       border-radius: 0px;
-      padding: 3px 20px;
+      padding: @padding-base-vertical @padding-large-horizontal;
       width: 100%;
 
       color: @dropdown-link-color;
@@ -41,6 +46,8 @@
     a, button {
       &:hover {
         background-color: @dropdown-link-hover-bg;
+        transition-timing-function: ease;
+        transition-duration: 0.3s;
 
         color: @dropdown-link-hover-color;
       }
@@ -48,6 +55,7 @@
       &:active, &:focus {
         background-color: @dropdown-link-active-bg;
         outline: none;
+        transition-duration: 0.07s;
 
         color: @dropdown-link-active-color;
       }
@@ -57,7 +65,6 @@
     a, button {
       .glyphicon, .fa {
         display: inline-block;
-        margin-left: -10px;
         margin-right: 4px;
         width: 16px;
 
@@ -141,7 +148,6 @@
       button {
         background: none;
         border: none;
-        padding: 3px 20px;
         width: 100%;
 
         color: @dropdown-link-color;

misago/static/misago/css/misago/editor.less

@@ -8,7 +8,9 @@
 //**
 .misago-editor {
   .editor-toolbar {
-    background: @gray-dark;
+    background: @form-panel-footer-bg;
+    border: 1px solid @form-panel-border;
+    border-width: 1px 0px;
     padding: @padding-small-vertical @padding-small-horizontal;
 
     &>ul {
@@ -22,29 +24,28 @@
 
         .btn-default {
           background-color: transparent;
-          border-color: transparent;
+          border: 1px solid @form-panel-border;
           .box-shadow(none);
-          padding: 4px 2px;
+          padding: 4px 0px;
+          width: 32px;
 
-          color: @gray-lighter;
-          text-shadow: 0px 1px 1px @gray-darker;
+          color: @state-default;
+          text-align: center;
 
           &:hover {
-            background-color: @gray-lighter;
-            border-color: @gray-lighter;
+            border-color: @state-default;
             top: 0px;
 
-            color: @gray-darker;
+            color: @state-hover;
             outline: none;
             text-shadow: none;
           }
 
           &.active, &:active {
-            background-color: @gray-darker;
-            border-color: @gray-darker;
+            border-color: @state-clicked;
             top: 0px;
 
-            color: @gray-light;
+            color: @state-clicked;
             outline: none;
             text-shadow: none;
           }

misago/static/misago/css/misago/footer.less

@@ -33,13 +33,18 @@
       a {
         &:link, &:visited {
           color: @footer-link-color;
-          text-decoration: underline;
+          text-decoration: none;
         }
 
-        &:hover, &:active {
+        &:hover {
           color: @footer-link-hover-color;
           text-decoration: underline;
         }
+
+        &:active {
+          color: @footer-link-active-color;
+          text-decoration: underline;
+        }
       }
     }
   }
@@ -94,7 +99,7 @@
       }
 
       &:active, &:hover {
-        .opacity(1);
+        .opacity(0.8);
 
         text-decoration: none;
       }

misago/static/misago/css/misago/forms.less

@@ -54,17 +54,14 @@
 //**
 .form-panel {
   .form-errors-block {
-    background-color: @alert-danger-bg;
-    border-top: 1px solid @form-panel-border;
-    border-bottom: 6px solid fadeOut(#000, 85%);
+    background-color: @state-danger-bg;
     border-radius: 0;
     margin-bottom: 0px;
     padding: (@form-panel-padding-vertical / 2) @form-panel-padding-horizontal;
     overflow: auto;
 
-    color: @alert-danger-text;
+    color: @state-danger-text-contrast;
     font-size: @font-size-large;
-    text-shadow: 0px -1px 0px darken(@alert-danger-bg, 20%);
 
     .fa {
       position: relative;
@@ -221,6 +218,23 @@
     div.extra {
       margin-top: @line-height-computed + @form-panel-padding-vertical / 2;
     }
+
+    p, div {
+      &.extra {
+        a {
+          color: @state-hover;
+          text-decoration: underline;
+
+          &:hover {
+            color: @state-hover;
+          }
+
+          &:active {
+            color: @state-clicked;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -241,35 +255,3 @@
     }
   }
 }
-
-
-//== Form fields
-//
-//**
-textarea {
-  resize: vertical;
-}
-
-.checkbox {
-  label {
-    font-weight: bold;
-
-    .help-block {
-      font-weight: normal;
-    }
-  }
-}
-
-.form-control-static {
-  .progress {
-    background-color: @gray-lighter;
-    .box-shadow(none);
-    border-radius: 2px;
-    height: 6px;
-    margin-top: 0px;
-
-    .progress-bar {
-      .box-shadow(none);
-    }
-  }
-}

misago/static/misago/css/misago/header.less

@@ -38,6 +38,11 @@
         a {
           color: @text-color;
         }
+
+        a:active {
+          color: @state-clicked;
+          text-decoration: underline;
+        }
       }
 
       .sub {

misago/static/misago/css/misago/inputs.less

@@ -0,0 +1,82 @@
+//
+// Inputs
+// --------------------------------------------------
+
+
+// Flatten inputs
+input.form-control, textarea.form-control {
+  border-width: 2px;
+  .box-shadow(none);
+
+  &.diabled {
+    .opacity(50);
+  }
+}
+
+
+// Form feedback
+.input-group-addon {
+  background-color: @input-border;
+}
+
+.form-control-feedback {
+  color: @input-border;
+}
+
+.has-success {
+  .input-group-addon {
+    background-color: @state-success-bg;
+
+    color: @state-success-text-contrast;
+  }
+
+  .form-control-feedback {
+    color: @state-success-text;
+  }
+}
+
+.has-warning {
+  .input-group-addon {
+    background-color: @state-warning-bg;
+
+    color: @state-warning-text-contrast;
+  }
+
+  .form-control-feedback {
+    color: @state-warning-text;
+  }
+}
+
+.has-error {
+  .input-group-addon {
+    background-color: @state-danger-bg;
+
+    color: @state-danger-text-contrast;
+  }
+
+  .form-control-feedback {
+    color: @state-danger-text;
+  }
+}
+
+
+// Generic inputs
+textarea {
+  resize: vertical;
+}
+
+.checkbox {
+  label {
+    font-weight: bold;
+
+    .help-block {
+      font-weight: normal;
+    }
+  }
+}
+
+.form-control-static {
+  .progress {
+    margin-top: 0px;
+  }
+}

misago/static/misago/css/misago/misago.less

@@ -3,11 +3,13 @@
 @import "buttons.less";
 @import "dropdowns.less";
 @import "editor.less";
+@import "inputs.less";
 @import "navs.less";
 @import "modals.less";
 @import "markup.less";
 @import "pager.less";
 @import "panels.less";
+@import "progressbars.less";
 @import "states.less";
 @import "typography.less";
 @import "yesnoswitch.less";

misago/static/misago/css/misago/navbar.less

@@ -237,14 +237,66 @@
 .navbar-nav-guest {
   .navbar-vertical-align(@font-size-large + 12px);
 
-  .btn-sign-in {
+  .btn-sign-in, .btn-register {
     margin: 0px;
-    .misago-button-flavour(@btn-signin-color, @btn-signin-bg, @btn-signin-border);
+
+    &:hover {
+      transition-timing-function: ease;
+      transition-duration: 0.3s;
+     }
+
+    &:active {
+      .box-shadow(none);
+      transition-timing-function: ease;
+      transition-duration: 0.1s;
+    }
+  }
+
+  .btn-sign-in {
+    &, &:visited, &:link {
+      background: @btn-sign-in-bg;
+      border-color: @btn-sign-in-border;
+
+      color: @btn-sign-in-color;
+    }
+
+    &:hover {
+      background: @btn-sign-in-hover-bg;
+      border-color: @btn-sign-in-hover-border;
+
+      color: @btn-sign-in-hover-color;
+
+    }
+
+    &:active {
+      background: @btn-sign-in-active-bg;
+      border-color: @btn-sign-in-active-border;
+
+      color: @btn-sign-in-active-color;
+    }
   }
 
   .btn-register {
-    margin: 0px;
-    .misago-button-flavour(@btn-register-color, @btn-register-bg, @btn-register-border);
+    &, &:visited, &:link {
+      background: @btn-register-bg;
+      border-color: @btn-register-border;
+
+      color: @btn-register-color;
+    }
+
+    &:hover {
+      background: @btn-register-hover-bg;
+      border-color: @btn-register-hover-border;
+
+      color: @btn-register-hover-color;
+    }
+
+    &:active {
+      background: @btn-register-active-bg;
+      border-color: @btn-register-active-border;
+
+      color: @btn-register-active-color;
+    }
   }
 }
 

misago/static/misago/css/misago/navs.less

@@ -11,8 +11,9 @@
     &>a {
       &:link, &:active, &:visited {
         border: none;
+        border-bottom: 3px solid transparent;
         border-radius: 0px;
-        margin-bottom: 1px;
+        margin-bottom: -2px;
         padding: @nav-tabs-padding;
 
         color: @nav-link-color;
@@ -23,12 +24,19 @@
         border-bottom: 3px solid @nav-tabs-link-hover-border-color;
         margin-bottom: -2px;
         padding: @nav-tabs-padding;
+        transition-timing-function: ease;
+        transition-duration: 0.3s;
 
         color: @nav-link-hover-color;
       }
 
       &:active {
-        border-bottom-color: @nav-tabs-link-active-border-color;
+        background: @nav-tabs-link-clicked-bg;
+        border-bottom-color: @nav-tabs-link-clicked-border-color;
+        transition-timing-function: ease;
+        transition-duration: 0.1s;
+
+        color: @nav-tabs-link-clicked-color;
       }
     }
   }
@@ -38,11 +46,11 @@
       &:link, &:active, a:hover, &:visited {
         border: none;
         border-radius: 0px;
-        border-bottom: 3px solid @nav-tabs-active-link-hover-border-color;
+        border-bottom: 3px solid @nav-tabs-active-link-border-color;
         margin-bottom: -2px;
         padding: @nav-link-padding;
 
-        color: @nav-tabs-active-link-hover-color;
+        color: @nav-tabs-active-link-color;
         cursor: pointer;
         font-weight: bold;
       }

misago/static/misago/css/misago/panels.less

@@ -9,3 +9,223 @@
 .panel {
   box-shadow: none;
 }
+
+
+// Bodies
+//
+//==
+.panel-body {
+  &.thin {
+    padding-top: @line-height-computed / 6;
+    padding-bottom: 0px;
+  }
+
+  &.large {
+    padding-top: 0px;
+    padding-bottom: 0px;
+
+    font-size: @font-size-large;
+  }
+}
+
+
+// Footers
+//
+//==
+.panel-footer {
+  overflow: auto;
+
+  &>ul {
+    overflow: auto;
+    margin: 0px;
+    padding: 0px;
+
+    &>li {
+      float: left;
+    }
+
+    &.pull-left {
+      &>li {
+        margin-right: @line-height-computed;
+      }
+    }
+
+    &.pull-right {
+      &>li {
+        margin-left: @line-height-computed;
+      }
+    }
+
+    &.stats {
+      &>li {
+        img {
+          border-radius: @border-radius-small;
+          height: 20px;
+        }
+
+        a {
+          color: @state-hover;
+          font-weight: bold;
+        }
+
+        a:hover {
+          color: @state-hover;
+          text-decoration: underline;
+        }
+
+        a:active {
+          color: @state-clicked;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    &.actions {
+      margin: -6px 0px;
+
+      &>li {
+        &>form {
+          margin: 0px;
+          padding: 0px;
+        }
+
+        &>form>.btn, &>.btn {
+          border-color: transparent;
+          background: transparent;
+          .box-shadow(none);
+          position: static;
+          margin: 0px;
+          padding: 5px 7px;
+
+          color: @state-default;
+
+          &:hover {
+            background-color: darken(@panel-footer-bg, 5%);
+            transition-timing-function: ease;
+            transition-duration: 0.5s;
+
+            color: @state-hover;
+          }
+
+          &:active {
+            background-color: darken(@panel-footer-bg, 5%);
+            outline: none;
+            transition-duration: 0.07s;
+
+            color: @state-clicked;
+          }
+
+          .fa {
+            position: relative;
+            bottom: 1px;
+          }
+
+          &.btn-primary {
+            background: transparent;
+
+            color: @state-info-text;
+
+            &:hover {
+              background: fadeOut(@state-info-bg, 90%);
+
+              color: @state-info-text;
+            }
+
+            &:active {
+              background: @state-info-bg;
+
+              color: @state-info-text-contrast;
+            }
+          }
+
+          &.btn-success {
+            background: transparent;
+
+            color: @state-success-text;
+
+            &:hover {
+              background: fadeOut(@state-success-bg, 90%);
+
+              color: @state-success-text;
+            }
+
+            &:active {
+              background: @state-success-bg;
+
+              color: @state-success-text-contrast;
+            }
+          }
+
+          &.btn-warning {
+            background: transparent;
+
+            color: @state-warning-text;
+
+            &:hover {
+              background: fadeOut(@state-warning-bg, 90%);
+
+              color: @state-warning-text;
+            }
+
+            &:active {
+              background: @state-warning-bg;
+
+              color: @state-warning-text-contrast;
+            }
+          }
+
+          &.btn-danger {
+            background: transparent;
+
+            color: @state-danger-text;
+
+            &:hover {
+              background: fadeOut(@state-danger-bg, 90%);
+
+              color: @state-danger-text;
+            }
+
+            &:active {
+              background: @state-danger-bg;
+
+              color: @state-danger-text-contrast;
+            }
+          }
+        }
+      }
+
+      &.pull-left {
+        &>li {
+          margin-right: @line-height-computed / 2;
+        }
+      }
+
+      &.pull-right {
+        &>li {
+          margin-left: @line-height-computed / 2;
+        }
+      }
+    }
+  }
+}
+
+
+// Opacity
+.panel {
+  .opaque {
+    .opacity(0.3);
+    transition-property: opacity;
+    transition-timing-function: ease;
+    transition-duration: 0.3s;
+  }
+
+  &:hover, &:focus {
+    .opaque {
+      .opacity(1);
+
+      transition-property: opacity;
+      transition-timing-function: ease;
+      transition-duration: 0.7s;
+    }
+  }
+}

misago/static/misago/css/misago/profile.less

@@ -112,7 +112,7 @@
 .user-profile {
   &.profile-team {
     .user-title {
-      color: @brand-primary;
+      color: @brand-accent;
     }
   }
 }
@@ -128,10 +128,19 @@
       margin-top: 3px;
 
       a {
-      	&:link, &:visited {
-      		color: @text-color;
-      		font-weight: bold;
-      	}
+        &:link, &:visited {
+          color: @state-hover;
+          font-weight: bold;
+        }
+
+        &:hover {
+          color: @state-hover;
+          text-decoration: underline;
+        }
+
+        &:active {
+          color: @state-clicked;
+        }
       }
 
       img {

misago/static/misago/css/misago/progressbars.less

@@ -0,0 +1,20 @@
+//
+// Progress bars
+// --------------------------------------------------
+
+
+.progress {
+  background-color: darken(@body-bg, 7%);
+  .box-shadow(none);
+  border-radius: 20px;
+  margin-top: 0px;
+
+  .progress-bar {
+    .box-shadow(none);
+  }
+
+  &.thin {
+    border-radius: 2px;
+    height: 6px;
+  }
+}

misago/static/misago/css/misago/signin.less

@@ -5,10 +5,25 @@
 
 .signin-help {
   li {
-    margin-bottom: @line-height-computed;
-
     h5 {
       margin-bottom: @line-height-computed / 4;
+
+      font-size: large;
+    }
+
+    a {
+      &:link, &:visited {
+        color: @state-default;
+      }
+
+      &:hover {
+        color: @state-hover;
+        text-decoration: none;
+      }
+
+      &:active {
+        color: @state-clicked;
+      }
     }
   }
 }

misago/static/misago/css/misago/states.less

@@ -14,3 +14,19 @@
 .user-banned {
   color: @state-banned;
 }
+
+
+// Icon states
+.fa, .glyphicon {
+  &.text-success {
+    color: @brand-success;
+  }
+
+  &.text-danger {
+    color: @brand-danger;
+  }
+
+  &.text-warning {
+    color: @brand-warning;
+  }
+}

misago/static/misago/css/misago/usercp.less

@@ -13,7 +13,7 @@
   padding-bottom: @line-height-computed;
 
   .avatar-preview {
-  	max-width: 200px;
+    max-width: 200px;
   }
 
   .usercp-avatar-options {
@@ -24,25 +24,21 @@
           margin: 0px;
           padding: 0px 0px;
 
-          color: fadeOut(@text-color, 40);
-          line-height: @line-height-computed;
+          color: @state-default;
+          line-height: @line-height-computed * 1.2;
 
           &:hover, &:focus {
-            color: @text-color;
-            text-decoration: none;
+            outline: none;
 
-            .fa {
-              color: @brand-primary
-            }
+            color: @state-hover;
+            text-decoration: none;
           }
 
           &:active {
-            color: @text-color;
-            text-decoration: none;
+            outline: none;
 
-            .fa {
-              color: @brand-primary
-            }
+            color: @state-clicked;
+            text-decoration: none;
           }
         }
 
@@ -135,12 +131,12 @@
 
   .drag-drop-area {
     background-color: @form-panel-bg;
-    border: 6px dashed fadeOut(@text-color, 50);
+    border: 6px dashed @state-default;
     border-radius: @border-radius-large;
     display: block;
     padding: (@line-height-computed * 2) @line-height-computed;
 
-    color: fadeOut(@text-color, 50);
+    color: @state-default;
     cursor: pointer;
     text-align: center;
 
@@ -154,9 +150,16 @@
     }
 
     &:hover {
-      border-color: fadeOut(@text-color, 10);
+      border-color: @state-hover;
 
-      color: fadeOut(@text-color, 10);
+      color: @state-hover;
+      text-decoration: none;
+    }
+
+    &:active {
+      border-color: @state-clicked;
+
+      color: @state-clicked;
       text-decoration: none;
     }
   }
@@ -191,3 +194,22 @@
     }
   }
 }
+
+
+// Avatar gallery
+//
+//==
+.avatar-gallery {
+  .thumbnail {
+    &:hover, &:focus {
+      border-color: @state-hover;
+      outline: none;
+    }
+
+    &:active {
+      border-color: @state-clicked;
+      outline: none;
+      transition: border 0s;
+    }
+  }
+}

misago/static/misago/css/misago/variables.less

@@ -2,28 +2,44 @@
 // Misago Variables
 // --------------------------------------------------
 
+// BAD STUFF
+@brand-secondary: #0F0;
+// BAD STUFF
 
 //== Colors
 //
 //## Basic colors for use in this flavor
 
-@brand-primary:         #c0392b;
-@brand-secondary:       #3498db;
+@brand-primary:         #3498db;
+@brand-accent:          #e74c3c;
 @brand-success:         #2ecc71;
 @brand-info:            #5bc0de;
 @brand-warning:         #f0ad4e;
 @brand-danger:          #e74c3c;
 
+
 // Background color for `<body>`.
-@body-bg:               darken(#fff, 2%);
+@body-bg:               #fff;
+
 // Global text color on `<body>`.
-@text-color:            #444;
+@text-color:            @gray-dark;
+
+// Global state colors
+@state-default:         @gray-light;
+@state-hover:           @text-color;
+@state-clicked:         @brand-primary;
+@state-active:          @brand-accent;
+
+@state-online:                #2ecc71;
+@state-offline:               #95a5a6;
+@state-banned:                #e74c3c;
+
 
 // Headings color
 @headings-small-color:  darken(@body-bg, 30%);
 
 // Global textual link color.
-@link-color:            @brand-secondary;
+@link-color:            @brand-primary;
 @link-hover-color:      darken(@link-color, 15%);
 
 // Text muted color
@@ -40,8 +56,8 @@
 //
 //## Navbar style
 
-@navbar-default-bg:                lighten(#bdc3c7, 18%);
-@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
+@navbar-default-bg:                lighten(#ecf0f1, 3%);
+@navbar-default-border:            #ecf0f1;
 
 
 // Navbar brand
@@ -77,15 +93,31 @@
 
 
 // Guest Sign in button
-@btn-signin-color:                 darken(@body-bg, 50%);
-@btn-signin-bg:                    @body-bg;
-@btn-signin-border:                darken(@btn-signin-bg, 15%);
+@btn-sign-in-color:                    @state-default;
+@btn-sign-in-bg:                       @navbar-default-bg;
+@btn-sign-in-border:                   @navbar-default-border;
+
+@btn-sign-in-hover-color:              @state-hover;
+@btn-sign-in-hover-bg:                 @navbar-default-border;
+@btn-sign-in-hover-border:             @navbar-default-border;
+
+@btn-sign-in-active-color:             #fff;
+@btn-sign-in-active-bg:                @state-clicked;
+@btn-sign-in-active-border:            @state-clicked;
 
 
 // Guest Register button
-@btn-register-color:                 #fff;
-@btn-register-bg:                    desaturate(@brand-danger, 15%);
-@btn-register-border:                darken(@btn-register-bg, 15%);
+@btn-register-color:                   fadeOut(@brand-accent, 30%);
+@btn-register-bg:                      @navbar-default-bg;
+@btn-register-border:                  fadeOut(@brand-accent, 70%);
+
+@btn-register-hover-color:             @brand-accent;
+@btn-register-hover-bg:                fadeOut(@brand-accent, 90%);
+@btn-register-hover-border:            transparent;
+
+@btn-register-active-color:            #fff;
+@btn-register-active-bg:               @brand-accent;
+@btn-register-active-border:           @brand-accent;
 
 
 //== Dropdowns
@@ -93,16 +125,13 @@
 //## Misago dropdowns flavor
 
 // Dropdown link text color.
-@dropdown-link-color:            lighten(@text-color, 10%);
-// Hover color for dropdown links.
+@dropdown-link-color:            @text-color;
+
 @dropdown-link-hover-color:      #fff;
-// Hover background for dropdown links.
-@dropdown-link-hover-bg:         #666;
+@dropdown-link-hover-bg:         lighten(@state-hover, 15%);
 
-// Active dropdown menu item text color.
 @dropdown-link-active-color:     #fff;
-// Active dropdown menu item background color.
-@dropdown-link-active-bg:        #333;
+@dropdown-link-active-bg:        @state-clicked;
 
 
 // Open dropdown shadow color.
@@ -126,9 +155,13 @@
 @nav-tabs-link-hover-border-color:          darken(@nav-tabs-border-color, 40%);
 @nav-tabs-link-active-border-color:         @brand-secondary;
 
-@nav-tabs-active-link-hover-bg:             transparent;
-@nav-tabs-active-link-hover-color:          @text-color;
-@nav-tabs-active-link-hover-border-color:   @brand-primary;
+@nav-tabs-link-clicked-bg:                  transparent;
+@nav-tabs-link-clicked-color:               @state-clicked;
+@nav-tabs-link-clicked-border-color:        @state-clicked;
+
+@nav-tabs-active-link-bg:                   transparent;
+@nav-tabs-active-link-color:                @state-hover;
+@nav-tabs-active-link-border-color:         @state-active;
 
 @nav-tabs-justified-link-border-color:            #ddd;
 @nav-tabs-justified-active-link-border-color:     @body-bg;
@@ -176,8 +209,9 @@
 @misago-branding-size:           @font-size-large * 1.6;
 
 // Footer links
-@footer-link-color:              @gray-light;
-@footer-link-hover-color:        @gray-darker;
+@footer-link-color:              @state-default;
+@footer-link-hover-color:        @state-hover;
+@footer-link-active-color:       @state-clicked;
 
 
 //== Buttons
@@ -200,7 +234,7 @@
 @btn-default-active-border:      #999;
 
 @btn-primary-color:              #fff;
-@btn-primary-bg:                 @brand-secondary;
+@btn-primary-bg:                 @brand-primary;
 @btn-primary-border:             darken(@btn-primary-bg, 15%);
 
 @btn-success-color:              #fff;
@@ -231,41 +265,61 @@
 @form-panel-padding:                    @form-panel-padding-vertical @form-panel-padding-horizontal;
 
 
-//== Error panel
+//== Panels
 //
 //##
-@error-panel-bg:                   darken(@body-bg, 1%);
-@error-panel-border:               darken(@body-bg, 15%);
-@error-panel-shadow:               darken(@body-bg, 5%);
 
+@panel-bg:                    #fff;
+@panel-body-padding:          15px;
 
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
+//** Border color for elements within panels
+@panel-inner-border:          darken(@body-bg, 8%);
+@panel-footer-bg:             @panel-bg;
 
-@alert-padding:               12px;
-@alert-border-radius:         @border-radius-large;
+@panel-default-text:          @gray-dark;
+@panel-default-border:        darken(@body-bg, 14%);
+@panel-default-heading-bg:    #f5f5f5;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
 
-@alert-success-bg:            #27ae60;
-@alert-success-text:          #fff;
+@state-success-text:             #27ae60;
+@state-success-text-contrast:    #fff;
+@state-success-bg:               #2ecc71;
 
-@alert-info-bg:               #2980b9;
-@alert-info-text:             #fff;
+@state-info-text:                @brand-primary;
+@state-info-text-contrast:       #fff;
+@state-info-bg:                  @brand-primary;
 
-@alert-warning-bg:            #e67e22;
-@alert-warning-text:          #fff;
+@state-warning-text:             #e67e22;
+@state-warning-text-contrast:    #fff;
+@state-warning-bg:               #e67e22;
 
-@alert-danger-bg:             #c0392b;
-@alert-danger-text:           #fff;
+@state-danger-text:              #c0392b;
+@state-danger-text-contrast:     #fff;
+@state-danger-bg:                darken(#e74c3c, 12%);
 
 
-//== User state
+//== Alerts
 //
-//##
+//## Define alert colors, border radius, and padding.
 
-@state-online:                #2ecc71;
-@state-offline:               #95a5a6;
-@state-banned:                #e74c3c;
+@alert-padding:               14px;
+@alert-border-radius:         @border-radius-large;
+
+@alert-success-bg:            @state-success-bg;
+@alert-success-text:          @state-success-text-contrast;
+
+@alert-info-bg:               @state-info-bg;
+@alert-info-text:             @state-info-text-contrast;
+
+@alert-warning-bg:            @state-warning-bg;
+@alert-warning-text:          @state-warning-text-contrast;
+
+@alert-danger-bg:             @state-danger-bg;
+@alert-danger-text:           @state-danger-text-contrast;
 
 
 //== Modals

misago/static/misago/css/misago/warnings.less

@@ -11,13 +11,12 @@
     margin-bottom: @line-height-computed / 3;
   }
 
-  .progress {
-    border-radius: @border-radius-small;
-    height: 8px;
+  ul {
+    overflow: auto;
 
-    .progress-bar {
-      .box-shadow(none);
-      height: 8px;
+    li {
+      margin-right: @line-height-computed;
+      float: left;
     }
   }
 }
@@ -27,64 +26,17 @@
 //
 //==
 .warnings-list {
-  .panel-body {
-    p {
-      margin: 0px;
-    }
-  }
-
   .panel-footer {
-    overflow: auto;
-
-    font-size: @font-size-small;
-
-    ul {
-      margin: 0px;
-
-      li {
-        float: left;
-        margin: 0px;
-
-        .state-valid {
-          color: @brand-danger;
-        }
-
-        .state-canceled {
-          color: @brand-warning;
-        }
-
-        .state-expired {
-          color: fadeOut(@text-color, 40);
-        }
-
-        img {
-          border-radius: @border-radius-base;
-          margin-top: -3px;
-          width: 18px;
-        }
-
-        form {
-          margin: -3px 0px;
-          padding: 0px;
-
-          .btn-default {
-            padding: 2px 5px;
-            .box-shadow(none);
-          }
-        }
-      }
+    .state-valid {
+      color: @brand-danger;
+    }
 
-      &.pull-left {
-        li {
-          margin-right: @line-height-computed;
-        }
-      }
+    .state-canceled {
+      color: @brand-warning;
+    }
 
-      &.pull-right {
-        li {
-          margin-left: @line-height-computed / 2;
-        }
-      }
+    .state-expired {
+      color: fadeOut(@text-color, 40);
     }
   }
 }

misago/templates/misago/login.html

@@ -46,36 +46,26 @@
     </div>
     <div class="col-md-4">
 
-      <h4>
-        <span class="fa fa-fw fa-question-circle"></span>
-        {% trans "Common problems:" %}
-      </h4>
       <ul class="list-unstyled signin-help">
         <li>
-          <h5>
-            <span class="fa fa-fw fa-key"></span>
-            {% trans "I don't remember my password." %}
-          </h5>
+          <h5>{% trans "Common problems:" %}</h5>
+        </li>
+        <li>
           <a href="{% url 'misago:request_password_reset' %}">
-            {% trans "Change forgotten password" %}
+            <span class="fa fa-key fa-fw"></span>
+            {% trans "I don't remember my password." %}
           </a>
         </li>
         <li>
-          <h5>
-            <span class="fa fa-fw fa-power-off"></span>
-            {% trans "My account is inactive." %}
-          </h5>
           <a href="{% url 'misago:request_activation' %}">
-            {% trans "Request activation e-mail" %}
+            <span class="fa fa-power-off fa-fw"></span>
+            {% trans "My account is inactive." %}
           </a>
         </li>
         <li>
-          <h5>
-            <span class="fa fa-fw fa-pencil-square-o"></span>
-            {% trans "I don't have an account." %}
-          </h5>
           <a href="{% url 'misago:register' %}">
-            {% trans "Register new account" %}
+            <span class="fa fa-pencil-square-o fa-fw"></span>
+            {% trans "I don't have an account." %}
           </a>
         </li>
       </ul>

misago/templates/misago/modusers/warn.html

@@ -53,7 +53,7 @@
     </div>
 
   </div>
-  <div class="col-md-4">
+  <div class="col-md-4 warning-preview">
 
     <div class="panel panel-default">
       <div class="panel-heading">
@@ -61,29 +61,50 @@
           {% trans "Current warning level" %}
         </h3>
       </div>
-      <div class="panel-body">
+      <div class="panel-body thin">
 
         {% if current_level %}
           <h4>{{ current_level.name }}</h4>
 
           {% if current_level.is_replying_disallowed %}
-          <p class="text-error">{% trans "Replying are forbidden." %}</p>
+          <p>
+            <span class="fa fa-times-circle fa-lg fa-fw text-danger"></span>
+            {% trans "Replying are forbidden." %}
+          </p>
           {% elif current_level.is_replying_moderated %}
-          <p class="text-danger">{% trans "New replies are moderated." %}</p>
+          <p>
+            <span class="fa fa-exclamation-circle fa-lg fa-fw text-warning"></span>
+            {% trans "New replies are moderated." %}
+          </p>
           {% else %}
-          <p class="test-success">{% trans "No restrictions on posting replies." %}</p>
+          <p>
+            <span class="fa fa-check-circle fa-lg fa-fw text-success"></span>
+            {% trans "No restrictions on posting replies." %}
+          </p>
           {% endif %}
 
           {% if current_level.is_starting_threads_disallowed %}
-          <p class="text-error">{% trans "Starting threads is forbidden." %}</p>
+          <p>
+            <span class="fa fa-times-circle fa-lg fa-fw text-danger"></span>
+            {% trans "Starting threads is forbidden." %}
+          </p>
           {% elif current_level.is_starting_threads_moderated %}
-          <p class="text-danger">{% trans "New threads are moderated." %}</p>
+          <p>
+            <span class="fa fa-exclamation-circle fa-lg fa-fw text-warning"></span>
+            {% trans "New threads are moderated." %}
+          </p>
           {% else %}
-          <p class="test-success">{% trans "No restrictions on starting threads." %}</p>
+          <p>
+            <span class="fa fa-check-circle fa-lg fa-fw text-success"></span>
+            {% trans "No restrictions on starting threads." %}
+          </p>
           {% endif %}
         {% else %}
         <h4>{% trans "None" %}</h4>
-        <p>{% trans "No warning level is set." %}</p>
+        <p>
+          <span class="fa fa-check-circle fa-lg fa-fw text-success"></span>
+          {% trans "No warning level is set." %}
+        </p>
         {% endif %}
 
       </div>
@@ -95,24 +116,42 @@
           {% trans "Next level" %}
         </h3>
       </div>
-      <div class="panel-body">
+      <div class="panel-body thin">
 
         <h4>{{ next_level.name }}</h4>
 
         {% if next_level.is_replying_disallowed %}
-        <p>{% trans "Replying are forbidden." %}</p>
+        <p>
+          <span class="fa fa-times-circle fa-lg fa-fw text-danger"></span>
+          {% trans "Replying are forbidden." %}
+        </p>
         {% elif next_level.is_replying_moderated %}
-        <p>{% trans "New replies are moderated." %}</p>
+        <p>
+          <span class="fa fa-exclamation-circle fa-lg fa-fw text-warning"></span>
+          {% trans "New replies are moderated." %}
+        </p>
         {% else %}
-        <p>{% trans "No restrictions on posting replies." %}</p>
+        <p>
+          <span class="fa fa-check-circle fa-lg fa-fw text-success"></span>
+          {% trans "No restrictions on posting replies." %}
+        </p>
         {% endif %}
 
         {% if next_level.is_starting_threads_disallowed %}
-        <p class="text-error">{% trans "Starting threads is forbidden." %}</p>
+        <p>
+          <span class="fa fa-times-circle fa-lg fa-fw text-danger"></span>
+          {% trans "Starting threads is forbidden." %}
+        </p>
         {% elif next_level.is_starting_threads_moderated %}
-        <p class="text-danger">{% trans "New threads are moderated." %}</p>
+        <p>
+          <span class="fa fa-exclamation-circle fa-lg fa-fw text-warning"></span>
+          {% trans "New threads are moderated." %}
+        </p>
         {% else %}
-        <p>{% trans "No restrictions on starting threads." %}</p>
+        <p>
+          <span class="fa fa-check-circle fa-lg fa-fw text-success"></span>
+          {% trans "No restrictions on starting threads." %}
+        </p>
         {% endif %}
 
       </div>

misago/templates/misago/profile/name_history.html

@@ -13,8 +13,8 @@
       <strong>{{ change.new_username }}</strong>
     {% endcapture %}
     <p>
-      {% if not change.changed_by or change.changed_by_id != profile.pk %}
-        {% if change.changed_by %}
+      {% if not change.changed_by_id or change.changed_by_id != profile.pk %}
+        {% if change.changed_by_id %}
         <a href="{% url USER_PROFILE_URL user_slug=change.changed_by_slug user_id=change.changed_by_id %}">
           <img src="{{ change.changed_by_id|avatar:22 }}" class="tooltip-top" title="{{ change.changed_by_username }}">
         </a>
@@ -22,10 +22,10 @@
         <img src="{% blankavatar 22 %}" class="tooltip-top" title="{{ change.changed_by_username }}">
         {% endif %}
         {% capture trimmed as changed_by %}
-          {% if change.changed_by %}
+          {% if change.changed_by_id %}
           <a href="{% url USER_PROFILE_URL user_slug=change.changed_by_slug user_id=change.changed_by_id %}">{{ change.changed_by_username }}</a>
           {% else %}
-          {{ change.changed_by_username }}
+          <strong>{{ change.changed_by_username }}</strong>
           {% endif %}
         {% endcapture %}
         {% blocktrans trimmed with changed_by=changed_by|safe old_username=old_username|safe new_username=new_username|safe %}

misago/templates/misago/profile/warnings.html

@@ -7,36 +7,49 @@
   <div class="warning-summary">
     {% if warning_level %}
       <p class="lead">
-        <span class="fa fa-exclamation-triangle"></span>
         {{ warning_level.name }}
       </p>
 
       {% if warning_level.has_restrictions %}
-      <p>
+      <ul class="list-unstyled">
         {% if warning_level.is_replying_disallowed %}
+        <li>
+          <span class="fa fa-times-circle fa-lg fa-fw text-danger"></span>
           {% trans "Replying are forbidden." %}
+        </li>
         {% elif warning_level.is_replying_moderated %}
+        <li>
+          <span class="fa fa-exclamation-circle fa-lg fa-fw text-warning"></span>
           {% trans "New replies are moderated." %}
+        </li>
         {% endif %}
         {% if warning_level.is_starting_threads_disallowed %}
+        <li>
+          <span class="fa fa-times-circle fa-lg fa-fw text-danger"></span>
           {% trans "Starting threads is forbidden." %}
+        </li>
         {% elif warning_level.is_starting_threads_moderated %}
+        <li>
+          <span class="fa fa-exclamation-circle fa-lg fa-fw text-warning"></span>
           {% trans "New threads are moderated." %}
+        </li>
         {% endif %}
         {% if warning_level.length_in_minutes %}
+        <li>
+          <span class="fa fa-clock-o fa-fw text-success"></span>
           {% blocktrans trimmed with length=warning_level.length %}
           This warning level lasts {{ length }}.
           {% endblocktrans %}
+        </li>
         {% endif %}
-      </p>
+      </ul>
       {% endif %}
     {% else %}
     <p class="lead">
-      <span class="fa fa-check"></span>
       {% trans "No warnings are active." %}
     </p>
     {% endif %}
-    <div class="progress">
+    <div class="progress thin">
       <div class="progress-bar progress-bar-{% if warning_progress > 66 %}success{% elif warning_progress > 33 %}warning{% else %}danger{% endif %}" role="progressbar" aria-valuenow="{{ warning_progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ warning_progress }}%;">
         <span class="sr-only">
           {% blocktrans trimmed with level=warning_level.level %}
@@ -50,7 +63,7 @@
   <div class="warnings-list">
     {% for warning in warnings.object_list %}
     <div class="panel panel-default">
-      <div class="panel-body">
+      <div class="panel-body large">
 
         {% if warning.reason %}
         <p>
@@ -63,8 +76,8 @@
         {% endif %}
 
       </div>
-      <div class="panel-footer">
-        <ul class="list-unstyled pull-left">
+      <div class="panel-footer opaque">
+        <ul class="list-unstyled stats pull-left">
           <li>
             {% if warning.is_canceled %}
             <strong class="state-canceled">
@@ -84,32 +97,27 @@
             {% endif %}
           </li>
           <li>
-            <span class="glyphicon glyphicon-time"></span>
-            <abbr class="tooltip-top dynamic time-ago" title="{{ warning.given_on }}" data-timestamp="{{ warning.given_on|date:"c" }}">
-              {{ warning.given_on|date }}
-            </abbr>
-          </li>
-          <li>
             {% if warning.giver_id %}
             <img src="{{ warning.giver_id|avatar:30 }}" alt="{% trans "Avatar" %}">
-            <strong>{{ warning.giver_username }}</strong>
+            <a href="{% url USER_PROFILE_URL user_slug=warning.giver_slug user_id=warning.giver_id %}">
+              {{ warning.giver_username }}</a>,
             {% else %}
             <img src="{% blankavatar 30 %}" alt="{% trans "Avatar" %}">
-            <a href="{% url USER_PROFILE_URL user_slug=warning.giver_slug user_id=warning.giver_id %}">
-              {{ warning.giver_username }}
-            </a>
+            <strong>{{ warning.giver_username }}</strong>,
             {% endif %}
+            <abbr class="tooltip-top dynamic time-ago" title="{{ warning.given_on }}" data-timestamp="{{ warning.given_on|date:"c" }}">
+              {{ warning.given_on|date }}
+            </abbr>
           </li>
           {% if warning.is_canceled %}
           <li>
             <span class="fa fa-ban"></span>
             {% capture trimmed as canceler %}
             {% if warning.canceler_id %}
-            <strong>{{ warning.canceler_username }}</strong>
-            {% else %}
             <a href="{% url USER_PROFILE_URL user_slug=warning.canceler_slug user_id=warning.canceler_id %}">
-              {{ warning.canceler_username }}
-            </a>
+              {{ warning.canceler_username }}</a>
+            {% else %}
+            <strong>{{ warning.canceler_username }}</strong>
             {% endif %}
             {% endcapture %}
             {% capture trimmed as canceled %}
@@ -124,12 +132,12 @@
           {% endif %}
         </ul>
         {% if warning.acl.can_moderate %}
-        <ul class="list-unstyled pull-right">
+        <ul class="list-unstyled actions pull-right">
           {% if warning.acl.can_cancel %}
           <li>
             <form action="{% url 'misago:cancel_warning' user_slug=profile.slug user_id=profile.pk warning_id=warning.pk %}" method="POST" class="cancel-warning-prompt">
               {% csrf_token %}
-              <button type="submit" class="btn btn-default btn-sm">
+              <button type="submit" class="btn btn-default">
                 {% trans "Cancel" %}
               </button>
             </form>
@@ -139,7 +147,7 @@
           <li>
             <form action="{% url 'misago:delete_warning' user_slug=profile.slug user_id=profile.pk warning_id=warning.pk %}" method="POST" class="delete-warning-prompt">
               {% csrf_token %}
-              <button type="submit" class="btn btn-default btn-sm">
+              <button type="submit" class="btn btn-default">
                 {% trans "Delete" %}
               </button>
             </form>

misago/templates/misago/register/form.html

@@ -45,7 +45,7 @@
               <label class="control-label {{ label_class }}" >{% trans "Password strength" %}:</label>
               <div class="col-md-5 form-control-static">
                 <p class="password-strength"><strong id="password-strength"></strong></p>
-                <div class="progress">
+                <div class="progress thin">
                   <div id="password-bar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                 </div>
               </div>
@@ -117,7 +117,6 @@
             {% endif %}
 
             {% endwith %}
-
           </div>
 
           <div class="form-footer">
@@ -199,7 +198,7 @@
   var zxcvbn_src = "{% static "misago/js/zxcvbn.js" %}";
   var labels = ["{% trans "Very weak" %}", "{% trans "Weak" %}", "{% trans "Medium" %}", "{% trans "Good" %}", "{% trans "Strong" %}"];
   var label_styles = ["text-danger", "text-warning", "text-warning", "text-info", "text-success"];
-  var bar_styles = ["", "progress-bar-warning", "progress-bar-warning", "progress-bar-info", "progress-bar-success"];
+  var bar_styles = ["progress-bar-danger", "progress-bar-warning", "progress-bar-warning", "progress-bar-info", "progress-bar-success"];
 
   function zxcvbn_load_hook() {
     $(function() {

misago/templates/misago/usercp/avatar_galleries.html

@@ -19,7 +19,7 @@
       </h2>
     </div>
 
-    <div class="form-body">
+    <div class="form-body avatar-gallery">
 
       {% for gallery in galleries %}
       <fieldset>