chenshoulin
85b2d8a30f
slate 色阶带明显蓝调（页面底 B-R=+22、列底 +26），整页发蓝，与目标的中性灰 相差很远。换成 Tailwind 的 zinc 色阶做 1:1 映射，保持原有明暗层次不变 （卡片仍比列背景更亮），只去色偏：改后页面底 B-R=+2、列底 +2。 只替换带 dark: 前缀的类（16 个文件、182 处），外加 style.css 里三处 html.dark 基底色；浅色模式一字未动（页面底仍为 slate-100 #f1f5f9）。
84 lines
2.2 KiB
CSS
84 lines
2.2 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/*
|
|
* 深色模式用 class 控制而不是纯 media query ——
|
|
* 这样才能支持「跟随系统 / 强制浅色 / 强制深色」三态。
|
|
*/
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--font-sans:
|
|
system-ui, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', Roboto, sans-serif;
|
|
|
|
/* 卡片与面板的阴影：用极低不透明度的多层阴影代替单层重阴影，看起来更干净 */
|
|
--shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
|
|
--shadow-card-hover: 0 6px 16px rgb(15 23 42 / 0.09), 0 1px 3px rgb(15 23 42 / 0.05);
|
|
--shadow-panel: 0 16px 40px rgb(15 23 42 / 0.12), 0 2px 8px rgb(15 23 42 / 0.06);
|
|
--shadow-pop: 0 8px 24px rgb(15 23 42 / 0.12), 0 1px 3px rgb(15 23 42 / 0.06);
|
|
}
|
|
|
|
@layer base {
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
|
|
html {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--color-slate-100);
|
|
color: var(--color-slate-900);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/*
|
|
* 深色用 zinc（中性灰）而不是 slate：slate 带明显蓝调，
|
|
* 整页会发蓝，和「中性灰」的目标色差得很远。
|
|
*/
|
|
html.dark body {
|
|
background: var(--color-zinc-950);
|
|
color: var(--color-zinc-100);
|
|
}
|
|
|
|
/* 统一的键盘焦点样式，鼠标点击不显示 */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-sky-500);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-sky-200);
|
|
}
|
|
|
|
html.dark ::selection {
|
|
background: var(--color-sky-800);
|
|
}
|
|
|
|
/* 细滚动条，避免在列里出现粗重的系统滚动条 */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-slate-300) transparent;
|
|
}
|
|
|
|
html.dark * {
|
|
scrollbar-color: var(--color-zinc-700) transparent;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 注：日期输入框空值时的原生提示（「yyyy / mm / 日」）不在这里处理。
|
|
* 试过把 `::-webkit-datetime-edit` 系列伪元素设成透明，但部分环境下不生效，
|
|
* 已改为在 DatePicker.vue 里用不透明占位层直接盖住。
|
|
*/
|