fix(ui): 深色模式下补齐卡片与弹层的层次感
- 深色里沿用浅色那套低透明度黑色阴影没有对比度(黑投影落在 zinc-950 上), 悬停和弹层都看不出「浮起来」,本次为深色单独配一套阴影与状态色 - 卡片:静止态改「近距投影 + 顶部内高光」;悬停改「外扩暗晕 + 极淡白光晕 + 内高光 12%」,同时底色提亮一档(zinc-900 → zinc-800)、边框提到 zinc-600, 位移补偿到 2px —— 暗底上 1px 的移动肉眼看不出来 - 弹层:新增 shadow-pop-dark / shadow-panel-dark 标记类,只挂给深色底面的 下拉与抽屉;toast 在深色下仍是亮色块(dark:bg-zinc-100),保留原黑色投影, 避免亮块套白光晕发脏 - 抽屉补 dark:border-l:它在深色下既无边框又无可视阴影,与背景糊成一片 - 实现说明:Tailwind v4 会把 @theme 的阴影值内联进 --tw-shadow,覆盖 CSS 变量 对已生成的工具类无效,因此直接重写 box-shadow;规则不放进 @layer 以便稳定 压过原子类,且选择器需按 hover: 变体转义后的类名书写 验证:vue-tsc -b 与 eslint src 干净;TaskCard / SideDrawer / TagFilter / TagInput / BatchSelectionBar 共 114 例单测通过;另用 Playwright 采样像素亮度 与 getComputedStyle 确认深浅两套阴影各自命中。
This commit is contained in:
@@ -98,7 +98,7 @@ const cardClass = computed(() => {
|
||||
}
|
||||
return isDone.value
|
||||
? 'border-slate-200 bg-white opacity-60 dark:border-zinc-800 dark:bg-zinc-900'
|
||||
: 'border-slate-200 bg-white hover:-translate-y-px hover:border-slate-300 hover:shadow-card-hover dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700'
|
||||
: 'border-slate-200 bg-white hover:-translate-y-px hover:border-slate-300 hover:shadow-card-hover dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-600 dark:hover:bg-zinc-800'
|
||||
})
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user