Add color theme support for new header
This commit is contained in:
parent
049c8eb384
commit
b3c535bab4
5 changed files with 32 additions and 74 deletions
16
app/assets/stylesheets/bootstrap-variables.scss
vendored
16
app/assets/stylesheets/bootstrap-variables.scss
vendored
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue