diff options
author | efstrian <t8120133@dias.aueb.gr> | 2015-06-07 03:37:41 +0300 |
---|---|---|
committer | efstrian <t8120133@dias.aueb.gr> | 2015-06-07 19:58:54 +0300 |
commit | 69c3a4100dec182c9eb39a2021fb207e9dd2c184 (patch) | |
tree | 8833f575fcc10e1afa1a702f518f4dbb6fb47376 /app/assets/stylesheets | |
parent | d64ea158911885e6d3dd02bb92226b8691819fc9 (diff) |
Issue #4297: Color themes can override bootstrap variables
Diffstat (limited to 'app/assets/stylesheets')
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 { |