EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

respect prefers-reduce-motion flag
All checks were successful
/ build (push) Successful in 12s
Details

Browse source
This commit is contained in:
kritzl 2025-03-25 22:55:09 +01:00
commit 9ea4831636
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
7 changed files with 125 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

38
styleguide/assets/style/base.css
View file

@ -158,6 +158,11 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
@media (prefers-reduced-motion) {
.dark {
--transition-glow: filter 150ms, border-color 150ms;
}
}
.dark .light-only {
display: none;
}
@ -193,6 +198,11 @@
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
}
@media (prefers-reduced-motion) {
.light {
--transition-glow: filter 150ms, border-color 150ms;
}
}
.light .light-only {
display: initial;
}
@ -237,6 +247,13 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
}
@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
html {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: dark) {
html .light-only {
display: none;
}
@ -271,6 +288,13 @@
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
}
}
@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
html:has(#themeLight:checked) {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: dark) {
html:has(#themeLight:checked) .light-only {
display: initial;
}
@ -310,6 +334,13 @@
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
}
}
@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
html {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: light) {
html .light-only {
display: initial;
}
@ -352,6 +383,13 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
}
@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
html:has(#themeDark:checked) {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: light) {
html:has(#themeDark:checked) .light-only {
display: none;
}