127 lines
6.1 KiB
SCSS
127 lines
6.1 KiB
SCSS
// Color Variables
|
|
:root {
|
|
--color-primary: #FF6765;
|
|
--color-secondary: #46271B;
|
|
--color-complementary: #5BB4CE;
|
|
--color-complementary-darken: #35A0C0;
|
|
|
|
--color-white: hsl(0, 0%, 100%);
|
|
|
|
--color-black-h: 16;
|
|
--color-black-s: 45%;
|
|
--color-black-l: 6%;
|
|
--color-black: hsl(var(--color-black-h), var(--color-black-s), var(--color-black-l)); /* 180D09 */
|
|
|
|
/* Fifty shades of greys */
|
|
--color-grey-1: hsl(calc(var(--color-black-h) + 200), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 16%)); /*hsl(216, 4%, 22%); #36383B */
|
|
--color-grey-2: hsl(calc(var(--color-black-h) + 217), calc(var(--color-black-s) - 27%), calc(var(--color-black-l) + 23%)); /*hsl(233, 18%, 29%); #3C3F57 */
|
|
--color-grey-3: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 45%), calc(var(--color-black-l) + 23%)); /*hsl(0, 0%, 29%); #4A4A4A */
|
|
--color-grey-4: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 43%), calc(var(--color-black-l) + 43%)); /*hsl(0, 2%, 49%); #807A7A */
|
|
--color-grey-5: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 44%)); /*hsl(213, 4%, 50%); #7A7F85 */
|
|
--color-grey-6: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 57%)); /*hsl(0, 4%, 63%); #A59D9D */
|
|
--color-grey-7: hsl(calc(var(--color-black-h) + 228), calc(var(--color-black-s) + 35%), calc(var(--color-black-l) + 64%)); /*hsl(244, 10%, 70%); #ABAABA */
|
|
--color-grey-8: hsl(calc(var(--color-black-h) + 212), calc(var(--color-black-s) - 20%), calc(var(--color-black-l) + 73%)); /*hsl(228, 25%, 79%); #BDC2D7 */
|
|
--color-grey-9: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 36%), calc(var(--color-black-l) + 76%)); /*hsl(0, 9%, 82%); #D6CECE */
|
|
--color-grey-10: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 42%), calc(var(--color-black-l) + 87%)); /*hsl(0, 3%, 93%); #EEEDED */
|
|
--color-grey-11: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 32%), calc(var(--color-black-l) + 80%)); /*hsl(213, 13%, 86%); #D7DBE0 */
|
|
--color-grey-12: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 25%), calc(var(--color-black-l) + 85%)); /*hsl(213, 20%, 91%); #E4E8ED */
|
|
--color-grey-13: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 45%), calc(var(--color-black-l) + 90%)); /*hsl(0, 0%, 96%); #F4F4F4 */
|
|
|
|
|
|
/* CUSTOM COLORS FOR CLIENT */
|
|
--color-main-background: var(--color-grey-13);
|
|
--color-main-text: var(--color-grey-4);
|
|
--color-highlight-primary: var(--color-primary);
|
|
--color-user-panel: var(--color-black);
|
|
--color-bell: var(--color-secondary);
|
|
--color-avatar-background: var(--color-grey-10);
|
|
--color-title: var(--color-secondary);
|
|
--color-h1: var(--color-secondary);
|
|
--color-h2: var(--color-secondary);
|
|
|
|
/* Header's elements */
|
|
--color-header-background: var(--color-white);
|
|
--color-bell: var(--color-secondary);
|
|
--color-user-panel-header-text: var(--color-secondary);
|
|
--color-user-panel-header-background: var(--color-white);
|
|
--color-user-panel-header-text-open: var(--color-white);
|
|
--color-user-panel-header-background-open: var(--color-secondary);
|
|
--color-user-panel-list-background: var(--color-white);
|
|
--color-user-panel-list-text-hover: var(--color-primary);
|
|
--color-user-panel-list-border: var(--color-grey-12);
|
|
|
|
/* Left menu */
|
|
--color-menu-highlight-primary: var(--color-highlight-primary);
|
|
--color-menu-background: var(--color-secondary);
|
|
--color-menu-text: var(--color-white);
|
|
--color-menu-text-active: var(--color-white);
|
|
--color-menu-background-active: var(--color-menu-highlight-primary);
|
|
--color-menu-badge-background: var(--color-secondary);
|
|
--color-menu-badge-text-active: var(--color-menu-text-active);
|
|
--color-menu-badge-background-active: var(--color-complementary);
|
|
--color-menu-icon-background-active: var(--color-secondary);
|
|
|
|
/* Right menu */
|
|
--color-right-menu-background: var(--color-grey-10);
|
|
--color-right-menu-text: var(--color-secondary);
|
|
--color-right-menu-link-border: var(--color-grey-9);
|
|
--color-right-menu-active-text: var(--color-white);
|
|
--color-right-menu-active-background: var(--color-secondary);
|
|
--color-right-menu-active-icon: var(--color-white);
|
|
|
|
/* Scrollbar */
|
|
--color-scrollbar-right-background: var(--color-white);
|
|
--color-scrollbar-right-track: var(--color-grey-9);
|
|
--color-scrollbar-left-background: var(--color-secondary);
|
|
--color-scrollbar-left-track: var(--color-grey-11);
|
|
|
|
/* tags */
|
|
--color-tag-admin-text: var(--color-complementary);
|
|
--color-tag-admin-border: var(--color-complementary);
|
|
--color-tag-group-text: var(--color-primary);
|
|
--color-tag-group-border: var(--color-primary);
|
|
|
|
/* Form elements */
|
|
--color-button-white: var(--color-white);
|
|
--color-button-primary: var(--color-primary);
|
|
--color-button-secondary: var(--color-secondary);
|
|
--color-button-complementary: var(--color-complementary);
|
|
|
|
--color-input-background: var(--color-grey-10);
|
|
--color-input-text: var(--color-secondary);
|
|
--color-input-icon: var(--color-secondary);
|
|
--color-input-active: var(--color-secondary);
|
|
--color-fieldset: var(--color-title);
|
|
--color-fieldset-border: var(--color-grey-10);
|
|
--color-button-modal: var(--color-title);
|
|
--color-select-list: var(--color-secondary);
|
|
--color-select-add-button: var(--color-button-secondary);
|
|
--color-select-add-button-background: var(--color-button-white);
|
|
|
|
--color-label-dark: var(--color-secondary);
|
|
--color-label-light: var(--color-grey-6);
|
|
|
|
/* skill */
|
|
--color-skill-background: var(--color-primary);
|
|
--color-skill-text: var(--color-white);
|
|
|
|
/* icon */
|
|
--color-icon: var(--color-complementary);
|
|
|
|
/* Table */
|
|
--color-table-header-background: var(--color-grey-6);
|
|
--color-table-header-text: var(--color-white);
|
|
--color-table-border: var(--color-grey-8);
|
|
|
|
/* User thumb */
|
|
--color-user-thumb-name: var(--color-grey-4);
|
|
|
|
--color-backlink: var(--color-secondary);
|
|
--color-content-header: var(--color-grey-9);
|
|
}
|
|
|
|
/* Variables for event */
|
|
$color-212-4-50: hsl(212.7,4.3%,50%);
|
|
$color-0-0-22: hsl(0,0%,22.7%);
|
|
$color-203-87-19: hsl(203, 87.8%, 19.2%);
|
|
$color-357-67-45: hsl(357,67.5%,45.9%); |