Issue #4297: Color themes can override bootstrap variables

22 files changed, 159 insertions, 289 deletions

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/_application.scss
index abff7dda9..13e67f3d2 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/_application.scss
@@ -1,6 +1,4 @@
-/* variables */
-@import 'bootstrap-variables'; // our overwrites
-@import 'bootstrap/variables'; // the original bootstrap ones
+@import "bootstrap-complete.scss";
 
 @import 'perfect-scrollbar';
 
diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss
index 61405c176..0b01ca6bd 100644
--- a/app/assets/stylesheets/_mixins.scss
+++ b/app/assets/stylesheets/_mixins.scss
@@ -22,7 +22,7 @@ $default-border-radius: 3px;
 }
 
 @mixin header-gradient($color) {
-  @include linear-gradient(lighten($color, 8%), darken($color, 0%), 0%, 80%);
+  @include linear-gradient(lighten($color, 2%), darken($color, 2%), 0%, 80%);
 }
 
 @mixin linear-gradient($from, $to, $start:0%, $end:100%){
diff --git a/app/assets/stylesheets/bootstrap-complete.scss b/app/assets/stylesheets/bootstrap-complete.scss
index 8f57874aa..5319f637a 100644
--- a/app/assets/stylesheets/bootstrap-complete.scss
+++ b/app/assets/stylesheets/bootstrap-complete.scss
@@ -1,4 +1,4 @@
 // Calling this file bootstrap would cause an infinite recursion during asset compilation.
 @import "bootstrap-sprockets";
-@import "bootstrap-variables";
+@import "bootstrap-variables"; //our overwrites of bootstrap variables
 @import "bootstrap";
diff --git a/app/assets/stylesheets/color_themes/_color_theme_override.scss b/app/assets/stylesheets/color_themes/_color_theme_override.scss
new file mode 100644
index 000000000..d21280f41
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/_color_theme_override.scss
@@ -0,0 +1,77 @@
+/* Raw CSS */
+body {
+  header {
+    .container {
+      #nav_badges > #notification_dropdown {
+        a#mark_all_read_link, .stream_element a {
+          color: $link-color;
+        }
+
+        div.view_all {
+          background-color: $main-color;
+        }
+      }
+
+      #global_search > form > input.ac_input {
+        background-color: $header-search-color;
+        border-color: $main-color-dark;
+
+        &:hover {
+          background-color: lighten($header-search-color, 2%);
+        }
+
+        &:focus {
+          background-color: white;
+        }
+      }
+
+      ul#user_menu.active {
+        box-shadow: 0 1px 3px $main-color-dark;
+        background-color: $main-color-dark;
+
+        li {
+          border-color: darken($main-color-dark, 5%);
+
+          &.user-menu-item a:hover {
+            background-color: lighten($main-color-dark, 15%);
+          }
+        }
+      }
+    }
+  }
+
+  a,
+  a.tag,
+  .btn-link,
+  #main_stream .stream_element > .media a.author-name,
+  #hovercard h4 a,
+  .stream_element .from a.self {
+    color: $link-color;
+
+    &:hover, &:focus {
+      color: darken($link-color, 10%);
+    }
+  }
+
+  #publisher_textarea_wrapper > #button_container > span.markdownIndications > a {
+    color: fade-out($link-color, 0.4);
+  }
+
+
+  #main_stream .stream_element {
+    &.post_preview {
+      background-color: $main-color-essence;
+      border-color: darken($main-color-essence, 5%);
+    }
+  }
+
+  #leftNavBar .hoverable:hover { background-color: $main-color-essence }
+
+  .poll_form .progress .bar { background-color: $main-color-dark }
+
+  #profile_container .profile_header #profile_horizontal_bar ul#profile_nav > li.active {
+    border-bottom-color: $main-color;
+  }
+
+  .badge { background-color: $main-color }
+}
diff --git a/app/assets/stylesheets/color_themes/dark_green.scss b/app/assets/stylesheets/color_themes/dark_green.scss
deleted file mode 100644
index 50382d6a8..000000000
--- a/app/assets/stylesheets/color_themes/dark_green.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@import "mixins";
-
-$main-color: #00CC00;
-$main-color-light-dark: darken($main-color, 10%);
-$main-color-dark: darken($main-color, 36%);
-$link-color: darken($main-color, 8%);
-
-body {
-  header {
-    @include header-gradient($main-color-dark);
-    border-color: $main-color-dark;
-
-    #nav_badges > #notification_dropdown {
-      a {
-        color: $link-color;
-      }
-
-      .view_all {
-        background-color: $main-color-light-dark;
-      }
-    }
-
-    #global_search > form > input {
-      background-color: lighten($main-color-dark, 10%);
-      border-color: $main-color-dark;
-
-      &:hover {
-        background-color: lighten($main-color-dark, 12%);
-      }
-
-      &:focus {
-        background-color: white;
-      }
-    }
-
-    ul#user_menu.active {
-      box-shadow: 0 1px 3px $main-color-dark;
-      background-color: $main-color-dark;
-
-      li {
-        border-color: darken($main-color-dark, 5%);
-
-        &.user-menu-item a:hover {
-          background-color: lighten($main-color-dark, 15%);
-        }
-      }
-    }
-  }
-
-  a,
-  a.tag,
-  .btn-link,
-  #main_stream .stream_element > .media a.author-name,
-  #hovercard h4 a,
-  .stream_element .from a.self {
-    color: $link-color;
-
-    &:hover, &:focus {
-      color: darken($link-color, 10%);
-    }
-  }
-
-  #publisher_textarea_wrapper > #button_container > .help-block > a {
-    color: lighten($link-color, 42%);
-  }
-
-  .btn.creation {
-    @include button-gradient(lighten($main-color-dark, 5%));
-
-    &:hover {
-      background-color: lighten($main-color-dark, 12%);
-    }
-  }
-
-  #main_stream .stream_element {
-    &.post_preview {
-      background-color: lighten($main-color, 45%);
-      border-color: lighten($main-color, 40%);
-    }
-  }
-
-  #leftNavBar .hoverable:hover { background-color: lighten($main-color, 45%) }
-
-  .poll_form .progress .bar { background-color: darken($main-color, 15%) }
-
-  #profile_container .profile_header #profile_horizontal_bar ul#profile_nav > li.active {
-    border-bottom-color: $main-color-light-dark;
-  }
-
-  .badge { background-color: $main-color-light-dark }
-}
diff --git a/app/assets/stylesheets/color_themes/dark_green/_style.scss b/app/assets/stylesheets/color_themes/dark_green/_style.scss
new file mode 100644
index 000000000..6039cc718
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/dark_green/_style.scss
@@ -0,0 +1,17 @@
+/* Main color(s) */
+$main-color: #009900;
+
+/* Shades */
+$main-color-essence: fade-out($main-color, 0.8);
+$main-color-light: lighten($main-color, 10%);
+$main-color-dark: darken($main-color, 20%);
+
+/* Bootstrap Variables */
+$btn-primary-bg: $main-color;
+$link-color: $main-color;
+
+/* Custom Variables */
+$header-background-color: $main-color-dark;
+$header-search-color: lighten($header-background-color, 10%);
+
+@import "color_themes/color_theme_override"
diff --git a/app/assets/stylesheets/color_themes/dark_green/desktop.scss b/app/assets/stylesheets/color_themes/dark_green/desktop.scss
new file mode 100644
index 000000000..fc325a510
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/dark_green/desktop.scss
@@ -0,0 +1,2 @@
+@import "style";
+@import "application";
diff --git a/app/assets/stylesheets/color_themes/dark_green/mobile.scss b/app/assets/stylesheets/color_themes/dark_green/mobile.scss
new file mode 100644
index 000000000..e8a543736
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/dark_green/mobile.scss
@@ -0,0 +1,2 @@
+@import "style";
+@import "mobile/mobile";
diff --git a/app/assets/stylesheets/color_themes/egyptian_blue.scss b/app/assets/stylesheets/color_themes/egyptian_blue.scss
deleted file mode 100644
index 21c6a7b93..000000000
--- a/app/assets/stylesheets/color_themes/egyptian_blue.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@import "mixins";
-
-$main-color: #1034A6;
-$main-color-light-dark: darken($main-color, 5%);
-$main-color-dark: darken($main-color, 18%);
-$link-color: darken($main-color, 5%);
-
-body {
-  header {
-    @include header-gradient($main-color-dark);
-    border-color: $main-color-dark;
-
-    #nav_badges > #notification_dropdown {
-      a {
-        color: $link-color;
-      }
-
-      .view_all {
-        background-color: $main-color-light-dark;
-      }
-    }
-
-    #global_search > form > input {
-      background-color: lighten($main-color-dark, 10%);
-      border-color: $main-color-dark;
-
-      &:hover {
-        background-color: lighten($main-color-dark, 12%);
-      }
-
-      &:focus {
-        background-color: white;
-      }
-    }
-
-    ul#user_menu.active {
-      box-shadow: 0 1px 3px $main-color-dark;
-      background-color: $main-color-dark;
-
-      li {
-        border-color: darken($main-color-dark, 5%);
-
-        &.user-menu-item a:hover {
-          background-color: lighten($main-color-dark, 15%);
-        }
-      }
-    }
-  }
-
-  a,
-  a.tag,
-  .btn-link,
-  #main_stream .stream_element > .media a.author-name,
-  #hovercard h4 a,
-  .stream_element .from a.self {
-    color: $link-color;
-
-    &:hover, &:focus {
-      color: darken($link-color, 10%);
-    }
-  }
-
-  #publisher_textarea_wrapper > #button_container > .help-block > a {
-    color: lighten($link-color, 38%);
-  }
-
-  .btn.creation {
-    @include button-gradient(lighten($main-color-dark, 5%));
-
-    &:hover {
-      background-color: lighten($main-color-dark, 12%);
-    }
-  }
-
-  #main_stream .stream_element {
-    &.post_preview {
-      background-color: lighten($main-color, 45%);
-      border-color: lighten($main-color, 40%);
-    }
-  }
-
-  #leftNavBar .hoverable:hover { background-color: lighten($main-color, 45%) }
-
-  .poll_form .progress .bar { background-color: darken($main-color, 15%) }
-
-  #profile_container .profile_header #profile_horizontal_bar ul#profile_nav > li.active {
-    border-bottom-color: $main-color-light-dark;
-  }
-
-  .badge { background-color: $main-color-light-dark }
-}
diff --git a/app/assets/stylesheets/color_themes/egyptian_blue/_style.scss b/app/assets/stylesheets/color_themes/egyptian_blue/_style.scss
new file mode 100644
index 000000000..c39132caa
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/egyptian_blue/_style.scss
@@ -0,0 +1,17 @@
+/* Main color(s) */
+$main-color: #1034A6;
+
+/* Shades */
+$main-color-essence: fade-out($main-color, 0.8);
+$main-color-light: lighten($main-color, 10%);
+$main-color-dark: darken($main-color, 15%);
+
+/* Bootstrap Variables */
+$btn-primary-bg: $main-color;
+$link-color: $main-color;
+
+/* Custom Variables */
+$header-background-color: $main-color-dark;
+$header-search-color: lighten($header-background-color, 15%);
+
+@import "color_themes/color_theme_override"
diff --git a/app/assets/stylesheets/color_themes/egyptian_blue/desktop.scss b/app/assets/stylesheets/color_themes/egyptian_blue/desktop.scss
new file mode 100644
index 000000000..fc325a510
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/egyptian_blue/desktop.scss
@@ -0,0 +1,2 @@
+@import "style";
+@import "application";
diff --git a/app/assets/stylesheets/color_themes/egyptian_blue/mobile.scss b/app/assets/stylesheets/color_themes/egyptian_blue/mobile.scss
new file mode 100644
index 000000000..e8a543736
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/egyptian_blue/mobile.scss
@@ -0,0 +1,2 @@
+@import "style";
+@import "mobile/mobile";
diff --git a/app/assets/stylesheets/color_themes/magenta.scss b/app/assets/stylesheets/color_themes/magenta.scss
deleted file mode 100644
index 2892b70d0..000000000
--- a/app/assets/stylesheets/color_themes/magenta.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@import "mixins";
-
-$main-color: #FF00FF;
-$main-color-light-dark: darken($main-color, 10%);
-$main-color-dark: darken($main-color, 36%);
-$link-color: darken($main-color, 8%);
-
-body {
-  header {
-    @include header-gradient($main-color-dark);
-    border-color: $main-color-dark;
-
-    #nav_badges > #notification_dropdown {
-      a {
-        color: $link-color;
-      }
-
-      .view_all {
-        background-color: $main-color-light-dark;
-      }
-    }
-
-    #global_search > form > input {
-      background-color: lighten($main-color-dark, 10%);
-      border-color: $main-color-dark;
-
-      &:hover {
-        background-color: lighten($main-color-dark, 12%);
-      }
-
-      &:focus {
-        background-color: white;
-      }
-    }
-
-    ul#user_menu.active {
-      box-shadow: 0 1px 3px $main-color-dark;
-      background-color: $main-color-dark;
-
-      li {
-        border-color: darken($main-color-dark, 5%);
-
-        &.user-menu-item a:hover {
-          background-color: lighten($main-color-dark, 15%);
-        }
-      }
-    }
-  }
-
-  a,
-  a.tag,
-  .btn-link,
-  #main_stream .stream_element > .media a.author-name,
-  #hovercard h4 a,
-  .stream_element .from a.self {
-    color: $link-color;
-
-    &:hover, &:focus {
-      color: darken($link-color, 10%);
-    }
-  }
-
-  #publisher_textarea_wrapper > #button_container > .help-block > a {
-    color: lighten($link-color, 30%);
-  }
-
-  .btn.creation {
-    @include button-gradient(lighten($main-color-dark, 5%));
-
-    &:hover {
-      background-color: lighten($main-color-dark, 12%);
-    }
-  }
-
-  #main_stream .stream_element {
-    &.post_preview {
-      background-color: lighten($main-color, 45%);
-      border-color: lighten($main-color, 40%);
-    }
-  }
-
-  #leftNavBar .hoverable:hover { background-color: lighten($main-color, 45%) }
-
-  .poll_form .progress .bar { background-color: darken($main-color, 15%) }
-
-  #profile_container .profile_header #profile_horizontal_bar ul#profile_nav > li.active {
-    border-bottom-color: $main-color-light-dark;
-  }
-
-  .badge { background-color: $main-color-light-dark }
-}
diff --git a/app/assets/stylesheets/color_themes/magenta/_style.scss b/app/assets/stylesheets/color_themes/magenta/_style.scss
new file mode 100644
index 000000000..8b13dc77f
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/magenta/_style.scss
@@ -0,0 +1,17 @@
+/* Main color(s) */
+$main-color: #FF00FF;
+
+/* Shades */
+$main-color-essence: fade-out($main-color, 0.8);
+$main-color-light: lighten($main-color, 10%);
+$main-color-dark: darken($main-color, 30%);
+
+/* Bootstrap Variables */
+$btn-primary-bg: darken($main-color, 5%);
+$link-color: $main-color;
+
+/* Custom Variables */
+$header-background-color: $main-color-dark;
+$header-search-color: lighten($header-background-color, 10%);
+
+@import "color_themes/color_theme_override"
diff --git a/app/assets/stylesheets/color_themes/magenta/desktop.scss b/app/assets/stylesheets/color_themes/magenta/desktop.scss
new file mode 100644
index 000000000..fc325a510
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/magenta/desktop.scss
@@ -0,0 +1,2 @@
+@import "style";
+@import "application";
diff --git a/app/assets/stylesheets/color_themes/magenta/mobile.scss b/app/assets/stylesheets/color_themes/magenta/mobile.scss
new file mode 100644
index 000000000..e8a543736
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/magenta/mobile.scss
@@ -0,0 +1,2 @@
+@import "style";
+@import "mobile/mobile";
diff --git a/app/assets/stylesheets/color_themes/original.scss b/app/assets/stylesheets/color_themes/original.scss
deleted file mode 100644
index 7fc1934eb..000000000
--- a/app/assets/stylesheets/color_themes/original.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "mixins";
-
-$main-color: #282828;
-
-body > header {
-  @include header-gradient($main-color);
-}
diff --git a/app/assets/stylesheets/color_themes/original/_style.scss b/app/assets/stylesheets/color_themes/original/_style.scss
new file mode 100644
index 000000000..89dda9ca2
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/original/_style.scss
@@ -0,0 +1,8 @@
+/* Main color(s) */
+$main-color: #585858;
+
+/* Shades */
+$main-color-dark: darken($main-color, 15%);
+
+/* Variables */
+$header-background-color: $main-color-dark;
diff --git a/app/assets/stylesheets/color_themes/original/desktop.scss b/app/assets/stylesheets/color_themes/original/desktop.scss
new file mode 100644
index 000000000..fc325a510
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/original/desktop.scss
@@ -0,0 +1,2 @@
+@import "style";
+@import "application";
diff --git a/app/assets/stylesheets/color_themes/original/mobile.scss b/app/assets/stylesheets/color_themes/original/mobile.scss
new file mode 100644
index 000000000..e8a543736
--- /dev/null
+++ b/app/assets/stylesheets/color_themes/original/mobile.scss
@@ -0,0 +1,2 @@
+@import "style";
+@import "mobile/mobile";
diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss
index df37965da..cbafb6364 100644
--- a/app/assets/stylesheets/header.scss
+++ b/app/assets/stylesheets/header.scss
@@ -4,8 +4,8 @@
 }
 
 body > header {
+  @include header-gradient($header-background-color);
   box-shadow: 0 1px 3px rgba(0,0,0,0.9);
-  background: image-url('header-bg.png') rgb(40,35,35);
   z-index: 1001;
   padding: 6px 0;
   color: #CCC;
@@ -15,7 +15,7 @@ body > header {
   min-width: 620px;
   top: 0;
   left: 0;
-  border-bottom: 1px solid #000;
+  border-bottom: 1px solid darken($header-background-color, 8%);
 
   > div > div.container {
     height: 26px;
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 2a78a2f67..06c4073e8 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -8,9 +8,9 @@ header {
   height: 45px;
   top: 0px;
   z-index: 10;
-  background: image-url('header-bg-long.jpg') rgb(40,35,35);
+  @include header-gradient($header-background-color);
   box-shadow: 0 1px 2px #333;
-  border-bottom: 1px solid #222;
+  border-bottom: 1px solid darken($header-background-color, 8%);
 }
 
 #main_nav {