style(css): add smooth transition variables and prefers-reduced-motion support
This commit is contained in:
1 parent
501e717fe9
commit
7a2c75701e
1 file changed
+19
@@ -103,6 +103,11 @@
|
|||||||
--navbar-height: 56px;
|
--navbar-height: 56px;
|
||||||
--muted: var(--color-text-muted);
|
--muted: var(--color-text-muted);
|
||||||
--border-subtle: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
|
--border-subtle: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
|
||||||
|
/* Transition variables for smoother, consistent UI */
|
||||||
|
--transition-fast: 0.1s;
|
||||||
|
--transition-normal: 0.2s;
|
||||||
|
--transition-slow: 0.3s;
|
||||||
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dark mode colors + readable contrast vars are generated by ThemeVars. */
|
/* Dark mode colors + readable contrast vars are generated by ThemeVars. */
|
||||||
@@ -126,6 +131,20 @@ html {
|
|||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
text-size-adjust: 100%;
|
text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html:focus-within {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
color: var(--color-text-readable, var(--color-text, #0f172a));
|
color: var(--color-text-readable, var(--color-text, #0f172a));
|
||||||
|
|||||||
Reference in new issue
Block a user