330 lines
12 KiB
SCSS
330 lines
12 KiB
SCSS
// Vikunja colors as CSS custom properties
|
|
|
|
:root {
|
|
// Core Bulma color variables
|
|
// Added (from bulma-css-variables/css/bulma.css) to fix issues with undefined variables
|
|
// This section should be removed once bulma/sass scoping issues are fixed
|
|
// see https://kolaente.dev/vikunja/frontend/issues/1064
|
|
// Variables overriden in Vikunja specific rules below are commented out
|
|
//--scheme-main: white;
|
|
--scheme-main-bis: #fafafa;
|
|
--scheme-main-ter: whitesmoke;
|
|
--scheme-invert: #0a0a0a;
|
|
--scheme-invert-rgb: 10.2, 10.2, 10.2;
|
|
--scheme-invert-bis: #121212;
|
|
--scheme-invert-ter: #242424;
|
|
--background: whitesmoke;
|
|
//--border: #dbdbdb;
|
|
--border-rgb: 219.3, 219.3, 219.3;
|
|
--border-hover: #b5b5b5;
|
|
--border-light: #ededed;
|
|
--border-light-hover: #b5b5b5;
|
|
--text: #4a4a4a;
|
|
--text-invert: #fff;
|
|
--text-light: #7a7a7a;
|
|
--text-strong: #363636;
|
|
--code: #da1039;
|
|
--code-background: var(--background, whitesmoke);
|
|
--pre: var(--text, #4a4a4a);
|
|
--pre-background: var(--background, whitesmoke);
|
|
--link-visited: #b86bff;
|
|
//--link-hover: #363636;
|
|
--link-hover-border: #b5b5b5;
|
|
--link-focus: #363636;
|
|
--link-focus-border: var(--link, #485fc7);
|
|
--link-active: #363636;
|
|
--link-active-border: #4a4a4a;
|
|
//--white-h: 0deg;
|
|
//--white-s: 0%;
|
|
//--white-l: 100%;
|
|
//--white-a: 1;
|
|
//--white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
|
|
--white-invert-l: 4%;
|
|
--white-invert: #0a0a0a;
|
|
--white-light-l: 100%;
|
|
--white-light: hsla(var(--white-h), var(--white-s), var(--white-light-l), var(--white-a));
|
|
--white-dark-l: 29%;
|
|
--white-dark: hsla(var(--white-h), var(--white-s), var(--white-dark-l), var(--white-a));
|
|
//--black-h: 0deg;
|
|
//--black-s: 0%;
|
|
//--black-l: 4%;
|
|
//--black-a: 1;
|
|
//--black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
|
|
--black-invert-l: 100%;
|
|
--black-invert: white;
|
|
--black-light-l: 96%;
|
|
--black-light: hsla(var(--black-h), var(--black-s), var(--black-light-l), var(--black-a));
|
|
--black-dark-l: 57%;
|
|
--black-dark: hsla(var(--black-h), var(--black-s), var(--black-dark-l), var(--black-a));
|
|
--light-h: 0deg;
|
|
--light-s: 0%;
|
|
--light-l: 96%;
|
|
--light-a: 1;
|
|
--light: hsla(var(--light-h), var(--light-s), var(--light-l), var(--light-a));
|
|
--light-invert-l: 0%;
|
|
--light-invert: rgba(0, 0, 0, 0.7);
|
|
--light-light-l: 96%;
|
|
--light-light: hsla(var(--light-h), var(--light-s), var(--light-light-l), var(--light-a));
|
|
--light-dark-l: 29%;
|
|
--light-dark: hsla(var(--light-h), var(--light-s), var(--light-dark-l), var(--light-a));
|
|
--dark-h: 0deg;
|
|
--dark-s: 0%;
|
|
--dark-l: 21%;
|
|
--dark-a: 1;
|
|
--dark: hsla(var(--dark-h), var(--dark-s), var(--dark-l), var(--dark-a));
|
|
--dark-invert-l: 100%;
|
|
--dark-invert: #fff;
|
|
--dark-light-l: 96%;
|
|
--dark-light: hsla(var(--dark-h), var(--dark-s), var(--dark-light-l), var(--dark-a));
|
|
--dark-dark-l: 54%;
|
|
--dark-dark: hsla(var(--dark-h), var(--dark-s), var(--dark-dark-l), var(--dark-a));
|
|
//--primary-h: 171deg;
|
|
//--primary-s: 100%;
|
|
//--primary-l: 41%;
|
|
//--primary-a: 1;
|
|
//--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
|
--primary-invert-l: 100%;
|
|
--primary-invert: #fff;
|
|
--primary-light-l: 96%;
|
|
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
|
|
--primary-dark-l: 29%;
|
|
--primary-dark: hsla(var(--primary-h), var(--primary-s), var(--primary-dark-l), var(--primary-a));
|
|
--link-h: 229deg;
|
|
--link-s: 53%;
|
|
--link-l: 53%;
|
|
--link-a: 1;
|
|
//--link: hsla(var(--link-h), var(--link-s), var(--link-l), var(--link-a));
|
|
--link-invert-l: 100%;
|
|
--link-invert: #fff;
|
|
--link-light-l: 96%;
|
|
--link-light: hsla(var(--link-h), var(--link-s), var(--link-light-l), var(--link-a));
|
|
--link-dark-l: 47%;
|
|
--link-dark: hsla(var(--link-h), var(--link-s), var(--link-dark-l), var(--link-a));
|
|
--info-h: 207deg;
|
|
--info-s: 61%;
|
|
--info-l: 53%;
|
|
--info-a: 1;
|
|
--info: hsla(var(--info-h), var(--info-s), var(--info-l), var(--info-a));
|
|
--info-invert-l: 100%;
|
|
--info-invert: #fff;
|
|
--info-light-l: 96%;
|
|
--info-light: hsla(var(--info-h), var(--info-s), var(--info-light-l), var(--info-a));
|
|
--info-dark-l: 41%;
|
|
--info-dark: hsla(var(--info-h), var(--info-s), var(--info-dark-l), var(--info-a));
|
|
//--success-h: 153deg;
|
|
//--success-s: 53%;
|
|
//--success-l: 53%;
|
|
//--success-a: 1;
|
|
//--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
|
--success-invert-l: 100%;
|
|
--success-invert: #fff;
|
|
--success-light-l: 96%;
|
|
--success-light: hsla(var(--success-h), var(--success-s), var(--success-light-l), var(--success-a));
|
|
--success-dark-l: 31%;
|
|
--success-dark: hsla(var(--success-h), var(--success-s), var(--success-dark-l), var(--success-a));
|
|
//--warning-h: 44deg;
|
|
//--warning-s: 100%;
|
|
//--warning-l: 77%;
|
|
//--warning-a: 1;
|
|
//--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
|
--warning-invert-l: 0%;
|
|
--warning-invert: rgba(0, 0, 0, 0.7);
|
|
--warning-light-l: 96%;
|
|
--warning-light: hsla(var(--warning-h), var(--warning-s), var(--warning-light-l), var(--warning-a));
|
|
--warning-dark-l: 29%;
|
|
--warning-dark: hsla(var(--warning-h), var(--warning-s), var(--warning-dark-l), var(--warning-a));
|
|
//--danger-h: 348deg;
|
|
//--danger-s: 86%;
|
|
//--danger-l: 61%;
|
|
//--danger-a: 1;
|
|
//--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
|
--danger-invert-l: 100%;
|
|
--danger-invert: #fff;
|
|
--danger-light-l: 96%;
|
|
--danger-light: hsla(var(--danger-h), var(--danger-s), var(--danger-light-l), var(--danger-a));
|
|
--danger-dark-l: 43%;
|
|
--danger-dark: hsla(var(--danger-h), var(--danger-s), var(--danger-dark-l), var(--danger-a));
|
|
--input-color: var(--text-strong, #363636);
|
|
--input-background-color: var(--scheme-main, white);
|
|
//--input-border-color: var(--border, #dbdbdb);
|
|
--input-shadow: inset 0 0.0625em 0.125em rgba(var(--scheme-invert-rgb, 10.2, 10.2, 10.2), 0.05);
|
|
--input-placeholder-color: rgba(54, 54, 54, 0.3);
|
|
--input-hover-color: var(--text-strong, #363636);
|
|
--input-hover-border-color: var(--border-hover, #b5b5b5);
|
|
--input-focus-color: var(--text-strong, #363636);
|
|
--input-focus-border-color: var(--link, #485fc7);
|
|
--input-focus-box-shadow-color: var(--input-focus-box-shadow-color-hsla, rgba(72, 95, 199, 0.25));
|
|
--input-disabled-color: var(--text-light, #7a7a7a);
|
|
//--input-disabled-background-color: var(--background, whitesmoke);
|
|
//--input-disabled-border-color: var(--background, whitesmoke);
|
|
--input-disabled-placeholder-color: rgba(122, 122, 122, 0.3);
|
|
--input-arrow: var(--link, #485fc7);
|
|
--input-icon-color: var(--border, #dbdbdb);
|
|
--input-icon-active-color: var(--text, #4a4a4a);
|
|
--black-bis: #121212;
|
|
--black-ter: #242424;
|
|
//--grey-darker: #363636;
|
|
//--grey-dark: #4a4a4a;
|
|
//--grey: #7a7a7a;
|
|
//--grey-light: #b5b5b5;
|
|
//--grey-lighter: #dbdbdb;
|
|
--white-ter: whitesmoke;
|
|
--white-bis: #fafafa;
|
|
// END core Bulma color variables
|
|
|
|
|
|
// Vikunja specific variables
|
|
--grey-50: hsl(210, 20%, 98%);
|
|
--grey-100-hsl: 220, 14.3%, 95.9%;
|
|
--grey-100: hsl(var(--grey-100-hsl));
|
|
--grey-200: hsl(220, 13%, 91%);
|
|
--grey-300: hsl(216, 12.2%, 83.9%);
|
|
--grey-400: hsl(217.9, 10.6%, 64.9%);
|
|
--grey-500-hsl: 220, 8.9%, 46.1%;
|
|
--grey-500: hsl(var(--grey-500-hsl));
|
|
--grey-600: hsl(215, 13.8%, 34.1%);
|
|
--grey-700: hsl(216.9, 19.1%, 26.7%);
|
|
--grey-800: hsl(215, 27.9%, 16.9%);
|
|
--grey-900: hsl(220.9, 39.3%, 11%);
|
|
--site-background: var(--grey-100);
|
|
|
|
// Overrides of Bulma defaults
|
|
--scheme-main: var(--white);
|
|
--grey-darker: var(--grey-700);
|
|
--grey-dark: var(--grey-800);
|
|
--grey: var(--grey-500);
|
|
--grey-light: var(--grey-300);
|
|
--grey-lighter: var(--grey-200);
|
|
--grey-lightest: var(--grey-100);
|
|
--input-border-color: var(--grey-200);
|
|
|
|
--white-h: 0deg;
|
|
--white-s: 0%;
|
|
--white-l: 100%;
|
|
--white-a: 1;
|
|
--white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
|
|
--white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75);
|
|
|
|
--black-h: 0deg;
|
|
--black-s: 0%;
|
|
--black-l: 4%;
|
|
--black-a: 1;
|
|
--black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
|
|
|
|
// $warning / $orange: #ff851b
|
|
--warning-h: 27.9deg;
|
|
--warning-s: 100%;
|
|
--warning-l: 55.3%;
|
|
--warning-a: 1;
|
|
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
|
|
|
// $success / $green is #00db60
|
|
--success-h: 146.3deg;
|
|
--success-s: 100%;
|
|
--success-l: 42.9%;
|
|
--success-a: 1;
|
|
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
|
|
|
// $danger / $red is #ff4136
|
|
--danger-h: 3.3deg;
|
|
--danger-s: 100%;
|
|
--danger-l: 60.6%;
|
|
--danger-a: 1;
|
|
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
|
|
|
// var(--primary) / $blue is #1973ff
|
|
--primary-h: 217deg;
|
|
--primary-s: 98%;
|
|
--primary-l: 53%;
|
|
--primary-a: 1;
|
|
--primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
|
|
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
|
|
|
--link: var(--primary);
|
|
--link-hover: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .75);
|
|
--border: var(--grey-200);
|
|
--input-disabled-background-color: var(--grey-100);
|
|
--input-disabled-border-color: var(--grey-300);
|
|
--progress-value-background-color: var(--grey-500);
|
|
// END Overrides of Bulma defaults
|
|
|
|
|
|
// Define custom color variable to prevent change in dark mode
|
|
--switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
|
|
|
|
// Define custom color variable to alow change in dark mode
|
|
--card-border-color: var(--grey-200);
|
|
--logo-text-color: hsl(180, 1%, 15%);
|
|
|
|
// Code colors
|
|
--code-variable: #da2222;
|
|
--code-literal: #fd8a09;
|
|
--code-symbol: #0ead69;
|
|
--code-section: #3a86ff;
|
|
--code-keyword: #8338ec;
|
|
|
|
&.dark {
|
|
@media screen {
|
|
// Light mode colours reversed for dark mode
|
|
--grey-900-hsl: 210, 20%, 98%;
|
|
--grey-900: hsl(var(--grey-900-hsl));
|
|
--grey-800: hsl(220, 14.3%, 95.9%);
|
|
--grey-700: hsl(220, 13%, 91%);
|
|
--grey-600: hsl(216, 12.2%, 83.9%);
|
|
--grey-500-hsl: 217.9, 10.6%, 64.9%;
|
|
--grey-500: hsl(var(--grey-500-hsl));
|
|
--grey-400: hsl(220, 8.9%, 46.1%);
|
|
--grey-300: hsl(215, 13.8%, 34.1%);
|
|
--grey-200: hsl(216.9, 19.1%, 26.7%);
|
|
--grey-100-hsl: 215, 27.9%, 16.9%;
|
|
--grey-100: hsl(var(--grey-100-hsl));
|
|
--grey-50-hsl: 220.9, 39.3%, 11%;
|
|
--grey-50: hsl(var(--grey-50-hsl));
|
|
|
|
// Dark grey looks better than black
|
|
--white: var(--grey-50);
|
|
--black-l: 100%;
|
|
|
|
// Text renders better in grey than black
|
|
--text: var(--grey-800);
|
|
--text-invert: #000;
|
|
--text-light: var(--grey-300);
|
|
--text-strong: var(--grey-900);
|
|
|
|
// Elements that rely on Bulma defaults in light mode but
|
|
// need to be overriden in dark mode
|
|
--input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
|
|
--tag-color: var(--grey-300);
|
|
--table-row-hover-background-color: var(--grey-100);
|
|
--dropdown-item-hover-background-color: var(--grey-100);
|
|
--dropdown-item-hover-color: var(--text);
|
|
--pre-background: var(--grey-200);
|
|
--button-text-hover-background-color: var(--grey-200);
|
|
--button-hover-color: var(--grey-600);
|
|
--button-active-color: var(--grey-600);
|
|
--button-focus-color: var(--grey-600);
|
|
|
|
// Custom color variables we need to override
|
|
--card-border-color: hsla(var(--grey-100-hsl), 0.3);
|
|
--logo-text-color: var(--grey-700);
|
|
|
|
// Slightly different primary color to make sure it has a sufficent contrast ratio
|
|
--primary-h: 217deg;
|
|
--primary-s: 98%;
|
|
--primary-l: 58%;
|
|
|
|
--scheme-main-bis: var(--grey-100);
|
|
--scheme-main-ter: var(--grey-100);
|
|
--scheme-invert: var(--grey-900);
|
|
--scheme-invert-bis: var(--grey-900);
|
|
--scheme-invert-ter: var(--grey-800);
|
|
|
|
// Code colors
|
|
--code-variable: #f98181;
|
|
--code-literal: #fbbc88;
|
|
--code-symbol: #b9f18d;
|
|
--code-section: #faf594;
|
|
--code-keyword: #70cff8;
|
|
}
|
|
}
|
|
} |