CNWei/stash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(theme): 缩短明暗过渡到 160ms

Browse Source
This commit is contained in:
CNWei
2026-11-03 20:12:14 +08:00
parent 3330af818e
commit 5736bbc101
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stash-web/src/App.css
+8 -8
View File
@@ -22,7 +22,7 @@
height: 65vh; height: 65vh;
background: url('./assets/site-bg.jpg') center top / cover no-repeat; background: url('./assets/site-bg.jpg') center top / cover no-repeat;
pointer-events: none; pointer-events: none;
transition: opacity 240ms var(--su-ease-in-out); transition: opacity 160ms var(--su-ease-in-out);
} }
.site-background::after { .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 *, html.theme-transition *,
html.theme-transition *::before, html.theme-transition *::before,
html.theme-transition *::after { html.theme-transition *::after {
transition: transition:
background-color 240ms var(--su-ease-in-out), background-color 160ms var(--su-ease-in-out),
border-color 240ms var(--su-ease-in-out), border-color 160ms var(--su-ease-in-out),
color 240ms var(--su-ease-in-out), color 160ms var(--su-ease-in-out),
fill 240ms var(--su-ease-in-out), fill 160ms var(--su-ease-in-out),
stroke 240ms var(--su-ease-in-out), stroke 160ms var(--su-ease-in-out),
box-shadow 240ms var(--su-ease-in-out) !important; box-shadow 160ms var(--su-ease-in-out) !important;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
stash-web/src/AppNext.tsx
+1 -1
View File
@@ -309,7 +309,7 @@ export default function AppNext() {
if (root.dataset.scheme === scheme) return if (root.dataset.scheme === scheme) return
root.classList.add('theme-transition') root.classList.add('theme-transition')
root.dataset.scheme = scheme 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 () => { return () => {
window.clearTimeout(timer) window.clearTimeout(timer)
root.classList.remove('theme-transition') root.classList.remove('theme-transition')