You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
347 lines
11 KiB
347 lines
11 KiB
// $Id$ Ohia theme bootstrap-variables.scss.
|
|
// The color palette for this theme is derived from the ohia lehua tree and its enviorment in Hawaii.
|
|
// These are just physical attributes and no reference is implied regarding the cultural aspects of the tree.
|
|
$sky-light: #4C95D6;
|
|
$sky-deep: #005EA6;
|
|
$cloud: #DEE1E6;
|
|
$wood: #987255;
|
|
$leaf: #80A60F;
|
|
$blossom-red: #F90100;
|
|
$blossom-yellow: #CDA353;
|
|
$cooled-lava-dark: #2d2d3a; // #28293F ; // #0C0D13; // #28293F was too light for link contrast; last change: reduce saturation for less-blue color
|
|
$cooled-lava-light: #BEBDB8;
|
|
$sea: #638A93;
|
|
|
|
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
|
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
|
$min-contrast-ratio: 7;
|
|
|
|
// - - - - - - - Bootstrap variables (override values in vendor_bundled/vendor/twbs/bootstrap/scss/_variables.scss - - - - - - //
|
|
|
|
// Colors
|
|
$white: #fff;
|
|
$gray-100: #f8f9fa;
|
|
$gray-200: #e9ecef;
|
|
$gray-300: #dee2e6;
|
|
$gray-400: #ced4da;
|
|
$gray-500: #adb5bd;
|
|
$gray-600: #868e96;
|
|
$gray-700: #495057;
|
|
$gray-800: #343a40;
|
|
$gray-900: #212529;
|
|
$black: $cooled-lava-dark; //#000;
|
|
|
|
//$primary: #193c5a; // #193c5a
|
|
//$success: #aad4ab; // #3d6c2a
|
|
//$info: #aad0e2; // #1b6083
|
|
//$warning: #deceb3; // darken(#f0ad4e, 30%)
|
|
//$danger: #dda8a7;
|
|
|
|
$theme-colors: (
|
|
"primary": $leaf,
|
|
"secondary": darken($leaf,15%),
|
|
"success": $sky-deep,
|
|
"info": $sky-light,
|
|
"warning": $blossom-yellow,
|
|
"danger": $blossom-red
|
|
);
|
|
|
|
// scss-docs-start theme-color-variables
|
|
$primary: $leaf; // #193c5a;
|
|
$secondary: darken($leaf,15%); // #dddddd;
|
|
$success: $sky-deep; // #aad4ab;
|
|
$info: $sky-light; // #aad0e2;
|
|
$warning: $blossom-yellow; // #deceb3;
|
|
$danger: $blossom-red; // #dda8a7;
|
|
$light: $sky-light; //$gray-100;
|
|
$dark: $cooled-lava-dark; //#000;
|
|
// scss-docs-end theme-color-variables
|
|
|
|
|
|
|
|
// Options
|
|
// Spacing
|
|
|
|
// Body
|
|
$body-bg: $cooled-lava-dark; //#242424;
|
|
$body-color: $cloud; // #e9ecef;
|
|
|
|
// Links
|
|
$link-color: $leaf; // $blossom-red; //#EB6347; //#fd0006; Lightened for WAI compliance
|
|
$link-hover-color: #f4f4f4;
|
|
$link-hover-decoration: none;
|
|
|
|
// Components
|
|
$component-active-color: #ffffff;
|
|
$component-active-bg: #030511;
|
|
|
|
// Typography
|
|
//
|
|
// Font, line-height, and color for body text, headings, and more.
|
|
|
|
$font-family-sans-serif: 'Alegreya Sans', Helvetica, Arial, sans-serif;
|
|
$font-family-serif: Verdana, Geneva, Arial, Helvetica, sans-serif;
|
|
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
$font-family-base: $font-family-sans-serif;
|
|
|
|
$font-size-base: 1.2rem;
|
|
|
|
$headings-font-family: "Alegreya Sans SC", sans-serif;
|
|
$headings-font-weight: 500;
|
|
|
|
$display-font-family: "Alegreya Sans SC", sans-serif;
|
|
//$display-font-style: null !default;
|
|
//$display-font-weight: 300 !default;
|
|
|
|
$text-muted: darken($body-color, 6%);
|
|
|
|
// Tables
|
|
$table-bg: transparent;
|
|
$table-bg-accent: #373737;
|
|
$table-bg-hover: $gray-500;
|
|
$table-bg-active: $table-bg-hover;
|
|
|
|
// ** Border color for table and cell borders.
|
|
$table-border-color: #696969;
|
|
|
|
// Buttons
|
|
// $btn-default-color: #ffffff;
|
|
// $btn-default-bg: #3676c4;
|
|
// $btn-default-border: #3676c4;
|
|
|
|
$btn-font-weight: normal;
|
|
|
|
$btn-primary-color: #fd0006;
|
|
$btn-primary-bg: #2f2f2f;
|
|
$btn-primary-border: #5f5f5f;
|
|
|
|
$btn-secondary-color: #fd0006;
|
|
$btn-secondary-bg: lighten($btn-primary-bg, 15%);
|
|
// $btn-secondary-border: $btn-primary-border;
|
|
|
|
$btn-success-color: #ffffff;
|
|
$btn-success-bg: $success;
|
|
// $btn-success-border: darken($btn-success-bg, 5%);
|
|
|
|
$btn-info-color: #ffffff;
|
|
$btn-info-bg: $info;
|
|
// $btn-info-border: darken($btn-info-bg, 5%);
|
|
|
|
$btn-warning-color: #ffffff;
|
|
$btn-warning-bg: $warning;
|
|
// $btn-warning-border: darken($btn-warning-bg, 5%);
|
|
|
|
$btn-danger-color: #ffffff;
|
|
$btn-danger-bg: $danger;
|
|
// $btn-danger-border: darken($btn-danger-bg, 5%);
|
|
|
|
$btn-link-disabled-color: $gray-800;
|
|
|
|
// Forms
|
|
$input-bg: #242424;
|
|
$input-bg-disabled: $gray-800;
|
|
$input-color: #ededed;
|
|
$input-border-color: #4c4c4c;
|
|
$input-focus-border-color: $danger;
|
|
$input-color-placeholder: $gray-800;
|
|
$legend-color: #ffffff;
|
|
$legend-border-color: #e5e5e5;
|
|
$input-group-addon-bg: $gray-900;
|
|
$input-group-addon-border-color: $input-border-color;
|
|
$input-focus-bg: $body-bg;
|
|
//$input-focus-border-color: lighten($danger, 25%); Todo: fix compile error caused by this line
|
|
$input-focus-color: $input-color !default;
|
|
$input-btn-focus-color: rgba($danger, .25);
|
|
$input-btn-focus-width: .2rem !default;
|
|
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
|
|
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow;
|
|
|
|
// Navs
|
|
$nav-link-color: $leaf; // $link-color;
|
|
$nav-link-hover-color: $link-hover-color;
|
|
|
|
$nav-tabs-border-color: $wood;
|
|
//$nav-tabs-border-width: $border-width !default;
|
|
//$nav-tabs-border-radius: $border-radius !default;
|
|
$nav-tabs-link-hover-border-color: $wood $wood $nav-tabs-border-color;
|
|
$nav-tabs-link-active-color: $link-hover-color;
|
|
$nav-tabs-link-active-bg: $body-bg !default;
|
|
$nav-tabs-link-active-border-color: $wood $wood $nav-tabs-link-active-bg;
|
|
|
|
|
|
// Navbar
|
|
// scss-docs-start navbar-theme-variables
|
|
$navbar-dark-color: rgba($white, .55) !default;
|
|
$navbar-dark-hover-color: rgba($white, .75) !default;
|
|
$navbar-dark-active-color: $white !default;
|
|
$navbar-dark-disabled-color: rgba($white, .25) !default;
|
|
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
|
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
|
|
|
|
$navbar-light-color: $cooled-lava-dark;
|
|
$navbar-light-hover-color: lighten($cooled-lava-dark, 8%);
|
|
$navbar-light-active-color: $navbar-light-hover-color;
|
|
$navbar-light-disabled-color: rgba($black, .3) !default;
|
|
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
|
$navbar-light-toggler-border-color: rgba($black, .1) !default;
|
|
|
|
$navbar-light-brand-color: $navbar-light-active-color !default;
|
|
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
|
|
$navbar-dark-brand-color: $navbar-dark-active-color !default;
|
|
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
|
// scss-docs-end navbar-theme-variables
|
|
|
|
|
|
// Navbar links
|
|
$navbar-light-link-color: #fd0006;
|
|
$navbar-light-link-hover-color: #f4f4f4;
|
|
$navbar-light-link-hover-bg:transparent;
|
|
$navbar-light-link-active-color: #f4f4f4;
|
|
//darken($navbar-light-bg,6.5%);
|
|
$navbar-light-link-disabled-color: #cccccc;
|
|
$navbar-light-link-disabled-bg:transparent;
|
|
|
|
// Navbar brand label
|
|
$navbar-light-brand-color: $navbar-light-color;
|
|
$navbar-light-brand-hover-color:darken($navbar-light-color,10%);
|
|
$navbar-light-brand-hover-bg:transparent;
|
|
|
|
|
|
// Dropdowns
|
|
//
|
|
// Dropdown menu container and contents.
|
|
|
|
// scss-docs-start dropdown-variables
|
|
$dropdown-link-color: $link-color;
|
|
$dropdown-bg: darken($body-bg, 5%);
|
|
$dropdown-border-color: darken($dropdown-bg, 5%);
|
|
|
|
|
|
// Pagination
|
|
$pagination-color: $link-color;
|
|
$pagination-bg: $gray-300;
|
|
$pagination-border: $gray-500;
|
|
|
|
$pagination-hover-color: $link-hover-color;
|
|
//$pagination-hover-bg: $dropdown-link-hover-bg;
|
|
$pagination-hover-border: #dddddd;
|
|
|
|
$pagination-active-color: #ffffff;
|
|
$pagination-active-bg: $primary;
|
|
$pagination-active-border: $primary;
|
|
|
|
$pagination-disabled-color: $gray-800;
|
|
$pagination-disabled-bg: #ffffff;
|
|
$pagination-disabled-border: #dddddd;
|
|
|
|
// Jumbotron
|
|
$jumbotron-padding:30px;
|
|
$jumbotron-color:inherit;
|
|
$jumbotron-bg:lighten($body-bg,10%);
|
|
$jumbotron-heading-color:inherit;
|
|
|
|
// Cards
|
|
$card-bg: transparent;
|
|
//$card-inner-border: #900;
|
|
//$card-footer-bg:darken(#5e0000,10%);
|
|
//$card-border-color: #333333;
|
|
|
|
|
|
// Tooltips
|
|
$tooltip-color: #ffffff;
|
|
$tooltip-bg: #000000;
|
|
$tooltip-opacity:.9;
|
|
$tooltip-arrow-color: $tooltip-bg;
|
|
|
|
// Popovers
|
|
$popover-bg: #ffffff;
|
|
$popover-border-color:rgba(0,0,0,.2);
|
|
$popover-header-bg:darken($popover-bg,3%);
|
|
$popover-arrow-color: $popover-bg;
|
|
|
|
// Badges
|
|
$badge-color: #ffffff;
|
|
$badge-link-hover-color: #ffffff;
|
|
$badge-bg: $gray-300;
|
|
$badge-active-color: $link-color;
|
|
$badge-active-bg: #ffffff;
|
|
|
|
// Modals
|
|
$modal-content-bg: $body-bg;
|
|
$modal-content-border-color:rgba(0,0,0,.2);
|
|
$modal-backdrop-bg:darken(#d9534f,30%);
|
|
$modal-header-border-color: #e5e5e5;
|
|
$modal-footer-border-color: $modal-header-border-color;
|
|
|
|
// Alerts
|
|
// Progress bars
|
|
|
|
// List group
|
|
$list-group-color: $body-color;
|
|
$list-group-bg: $body-bg;
|
|
$list-group-disabled-color: darken($body-color, 10%);
|
|
$list-group-disabled-bg: lighten($body-bg, 6%);
|
|
$list-group-disabled-text-color: $list-group-disabled-color;
|
|
$list-group-link-color: $body-color;
|
|
$list-group-link-hover-color: $list-group-link-color;
|
|
$list-group-link-heading-color: $body-color;
|
|
|
|
// Image thumbnails
|
|
$thumbnail-bg: $body-bg;
|
|
$thumbnail-border: #dddddd;
|
|
$thumbnail-caption-color: $body-color;
|
|
|
|
// Figures
|
|
|
|
// scss-docs-start figure-variables
|
|
//$figure-caption-font-size: $small-font-size;
|
|
$figure-caption-color: darken($body-color, 5%);
|
|
// scss-docs-end figure-variables
|
|
|
|
|
|
// Breadcrumbs
|
|
$breadcrumb-bg: $gray-900;
|
|
$breadcrumb-color: $gray-300;
|
|
$breadcrumb-active-color: $gray-500;
|
|
|
|
// Carousel
|
|
$carousel-text-shadow: 1px 2px rgba(0,0,0,.6);
|
|
$carousel-control-color: #ffffff;
|
|
$carousel-indicator-active-bg: #ffffff;
|
|
$carousel-indicator-border-color: #ffffff;
|
|
$carousel-caption-color: #ffffff;
|
|
|
|
// Close
|
|
$close-font-weight:bold;
|
|
$close-color: #000000;
|
|
$close-text-shadow:01px0#ffffff;
|
|
|
|
// Code
|
|
$code-color: #c7254e;
|
|
$code-bg: #f9f2f4;
|
|
$kbd-color: #ffffff;
|
|
$kbd-bg: #333333;
|
|
$pre-bg: #f5f5f5;
|
|
$pre-color: $gray-800;
|
|
$pre-border-color: #cccccc;
|
|
|
|
// ==Pills
|
|
$pills-active-link-hover-bg: $component-active-bg;
|
|
$nav-pills-active-link-hover-color: $component-active-color;
|
|
|
|
$text-muted: #949494;
|
|
$abbr-border-color: $gray-200;
|
|
$headings-small-color: $gray-200;
|
|
$blockquote-small-color: #969696;
|
|
|
|
$blockquote-border-color: #969696;
|
|
$page-header-border-color: #969696;
|
|
|
|
$hr-border: $gray-500;
|
|
|
|
// - - - - - - - - - - - - - - - - Other variables, if any - - - - - - - - - - - - - - - - - //
|
|
|
|
$card-header-bg: #5e0000;
|
|
$card-text: #f4f4f4;
|
|
$blockquote-color: #9E9E9E;
|
|
|