Merge _variables.scss and _bootstrap-custom.scss

flaskbb/themes/aurora/src/scss/_bootstrap-custom.scss

@@ -1,68 +0,0 @@
-// Variables
-//
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
-
-$fbb-bg: #f6f9fc;
-$fbb-border-color: #cad7e1;
-
-//
-// For more variables check out this file:
-// https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
-// raw: https://raw.githubusercontent.com/twbs/bootstrap/main/scss/_variables.scss
-//
-
-//$enable-caret:                true !default;
-//$enable-rounded:              false;
-//$enable-shadows:              false !default;
-//$enable-gradients:            false !default;
-//$enable-transitions:          true !default;
-//$enable-reduced-motion:       true !default;
-//$enable-smooth-scroll:        true !default;
-//$enable-grid-classes:         true !default;
-//$enable-cssgrid:              false !default;
-//$enable-button-pointers:      true !default;
-//$enable-rfs:                  true !default;
-//$enable-validation-icons:     true !default;
-//$enable-negative-margins:     false !default;
-//$enable-deprecation-messages: true !default;
-//$enable-important-utilities:  true !default;
-
-$body-bg:                   $fbb-bg;
-
-// Links
-//
-// Style anchor elements.
-/*$link-color:                              $primary !default;*/
-$link-decoration:                         none !default;
-$link-shade-percentage:                   20% !default;
-$link-hover-decoration:                   underline !default;
-
-
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-$border-width:                1px !default;
-$border-widths: (
-  1: 1px,
-  2: 2px,
-  3: 3px,
-  4: 4px,
-  5: 5px
-) !default;
-
-$border-color:                $fbb-border-color;
-$border-radius:               .25rem !default;
-$border-radius-sm:            .2rem !default;
-$border-radius-lg:            .3rem !default;
-$border-radius-pill:          50rem !default;
-
-
-// Cards
-$card-border-radius: none;
-

flaskbb/themes/aurora/src/scss/_category.scss

@@ -13,8 +13,8 @@
         font-weight: bold;
         padding-top: 0.5em;
         height: 2.5em;
-        background-color: $panel-meta-bg;
-        border-bottom: 1px solid $panel-meta-border;
+        background-color: $page-meta-bg;
+        border-bottom: 1px solid $page-meta-border;
 
         .forum-name, .forum-stats, .forum-last-post {
             font-weight: bold;
@@ -27,11 +27,11 @@
         padding-bottom: 0.5em;
 
         &:not(:last-child) {
-            border-bottom: 1px solid $panel-border;
+            border-bottom: 1px solid $page-border;
         }
 
         &.hover:hover {
-            background-color: $panel-hover;
+            background-color: $page-hover;
         }
     }
 

flaskbb/themes/aurora/src/scss/_forum.scss

@@ -13,8 +13,8 @@
         font-weight: bold;
         padding-top: 0.5em;
         height: 2.5em;
-        background-color: $panel-meta-bg;
-        border-bottom: 1px solid $panel-meta-border;
+        background-color: $page-meta-bg;
+        border-bottom: 1px solid $page-meta-border;
 
         .topic-name, .topic-stats, .topic-last-post {
             font-weight: bold;
@@ -46,11 +46,11 @@
         padding-bottom: 0.5em;
 
         &:not(:last-child) {
-            border-bottom: 1px solid $panel-border;
+            border-bottom: 1px solid $page-border;
         }
 
         &.hover:hover {
-            background-color: $panel-hover;
+            background-color: $page-hover;
         }
     }
 }

flaskbb/themes/aurora/src/scss/_management.scss

@@ -21,7 +21,7 @@
     margin-bottom: 0;
 
     .settings-header {
-        background-color: $panel-hover;
+        background-color: $page-hover;
         border-bottom: 1px solid $border-color;
     }
     .settings-body {
@@ -29,7 +29,7 @@
     }
 
     .settings-meta {
-        background-color: $panel-meta-bg;
+        background-color: $page-meta-bg;
         margin: 0;
         padding: 5px 0 5px 0;
         border-bottom: 1px solid $border-color;
@@ -46,7 +46,7 @@
             border-top: none;
         }
         &:last-child {
-            border-bottom: 1px solid $panel-border;
+            border-bottom: 1px solid $page-border;
             margin-bottom: 1em;
         }
     }
