// 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%);