diff --git a/input.css b/input.css index 69e5d36..d4d4ac3 100644 --- a/input.css +++ b/input.css @@ -29,6 +29,7 @@ @layer base { html { scroll-behavior: smooth; + background-color: var(--color-paper-theme); } body { diff --git a/libs/yggdrasil-core/src/style.css b/libs/yggdrasil-core/src/style.css index 52d6bbf..db09b74 100644 --- a/libs/yggdrasil-core/src/style.css +++ b/libs/yggdrasil-core/src/style.css @@ -8,35 +8,16 @@ display: block; } -/* ========================================================================= - 设计策略: - 无论方向,我们始终让“暗色层”在上面,并对其使用 clip-path。 - - 亮->暗:NEW 是暗色,放在上层,从小圆扩展。 - - 暗->亮:OLD 是暗色,放在上层,从大圆收缩。 - 这样就能保证无论哪个方向,都是“暗色吞噬亮色”或“亮色穿透暗色”。 - ========================================================================= */ - -/* 默认情况:从暗到亮 (Dark -> Light) - 此时 DOM 上的 .dark 已经被移除,目标是亮色(NEW)。 - 策略:把暗色旧图(OLD)放在上层,缩小它的 clip-path,揭开底部的亮色新图(NEW)。 */ +/* 无论什么方向,始终让 new (新状态) 在上方,并从小圆扩展覆盖 old */ ::view-transition-old(root) { - z-index: 2; - animation: tt-shrink 0.4s ease-out forwards; -} -::view-transition-new(root) { z-index: 1; } -/* 切换到暗色情况:从亮到暗 (Light -> Dark) - 此时 DOM 上已加上 .dark,目标是暗色(NEW)。 - 策略:把暗色新图(NEW)放在上层,放大它的 clip-path,覆盖底部的亮色旧图(OLD)。 */ -.dark::view-transition-old(root) { - z-index: 1; - animation: none; -} -.dark::view-transition-new(root) { +::view-transition-new(root) { z-index: 2; animation: tt-expand 0.4s ease-out forwards; + /* 显式给伪元素加上不透明背景,防止截图透明导致看不到覆盖效果 */ + background: var(--color-paper-theme); } /* CSS 变量由 JS 注入到 html style 中 */ @@ -45,11 +26,6 @@ to { clip-path: circle(var(--tt-r) at var(--tt-x) var(--tt-y)); } } -@keyframes tt-shrink { - from { clip-path: circle(var(--tt-r) at var(--tt-x) var(--tt-y)); } - to { clip-path: circle(0px at var(--tt-x) var(--tt-y)); } -} - /* 在 View Transition 期间强制禁用所有 CSS 过渡, 确保 VT 回调中 toggle dark class 后截图捕获的是最终颜色。 */ html.is-theme-transitioning,