nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Issue #4297: Color themes can override bootstrap variables

Browse source
This commit is contained in:
efstrian 2015-06-07 03:37:41 +03:00
parent d64ea15891
commit 69c3a4100d
28 changed files with 169 additions and 306 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/application.scss → app/assets/stylesheets/_application.scss
View file

@ -1,6 +1,4 @@
/* variables */ @import "bootstrap-complete.scss";
@import 'bootstrap-variables'; // our overwrites
@import 'bootstrap/variables'; // the original bootstrap ones
@import 'perfect-scrollbar'; @import 'perfect-scrollbar';

2
app/assets/stylesheets/_mixins.scss
View file

@ -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%){

2
app/assets/stylesheets/bootstrap-complete.scss vendored
View file

@ -1,4 +1,4 @@
// 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";

77
app/assets/stylesheets/color_themes/_color_theme_override.scss Normal file
View file

@ -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 }
}

91
app/assets/stylesheets/color_themes/dark_green.scss
View file

@ -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 }
}

17
app/assets/stylesheets/color_themes/dark_green/_style.scss Normal file
View file

@ -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"

2
app/assets/stylesheets/color_themes/dark_green/desktop.scss Normal file
View file

@ -0,0 +1,2 @@
@import "style";
@import "application";

2
app/assets/stylesheets/color_themes/dark_green/mobile.scss Normal file
View file

@ -0,0 +1,2 @@
@import "style";
@import "mobile/mobile";

91
app/assets/stylesheets/color_themes/egyptian_blue.scss
View file

@ -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 }
}

17
app/assets/stylesheets/color_themes/egyptian_blue/_style.scss Normal file
View file

@ -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"

2
app/assets/stylesheets/color_themes/egyptian_blue/desktop.scss Normal file
View file

@ -0,0 +1,2 @@
@import "style";
@import "application";

2
app/assets/stylesheets/color_themes/egyptian_blue/mobile.scss Normal file
View file

@ -0,0 +1,2 @@
@import "style";
@import "mobile/mobile";

91
app/assets/stylesheets/color_themes/magenta.scss
View file

@ -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 }
}

17
app/assets/stylesheets/color_themes/magenta/_style.scss Normal file
View file

@ -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"

2
app/assets/stylesheets/color_themes/magenta/desktop.scss Normal file
View file

@ -0,0 +1,2 @@
@import "style";
@import "application";

2
app/assets/stylesheets/color_themes/magenta/mobile.scss Normal file
View file

@ -0,0 +1,2 @@
@import "style";
@import "mobile/mobile";

7
app/assets/stylesheets/color_themes/original.scss
View file

@ -1,7 +0,0 @@
@import "mixins";
$main-color: #282828;
body > header {
@include header-gradient($main-color);
}

8
app/assets/stylesheets/color_themes/original/_style.scss Normal file
View file

@ -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;

2
app/assets/stylesheets/color_themes/original/desktop.scss Normal file
View file

@ -0,0 +1,2 @@
@import "style";
@import "application";

2
app/assets/stylesheets/color_themes/original/mobile.scss Normal file
View file

@ -0,0 +1,2 @@
@import "style";
@import "mobile/mobile";

4
app/assets/stylesheets/header.scss
View file

@ -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 {
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;

4
app/assets/stylesheets/mobile/header.scss
View file

@ -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 {

4
app/helpers/layout_helper.rb
View file

@ -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

5
app/views/layouts/application.html.haml
View file

@ -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

4
app/views/layouts/application.mobile.haml
View file

@ -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 @@
- 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)

5
config/application.rb
View file

@ -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

5
config/diaspora.yml.example
View file

@ -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

4
spec/javascripts/support/jasmine.yml
View file

@ -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
# #