aleka
91ea68dc53
* add chaos lab incentives panel * add seen state * external link dialog * better disconnected state
181 lines
4.7 KiB
CSS
181 lines
4.7 KiB
CSS
:root {
|
|
/* Parameters */
|
|
|
|
/*
|
|
--layer-base-hue
|
|
--layer-base-saturation
|
|
--layer-base-lightness
|
|
|
|
--color-text-0
|
|
--color-text-1
|
|
--color-text-2
|
|
|
|
--color-accent
|
|
--color-positive
|
|
--color-negative
|
|
--color-success
|
|
--color-warning
|
|
--color-error
|
|
--color-favorite
|
|
*/
|
|
|
|
/* Computed: Layers */
|
|
|
|
--color-layer-0: hsl(
|
|
var(--layer-base-hue),
|
|
var(--layer-base-saturation),
|
|
calc(var(--layer-base-lightness) - 12%)
|
|
);
|
|
|
|
--color-layer-1: hsl(
|
|
var(--layer-base-hue),
|
|
var(--layer-base-saturation),
|
|
calc(var(--layer-base-lightness) - 8%)
|
|
);
|
|
|
|
--color-layer-2: hsl(
|
|
var(--layer-base-hue),
|
|
var(--layer-base-saturation),
|
|
calc(var(--layer-base-lightness) - 4%)
|
|
);
|
|
|
|
--color-layer-3: hsl(
|
|
var(--layer-base-hue),
|
|
var(--layer-base-saturation),
|
|
var(--layer-base-lightness)
|
|
);
|
|
|
|
--color-layer-4: hsl(
|
|
var(--layer-base-hue),
|
|
var(--layer-base-saturation),
|
|
calc(var(--layer-base-lightness) + 4%)
|
|
);
|
|
|
|
--color-layer-5: hsl(
|
|
var(--layer-base-hue),
|
|
calc(var(--layer-base-saturation) - 2%),
|
|
calc(var(--layer-base-lightness) + 7%)
|
|
);
|
|
|
|
--color-layer-6: hsl(
|
|
var(--layer-base-hue),
|
|
calc(var(--layer-base-saturation) - 4%),
|
|
calc(var(--layer-base-lightness) + 10%)
|
|
);
|
|
|
|
--color-layer-7: hsla(var(--layer-base-hue), 0%, 100%, 0.07);
|
|
|
|
--color-gradient-base-0: hsl(
|
|
var(--layer-base-hue),
|
|
calc(var(--layer-base-saturation) - 5%),
|
|
var(--layer-base-lightness)
|
|
);
|
|
|
|
--color-gradient-base-1: hsl(
|
|
var(--layer-base-hue),
|
|
calc(var(--layer-base-saturation) - 1%),
|
|
calc(var(--layer-base-lightness) + 7%)
|
|
);
|
|
|
|
/* Computed: Borders */
|
|
|
|
--color-border: var(--color-layer-5);
|
|
--color-border-white: hsla(0, 0%, 100%, 0.2);
|
|
--color-border-red: hsla(360, 73%, 61%, 0.2);
|
|
}
|
|
|
|
/* Theme: Classic (default) */
|
|
:root {
|
|
/* Constants */
|
|
|
|
--theme-classic-hue-purple: 240;
|
|
--theme-classic-color-green: hsl(159, 67%, 39%);
|
|
--theme-classic-color-yellow: hsl(36, 100%, 64%);
|
|
--theme-classic-color-red: hsl(360, 73%, 61%);
|
|
|
|
/* Parameters */
|
|
|
|
--layer-base-hue: var(--theme-classic-hue-purple);
|
|
--layer-base-saturation: 20%;
|
|
--layer-base-lightness: 16%;
|
|
|
|
--color-text-0: hsl(245, 11%, 55%);
|
|
--color-text-1: hsl(244, 18%, 81%);
|
|
--color-text-2: hsl(240, 43%, 99%);
|
|
|
|
--color-accent: hsl(var(--theme-classic-hue-purple), 100%, 70%);
|
|
--color-positive: var(--theme-classic-color-green);
|
|
--color-negative: var(--theme-classic-color-red);
|
|
--color-success: var(--theme-classic-color-green);
|
|
--color-warning: var(--theme-classic-color-yellow);
|
|
--color-error: var(--theme-classic-color-red);
|
|
--color-favorite: var(--theme-classic-color-yellow);
|
|
|
|
--color-white: #fff;
|
|
--color-black: #000;
|
|
|
|
--color-gradient-positive: hsla(158, 49%, 48%, 0.16);
|
|
--color-gradient-negative: hsla(0, 100%, 66%, 0.16);
|
|
--color-accent-faded: hsla(var(--theme-classic-hue-purple), 100%, 70%, 0.16);
|
|
|
|
--color-risk-low: var(--theme-classic-color-green);
|
|
--color-risk-medium: var(--theme-classic-color-yellow);
|
|
--color-risk-high: var(--theme-classic-color-red);
|
|
}
|
|
|
|
/* Theme: Light */
|
|
:root.theme-light {
|
|
/* Constants */
|
|
|
|
--theme-light-hue-purple: 234;
|
|
--theme-light-color-green: hsl(159, 67%, 39%);
|
|
--theme-light-color-yellow: hsl(36, 100%, 64%);
|
|
--theme-light-color-red: hsl(360, 73%, 61%);
|
|
|
|
/* Parameters */
|
|
|
|
--layer-base-hue: var(--theme-light-hue-purple);
|
|
--layer-base-saturation: 0%;
|
|
--layer-base-lightness: 86%;
|
|
|
|
--color-text-0: hsl(0, 0%, 55%);
|
|
--color-text-1: hsl(0, 0%, 40%);
|
|
--color-text-2: hsl(0, 0%, 5%);
|
|
|
|
--color-accent: hsl(var(--theme-light-hue-purple), 100%, 70%);
|
|
--color-positive: var(--theme-light-color-green);
|
|
--color-negative: var(--theme-light-color-red);
|
|
--color-success: var(--theme-light-color-green);
|
|
--color-warning: var(--theme-light-color-yellow);
|
|
--color-error: var(--theme-light-color-red);
|
|
--color-favorite: var(--theme-light-color-yellow);
|
|
}
|
|
|
|
/* Theme: Dark */
|
|
:root.theme-dark {
|
|
/* Constants */
|
|
|
|
--theme-dark-hue-purple: 240;
|
|
--theme-dark-color-green: hsl(159, 67%, 39%);
|
|
--theme-dark-color-yellow: hsl(36, 100%, 64%);
|
|
--theme-dark-color-red: hsl(360, 73%, 61%);
|
|
|
|
/* Parameters */
|
|
|
|
--layer-base-hue: 0;
|
|
--layer-base-saturation: 0%;
|
|
--layer-base-lightness: 16%;
|
|
|
|
--color-text-0: hsl(0, 0%, 47%);
|
|
--color-text-1: hsl(0, 0%, 67%);
|
|
--color-text-2: hsl(0, 0%, 100%);
|
|
|
|
--color-accent: hsl(var(--theme-dark-hue-purple), 100%, 70%);
|
|
--color-positive: var(--theme-dark-color-green);
|
|
--color-negative: var(--theme-dark-color-red);
|
|
--color-success: var(--theme-dark-color-green);
|
|
--color-warning: var(--theme-dark-color-yellow);
|
|
--color-error: var(--theme-dark-color-red);
|
|
--color-favorite: var(--theme-dark-color-yellow);
|
|
}
|