Use variables for colors.

flaskbb/themes/aurora/src/flaskbb.scss

@@ -1,3 +1,69 @@
+// bootstrap colros
+$blue: #337ab7;
+$light-blue: #5bc0de;
+$green: #5cb85c;
+$orange: #f0ad4e;
+$red: #d9534f;
+$gray: #555;
+
+// main background and font colors
+$background-color: #e8f1f2;
+$font-color: #5a5a5a;
+$border-color: #cad7e1;
+
+// header colors
+$header-title-font-color: #fff;
+$header-subtitle-font-color: #E8F1F2;
+$header-background-primary: #3276b1;
+$header-background-secondary: #285e8e;
+
+// navigation
+$navigation-font-color: #555;
+$navigation-hover-color: #e7e7e7;
+$navigation-background-color: #f8f8f8;
+
+// panel colors
+$panel-background: #fff;            // panel body background
+$panel-head-background: #f5f5f5;    // panel head background
+$panel-meta-background: #e8f1f2;    // panel meta background
+$panel-meta-border: $border-color;  // panel meta (bottom) border
+$panel-border: $border-color;       // panel border (all over)
+
+$widget-panel: $panel-background;
+$widget-head-background: $panel-head-background;
+$widget-meta-background: $panel-meta-background;
+$widget-meta-border: $panel-border;
+$widget-border: $panel-border;
+
+$category-panel: $panel-background;
+$category-head-background: $panel-head-background;
+$category-meta-background: $panel-meta-background;
+$category-meta-border: $panel-border;
+$category-border: $panel-border;
+
+$forum-panel: $panel-background;
+$forum-head-background: $panel-head-background;
+$forum-meta-background: $panel-meta-background;
+$forum-meta-border: $panel-border;
+$forum-border: $panel-border;
+
+$topic-head-background: $panel-head-background;
+$topic-border: $panel-border;
+
+// post colors
+$post-box-background: $panel-background;
+$post-box-border: $border-color;
+$post-meta-border: $panel-meta-background;
+$post-meta-background: $panel-background;
+$post-signature-border: $panel-meta-background;
+$post-footer-border: $border-color;
+$post-footer-background: $panel-background;
+
+$author-box-background: #e8ecf1;
+$author-online: $green;
+$author-offline: $gray;
+
+
 html {
     // push footer to bottom
     position: relative;
@@ -5,7 +71,7 @@ html {
 }
 
 body {
-    background-color: #E8F1F2;
+    background-color: $background-color;
     // Margin bottom by footer height
     margin-bottom: 60px;
 }
@@ -22,19 +88,19 @@ body {
 
 .flaskbb-layout {
     padding-top: 20px;
-    color: #5a5a5a;
+    color: $font-color;
 }
 
 .flaskbb-header {
     color: #fff;
     text-align: left;
     text-shadow: 0 1px 0 rgba(0,0,0,.1);
-    background-color: #3276b1;
-    background-image: -webkit-linear-gradient(top, #285e8e 0%, #3276b1 100%);
-    background-image: linear-gradient(to bottom, #285e8e 0%, #3276b1 100%);
+    background-color: $header-background-primary;
+    background-image: -webkit-linear-gradient(top, $header-background-secondary 0%, $header-background-primary 100%);
+    background-image: linear-gradient(to bottom, $header-background-secondary 0%, $header-background-primary 100%);
     background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#285e8e', endColorstr='#3276b1', GradientType=0);
-    border: 1px solid #cad7e1;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$header-background-secondary', endColorstr='$header-background-primary', GradientType=0);
+    border: 1px solid $border-color;
     border-bottom: 0;
     border-radius: 0.25em 0.25em 0 0;
 
@@ -45,20 +111,20 @@ body {
 
     .flaskbb-meta {
         .flaskbb-title {
-            color: #fff;
+            color: $header-title-font-color;
             font-size: 3em;
             font-weight: bold;
         }
         .flaskbb-subtitle {
-            color: #e8ecf1;
+            color: $header-subtitle-font-color;
         }
     }
 }
 
 .forum-navigation {
-    border: 1px solid #cad7e1;
+    border: 1px solid $border-color;
     border-radius: 0 0 0.25em 0.25em;
-
+    background-color: $navigation-background-color;
     .navbar-btn {
         // fix for button in <a>
         &>a.btn-primary {
@@ -85,14 +151,13 @@ body {
     }
 
     .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
-        color: #555;
-        background-color: #e7e7e7;
+        color: $navigation-font-color;
+        background-color: $navigation-hover-color;
     }
-
 }
 
 .flaskbb-breadcrumb {
-    border: 1px solid #cad7e1;
+    border: 1px solid $border-color;
     border-radius: 0;
 }
 
@@ -105,46 +170,52 @@ body {
 
 // default values for the panels
 .category-panel, .forum-panel, .topic-panel, .widget-panel {
-    border: 1px solid #cad7e1;
+    border: 1px solid $panel-border;
     border-radius: 0;
     margin-bottom: 0;
     .category-head, .forum-head, .topic-head, .widget-head {
+        background-color: $panel-head-background;
         font-weight: bold;
     }
 }
 
 .category-body, .forum-body, .topic-body, .widget-body {
     padding: 0;
+    background-color: $panel-background;
     .category-meta, .forum-meta, .topic-meta, .widget-meta {
         padding-top: 0.5em;
         height: 2.5em;
-        background-color: #e8ecf1;
-        border-bottom: 1px solid #cad7e1;
+        background-color: $panel-meta-background;
+        border-bottom: 1px solid $panel-meta-border;
     }
     .category-row, .forum-row, .topic-row, .widget-row, .post-row {
         margin-top: 0.5em;
         padding-bottom: 0.5em;
         &:not(:last-child) {
-            border-bottom: 1px solid #cad7e1;
+            border-bottom: 1px solid $panel-border;
         }
     }
 }
 
+
 // Topic
 .topic-body {
     .post-row {
-        background: #e8ecf1;
+        background: $author-box-background;
         margin-top: 0;
         padding-bottom: 0;
+        &:not(:last-child) {
+            border-bottom: 1px solid $topic-border;
+        }
     }
 
     .post-box {
-        background: #fff;
-        border-left: 1px solid #e8ecf1;
+        background: $post-box-background;
+        border-left: 1px solid $post-box-border;
         padding-bottom: 3em;
         padding-left: 0;
         padding-right: 0;
-        min-height: 18em;
+        min-height: 19em;
         position: relative;
 
         // post meta information
@@ -153,7 +224,8 @@ body {
             padding-left: 0.5em;
             padding-right: 0.5em;
             margin: 0;
-            border-bottom: 1px solid #e8ecf1;
+            background-color: $post-meta-background;
+            border-bottom: 1px solid $post-meta-border;
         }
 
         // post content
@@ -166,13 +238,18 @@ body {
         .post-signature {
             margin-top: 2em;
             hr {
+                height: 1px;
+                color: $post-signature-border;
+                background-color: $post-signature-border;
+                border: none;
                 margin: 0;
                 width: 25%;
             }
         }
         // post footer
         .post-footer {
-            border-top: 1px solid #e8ecf1;
+            border-top: 1px solid $post-footer-border;
+            background-color: $post-footer-background;
             width: 100%;
             left: 0;
             // push to bottom
@@ -191,6 +268,7 @@ body {
     }
 }
 
+// author
 .author {
     .author-name h4 {
         float: left;
@@ -223,70 +301,126 @@ body {
     }
 
     .author-online {
-        background: #5cb85c;
+        background: $author-online;
     }
 
     .author-offline {
-        background: #777;
+        background: $author-offline;
     }
 }
 
+
 // forum specific values
-.forum-body {
-    .forum-meta {
-        .topic-name, .topic-stats, .topic-last-post {
-            font-weight: bold;
-        }
+.forum-panel {
+    border: 1px solid $forum-border;
+
+    .forum-head {
+        background-color: $forum-head-background;
     }
-    .forum-row {
-        .topic-info {
-            position: relative;
-            .topic-status {
-                float: left;
-                font-size: 1.5em;
-                padding-right: 0.5em;
-
-                // why is this?
-                .topic-locked {
-                    font-size: 1.5em;
-                }
+    .forum-body {
+        background-color: $forum-panel;
 
-            }
-            .topic-name {
+        .forum-meta {
+            background-color: $forum-meta-background;
+            border-bottom: 1px solid $forum-meta-border;
+
+            .topic-name, .topic-stats, .topic-last-post {
                 font-weight: bold;
             }
-            .topic-pages {
-                font-size: small;
+        }
+        .forum-row {
+            &:not(:last-child) {
+                border-bottom: 1px solid $forum-border;
+            }
+            .topic-info {
+                position: relative;
+                .topic-status {
+                    float: left;
+                    font-size: 1.5em;
+                    padding-right: 0.5em;
+
+                    // why is this?
+                    .topic-locked {
+                        font-size: 1.5em;
+                    }
+
+                }
+                .topic-name {
+                    font-weight: bold;
+                }
+                .topic-pages {
+                    font-size: small;
+                }
             }
         }
     }
 }
 
+
 // category specific values
-.category-body {
-    .category-meta, {
-        .forum-name, .forum-stats, .forum-last-post {
-            font-weight: bold;
-        }
+.category-panel {
+    border: 1px solid $category-border;
+
+    .category-head {
+        background-color: $category-head-background;
     }
-    .category-row {
-        .forum-info {
-            position: relative;
-            .forum-status {
-                float: left;
-                font-size: 2em;
-                padding-right: 0.5em;
-            }
-            .forum-name {
+    .category-body {
+        background-color: $category-panel;
+
+        .category-meta, {
+            background-color: $category-meta-background;
+            border-bottom: 1px solid $category-meta-border;
+
+            .forum-name, .forum-stats, .forum-last-post {
                 font-weight: bold;
             }
-            .forum-moderators {
-                font-style: italic;
+        }
+        .category-row {
+            &:not(:last-child) {
+                border-bottom: 1px solid $category-border;
+            }
+            .forum-info {
+                position: relative;
+                .forum-status {
+                    float: left;
+                    font-size: 2em;
+                    padding-right: 0.5em;
+                }
+                .forum-name {
+                    font-weight: bold;
+                }
+                .forum-moderators {
+                    font-style: italic;
+                }
+            }
+            .forum-last-post {
+                .last-post-title {
+                    font-weight: bold;
+                }
             }
         }
-        .forum-last-post {
-            .last-post-title {
-                font-weight: bold;
+    }
+}
+
+
+// widget specific values
+.widget-panel {
+    border: 1px solid $widget-border;
+
+    .widgety-head {
+        background-color: $widget-head-background;
+    }
+    .widget-body {
+        background-color: $widget-panel;
+
+        .widget-meta, {
+            background-color: $widget-meta-background;
+            border-bottom: 1px solid $widget-meta-border;
+
+        }
+        .widget-row {
+            &:not(:last-child) {
+                border-bottom: 1px solid $widget-border;
             }
         }
     }
@@ -334,30 +468,29 @@ p.flaskbb-stats {
 
 .icon-delete:before {
     content: "\f014";
-    color: #d9534f;
+    color: $red;
 }
 
 .icon-report:before {
     content: "\f024";
-    color: #f0ad4e;
+    color: $orange;
 }
 
 .icon-edit:before {
     content: "\f040";
-    color: #5cb85c;
+    color: $green;
 }
 
 .icon-reply:before {
     content: "\f10e";
-    color: #337ab7;
+    color: $blue;
 }
 
 .icon-replyall:before {
     content: "\f122";
-    color: #5bc0de;
+    color: $light-blue;
 }
 
-
 .dropdown-messages {
     min-width: 15em;
     .message-subject {
@@ -369,7 +502,6 @@ p.flaskbb-stats {
 }
 
 
-
 /* Markdown Editor */
 .editor-box .editor-submit .btn {
     margin: 0.75em 0.25em 0 0;
@@ -403,15 +535,15 @@ p.flaskbb-stats {
     }
 
     & >textarea {
-        border-top: 1px solid #cad7e1;
+        border-top: 1px solid $border-color;
         border-bottom: none;
         background: #fff;
         padding-left: 3px;
     }
 
     & >.md-preview {
-        border-top: 1px solid #cad7e1;
-        border-right: 1px solid #cad7e1;
+        border-top: 1px solid $border-color;
+        border-right: 1px solid $border-color;
         border-bottom: none;
         background: #eee;
     }

flaskbb/themes/aurora/static/css/flaskbb.css

@@ -3,7 +3,7 @@ html {
   min-height: 100%; }
 
 body {
-  background-color: #E8F1F2;
+  background-color: #e8f1f2;
   margin-bottom: 60px; }
 
 .flaskbb-footer {
@@ -25,7 +25,7 @@ body {
   background-image: -webkit-linear-gradient(top, #285e8e 0%, #3276b1 100%);
   background-image: linear-gradient(to bottom, #285e8e 0%, #3276b1 100%);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#285e8e', endColorstr='#3276b1', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$header-background-secondary', endColorstr='$header-background-primary', GradientType=0);
   border: 1px solid #cad7e1;
   border-bottom: 0;
   border-radius: 0.25em 0.25em 0 0;
@@ -38,11 +38,12 @@ body {
     font-size: 3em;
     font-weight: bold; }
   .flaskbb-header .flaskbb-meta .flaskbb-subtitle {
-    color: #e8ecf1; }
+    color: #E8F1F2; }
 
 .forum-navigation {
   border: 1px solid #cad7e1;
-  border-radius: 0 0 0.25em 0.25em; }
+  border-radius: 0 0 0.25em 0.25em;
+  background-color: #f8f8f8; }
   .forum-navigation .navbar-btn > a.btn-primary {
     color: #fff;
     background-color: #337ab7;
@@ -74,14 +75,16 @@ body {
   border-radius: 0;
   margin-bottom: 0; }
   .category-panel .category-head, .category-panel .forum-head, .category-panel .topic-head, .category-panel .widget-head, .forum-panel .category-head, .forum-panel .forum-head, .forum-panel .topic-head, .forum-panel .widget-head, .topic-panel .category-head, .topic-panel .forum-head, .topic-panel .topic-head, .topic-panel .widget-head, .widget-panel .category-head, .widget-panel .forum-head, .widget-panel .topic-head, .widget-panel .widget-head {
+    background-color: #f5f5f5;
     font-weight: bold; }
 
 .category-body, .forum-body, .topic-body, .widget-body {
-  padding: 0; }
+  padding: 0;
+  background-color: #fff; }
   .category-body .category-meta, .category-body .forum-meta, .category-body .topic-meta, .category-body .widget-meta, .forum-body .category-meta, .forum-body .forum-meta, .forum-body .topic-meta, .forum-body .widget-meta, .topic-body .category-meta, .topic-body .forum-meta, .topic-body .topic-meta, .topic-body .widget-meta, .widget-body .category-meta, .widget-body .forum-meta, .widget-body .topic-meta, .widget-body .widget-meta {
     padding-top: 0.5em;
     height: 2.5em;
-    background-color: #e8ecf1;
+    background-color: #e8f1f2;
     border-bottom: 1px solid #cad7e1; }
   .category-body .category-row, .category-body .forum-row, .category-body .topic-row, .category-body .widget-row, .category-body .post-row, .forum-body .category-row, .forum-body .forum-row, .forum-body .topic-row, .forum-body .widget-row, .forum-body .post-row, .topic-body .category-row, .topic-body .forum-row, .topic-body .topic-row, .topic-body .widget-row, .topic-body .post-row, .widget-body .category-row, .widget-body .forum-row, .widget-body .topic-row, .widget-body .widget-row, .widget-body .post-row {
     margin-top: 0.5em;
@@ -93,20 +96,23 @@ body {
   background: #e8ecf1;
   margin-top: 0;
   padding-bottom: 0; }
+  .topic-body .post-row:not(:last-child) {
+    border-bottom: 1px solid #cad7e1; }
 .topic-body .post-box {
   background: #fff;
-  border-left: 1px solid #e8ecf1;
+  border-left: 1px solid #cad7e1;
   padding-bottom: 3em;
   padding-left: 0;
   padding-right: 0;
-  min-height: 18em;
+  min-height: 19em;
   position: relative; }
   .topic-body .post-box .post-meta {
     padding-top: 0.5em;
     padding-left: 0.5em;
     padding-right: 0.5em;
     margin: 0;
-    border-bottom: 1px solid #e8ecf1; }
+    background-color: #fff;
+    border-bottom: 1px solid #e8f1f2; }
   .topic-body .post-box .post-content {
     padding-left: 0.5em;
     padding-right: 0.5em;
@@ -114,10 +120,15 @@ body {
   .topic-body .post-box .post-signature {
     margin-top: 2em; }
     .topic-body .post-box .post-signature hr {
+      height: 1px;
+      color: #e8f1f2;
+      background-color: #e8f1f2;
+      border: none;
       margin: 0;
       width: 25%; }
   .topic-body .post-box .post-footer {
-    border-top: 1px solid #e8ecf1;
+    border-top: 1px solid #cad7e1;
+    background-color: #fff;
     width: 100%;
     left: 0;
     bottom: 0;
@@ -150,37 +161,71 @@ body {
 .author .author-online {
   background: #5cb85c; }
 .author .author-offline {
-  background: #777; }
+  background: #555; }
 
-.forum-body .forum-meta .topic-name, .forum-body .forum-meta .topic-stats, .forum-body .forum-meta .topic-last-post {
-  font-weight: bold; }
-.forum-body .forum-row .topic-info {
-  position: relative; }
-  .forum-body .forum-row .topic-info .topic-status {
-    float: left;
-    font-size: 1.5em;
-    padding-right: 0.5em; }
-    .forum-body .forum-row .topic-info .topic-status .topic-locked {
-      font-size: 1.5em; }
-  .forum-body .forum-row .topic-info .topic-name {
-    font-weight: bold; }
-  .forum-body .forum-row .topic-info .topic-pages {
-    font-size: small; }
+.forum-panel {
+  border: 1px solid #cad7e1; }
+  .forum-panel .forum-head {
+    background-color: #f5f5f5; }
+  .forum-panel .forum-body {
+    background-color: #fff; }
+    .forum-panel .forum-body .forum-meta {
+      background-color: #e8f1f2;
+      border-bottom: 1px solid #cad7e1; }
+      .forum-panel .forum-body .forum-meta .topic-name, .forum-panel .forum-body .forum-meta .topic-stats, .forum-panel .forum-body .forum-meta .topic-last-post {
+        font-weight: bold; }
+    .forum-panel .forum-body .forum-row:not(:last-child) {
+      border-bottom: 1px solid #cad7e1; }
+    .forum-panel .forum-body .forum-row .topic-info {
+      position: relative; }
+      .forum-panel .forum-body .forum-row .topic-info .topic-status {
+        float: left;
+        font-size: 1.5em;
+        padding-right: 0.5em; }
+        .forum-panel .forum-body .forum-row .topic-info .topic-status .topic-locked {
+          font-size: 1.5em; }
+      .forum-panel .forum-body .forum-row .topic-info .topic-name {
+        font-weight: bold; }
+      .forum-panel .forum-body .forum-row .topic-info .topic-pages {
+        font-size: small; }
 
-.category-body .category-meta .forum-name, .category-body .category-meta .forum-stats, .category-body .category-meta .forum-last-post {
-  font-weight: bold; }
-.category-body .category-row .forum-info {
-  position: relative; }
-  .category-body .category-row .forum-info .forum-status {
-    float: left;
-    font-size: 2em;
-    padding-right: 0.5em; }
-  .category-body .category-row .forum-info .forum-name {
-    font-weight: bold; }
-  .category-body .category-row .forum-info .forum-moderators {
-    font-style: italic; }
-.category-body .category-row .forum-last-post .last-post-title {
-  font-weight: bold; }
+.category-panel {
+  border: 1px solid #cad7e1; }
+  .category-panel .category-head {
+    background-color: #f5f5f5; }
+  .category-panel .category-body {
+    background-color: #fff; }
+    .category-panel .category-body .category-meta {
+      background-color: #e8f1f2;
+      border-bottom: 1px solid #cad7e1; }
+      .category-panel .category-body .category-meta .forum-name, .category-panel .category-body .category-meta .forum-stats, .category-panel .category-body .category-meta .forum-last-post {
+        font-weight: bold; }
+    .category-panel .category-body .category-row:not(:last-child) {
+      border-bottom: 1px solid #cad7e1; }
+    .category-panel .category-body .category-row .forum-info {
+      position: relative; }
+      .category-panel .category-body .category-row .forum-info .forum-status {
+        float: left;
+        font-size: 2em;
+        padding-right: 0.5em; }
+      .category-panel .category-body .category-row .forum-info .forum-name {
+        font-weight: bold; }
+      .category-panel .category-body .category-row .forum-info .forum-moderators {
+        font-style: italic; }
+    .category-panel .category-body .category-row .forum-last-post .last-post-title {
+      font-weight: bold; }
+
+.widget-panel {
+  border: 1px solid #cad7e1; }
+  .widget-panel .widgety-head {
+    background-color: #f5f5f5; }
+  .widget-panel .widget-body {
+    background-color: #fff; }
+    .widget-panel .widget-body .widget-meta {
+      background-color: #e8f1f2;
+      border-bottom: 1px solid #cad7e1; }
+    .widget-panel .widget-body .widget-row:not(:last-child) {
+      border-bottom: 1px solid #cad7e1; }
 
 p.flaskbb-stats {
   margin: 0;

flaskbb/themes/aurora/templates/forum/category_layout.html

@@ -16,7 +16,7 @@
             {% if forum.external %}
             <div class="col-md-5 col-sm-5 col-xs-8 forum-info">
                 <!-- Icon -->
-                <div class="forum-status pull-left">
+                <div class="forum-status">
                     <span class="fa fa-external-link forum-external"></span>
                 </div>
 
@@ -49,7 +49,7 @@
 
             <div class="col-md-5 col-sm-5 col-xs-8 forum-info">
                 <!-- Icon -->
-                <div class="forum-status pull-left">
+                <div class="forum-status">
                     {% if forum.locked %}
                         <span class="fa fa-lock forum-locked"></span>
                     {% elif forum|forum_is_unread(forumsread, current_user) %}