style(theme): 缩短明暗过渡到 160ms
This commit is contained in:
@@ -22,7 +22,7 @@
|
||||
height: 65vh;
|
||||
background: url('./assets/site-bg.jpg') center top / cover no-repeat;
|
||||
pointer-events: none;
|
||||
transition: opacity 240ms var(--su-ease-in-out);
|
||||
transition: opacity 160ms var(--su-ease-in-out);
|
||||
}
|
||||
|
||||
.site-background::after {
|
||||
@@ -1331,18 +1331,18 @@ a.entry-href:hover {
|
||||
}
|
||||
|
||||
/* ---------- 明暗切换:短暂给所有表面补颜色过渡 ---------- */
|
||||
/* 只在切换的 260ms 内加 !important,避免覆盖组件平时的 hover/展开动画。 */
|
||||
/* 只在切换的 180ms 内加 !important,避免覆盖组件平时的 hover/展开动画。 */
|
||||
html.theme-transition,
|
||||
html.theme-transition *,
|
||||
html.theme-transition *::before,
|
||||
html.theme-transition *::after {
|
||||
transition:
|
||||
background-color 240ms var(--su-ease-in-out),
|
||||
border-color 240ms var(--su-ease-in-out),
|
||||
color 240ms var(--su-ease-in-out),
|
||||
fill 240ms var(--su-ease-in-out),
|
||||
stroke 240ms var(--su-ease-in-out),
|
||||
box-shadow 240ms var(--su-ease-in-out) !important;
|
||||
background-color 160ms var(--su-ease-in-out),
|
||||
border-color 160ms var(--su-ease-in-out),
|
||||
color 160ms var(--su-ease-in-out),
|
||||
fill 160ms var(--su-ease-in-out),
|
||||
stroke 160ms var(--su-ease-in-out),
|
||||
box-shadow 160ms var(--su-ease-in-out) !important;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -309,7 +309,7 @@ export default function AppNext() {
|
||||
if (root.dataset.scheme === scheme) return
|
||||
root.classList.add('theme-transition')
|
||||
root.dataset.scheme = scheme
|
||||
const timer = window.setTimeout(() => root.classList.remove('theme-transition'), 260)
|
||||
const timer = window.setTimeout(() => root.classList.remove('theme-transition'), 180)
|
||||
return () => {
|
||||
window.clearTimeout(timer)
|
||||
root.classList.remove('theme-transition')
|
||||
|
||||
Reference in New Issue
Block a user