tweaked styles

misago/emberapp/app/styles/misago/buttons.less

@@ -0,0 +1,49 @@
+//
+// Buttons
+// --------------------------------------------------
+
+
+// Double border size on default and lg buttons
+.btn {
+  border-width: 2px;
+
+  .button-size(@padding-base-vertical - 1; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
+
+  &.btn-lg {
+    .button-size(@padding-large-vertical - 1; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
+  }
+
+  &.btn-sm {
+    border-width: 1px;
+    .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  }
+
+  &.btn-xs {
+    border-width: 1px;
+    .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  }
+}
+
+
+// Extra states for default btn
+.btn {
+  &.btn-default {
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: @btn-default-hover-bg;
+      border-color: @btn-default-hover-border;
+
+      color: @btn-default-hover-color;
+    }
+
+    &:active,
+    &.active,
+    .open > .dropdown-toggle& {
+      background-color: @btn-default-active-bg;
+      border-color: @btn-default-active-border;
+
+      color: @btn-default-active-color;
+    }
+  }
+}

misago/emberapp/app/styles/misago/flash-message.less

@@ -3,11 +3,18 @@
 // --------------------------------------------------
 
 
-.flash-message-style(@color-bg, @color-text) {
+.flash-message-style(@color-bg, @color-border, @color-text) {
   background: @color-bg;
+  border: 1px solid @color-border;
+  border-top: none;
+  .box-shadow(0px 2px 3px fadeOut(@gray-darker, 70%));
+  padding: @alert-padding;
 
   color: @color-text;
-  text-shadow: 0px 0px 2px darken(@color-bg, 14%);
+
+  .fa {
+    margin-right: @font-size-base / 2;
+  }
 }
 
 
@@ -27,24 +34,20 @@
     transition: top 200ms ease;
   }
 
-  p {
-    padding: @alert-padding;
-
-    &.message-success {
-      .flash-message-style(@alert-success-bg, @alert-success-text);
-    }
+  .message-success {
+    .flash-message-style(@alert-success-bg, @alert-success-border, @alert-success-text);
+  }
 
-    &.message-info {
-      .flash-message-style(@alert-info-bg, @alert-info-text);
-    }
+  .message-info {
+    .flash-message-style(@alert-info-bg, @alert-info-border, @alert-info-text);
+  }
 
-    &.message-warning {
-      .flash-message-style(@alert-warning-bg, @alert-warning-text);
-    }
+  .message-warning {
+    .flash-message-style(@alert-warning-bg, @alert-warning-border, @alert-warning-text);
+  }
 
-    &.message-danger {
-      .flash-message-style(@alert-danger-bg, @alert-danger-text);
-    }
+  .message-danger {
+    .flash-message-style(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
   }
 
   /* Small devices (tablets, 768px and up) */
@@ -53,6 +56,8 @@
     pointer-events: none;
 
     p {
+      border-left: none;
+      border-right: none;
       border-radius: 0px 0px @alert-border-radius @alert-border-radius;
       display: inline-block;
       padding: @padding-large-vertical @padding-large-horizontal;

misago/emberapp/app/styles/misago/inputs.less

@@ -0,0 +1,18 @@
+//
+// Inputs
+// --------------------------------------------------
+
+
+// Double border size on default and lg inputs
+input.form-control, textarea.form-control {
+  border-width: 2px;
+  .box-shadow(none);
+}
+
+
+// Ghost out disabled inputs
+input.form-control, textarea.form-control {
+  &.diabled {
+    .opacity(50);
+  }
+}

misago/emberapp/app/styles/misago/misago.less

@@ -1,6 +1,9 @@
 // Components
+@import "buttons.less";
 @import "flash-message.less";
 @import "footer.less";
+@import "inputs.less";
+@import "modals.less";
 @import "navbar.less";
 @import "page-header.less";
 @import "typo.less";

misago/emberapp/app/styles/misago/modals.less

@@ -0,0 +1,29 @@
+//
+// Modals
+// --------------------------------------------------
+
+
+.modal-content {
+  .box-shadow(0px 0px 0px 4px rgba(0,0,0,.15));
+}
+
+
+// Sign-in modal
+.modal-sign-in {
+  .modal-body {
+    padding-top: @padding-base-vertical;
+    padding-bottom: @padding-base-vertical;
+
+    .form-group {
+      margin: @padding-large-vertical 0px;
+    }
+  }
+
+  .modal-footer {
+    &>* {
+      display: block;
+
+      text-align: center;
+    }
+  }
+}

misago/emberapp/app/styles/misago/variables.less

@@ -14,11 +14,11 @@
 @gray-light:             lighten(@gray-base, 46.7%); // #777
 @gray-lighter:           lighten(@gray-base, 93.5%); // #eee
 
-@brand-primary:          #3498db;
-@brand-success:          #2ecc71;
+@brand-primary:          #29b6f6;
+@brand-success:          #66bb6a;
 @brand-info:             #5bc0de;
-@brand-warning:          #e67e22;
-@brand-danger:           #e74c3c;
+@brand-warning:          #ffab40;
+@brand-danger:           #ef5350;
 
 
 //== Scaffolding
@@ -120,20 +120,75 @@
 @loader-color:                   darken(@gray-lighter, 12%);
 
 
+//== Modals
+//
+//##
+
+//** Modal backdrop background color
+@modal-backdrop-bg:           @body-bg;
+//** Modal backdrop opacity
+@modal-backdrop-opacity:      .85;
+
+
 //== Alerts
 //
 //## Define alert colors, border radius, and padding.
 
 @alert-border-radius:         @border-radius-large;
 
-@alert-success-bg:            @brand-success;
+@alert-success-bg:            #66bb6a;
+@alert-success-border:        #66bb6a;
 @alert-success-text:          #fff;
 
-@alert-info-bg:               @brand-info;
+@alert-info-bg:               #42a5f5;
+@alert-info-border:           #42a5f5;
 @alert-info-text:             #fff;
 
-@alert-warning-bg:            @brand-warning;
+@alert-warning-bg:            #ff9800;
+@alert-warning-border:        #ff9800;
 @alert-warning-text:          #fff;
 
-@alert-danger-bg:             @brand-danger;
+@alert-danger-bg:             #ef5350;
+@alert-danger-border:         #ef5350;
 @alert-danger-text:           #fff;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+@btn-font-weight:                300;
+
+@btn-default-color:              #95a5a6;
+@btn-default-bg:                 transparent;
+@btn-default-border:             #bdc3c7;
+
+@btn-default-hover-color:        #4fc3f7;
+@btn-default-hover-bg:           transparent;
+@btn-default-hover-border:       #4fc3f7;
+
+@btn-default-active-color:       #2196f3;
+@btn-default-active-bg:          transparent;
+@btn-default-active-border:      #2196f3;
+
+@btn-primary-color:              #fff;
+@btn-primary-bg:                 @brand-primary;
+@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;
+
+@btn-link-disabled-color:        @gray-light;

misago/emberapp/app/templates/flash-message.hbs

@@ -1,5 +1,6 @@
 <div {{bind-attr class=":flash-message isVisible:visible"}}>
   <p {{bind-attr class="isInfo:message-info isSuccess:message-success isWarning:message-warning isError:message-danger"}}>
+    <span {{bind-attr class=":fa :fa-lg isInfo:fa-info isSuccess:fa-check isWarning:fa-exclamation isError:fa-times"}}></span>
     {{message}}
   </p>
 </div>