style
This commit is contained in:
parent
375dae18a6
commit
06ee3fff10
|
|
@ -5,6 +5,7 @@ html:has(#hueb:checked) { --c: 1; --l: 1; }
|
||||||
html:has(#huer:checked):has(#hueg:checked) { --h: 180; }
|
html:has(#huer:checked):has(#hueg:checked) { --h: 180; }
|
||||||
html:has(#huer:checked):has(#hueb:checked) { --h: 60; }
|
html:has(#huer:checked):has(#hueb:checked) { --h: 60; }
|
||||||
html:has(#hueg:checked):has(#hueb:checked) { --h: 300; }
|
html:has(#hueg:checked):has(#hueb:checked) { --h: 300; }
|
||||||
|
html:has(#huer:checked):has(#hueg:checked):has(#hueb:checked) { --c: 0; --l: 1.1 }
|
||||||
html {
|
html {
|
||||||
--dark-bg: oklch(calc(17.4% * var(--l)) calc(0.04 * var(--c)) calc(240.61 + var(--h)));
|
--dark-bg: oklch(calc(17.4% * var(--l)) calc(0.04 * var(--c)) calc(240.61 + var(--h)));
|
||||||
--dark-bg2: oklch(calc(26.18% * var(--l)) calc(0.06957 * var(--c)) calc(247.4988 + var(--h)));
|
--dark-bg2: oklch(calc(26.18% * var(--l)) calc(0.06957 * var(--c)) calc(247.4988 + var(--h)));
|
||||||
|
|
@ -17,7 +18,6 @@ html {
|
||||||
--light-fg2: oklch(calc(53.87% * var(--l)) calc(0.092 * var(--c)) calc(252.22 + var(--h)));
|
--light-fg2: oklch(calc(53.87% * var(--l)) calc(0.092 * var(--c)) calc(252.22 + var(--h)));
|
||||||
--light-fg3: oklch(calc(33.46% * var(--l)) calc(0.163 * var(--c)) calc(273.2 + var(--h)));
|
--light-fg3: oklch(calc(33.46% * var(--l)) calc(0.163 * var(--c)) calc(273.2 + var(--h)));
|
||||||
}
|
}
|
||||||
html:has(#huer:checked):has(#hueg:checked):has(#hueb:checked) { --bg: #fff; --bg2: #fff; --fg: #000; --fg2: #000; --fg3: #000; }
|
|
||||||
input:checked + label span {
|
input:checked + label span {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
|
@ -32,6 +32,7 @@ input:checked + label span {
|
||||||
--llight: initial;
|
--llight: initial;
|
||||||
--ldark: none;
|
--ldark: none;
|
||||||
}
|
}
|
||||||
|
:root:not(:has(#huer:checked, #hueg:checked, #hueb:checked)) { --bg: #000; --bg2: #000; --fg: #fff; --fg2: #fff; --fg3: #fff; }
|
||||||
body:has(#theme:checked) {
|
body:has(#theme:checked) {
|
||||||
--bg: var(--light-bg);
|
--bg: var(--light-bg);
|
||||||
--bg2: var(--light-bg2);
|
--bg2: var(--light-bg2);
|
||||||
|
|
@ -41,6 +42,7 @@ input:checked + label span {
|
||||||
--llight: none;
|
--llight: none;
|
||||||
--ldark: initial;
|
--ldark: initial;
|
||||||
}
|
}
|
||||||
|
body:has(#huer:checked):has(#hueg:checked):has(#hueb:checked):has(#theme:checked) { --bg: #fff; --bg2: #fff; --fg: #000; --fg2: #000; --fg3: #000; }
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -52,6 +54,7 @@ input:checked + label span {
|
||||||
--llight: none;
|
--llight: none;
|
||||||
--ldark: initial;
|
--ldark: initial;
|
||||||
}
|
}
|
||||||
|
:root:has(#huer:checked):has(#hueg:checked):has(#hueb:checked) { --bg: #fff; --bg2: #fff; --fg: #000; --fg2: #000; --fg3: #000; }
|
||||||
body:has(#theme:checked) {
|
body:has(#theme:checked) {
|
||||||
--bg: var(--dark-bg);
|
--bg: var(--dark-bg);
|
||||||
--bg2: var(--dark-bg2);
|
--bg2: var(--dark-bg2);
|
||||||
|
|
@ -61,4 +64,5 @@ input:checked + label span {
|
||||||
--llight: initial;
|
--llight: initial;
|
||||||
--ldark: none;
|
--ldark: none;
|
||||||
}
|
}
|
||||||
|
body:not(:has(#huer:checked, #hueg:checked, #hueb:checked)) { --bg: #000; --bg2: #000; --fg: #fff; --fg2: #fff; --fg3: #fff; }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue