Add color theme support for new header

This commit is contained in:
Steffen van Bergerem 2015-06-17 21:45:39 +02:00
parent 049c8eb384
commit b3c535bab4
5 changed files with 32 additions and 74 deletions

View file

@ -16,8 +16,8 @@
// $gray-light: lighten($gray-base, 46.7%) // #777
// $gray-lighter: lighten($gray-base, 93.5%) // #eee
$brand-primary: darken(#0097FF,5%); // darker creation-blue
$brand-success: #8EDE3D;
$brand-primary: darken(#0097FF,5%) !default; // darker creation-blue
$brand-success: #8EDE3D !default;
// $brand-info: #5bc0de
// $brand-warning: #f0ad4e
// $brand-danger: #d9534f
@ -33,7 +33,7 @@ $brand-success: #8EDE3D;
// $text-color: $gray-dark
//** Global textual link color.
$link-color: rgb(42,156,235);
$link-color: rgb(42,156,235) !default;
//** Link hover color set via `darken()` function.
// $link-hover-color: darken($link-color, 15%)
//** Link hover decoration.
@ -50,9 +50,9 @@ $link-color: rgb(42,156,235);
// $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace
// $font-family-base: $font-family-sans-serif
$font-size-base: 13px;
$font-size-base: 13px !default;
// $font-size-large: ceil(($font-size-base * 1.25)) // ~18px
$font-size-small: 11px;
$font-size-small: 11px !default;
// $font-size-h1: floor(($font-size-base * 2.6)) // ~36px
// $font-size-h2: floor(($font-size-base * 2.15)) // ~30px
@ -158,7 +158,7 @@ $font-size-small: 11px;
// $btn-primary-bg: $brand-primary
// $btn-primary-border: darken($btn-primary-bg, 5%)
$btn-success-color: #333;
$btn-success-color: #333 !default;
// $btn-success-bg: $brand-success
// $btn-success-border: darken($btn-success-bg, 5%)
@ -328,7 +328,7 @@ $btn-success-color: #333;
// $grid-gutter-width: 30px
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint: 992px; // $screen-md-min
$grid-float-breakpoint: 992px !default; // $screen-md-min
//** Point at which the navbar begins collapsing.
// $grid-float-breakpoint-max: ($grid-float-breakpoint - 1)
@ -856,7 +856,7 @@ $grid-float-breakpoint: 992px; // $screen-md-min
//** Blockquote small color
// $blockquote-small-color: $gray-light
//** Blockquote font size
$blockquote-font-size: $font-size-base;
$blockquote-font-size: $font-size-base !default;
//** Blockquote border color
// $blockquote-border-color: $gray-lighter
//** Page header border color

View file

@ -1,45 +1,5 @@
/* 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,
@ -57,7 +17,6 @@ body {
color: fade-out($link-color, 0.4);
}
#main_stream .stream_element {
&.post_preview {
background-color: $main-color-essence;
@ -65,13 +24,9 @@ body {
}
}
#leftNavBar .hoverable:hover { background-color: $main-color-essence }
#leftNavBar .hoverable:hover { background-color: $main-color-essence; }
.poll_form .progress .bar { background-color: $main-color-dark }
.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 }
.badge { background-color: $brand-primary; }
}

View file

@ -1,17 +1,18 @@
/* Main color(s) */
$main-color: #009900;
$brand-primary: #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%);
$main-color-essence: fade-out($brand-primary, 0.8);
$main-color-light: lighten($brand-primary, 10%);
$main-color-dark: darken($brand-primary, 20%);
/* Bootstrap Variables */
$btn-primary-bg: $main-color;
$link-color: $main-color;
$btn-primary-bg: $brand-primary;
$link-color: $brand-primary;
/* Custom Variables */
$header-background-color: $main-color-dark;
$navbar-inverse-bg: $main-color-dark;
$header-search-color: lighten($header-background-color, 10%);
@import "color_themes/color_theme_override"

View file

@ -1,17 +1,18 @@
/* Main color(s) */
$main-color: #1034A6;
$brand-primary: #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%);
$main-color-essence: fade-out($brand-primary, 0.8);
$main-color-light: lighten($brand-primary, 10%);
$main-color-dark: darken($brand-primary, 15%);
/* Bootstrap Variables */
$btn-primary-bg: $main-color;
$link-color: $main-color;
$btn-primary-bg: $brand-primary;
$link-color: $brand-primary;
/* Custom Variables */
$header-background-color: $main-color-dark;
$navbar-inverse-bg: $main-color-dark;
$header-search-color: lighten($header-background-color, 15%);
@import "color_themes/color_theme_override"

View file

@ -1,17 +1,18 @@
/* Main color(s) */
$main-color: #FF00FF;
$brand-primary: #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%);
$main-color-essence: fade-out($brand-primary, 0.8);
$main-color-light: lighten($brand-primary, 10%);
$main-color-dark: darken($brand-primary, 30%);
/* Bootstrap Variables */
$btn-primary-bg: darken($main-color, 5%);
$link-color: $main-color;
$btn-primary-bg: darken($brand-primary, 5%);
$link-color: $brand-primary;
/* Custom Variables */
$header-background-color: $main-color-dark;
$navbar-inverse-bg: $main-color-dark;
$header-search-color: lighten($header-background-color, 10%);
@import "color_themes/color_theme_override"