@@ -60,7 +60,7 @@
         }
 
         &.hover:hover {
-            background-color: $panel-hover;
+            background-color: $page-hover;
         }
 
         .btn-icon {
@@ -94,7 +94,7 @@
         text-align: center;
         padding-top: 20px;
         padding-bottom: 20px;
-        //background-color: $panel-hover;
+        //background-color: $page-hover;
         border: 1px solid $border-color;
 
         .icon {

flaskbb/themes/aurora/src/scss/_misc.scss

@@ -33,11 +33,11 @@ body {
     color: #fff;
     text-align: left;
     text-shadow: 0 1px 0 rgba(0,0,0,.1);
-    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-color: $fbb-header-bg-primary;
+    background-image: -webkit-linear-gradient(top, $fbb-header-bg-secondary 0%, $fbb-header-bg-primary 100%);
+    background-image: linear-gradient(to bottom, $fbb-header-bg-secondary 0%, $fbb-header-bg-primary 100%);
     background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$header-background-secondary', endColorstr='$header-background-primary', GradientType=0);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$fbb-header-bg-secondary', endColorstr='$fbb-header-bg-primary', GradientType=0);
     border: 1px solid $border-color;
     border-bottom: 0;
 
@@ -48,12 +48,12 @@ body {
 
     .flaskbb-meta {
         .flaskbb-title {
-            color: $header-title-color;
+            color: $fbb-header-title-color;
             font-size: 3em;
             font-weight: bold;
         }
         .flaskbb-subtitle {
-            color: $header-subtitle-color;
+            color: $fbb-header-subtitle-color;
         }
     }
 }

flaskbb/themes/aurora/src/scss/_navigation.scss

@@ -14,7 +14,7 @@
     padding-top: 1em;
     padding-bottom: 1em;
     text-shadow: none;
-    background-color: $navigation-bg;
+    background-color: $fbb-navigation-bg;
     border: 1px solid $border-color;
 
     .sidenav {
@@ -44,15 +44,15 @@
     .nav-item > a:hover,
     .nav-item > a:focus {
         text-decoration: none;
-        background-color: $navigation-hover-color;
+        background-color: $fbb-navigation-hover-color;
     }
 
     .nav-item > .active,
     .nav-item > .active:hover,
     .nav-item > .active:focus {
         font-weight: normal;
-        color: $navigation-color;
-        background-color: $navigation-hover-color;
+        color: $fbb-navigation-color;
+        background-color: $fbb-navigation-hover-color;
     }
 }
 
@@ -73,10 +73,10 @@
     }
 
     .nav-link {
-        color: $navigation-color;
+        color: $fbb-navigation-color;
 
         &:hover {
-            background-color: $navigation-bg;
+            background-color: $fbb-navigation-bg;
         }
 
         &.active {
@@ -84,7 +84,7 @@
             border-bottom: 1px solid $border-color;
 
             cursor: default;
-            background-color: $navigation-bg;
+            background-color: $fbb-navigation-bg;
         }
     }
 
@@ -114,7 +114,7 @@
         // non-active and hover
         .nav-item {
             .nav-link {
-                color: $header-subtitle-color;
+                color: $fbb-header-subtitle-color;
                 border: 1px solid $blue;
 
                 // different background color when hovering

flaskbb/themes/aurora/src/scss/_panel.scss → flaskbb/themes/aurora/src/scss/_page.scss

@@ -8,8 +8,8 @@
         font-weight: bold;
         padding-top: 0.5em;
         height: 2.5em;
-        background-color: $panel-meta-bg;
-        border-bottom: 1px solid $panel-meta-border;
+        background-color: $page-meta-bg;
+        border-bottom: 1px solid $page-meta-border;
     }
 
     .page-body {
@@ -32,16 +32,16 @@
         padding-top: 0.5em;
         padding-bottom: 0.5em;
         &:not(:last-child) {
-            border-bottom: 1px solid $panel-border;
+            border-bottom: 1px solid $page-border;
         }
         &.hover:hover {
-            background-color: $panel-hover;
+            background-color: $page-hover;
         }
     }
 
     .row > .page-row {
         &:not(:last-child) {
-            border-bottom: 1px solid $panel-border;
+            border-bottom: 1px solid $page-border;
         }
     }
 }

flaskbb/themes/aurora/src/scss/_profile.scss

@@ -72,13 +72,13 @@
         padding-top: 0.5em;
         padding-bottom: 0.5em;
         &:not(:last-child) {
-            border-bottom: 1px solid $panel-border;
+            border-bottom: 1px solid $page-border;
         }
         &.hover:hover {
-            background-color: $panel-hover;
+            background-color: $page-hover;
         }
         &.unread {
-            background-color: $panel-head-bg;
+            background-color: $page-head-bg;
         }
     }
 }
@@ -87,7 +87,7 @@
     .conversation-body {
         .row > .conversation-row {
             &:not(:last-child) {
-                border-bottom: 1px solid $panel-border;
+                border-bottom: 1px solid $page-border;
             }
         }
     }

flaskbb/themes/aurora/src/scss/_topic.scss

@@ -17,7 +17,7 @@
     padding-bottom: 0;
 
     &:not(:last-child) {
-        border-bottom: 1px solid $panel-border;
+        border-bottom: 1px solid $page-border;
     }
 }
 
@@ -89,7 +89,7 @@
             padding-left: 0;
 
             .btn-icon:hover {
-                background-color: $panel-hover;
+                background-color: $page-hover;
             }
         }
     }

flaskbb/themes/aurora/src/scss/_variables.scss

