You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
233 lines
5.7 KiB
SCSS
233 lines
5.7 KiB
SCSS
/*
|
|
* Customizable variables
|
|
* Update these variable to create theme
|
|
*/
|
|
|
|
/*
|
|
* Colors
|
|
*/
|
|
|
|
$background: #eff6f5;
|
|
$primary: #4f8580;
|
|
$primary-ultralight: #cceae4;
|
|
$secondary: #7fb1dc;
|
|
$tertiary: #44b78b;
|
|
$background-sidebar: #2e5955;
|
|
$background-sidebar-contrast: #254d49;
|
|
|
|
$warning: #f0dada;
|
|
$warning-text: #bd5757;
|
|
$info: #e8e8bd;
|
|
$info-text: #61613a;
|
|
$success: #e0eec5;
|
|
$success-text: #61782b;
|
|
$error: #c14747;
|
|
$boolean-yes: #bcd386;
|
|
$boolean-no: #dba4a4;
|
|
|
|
$color1: #e5e2a5;
|
|
$color2: #BADCD4;
|
|
$color3: #3c706b;
|
|
$color4: #6f7e95;
|
|
$color5: #f5f3f4;
|
|
$color6: #fffcc0;
|
|
$color7: #bbddd9;
|
|
$color8: #6aa6a1;
|
|
$color9: #f5fdfa;
|
|
$white: #fff;
|
|
$black: #000;
|
|
|
|
/*
|
|
* General
|
|
*/
|
|
|
|
$background-color: $background;
|
|
$text-color: $primary;
|
|
$dim-text-color: $primary;
|
|
$error-text-color: $error;
|
|
|
|
$link-color: $secondary;
|
|
$hover-link-color: $tertiary;
|
|
|
|
$font: Arial, sans-serif;
|
|
$font-size: 14px;
|
|
|
|
/*
|
|
* Sidebar
|
|
*/
|
|
|
|
$sidebar-width: 250px;
|
|
|
|
$sidebar-background-color: $background-sidebar;
|
|
$sidebar-contrast-background-color: $background-sidebar-contrast;
|
|
$sidebar-contrast-text-color: $primary;
|
|
|
|
$sidebar-arrow-color: $secondary;
|
|
$sidebar-hover-arrow-color: $secondary;
|
|
|
|
$sidebar-action-color: $tertiary;
|
|
$sidebar-hover-action-color: $secondary;
|
|
|
|
$sidebar-title-action-color: $tertiary;
|
|
$sidebar-hover-title-action-item-color: $secondary;
|
|
|
|
$sidebar-text-color: $primary;
|
|
$sidebar-icon-color: $primary;
|
|
$sidebar-link-color: $color7;
|
|
$sidebar-hover-link-color: $white;
|
|
$sidebar-hover-background-color: $background-sidebar-contrast;
|
|
|
|
$sidebar-popup-search-input-background-color: $primary-ultralight;
|
|
$sidebar-popup-search-input-text-color: $primary;
|
|
$sidebar-popup-search-input-placeholder-color: transparentize($color4, 0.5);
|
|
|
|
$sidebar-popup-background-color: $background;
|
|
$sidebar-popup-text-color: $primary;
|
|
$sidebar-popup-overlay-color: $black;
|
|
|
|
$sidebar-popup-link-text-color: $primary;
|
|
$sidebar-popup-hover-link-color: $white;
|
|
$sidebar-popup-hover-link-background-color: $secondary;
|
|
|
|
/*
|
|
* Top
|
|
*/
|
|
|
|
$top-height: 32px;
|
|
|
|
$top-text-color: $primary;
|
|
$top-separator-color: $color2;
|
|
$top-link-color: $color2;
|
|
$top-hover-link-color: $secondary;
|
|
$top-border-color: $color2;
|
|
$top-icon-color: $tertiary;
|
|
|
|
$top-dropdown-background-color: $primary;
|
|
$top-dropdown-text-color: $background;
|
|
$top-dropdown-contrast-background-color: $color3;
|
|
$top-dropdown-contrast-text-color: $color7;
|
|
$top-dropdown-border-color: $color8;
|
|
$top-dropdown-link-color: $background;
|
|
$top-dropdown-hover-link-color: $background;
|
|
$top-dropdown-icon-color: $background;
|
|
$top-dropdown-selected-color: $color1;
|
|
|
|
/*
|
|
* Content
|
|
*/
|
|
|
|
$content-background-color: $white;
|
|
$content-contrast-background-color: $color9; //inline list bg
|
|
$content-contrast2-background-color: $color3; //table header
|
|
$content-contrast3-background-color: $primary-ultralight; //delete collapsable
|
|
$content-selected-background-color: $color6;
|
|
$content-contrast2-text-color: $white;
|
|
$content-border-color: $color5; //row bottom
|
|
$content-border2-color: $primary-ultralight; //table bottom
|
|
$content-selected-border-color: $color1;
|
|
|
|
$tab-selected-border-color: $secondary;
|
|
$tab-error-border-color: $error;
|
|
|
|
/*
|
|
* Buttons
|
|
*/
|
|
|
|
$button-background-color: $primary-ultralight;
|
|
$button-hover-background-color: $secondary;
|
|
$button-active-background-color: $primary;
|
|
$button-text-color: $primary;
|
|
$button-hover-text-color: $white;
|
|
$button-active-text-color: $white;
|
|
|
|
$primary-button-background-color: $tertiary;
|
|
$primary-button-text-color: $white;
|
|
|
|
$danger-button-background-color: $error;
|
|
$danger-button-text-color: $white;
|
|
|
|
$background-button-background-color: $white;
|
|
$background-button-text-color: $primary;
|
|
|
|
/*
|
|
* Inputs
|
|
*/
|
|
|
|
$input-background-color: $white;
|
|
$input-contrast-background-color: $primary-ultralight;
|
|
$input-border-color: $background;
|
|
$input-hover-background-color: $secondary;
|
|
$input-icon-color: $tertiary;
|
|
$input-text-color: $primary;
|
|
$input-contrast-text-color: $primary;
|
|
$input-hover-text-color: $white;
|
|
$input-selected-text-color: $tertiary;
|
|
$input-disabled-text-color: $primary-ultralight;
|
|
$input-placeholder-color: $primary-ultralight;
|
|
$input-shadow-color: transparentize($tertiary, 0.25);
|
|
|
|
$background-input-background-color: $white;
|
|
$background-input-border-color: $white;
|
|
$background-input-text-color: $primary;
|
|
|
|
/*
|
|
* Messages
|
|
*/
|
|
|
|
$warning-color: $warning;
|
|
$warning-text-color: $warning-text;
|
|
$info-color: $info;
|
|
$info-text-color: $info-text;
|
|
$success-color: $success;
|
|
$success-text-color: $success-text;
|
|
|
|
/*
|
|
* Login
|
|
*/
|
|
|
|
$login-background-color: $background-sidebar;
|
|
$login-title-text-color: $primary;
|
|
$login-title-contrast-text-color: $white;
|
|
$login-header-background-color: $color3;
|
|
$login-header-text-color: $white;
|
|
$login-content-background-color: $white;
|
|
|
|
/*
|
|
* jQuery UI
|
|
*/
|
|
|
|
$jquery-ui-buttonpane-background: $background;
|
|
|
|
$jquery-ui-state-default-background-color: $white;
|
|
$jquery-ui-state-default-border-color: $background;
|
|
$jquery-ui-state-default-text-color: $primary;
|
|
|
|
$jquery-ui-state-hover-background-color: $secondary;
|
|
$jquery-ui-state-hover-border-color: $secondary;
|
|
$jquery-ui-state-hover-text-color: $white;
|
|
|
|
$jquery-ui-state-active-background-color: $tertiary;
|
|
$jquery-ui-state-active-border-color: $tertiary;
|
|
$jquery-ui-state-active-text-color: $white;
|
|
|
|
$jquery-ui-state-highlight-background-color: $white;
|
|
$jquery-ui-state-highlight-border-color: $secondary;
|
|
$jquery-ui-state-highlight-text-color: $secondary;
|
|
|
|
$jquery-ui-overlay-color: $black;
|
|
|
|
$jquery-ui-tooltip-background-color: $black;
|
|
$jquery-ui-tooltip-text-color: $white;
|
|
|
|
/*
|
|
* Charts
|
|
*/
|
|
|
|
$chart-fillColor: transparentize($hover-link-color, 0.75);
|
|
$chart-strokeColor: $hover-link-color;
|
|
$chart-pointColor: $content-contrast2-text-color;
|
|
$chart-pointHighlightFill: $hover-link-color;
|
|
$chart-scaleGridLineColor: transparentize($black, 0.9);
|
|
$chart-scaleLineColor: transparentize($black, 0.9);
|
|
$chart-scaleFontColor: $content-contrast2-text-color;
|