diff options
| author | Christian Hodgden <chrhodgden@gmail.com> | 2026-02-03 16:25:44 -0600 |
|---|---|---|
| committer | Christian Hodgden <chrhodgden@gmail.com> | 2026-02-03 16:25:44 -0600 |
| commit | 7b2b1f6b837dbca3dd08cb89836cb1ae098c2bd8 (patch) | |
| tree | 2e9f027245a84e9c1372f88196ebbdfbf58bf920 /static/css/main-root.css | |
Initial Commit.main
Yay
Diffstat (limited to 'static/css/main-root.css')
| -rw-r--r-- | static/css/main-root.css | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/static/css/main-root.css b/static/css/main-root.css new file mode 100644 index 0000000..08188b7 --- /dev/null +++ b/static/css/main-root.css @@ -0,0 +1,55 @@ +:root{
+ --dark-theme-check: 1;
+ --theme-color-check: 0;
+ --accent-color-check: 0;
+ --theme-hue: 0;
+ --accent-hue: 0;
+
+ /* Contrast hue - the color for hyperlinks and selection.
+ Default hue is 210, but we want it the +180 opposite hue of theme if there is a theme color.*/
+ --theme-contrast-hue: calc(calc(var(--theme-hue) + 180) * var(--theme-color-check));
+ --default-contrast-hue: calc(210 - calc(var(--theme-color-check) * 210));
+ --contrast-hue: calc(var(--theme-contrast-hue) + var(--default-contrast-hue));
+
+ --foreground-lightness: calc(0% + calc(var(--dark-theme-check) * 90%));
+ --background-lightness: calc(100% - calc(var(--dark-theme-check) * 90%));
+ --contrast-lightness: calc(50% + calc(var(--dark-theme-check) * 0%));
+
+ /* Accent hue - the color for all other elements beside <p> foreground and the main background.
+ We want to inherit the theme hue if accent color is disabled.*/
+ --theme-accent-hue: calc(var(--theme-hue) * calc(1 - var(--accent-color-check)));
+ --accent-check-hue: calc(var(--accent-hue) * var(--accent-color-check));
+ --applied-accent-hue: calc(var(--theme-accent-hue) + var(--accent-check-hue));
+
+ --accent-saturation: calc(
+ max(var(--accent-color-check), var(--theme-color-check)) *
+ calc(75% - calc(var(--dark-theme-check) * 20%))
+ );
+ --contrast-saturation: calc(100% - calc(var(--dark-theme-check) * 10%));
+
+ --foreground-theme-color: hsl(
+ var(--theme-hue),
+ calc(var(--theme-color-check) * 75%),
+ var(--foreground-lightness)
+ );
+ --background-theme-color: hsl(
+ var(--theme-hue),
+ calc(var(--theme-color-check) * 25%),
+ var(--background-lightness)
+ );
+ --foreground-accent-color: hsl(
+ var(--applied-accent-hue),
+ var(--accent-saturation),
+ var(--contrast-lightness)
+ );
+ --background-accent-color: hsl(
+ var(--applied-accent-hue),
+ calc(var(--accent-color-check) * 25%),
+ var(--background-lightness)
+ );
+ --contrast-color: hsl(
+ var(--contrast-hue),
+ var(--contrast-saturation),
+ var(--contrast-lightness)
+ );
+}
|