@@ -1,4 +1,4 @@
-// bootstrap colros
+// bootstrap3 colros
 $blue: #337ab7;
 $fresh-blue: #0088cc;
 $light-blue: #5bc0de;
@@ -9,43 +9,95 @@ $red: #d9534f;
 $gray: #555;
 
 
-// main colors
-$background-color: #f6f9fc; // old: #e8f1f2
-$font-color: #333;
-$border-color: #cad7e1;
-$head-background: #f5f5f5;
-$meta-background: #eaf1f5;
-$hover: #f8f8f8;
+// FlaskBB Variables
+$fbb-bg: #f6f9fc;
+$fbb-border-color: #cad7e1;
+$fbb-active-bg: #e7e7e7;
+$fbb-link-color: #337ab7;
+$fbb-link-hover-color: #275b89;
 
-$navigation-color: #555;
-$navigation-bg: #f8f8f8;
-$navigation-hover-color: #e7e7e7;
+$fbb-bg-dark: #f6f9fc;
+$fbb-bg-light: #fff;
 
-// header colors
-$header-title-color: #fff;
-$header-subtitle-color: #E8F1F2;
-$header-background-primary: #0088cc;  // old: #3276b1
-$header-background-secondary: #285e8e;
+// header && footer colors
+$fbb-header-title-color: #fff;
+$fbb-header-subtitle-color: #E8F1F2;
+$fbb-header-bg-primary: #0088cc;  // old: #3276b1
+$fbb-header-bg-secondary: #285e8e;
+$fbb-footer-bg: #333333;
 
-// panel colors
-$panel-bg: #fff;            // panel body background
-$panel-head-bg: $head-background;    // panel head background
-$panel-meta-bg: $meta-background;    // panel meta background
-$panel-meta-border: $border-color;   // panel meta (bottom) border
-$panel-border: $border-color;        // panel border (all over)
-$panel-hover: $hover;
+$fbb-navigation-color: #555;
+$fbb-navigation-bg: #f8f8f8;
+$fbb-navigation-hover-color: #e7e7e7;
+
+
+// page colors
+$page-bg: #fff;            // page body background
+$page-head-bg: #f5f5f5;    // page head background
+$page-meta-bg: #eaf1f5;    // page meta background
+$page-meta-border: $fbb-border-color;   // page meta (bottom) border
+$page-border: $fbb-border-color;        // page border (all over)
+$page-hover: #f8f8f8;                // page-row hover
 
 
 // post colors
-$post-box-bg: $panel-bg;
-$post-box-border: $border-color;
-$post-meta-border: $panel-meta-bg;
-$post-meta-bg: $panel-bg;
-$post-signature-border: $panel-meta-bg;
-$post-footer-border: $border-color;
-$post-footer-bg: $panel-bg;
+$post-box-bg: $page-bg;
+$post-box-border: $fbb-border-color;
+$post-meta-border: $page-meta-bg;
+$post-meta-bg: $page-bg;
+$post-signature-border: $page-meta-bg;
+$post-footer-border: $fbb-border-color;
+$post-footer-bg: $page-bg;
 
 
 $author-box-bg: #e8ecf1;
 $author-online: $green;
 $author-offline: $gray;
+
+
+// Bootstrap Variables
+
+//
+// For more variables check out this file:
+// https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
+// raw: https://raw.githubusercontent.com/twbs/bootstrap/main/scss/_variables.scss
+//
+
+$body-bg:                   $fbb-bg;
+
+// Links
+//
+// Style anchor elements.
+$link-color:                              $fbb-link-color !default;
+$link-decoration:                         none !default;
+$link-shade-percentage:                   20% !default;
+$link-hover-decoration:                   underline !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$border-width:                1px !default;
+$border-widths: (
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  5: 5px
+) !default;
+
+$border-color:                $fbb-border-color;
+$border-radius:               .25rem !default;
+$border-radius-sm:            .2rem !default;
+$border-radius-lg:            .3rem !default;
+$border-radius-pill:          50rem !default;
+
+
+// Cards
+$card-border-radius: none;
+
+// Navbar
+$navbar-light-color:                $link-color;
+$navbar-light-hover-color:          $link-hover-decoration;
+$navbar-light-active-color:         $link-color;

flaskbb/themes/aurora/src/scss/styles.scss

@@ -1,5 +1,5 @@
 // Import custom Bootstrap variables
-@import "bootstrap-custom";
+@import "variables";
 @import "bootstrap/scss/bootstrap";
 
 // Import fontawesome icons
@@ -9,8 +9,6 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 @import "@fortawesome/fontawesome-free/scss/regular";
 
 // Import FlaskBB theme
-@import "variables";
-
 @import "text";
 @import "misc";
 @import "navigation";
@@ -19,7 +17,7 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 @import "category";
 @import "forum";
 @import "topic";
-@import "panel";
+@import "page";
 @import "profile";
 
 @import "management";