mirror of
https://github.com/speatzle/nfsense.git
synced 2025-05-11 02:48:21 +00:00
5a3a0c8f32
- Doubled base color steps to allow dark/light different contrast - Removed unused base color - => Better light mode for eyeball haters
105 lines
4.7 KiB
CSS
105 lines
4.7 KiB
CSS
/* --- YACS --- */
|
|
:root {
|
|
/* Light/Dark-Agnostic Base Tints, defined as HSL */
|
|
--cl-base-1-h: 260; /* Color 0 Base Hue */
|
|
--cl-base-1-s: 50%; /* Color 0 Base Saturation */
|
|
--cl-base-1-l: 100%; /* Color 0 Base Lightness (Only usefull for darkening really) */
|
|
|
|
/* --- Linear Scaling with buffer --- */
|
|
/* Increment per Step, 16 steps - 1 = 15 increments */
|
|
/* Actual color steps */
|
|
--lin-1-buf: 5%; /* Edge-Buffer for lightness spectrum, reduces contrast */
|
|
--lin-1-flux: calc(var(--cl-base-1-l) - var(--lin-1-buf) * 2); /* Variable Lightness Space */
|
|
--lin-1-step: calc(var(--lin-1-flux) / 15);
|
|
--cl-base-1-1: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 0));
|
|
--cl-base-1-2: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 1));
|
|
--cl-base-1-3: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 2));
|
|
--cl-base-1-4: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 3));
|
|
--cl-base-1-5: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 4));
|
|
--cl-base-1-6: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 5));
|
|
--cl-base-1-7: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 6));
|
|
--cl-base-1-8: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 7));
|
|
--cl-base-1-9: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 8));
|
|
--cl-base-1-10: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 9));
|
|
--cl-base-1-11: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 10));
|
|
--cl-base-1-12: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 11));
|
|
--cl-base-1-13: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 12));
|
|
--cl-base-1-14: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 13));
|
|
--cl-base-1-15: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 14));
|
|
--cl-base-1-16: hsl(var(--cl-base-1-h), var(--cl-base-1-s), calc(var(--lin-1-buf) + var(--lin-1-step) * 15));
|
|
|
|
/* Dark mode spectrum */
|
|
--cl-1-1: var(--cl-base-1-1);
|
|
--cl-1-2: var(--cl-base-1-3);
|
|
--cl-1-3: var(--cl-base-1-5);
|
|
--cl-1-4: var(--cl-base-1-7);
|
|
--cl-1-5: var(--cl-base-1-9);
|
|
--cl-1-6: var(--cl-base-1-11);
|
|
--cl-1-7: var(--cl-base-1-13);
|
|
--cl-1-8: var(--cl-base-1-15);
|
|
}
|
|
@media only screen and (prefers-color-scheme: light) {
|
|
:root {
|
|
--cl-1-1: var(--cl-base-1-16);
|
|
--cl-1-2: var(--cl-base-1-15);
|
|
--cl-1-3: var(--cl-base-1-14);
|
|
--cl-1-4: var(--cl-base-1-13);
|
|
--cl-1-5: var(--cl-base-1-12);
|
|
--cl-1-6: var(--cl-base-1-11);
|
|
--cl-1-7: var(--cl-base-1-4);
|
|
--cl-1-8: var(--cl-base-1-2);
|
|
}
|
|
|
|
.cl-force-dark { /* Copied from above */
|
|
--cl-1-1: var(--cl-base-1-2);
|
|
--cl-1-2: var(--cl-base-1-4);
|
|
--cl-1-3: var(--cl-base-1-6);
|
|
--cl-1-4: var(--cl-base-1-8);
|
|
--cl-1-5: var(--cl-base-1-10);
|
|
--cl-1-6: var(--cl-base-1-12);
|
|
--cl-1-7: var(--cl-base-1-14);
|
|
--cl-1-8: var(--cl-base-1-16);
|
|
}
|
|
}
|
|
|
|
/* --- Color Contexts --- */
|
|
/* These Contexts are meant to make it easy to shift all color assignments for differentiated areas, like navigation bars or context menus */
|
|
/* Primary Color Context */
|
|
:root, .cl-primary {
|
|
/* Color assignments, these finally have semantic value and will be used to style components. */
|
|
/* More can be added as needed. */
|
|
--cl-fg: var(--cl-1-8); /* Foreground (Text, outlines) */
|
|
--cl-bg: var(--cl-1-1); /* Background */
|
|
--cl-bg-hl: var(--cl-1-2); /* Highlight Background (Component on Hover, ...) */
|
|
--cl-bg-el: var(--cl-1-3); /* Element Background (Component) */
|
|
--cl-bg-sl: var(--cl-1-4);
|
|
|
|
/* Table Color Assignments */
|
|
--cl-table-body: var(--cl-1-1);
|
|
--cl-table-head: var(--cl-1-2);
|
|
--cl-table-hl: var(--cl-1-3);
|
|
--cl-table-sl: var(--cl-1-4);
|
|
|
|
/* Set Default Colors */
|
|
background-color: var(--cl-bg);
|
|
color: var(--cl-fg);
|
|
}
|
|
|
|
.cl-secondary {
|
|
/* You can replace the base-tint on a per-assignment basis, though one tint per context is usual */
|
|
/* Just shift up all non-fg colors to create a lower-contrast/importance context */
|
|
--cl-fg: var(--cl-1-8);
|
|
--cl-bg: var(--cl-1-2);
|
|
--cl-bg-hl: var(--cl-1-3);
|
|
--cl-bg-el: var(--cl-1-4);
|
|
--cl-bg-sl: var(--cl-1-5);
|
|
|
|
--cl-table-body: var(--cl-1-2);
|
|
--cl-table-head: var(--cl-1-3);
|
|
--cl-table-hl: var(--cl-1-4);
|
|
--cl-table-sl: var(--cl-1-5);
|
|
|
|
/* Set Default Colors */
|
|
background-color: var(--cl-bg);
|
|
color: var(--cl-fg);
|
|
}
|