Commit 69c3a410 authored by efstrian's avatar efstrian

Issue #4297: Color themes can override bootstrap variables

parent d64ea158
/* variables */ @import "bootstrap-complete.scss";
@import 'bootstrap-variables'; // our overwrites
@import 'bootstrap/variables'; // the original bootstrap ones
@import 'perfect-scrollbar'; @import 'perfect-scrollbar';
......
...@@ -22,7 +22,7 @@ $default-border-radius: 3px; ...@@ -22,7 +22,7 @@ $default-border-radius: 3px;
} }
@mixin header-gradient($color) { @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%){ @mixin linear-gradient($from, $to, $start:0%, $end:100%){
......
// Calling this file bootstrap would cause an infinite recursion during asset compilation. // Calling this file bootstrap would cause an infinite recursion during asset compilation.
@import "bootstrap-sprockets"; @import "bootstrap-sprockets";
@import "bootstrap-variables"; @import "bootstrap-variables"; //our overwrites of bootstrap variables
@import "bootstrap"; @import "bootstrap";
/* 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 }
}
@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 }
}
/* 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"
@import "style";
@import "mobile/mobile";
@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 }
}
/* 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"
@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 }
}
/* 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"
@import "style";
@import "application";
@import "style";
@import "mobile/mobile";
@import "mixins";
$main-color: #282828;
body > header {
@include header-gradient($main-color);
}
/* Main color(s) */
$main-color: #585858;
/* Shades */
$main-color-dark: darken($main-color, 15%);
/* Variables */
$header-background-color: $main-color-dark;
@import "style";
@import "mobile/mobile";
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
} }
body > header { body > header {
@include header-gradient($header-background-color);
box-shadow: 0 1px 3px rgba(0,0,0,0.9); box-shadow: 0 1px 3px rgba(0,0,0,0.9);
background: image-url('header-bg.png') rgb(40,35,35);
z-index: 1001; z-index: 1001;
padding: 6px 0; padding: 6px 0;
color: #CCC; color: #CCC;
...@@ -15,7 +15,7 @@ body > header { ...@@ -15,7 +15,7 @@ body > header {
min-width: 620px; min-width: 620px;
top: 0; top: 0;
left: 0; left: 0;
border-bottom: 1px solid #000; border-bottom: 1px solid darken($header-background-color, 8%);
> div > div.container { > div > div.container {
height: 26px; height: 26px;
......
...@@ -8,9 +8,9 @@ header { ...@@ -8,9 +8,9 @@ header {
height: 45px; height: 45px;
top: 0px; top: 0px;
z-index: 10; 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; box-shadow: 0 1px 2px #333;
border-bottom: 1px solid #222; border-bottom: 1px solid darken($header-background-color, 8%);
} }
#main_nav { #main_nav {
......
...@@ -45,8 +45,8 @@ module LayoutHelper ...@@ -45,8 +45,8 @@ module LayoutHelper
end end
end end
def include_base_css_framework def include_color_theme(view="desktop")
stylesheet_link_tag('bootstrap-complete') stylesheet_link_tag "#{current_color_theme}/#{view}", media: "all"
end end
def old_browser_js_support def old_browser_js_support
......
...@@ -20,14 +20,11 @@ ...@@ -20,14 +20,11 @@
= chartbeat_head_block = chartbeat_head_block
= include_mixpanel = include_mixpanel
= include_base_css_framework = include_color_theme
= stylesheet_link_tag 'application', media: 'all'
- if rtl? - if rtl?
= stylesheet_link_tag :rtl, media: 'all' = stylesheet_link_tag :rtl, media: 'all'
= stylesheet_link_tag current_color_theme, media: "all"
= old_browser_js_support = old_browser_js_support
<!--[if IE]> <!--[if IE]>
= javascript_include_tag :ie = javascript_include_tag :ie
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
/ Stylesheets / Stylesheets
= stylesheet_link_tag 'mobile/mobile', :format => 'all' = include_color_theme "mobile"
= yield(:custom_css) = yield(:custom_css)
...@@ -46,8 +46,6 @@ ...@@ -46,8 +46,6 @@
- if rtl? - if rtl?
= stylesheet_link_tag :rtl, :media => 'all' = stylesheet_link_tag :rtl, :media => 'all'
= stylesheet_link_tag current_color_theme, media: "all"
= yield(:head) = yield(:head)
= include_gon(:camel_case => true) = include_gon(:camel_case => true)
......
...@@ -81,13 +81,12 @@ module Diaspora ...@@ -81,13 +81,12 @@ module Diaspora
templates.js templates.js
validation.js validation.js
bootstrap-complete.css
error_pages.css error_pages.css
admin.css admin.css
mobile/mobile.css
rtl.css rtl.css
home.css home.css
color_themes/*.css color_themes/*/desktop.css
color_themes/*/mobile.css
} }
# Version of your assets, change this if you want to expire all your assets # Version of your assets, change this if you want to expire all your assets
......
...@@ -536,8 +536,9 @@ configuration: ## Section ...@@ -536,8 +536,9 @@ configuration: ## Section
## Default color theme ## Default color theme
## You can change which color theme is displayed when a user is not signed in ## You can change which color theme is displayed when a user is not signed in
## or has not selected any color theme from the available ones. You simply have ## or has not selected any color theme from the available ones. You simply have
## to enter the name of the theme's .scss file in ## to enter the name of the theme's folder in "app/assets/stylesheets/color_themes/".
## app/assets/stylesheets/color_themes/ without the file extension. ## ("original" for the theme in "app/assets/stylesheets/color_themes/original/", for
## example).
#default_color_theme: "original" #default_color_theme: "original"
## Posting from Diaspora to external services (all are disabled by default). ## Posting from Diaspora to external services (all are disabled by default).
services: ## Section services: ## Section
......
...@@ -27,9 +27,7 @@ src_files: ...@@ -27,9 +27,7 @@ src_files:
# - stylesheets/*.css # - stylesheets/*.css
# #
stylesheets: stylesheets:
- assets/bootstrap.css - assets/color_themes/original/desktop.css
- assets/default.css
- assets/application.css
# helpers # helpers
# #
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment