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;
|
||||
--muted: var(--color-text-muted);
|
||||
--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. */
|
||||
@@ -126,6 +131,20 @@ html {
|
||||
-webkit-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 {
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text-readable, var(--color-text, #0f172a));
|
||||
|
||||
Reference in new issue
Block a user