// // Components Variables and Settings - Dark // —————————————-
////// Scaffolding ////// $background-color-regular: #262626; // used for transparency calculations
////// Colors ////// $color-bright: fff; $color-dark: #383838;
$color-positive: #6bb32d; $color-warning: dbad39; $color-negative: d90000; $color-brand: e20074; $color-inactive: d0d0d0; $color-function: #0ca1dc; $color-highlight: ff0;
$color-border: #858585; $color-border-bright: #5c5c5c;
$color-element-background: #383838; $color-element-border: #737373; $color-element-divider: #858585;
$font-color-regular: $color-bright; $font-color-light: a3a3a3; $font-color-dark: $color-dark;
$font-color-positive: $color-positive; $font-color-warning: $color-warning; $font-color-negative: $color-negative; $font-color-brand: $color-brand; $font-color-inactive: hsv-lighten($background-color-regular, 10%, true);
$font-color-link: #31c3f7; $font-color-link-hover: hsv-darken($font-color-link, 7%, true); // -7% $font-color-link-active: hsv-darken($font-color-link, 15%, true); // -15% $font-color-link-focus: hsv-darken($font-color-link, 21%, true); // -21%
//////Heading/////
$heading-border-color: $color-element-divider;
////// Mark ////// $marked-font-color: $font-color-dark; $marked-bgr-color: $color-highlight;
////// Quotes ////// $quote-figure-border-left: 1px solid $color-border-bright;
////// Tables //////
$table-row-border-bottom: 1px solid $color-border-bright;
$table-header-border-bottom: 1px solid $color-border; $table-footer-border-top: 1px double $color-border; // double wins over solid from $table-row-border-bottom $table-footer-border-bottom: 1px solid $color-border;
$table-font-color-hover: hsv-darken($font-color-regular, 7%, true);
$table-font-color-positive: hsv-darken($font-color-positive, 10%, true); $table-font-color-warning: hsv-darken($font-color-warning , 10%, true); $table-font-color-negative: hsv-darken($font-color-negative, 10%, true); $table-font-color-brand: $color-bright; $table-font-color-inactive: $font-color-inactive;
$table-bgr-color-hover: hsv-lighten($background-color-regular, 12%, true);
$table-bgr-color-positive: $color-positive; $table-bgr-color-warning: $color-warning; $table-bgr-color-negative: $color-negative; $table-bgr-color-brand: $color-brand; // brand has no fallback $table-bgr-color-inactive: transparent; // inactive has no fallback
$table-bgr-color-alpha: .05; $table-bgr-color-hover-alpha: .2;
$table-gray-odd-bgr-color: hsv-darken($background-color-regular, -5%, true); $table-gray-odd-font-color: $font-color-regular;
////// Forms ////// $input-bgr-color: $color-bright; $input-border-color: $color-bright;
$input-border-color-positive: hsv-darken($color-positive, -15, true); $input-border-color-warning: hsv-darken($color-warning, 0, true); $input-border-color-negative: hsv-darken($color-negative, 0, true);
////// Checkboxes | JS ////// $checkbox-border-color: $color-element-border;
////// Radios | JS ////// $radio-border-color: $color-element-border;
////// Selects | JS ////// $select-font-color: $font-color-regular; $select-font-color-dropdown: $font-color-dark; $select-border-color: $color-element-border; $select-bgr-color: $color-element-background;
$select-disabled-font-color: hsv-darken($select-font-color, 50%, true); $select-disabled-border-color: hsv-darken($select-border-color, 14%, true); $select-disabled-bgr-color: hsv-darken($select-bgr-color, 5%, true);
$select-options-bgr-color: $color-bright; $select-options-active-bgr-color: hsv-darken($select-options-bgr-color, 15%, true);
////// Buttons ////// $button-border-color-positive: hsv-darken($color-positive, 32%, true); $button-border-color-function: hsv-darken($color-function, 32%, true); $button-border-color-negative: hsv-darken($color-negative, 32%, true); $button-border-color-brand: e3bacf; // special color
////// Content-Lists ////// $cl-element-bgr-color-focus: hsv-lighten($background-color-regular, 21%, true); $cl-element-bgr-color-hover: hsv-lighten($background-color-regular, 7%, true); $cl-element-bgr-color-active: hsv-lighten($background-color-regular, 15%, true);
$cl-element-font-color-brand: $color-bright; $cl-element-bgr-color-brand: $color-brand;
////// Pager ////// $pager-text-color: $font-color-regular; $pager-border-color: $color-element-border; $pager-background-color: $background-color-regular;
$pager-disabled-text-color: hsv-darken($pager-text-color, 50%, true); $pager-disabled-border-color: hsv-darken($pager-border-color, 14%, true); $pager-disabled-bgr-color: hsv-lighten($pager-background-color, 5%, true);
////// Breadcrumb ////// $breadcrumb-color: #757575;
////// Pagination //////
$pagination-bgr-color: $color-element-background; $pagination-border-color: $color-element-border;
$pagination-active-bgr-color: $color-brand; $pagination-active-border-color: $pagination-active-bgr-color;
$pagination-disabled-bgr-color: $pagination-bgr-color; $pagination-disabled-border-color: hsv-darken($pagination-border-color, 15%, true);
////// Badges ////// $badges-bgr-color: $color-bright; $badges-bgr-color-positive: $color-positive; $badges-bgr-color-warning: $color-warning; $badges-bgr-color-negative: $color-negative; $badges-bgr-color-function: $color-function; $badges-bgr-color-brand: $color-brand; $badges-bgr-color-dark: $color-element-background; $badges-font-color-normal: $color-dark; $badges-font-color-bright: $font-color-regular;
////// Modal ////// $modal-content-bgr: $color-dark;