Another pass on theme colors

rafalp · Feb 4, 2018 · 9253d5f · 9253d5f
1 parent b710785
commit 9253d5f
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 30 deletions.
diff --git a/frontend/style/flavor/form.less b/frontend/style/flavor/form.less
@@ -0,0 +1,13 @@
+//
+// Forms Flavor
+// --------------------------------------------------
+
+.panel-form {
+  border: 1px solid @panel-form-border;
+}
+
+
+// remove bottom margin from poll panel
+.poll-form .panel {
+  margin: 0px;
+}
diff --git a/frontend/style/flavor/modals.less b/frontend/style/flavor/modals.less
@@ -28,7 +28,6 @@
 }
 
 
-
 // Even out space between form fields
 .modal-body>.form-group {
   margin: @line-height-computed 0px;

diff --git a/frontend/style/flavor/navs.less b/frontend/style/flavor/navs.less
@@ -2,11 +2,40 @@
 // Navs Flavor
 // --------------------------------------------------
 
+.nav-side {
+  .box-shadow(none);
+}
 
-.nav-side>a {
-  &.active .badge {
-    background: @list-group-active-color;
 
-    color: @list-group-active-bg;
+.nav-side>.list-group-item {
+  margin-bottom: 1px;
+
+  &, &:link, &:visited {
+    background: @side-nav-bg;
+    border: none;
+
+    color: @side-nav-color;
+  }
+
+  &:hover, &:focus, &:active {
+    background: @side-nav-hover-bg;
+
+    color: @side-nav-hover-color;
+  }
+
+  &.active {
+    &, &:link, &:visited,
+    &:hover, &:focus, &:active {
+      background: @side-nav-active-bg;
+
+      color: @side-nav-active-color;
+      font-weight: bold;
+
+      .badge {
+        background: @list-group-active-color;
+
+        color: @list-group-active-bg;
+      }
+    }
   }
 }
diff --git a/frontend/style/flavor/panels.less b/frontend/style/flavor/panels.less
@@ -6,7 +6,6 @@
 .panel {
   border: none;
   border-radius: @border-radius-base;
-  .shadow-2dp();
 
   .panel-heading, .panel-footer {
     background: @panel-bg;
@@ -41,12 +40,6 @@
 }
 
 
-// remove bottom margin from poll panel
-.poll-form .panel {
-  margin: 0px;
-}
-
-
 // use default message icon color for panel messages
 .panel-message-body .message-icon {
   color: @message-icon-color;

diff --git a/frontend/style/flavor/poll.less b/frontend/style/flavor/poll.less
@@ -2,6 +2,10 @@
 // Polls Flavor
 // --------------------------------------------------
 
+.panel-poll {
+  border: 1px solid @panel-form-border;
+}
+
 
 // Poll vote form
 .panel-poll .poll-select-choices {

diff --git a/frontend/style/flavor/post.less b/frontend/style/flavor/post.less
@@ -3,6 +3,12 @@
 // --------------------------------------------------
 
 
+// Post body
+.panel-post {
+  background: @post-bg;
+}
+
+
 // Post side
 .post-side {
   color: @gray-light;

diff --git a/frontend/style/flavor/profile-details.less b/frontend/style/flavor/profile-details.less
@@ -3,6 +3,11 @@
 // --------------------------------------------------
 
 
+.panel-profile-details-group.panel {
+  border: 1px solid @panel-form-border;
+}
+
+
 .panel-profile-details-group.panel .form-group {
   margin: 0px;
 }

diff --git a/frontend/style/flavor/ranks-flavors.less b/frontend/style/flavor/ranks-flavors.less
@@ -2,11 +2,16 @@
 // Default flavors for user ranks
 // --------------------------------------------------
 
-.post-rank-flavor(@border, @title) {
-  .panel-body {
+.post-rank-flavor(@border, @title, @color) {
+  .panel-post {
+    background: @body-bg;
     border: 2px solid @border;
     border-radius: @panel-border-radius;
     padding: @panel-body-padding - 2px;
+
+    .misago-markup {
+      color: @color;
+    }
   }
 
   .user-title {
@@ -19,8 +24,9 @@
   }
 }
 
-.card-rank-flavor(@border, @title) {
+.card-rank-flavor(@border, @title, @color) {
   .panel-body {
+    background: @body-bg;
     border: 2px solid @border;
     border-radius: @panel-border-radius;
     padding: @panel-body-padding - 2px;
@@ -36,6 +42,10 @@
       }
     }
   }
+
+  .user-card-stats li {
+    color: @color;
+  }
 }
 
 .list-group-rank-flavor(@border, @title) {
@@ -68,56 +78,56 @@
 
 // Posts
 .post-primary {
-  .post-rank-flavor(#d1c4e9, #6200ea);
+  .post-rank-flavor(#7e57c2, #6200ea, #4a148c);
 }
 
 .post-success {
-  .post-rank-flavor(#c8e6c9, #388e3c);
+  .post-rank-flavor(#66bb6a, #388e3c, #1b5e20);
 }
 
 .post-warning {
-  .post-rank-flavor(#ffe0b2, #ff6d00);
+  .post-rank-flavor(#ff7043, #ff6d00, #bf360c);
 }
 
 .post-danger {
-  .post-rank-flavor(#ffcdd2, #d50000);
+  .post-rank-flavor(#f44336, #d50000, #b71c1c);
 }
 
 
 // Cards
 .user-card-primary {
-  .card-rank-flavor(#d1c4e9, #6200ea);
+  .card-rank-flavor(#7e57c2, #6200ea, #9575cd);
 }
 
 .user-card-success {
-  .card-rank-flavor(#c8e6c9, #388e3c);
+  .card-rank-flavor(#66bb6a, #388e3c, #66bb6a);
 }
 
 .user-card-warning {
-  .card-rank-flavor(#ffe0b2, #ff6d00);
+  .card-rank-flavor(#ff7043, #ff6d00, #ff6e40);
 }
 
 .user-card-danger {
-  .card-rank-flavor(#ffcdd2, #d50000);
+  .card-rank-flavor(#f44336, #d50000, #e57373);
 }
 
 
 // Posters ranking
 .list-group {
   .list-group-rank-primary {
-    .list-group-rank-flavor(#d1c4e9, #6200ea);
+    .list-group-rank-flavor(#7e57c2, #6200ea);
   }
 
   .list-group-rank-success {
-    .list-group-rank-flavor(#c8e6c9, #388e3c);
+    .list-group-rank-flavor(#9ccc65, #388e3c);
   }
 
   .list-group-rank-warning {
-    .list-group-rank-flavor(#ffe0b2, #ff6d00);
+    .list-group-rank-flavor(#ff7043, #ff6d00);
   }
 
   .list-group-rank-danger {
-    .list-group-rank-flavor(#ffcdd2, #d50000);
+    .list-group-rank-flavor(#f44336, #d50000);
   }
 }
 

diff --git a/frontend/style/flavor/user-card.less b/frontend/style/flavor/user-card.less
@@ -3,6 +3,12 @@
 // --------------------------------------------------
 
 
+// Background color
+.user-card {
+  background: @user-card-bg;
+}
+
+
 // Round avatar corners
 .user-card-small-avatar, .user-card-avatar {
   img {

diff --git a/frontend/style/flavor/variables.less b/frontend/style/flavor/variables.less
@@ -52,7 +52,7 @@
 
 // Default - non primary
 @btn-default-color:              #757575;
-@btn-default-bg:                 #f3f3f3;
+@btn-default-bg:                 #f5f5f5;
 
 @btn-default-hover-color:        @text-color;
 @btn-default-hover-bg:           #e0e0e0;
@@ -380,6 +380,8 @@
 
 @panel-fieldset-color:           @gray;
 
+@panel-form-border:              #ddd;
+
 
 //== List group
 //
@@ -404,6 +406,20 @@
 @list-group-active-border:      @list-group-border;
 
 
+//== Side nav
+//
+//##
+
+@side-nav-bg:               #f2f2f2;
+@side-nav-color:            #757575;
+
+@side-nav-hover-bg:         #e0e0e0;
+@side-nav-hover-color:      #424242;
+
+@side-nav-active-bg:        @component-active-bg;
+@side-nav-active-color:     @component-active-color;
+
+
 //== Wells
 //
 //##
@@ -422,6 +438,13 @@
 @message-success-icon-color:     #81c784;
 
 
+//== User cards
+//
+//##
+
+@user-card-bg:          #f5f5f5;
+
+
 //== Categories list
 //
 //##
@@ -457,6 +480,8 @@
 //
 //##
 
+@post-bg:                         #f5f5f5;
+
 @post-unread-label:               #aa00ff;
 @post-protected-icon:             #bdbdbd;
 
@@ -467,4 +492,4 @@
 
 @user-status-banned:      @brand-danger;
 @user-status-online:      @brand-success;
-@user-status-offline:     @gray-light;
+@user-status-offline:     @gray-light;
diff --git a/frontend/style/index.less b/frontend/style/index.less
@@ -143,6 +143,7 @@
 @import "flavor/navs.less";
 @import "flavor/username-history.less";
 @import "flavor/panels.less";
+@import "flavor/form.less";
 @import "flavor/categories-lists.less";
 @import "flavor/participants.less";
 @import "flavor/poll.less";

diff --git a/misago/static/misago/css/misago.css b/misago/static/misago/css/misago.css