mirror of
https://github.com/Coffeedon/Cofffee-Assets.git
synced 2024-09-27 13:49:58 +00:00
134 lines
5.2 KiB
SCSS
134 lines
5.2 KiB
SCSS
|
@charset "UTF-8";
|
||
|
|
||
|
|
||
|
// Base color
|
||
|
$primary-color: #2b90d9;
|
||
|
$secondary-color: #2b90d9;
|
||
|
$error-color: #B00020;
|
||
|
$verified-color: #4caf50;
|
||
|
|
||
|
// Text color
|
||
|
$primary-text-color: #000000;
|
||
|
$secondary-text-color: #5f6368;
|
||
|
$ui-text-color: #202124;
|
||
|
$section-text-color: $primary-color;
|
||
|
$info-text-color: #5e5e5e;
|
||
|
$tips-text-color: #c0c0c0;
|
||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||
|
$link-text-color: #217aba;
|
||
|
$menu-text-color: $ui-text-color;
|
||
|
$top-bar-text-color: $ui-text-color;
|
||
|
$search-bar-text-color: $primary-text-color;
|
||
|
$contained-button-text-color: #ffffff;
|
||
|
|
||
|
// Background-color
|
||
|
$background-color: #eff3f5;
|
||
|
$menu-background-color: $background-color;
|
||
|
$menu-background-hover-color: darken($background-color, 6%);
|
||
|
$menu-background-active-color: darken($background-color, 10%);
|
||
|
$menu-background-active-hover-color: darken($background-color, 16%);
|
||
|
$card-background-color: #ffffff;
|
||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||
|
$list-background-color: #ffffff;
|
||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||
|
$text-field-background-color: $card-background-color;
|
||
|
$verified-background-color: lighten($verified-color, 20%);
|
||
|
|
||
|
// Chip color
|
||
|
$contained-chip-color: #e0e0e0;
|
||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||
|
$outlined-chip-color: #ffffff;
|
||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||
|
|
||
|
// Relationship tag color
|
||
|
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||
|
|
||
|
// Badge color
|
||
|
$badge-color: $primary-color;
|
||
|
//$badge-color: $secondary-color;
|
||
|
|
||
|
// Icon color
|
||
|
$icon-color: #282c37;
|
||
|
$icon-hover-color: darken($icon-color, 30%);
|
||
|
$icon-background-hover-color: darken($background-color, 4%);
|
||
|
$icon-background-active-color: darken($background-color, 8%);
|
||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||
|
$top-bar-icon-color: $icon-color;
|
||
|
$top-bar-icon-hover-color: $icon-hover-color;
|
||
|
$top-bar-icon-active-color: $icon-hover-color;
|
||
|
$top-bar-unread-icon-color: $secondary-color;
|
||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||
|
$media-icon-background-hover-color: transparentize(#000000, 0.8);
|
||
|
$control-border-color: $icon-color;
|
||
|
|
||
|
// Button color
|
||
|
$icon-button-color: $icon-color;
|
||
|
$icon-button-hover-color: $icon-hover-color;
|
||
|
$icon-button-active-color: $primary-color;
|
||
|
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
||
|
$contained-button-color: $primary-color;
|
||
|
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||
|
$outlined-button-color: $primary-color;
|
||
|
$outlined-button-hover-color: lighten($primary-color, 36%);
|
||
|
$outlined-button-active-color: lighten($primary-color, 30%);
|
||
|
$text-button-color: $primary-color;
|
||
|
$text-button-hover-color: lighten($text-button-color, 36%);
|
||
|
$text-button-focus-color: lighten($text-button-color, 30%);
|
||
|
$floating-action-button-color: $primary-color;
|
||
|
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||
|
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||
|
$floating-action-button-icon-color: #ffffff;
|
||
|
|
||
|
// Toggle color
|
||
|
$toggle-thumb-color: #ffffff;
|
||
|
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||
|
$toggle-thumb-active-color: $primary-color;
|
||
|
$toggle-track-active-color: lighten($primary-color, 26%);
|
||
|
|
||
|
// Border color
|
||
|
$border-color: #dadce0;
|
||
|
$border-active-color: darken($border-color, 30%);
|
||
|
|
||
|
// Scroll bar color
|
||
|
$scroll-bar-thumb-color: #ccd7e0;
|
||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||
|
|
||
|
// App bar color
|
||
|
$top-bar-color: #ffffff;
|
||
|
$search-bar-color: #d9e1e8;
|
||
|
$search-bar-focus-color: $background-color;
|
||
|
|
||
|
// Tab color
|
||
|
$tab-indicator-color: #282c37;
|
||
|
$tab-indicator-active-color: $top-bar-icon-color;
|
||
|
$tab-background-color: #e6ebf0;
|
||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||
|
$text-tab-indicator-color: $tab-indicator-color;
|
||
|
$text-tab-indicator-active-color: $tab-indicator-active-color;
|
||
|
$text-tab-background-color: $tab-background-color;
|
||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||
|
|
||
|
// Media indicator color
|
||
|
$media-page-indicator-color: #9e9e9e;
|
||
|
$media-page-indicator-active-color: #e6e6e6;
|
||
|
|
||
|
// Poll chart color
|
||
|
$poll-bar-leading-color: $primary-color;
|
||
|
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
|
||
|
|
||
|
// Contents color in read status
|
||
|
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||
|
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||
|
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||
|
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
|
||
|
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
|