样式修改
This commit is contained in:
fengxiangdebaozi committed
1 parent
ea50540bd5
commit
169346cdbd
1 file changed
+227
-90
@@ -21,9 +21,41 @@
|
||||
background: #fddadc;
|
||||
}
|
||||
|
||||
/* 深色模式：跟随全局 ThemeContext（html.dark）或组件 .roundtable-planning--dark */
|
||||
/* 深色模式：跟随全局 ThemeContext（html.dark）或组件 .roundtable-planning--dark
|
||||
*
|
||||
* 仅在本页 + 深色下，把语义 token 覆盖为《深蓝色 UI 规范》取值
|
||||
* （docs/ui规范-深蓝/tokens.css，§1 深蓝系 ZS-004 / 渐蓝系 ZS-002）。
|
||||
* 全模块组件均经由这些 token（bg-background / text-foreground / border-border …）
|
||||
* 着色，所以这里统一覆盖即可整页换肤；浅色模式（无 .dark）保持红色主题不受影响。 */
|
||||
.dark .roundtable-planning,
|
||||
.roundtable-planning--dark {
|
||||
/* —— 背景 / 容器（ZS-004 深蓝系） —— */
|
||||
--background: #0c1836; /* zs-004-09 页面背景 */
|
||||
--foreground: #c5cfe0; /* zs-004-02 正文字体 */
|
||||
--card: #122347; /* zs-004-08 卡片背景 */
|
||||
--card-foreground: #c5cfe0;
|
||||
--popover: #122347; /* 下拉 / 浮层与卡片同底 */
|
||||
--popover-foreground: #c5cfe0;
|
||||
--muted: #16294d; /* 次级容器（步骤条 / slate-50 表面） */
|
||||
--muted-foreground: #6e88b0; /* zs-004-04 次级字体 */
|
||||
--secondary: #1a2f5a; /* zs-004-07 次级按钮底 */
|
||||
--secondary-foreground: #c5cfe0;
|
||||
--accent: #1a2f5a; /* hover / 软高亮表面 */
|
||||
--accent-foreground: #e8edf5; /* zs-004-01 */
|
||||
|
||||
/* —— 主色 / 链接（ZS-002 渐蓝系） —— */
|
||||
--primary: #1677ff; /* zs-002-06 主操作 */
|
||||
--primary-foreground: #ffffff;
|
||||
--ring: rgba(22, 119, 255, 0.45);
|
||||
|
||||
/* —— 边框 / 控件描边（取较浅阶以保证深底上可见） —— */
|
||||
--border: #2d4473; /* zs-004-06 容器边框 */
|
||||
--input: #4a6491; /* zs-004-05 控件描边 */
|
||||
|
||||
/* —— 功能语义色 —— */
|
||||
--destructive: #f5222d; /* zs-001-06 错误 */
|
||||
|
||||
/* —— 圆桌局部别名（回落到上面已覆盖的 token） —— */
|
||||
--rt-page-bg: var(--background);
|
||||
--rt-primary: var(--primary);
|
||||
--rt-primary-hover: var(--primary);
|
||||
@@ -47,98 +79,226 @@
|
||||
background: color-mix(in oklch, var(--primary) 35%, transparent);
|
||||
}
|
||||
|
||||
/* 页面底与浅色专用背景 */
|
||||
.dark .roundtable-planning.bg-\[\#fef6f6\],
|
||||
.roundtable-planning--dark.bg-\[\#fef6f6\] {
|
||||
/* =============================================================================
|
||||
* 深色兜底映射 —— 把组件里写死的浅色 Tailwind 类映射到上面的深蓝 token。
|
||||
*
|
||||
* 这些组件原本只为浅色红主题写死了 slate / white / emerald 等色，深色靠这里
|
||||
* 统一改写。作用域 :is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
* 同时覆盖「全局 html.dark」与「组件 --dark 修饰类」两种触发方式；浅色模式
|
||||
* （无 .dark / 无 --dark）完全不命中，红主题不受影响。
|
||||
*
|
||||
* 维护：组件里新增写死颜色时，往下面对应分组补一行即可，不要在组件里写
|
||||
* `dark:` 变体与本表打架（本表用 !important，会盖过同元素的 dark: 变体）。
|
||||
* ========================================================================== */
|
||||
|
||||
/* ---- 页面底色：浅红 → 深蓝页面底 ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark).bg-\[\#fef6f6\],
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-\[\#fef6f6\] {
|
||||
background-color: var(--background) !important;
|
||||
}
|
||||
|
||||
/* 表面：白底卡片 → card */
|
||||
.dark .roundtable-planning .bg-white,
|
||||
.roundtable-planning--dark .bg-white {
|
||||
/* ---- 表面：白 / 近白底 → 卡片底 ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.bg-white, .hover\:bg-white:hover, .bg-\[\#fcfcfd\], .bg-\[\#fffdfa\]) {
|
||||
background-color: var(--card) !important;
|
||||
}
|
||||
|
||||
.dark .roundtable-planning .bg-slate-50,
|
||||
.dark .roundtable-planning .bg-slate-50\/20,
|
||||
.dark .roundtable-planning .bg-slate-50\/30,
|
||||
.roundtable-planning--dark .bg-slate-50,
|
||||
.roundtable-planning--dark .bg-slate-50\/20,
|
||||
.roundtable-planning--dark .bg-slate-50\/30 {
|
||||
background-color: color-mix(in oklch, var(--muted) 80%, transparent) !important;
|
||||
/* ---- 次级表面：slate-50/100（含透明度档）→ muted ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(
|
||||
.bg-slate-50, .bg-slate-50\/20, .bg-slate-50\/30, .bg-slate-50\/50,
|
||||
.bg-slate-50\/60, .bg-slate-50\/80, .bg-slate-100, .bg-slate-100\/80
|
||||
) {
|
||||
background-color: var(--muted) !important;
|
||||
}
|
||||
|
||||
.dark .roundtable-planning .from-slate-50,
|
||||
.roundtable-planning--dark .from-slate-50 {
|
||||
/* ---- 次级表面 hover → accent ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(
|
||||
.hover\:bg-slate-50:hover, .hover\:bg-slate-50\/60:hover,
|
||||
.hover\:bg-slate-100:hover
|
||||
) {
|
||||
background-color: var(--accent) !important;
|
||||
}
|
||||
|
||||
/* ---- 禁用 / 较实的中性底 → secondary ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.bg-slate-300, .disabled\:bg-slate-300:disabled) {
|
||||
background-color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
/* ---- slate-200 作分隔条 → border 色 ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-slate-200 {
|
||||
background-color: var(--border) !important;
|
||||
}
|
||||
|
||||
/* ---- 渐变端点 ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .from-slate-50 {
|
||||
--tw-gradient-from: var(--muted) !important;
|
||||
}
|
||||
|
||||
.dark .roundtable-planning .to-white,
|
||||
.roundtable-planning--dark .to-white {
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .to-white {
|
||||
--tw-gradient-to: var(--card) !important;
|
||||
}
|
||||
|
||||
/* 品牌浅红底 → accent */
|
||||
.dark .roundtable-planning [class*="brand-200"],
|
||||
.roundtable-planning--dark [class*="brand-200"] {
|
||||
background-color: color-mix(in oklch, var(--accent) 55%, transparent) !important;
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.from-\[var\(--brand-200\)\]) {
|
||||
--tw-gradient-from: color-mix(in oklch, var(--accent) 60%, transparent) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.via-\[var\(--brand-200\)\]) {
|
||||
--tw-gradient-via: color-mix(in oklch, var(--accent) 60%, transparent) !important;
|
||||
}
|
||||
|
||||
.dark .roundtable-planning .border-red-100,
|
||||
.dark .roundtable-planning .border-red-100\/50,
|
||||
.dark .roundtable-planning .border-red-200,
|
||||
.dark .roundtable-planning .border-red-200\/50,
|
||||
.dark .roundtable-planning .border-red-200\/85,
|
||||
.roundtable-planning--dark .border-red-100,
|
||||
.roundtable-planning--dark .border-red-100\/50,
|
||||
.roundtable-planning--dark .border-red-200,
|
||||
.roundtable-planning--dark .border-red-200\/50,
|
||||
.roundtable-planning--dark .border-red-200\/85 {
|
||||
border-color: var(--border) !important;
|
||||
/* ---- 品牌浅红底（brand-200 等） → accent ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) [class*="brand-200"] {
|
||||
background-color: color-mix(in oklch, var(--accent) 70%, transparent) !important;
|
||||
}
|
||||
|
||||
.dark .roundtable-planning .border-slate-100,
|
||||
.dark .roundtable-planning .border-slate-200,
|
||||
.dark .roundtable-planning .border-slate-200\/50,
|
||||
.dark .roundtable-planning .border-\[\#e2e8f0\],
|
||||
.roundtable-planning--dark .border-slate-100,
|
||||
.roundtable-planning--dark .border-slate-200,
|
||||
.roundtable-planning--dark .border-slate-200\/50,
|
||||
.roundtable-planning--dark .border-\[\#e2e8f0\] {
|
||||
border-color: var(--border) !important;
|
||||
}
|
||||
|
||||
/* 文字 */
|
||||
.dark .roundtable-planning .text-slate-900,
|
||||
.dark .roundtable-planning .text-slate-800,
|
||||
.dark .roundtable-planning .text-slate-700,
|
||||
.dark .roundtable-planning .text-\[\#334155\],
|
||||
.roundtable-planning--dark .text-slate-900,
|
||||
.roundtable-planning--dark .text-slate-800,
|
||||
.roundtable-planning--dark .text-slate-700,
|
||||
.roundtable-planning--dark .text-\[\#334155\] {
|
||||
/* ---- 中性文字：深 → 正文色 ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(
|
||||
.text-slate-900, .text-slate-800, .text-slate-700, .text-\[\#334155\],
|
||||
.hover\:text-slate-900:hover, .hover\:text-slate-800:hover,
|
||||
.hover\:text-slate-700:hover
|
||||
) {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.dark .roundtable-planning .text-slate-600,
|
||||
.dark .roundtable-planning .text-slate-500,
|
||||
.dark .roundtable-planning .text-slate-400,
|
||||
.roundtable-planning--dark .text-slate-600,
|
||||
.roundtable-planning--dark .text-slate-500,
|
||||
.roundtable-planning--dark .text-slate-400 {
|
||||
/* ---- 中性文字：中 / 浅 → 次级文字色 ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(
|
||||
.text-slate-650, .text-slate-600, .text-slate-500, .text-slate-400,
|
||||
.text-slate-300, .text-\[\#94a3b8\],
|
||||
.hover\:text-slate-650:hover, .hover\:text-slate-600:hover,
|
||||
.placeholder\:text-slate-400::placeholder
|
||||
) {
|
||||
color: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
.dark .roundtable-planning .hover\:text-slate-800:hover,
|
||||
.roundtable-planning--dark .hover\:text-slate-800:hover {
|
||||
color: var(--foreground) !important;
|
||||
/* ---- 中性边框：slate / red / 白 / #e2e8f0（含透明度档）→ border ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(
|
||||
.border-white, .border-slate-50, .border-slate-100, .border-slate-150,
|
||||
.border-slate-200, .border-slate-200\/50, .border-slate-200\/80,
|
||||
.border-slate-300, .border-slate-400, .border-slate-700,
|
||||
.border-\[\#e2e8f0\],
|
||||
.border-red-50, .border-red-100, .border-red-100\/50, .border-red-200,
|
||||
.border-red-200\/50, .border-red-200\/85
|
||||
) {
|
||||
border-color: var(--border) !important;
|
||||
}
|
||||
|
||||
.dark .roundtable-planning .hover\:bg-slate-50:hover,
|
||||
.roundtable-planning--dark .hover\:bg-slate-50:hover {
|
||||
background-color: var(--accent) !important;
|
||||
/* ---- divide-slate-100 子项分隔线 → border ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: var(--border) !important;
|
||||
}
|
||||
|
||||
/* ---- focus ring：brand-200 → 主色淡环 ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(
|
||||
.ring-\[var\(--brand-200\)\],
|
||||
.focus-within\:ring-\[var\(--brand-200\)\]\/50:focus-within,
|
||||
.focus\:ring-\[var\(--brand-200\)\]\/50:focus
|
||||
) {
|
||||
--tw-ring-color: color-mix(in oklch, var(--primary) 30%, transparent) !important;
|
||||
}
|
||||
|
||||
/* ---- 选中边框 border-primary → 主色描边（柔化） ---- */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .border-primary,
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .border-2.border-primary {
|
||||
border-color: color-mix(in oklch, var(--primary) 55%, var(--border)) !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
* 功能语义色（成功/警告/错误/信息/装饰）—— 深色下：浅底改深色同色调、深字提亮。
|
||||
* 保留色相作为语义提示，只调明度以适配深蓝底。实心中等色按钮（emerald-600 等
|
||||
* 配白字）本就在深底上可读，故不改。
|
||||
* ========================================================================== */
|
||||
|
||||
/* —— 成功 · emerald —— */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.bg-emerald-50, .bg-emerald-50\/40, .bg-emerald-50\/50, .bg-emerald-100, .bg-emerald-100\/40) {
|
||||
background-color: color-mix(in oklch, #10b981 18%, var(--card)) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.border-emerald-200, .border-emerald-200\/40, .border-emerald-200\/50) {
|
||||
border-color: color-mix(in oklch, #10b981 42%, var(--border)) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.text-emerald-800, .text-emerald-700, .text-emerald-600) {
|
||||
color: #6ee7b7 !important;
|
||||
}
|
||||
|
||||
/* —— 警告 · amber —— */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(
|
||||
.bg-amber-50, .bg-amber-50\/60, .bg-amber-100, .bg-amber-100\/40, .bg-amber-200,
|
||||
.hover\:bg-amber-100:hover, .hover\:bg-amber-200:hover
|
||||
) {
|
||||
background-color: color-mix(in oklch, #f59e0b 20%, var(--card)) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(
|
||||
.border-amber-100, .border-amber-200, .border-amber-200\/40, .border-amber-300,
|
||||
.border-amber-300\/50, .border-amber-500, .border-amber-700\/50
|
||||
) {
|
||||
border-color: color-mix(in oklch, #f59e0b 42%, var(--border)) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.text-amber-900, .text-amber-800, .text-amber-700, .text-amber-600) {
|
||||
color: #fcd34d !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .focus\:ring-amber-200:focus {
|
||||
--tw-ring-color: color-mix(in oklch, #f59e0b 35%, transparent) !important;
|
||||
}
|
||||
|
||||
/* —— 错误 · red / rose —— */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.bg-red-50, .bg-red-200, .bg-rose-50, .hover\:bg-rose-50:hover) {
|
||||
background-color: color-mix(in oklch, #ef4444 18%, var(--card)) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.text-red-700, .text-rose-600, .hover\:text-rose-600:hover) {
|
||||
color: #fca5a5 !important;
|
||||
}
|
||||
|
||||
/* —— 信息 · sky（部分组件已自带 dark: 变体，这里兜底无 dark: 的） —— */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-sky-50 {
|
||||
background-color: color-mix(in oklch, #0ea5e9 18%, var(--card)) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.border-sky-200, .border-sky-300\/50) {
|
||||
border-color: color-mix(in oklch, #0ea5e9 42%, var(--border)) !important;
|
||||
}
|
||||
|
||||
/* —— 装饰 · purple —— */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.bg-purple-50, .bg-purple-100\/40) {
|
||||
background-color: color-mix(in oklch, #a855f7 18%, var(--card)) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .border-purple-200 {
|
||||
border-color: color-mix(in oklch, #a855f7 42%, var(--border)) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||||
:is(.text-purple-700, .text-purple-500) {
|
||||
color: #d8b4fe !important;
|
||||
}
|
||||
|
||||
/* —— 装饰 · orange / pink —— */
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-orange-50 {
|
||||
background-color: color-mix(in oklch, #f97316 18%, var(--card)) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .border-orange-200\/50 {
|
||||
border-color: color-mix(in oklch, #f97316 42%, var(--border)) !important;
|
||||
}
|
||||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-pink-100\/40 {
|
||||
background-color: color-mix(in oklch, #ec4899 18%, var(--card)) !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
* 结构件覆盖（顶栏 / 步骤条 / 次要按钮）—— 保留原有针对性规则。
|
||||
* ========================================================================== */
|
||||
|
||||
/* 顶栏 */
|
||||
.dark .roundtable-planning > header,
|
||||
.roundtable-planning--dark > header {
|
||||
@@ -161,29 +321,6 @@
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
/* 输入区 focus ring */
|
||||
.dark .roundtable-planning .focus-within\:ring-\[var\(--brand-200\)\]\/50:focus-within,
|
||||
.roundtable-planning--dark .focus-within\:ring-\[var\(--brand-200\)\]\/50:focus-within {
|
||||
--tw-ring-color: color-mix(in oklch, var(--primary) 25%, transparent) !important;
|
||||
}
|
||||
|
||||
/* 渐变横幅 */
|
||||
.dark .roundtable-planning .from-\[var\(--brand-200\)\],
|
||||
.roundtable-planning--dark .from-\[var\(--brand-200\)\] {
|
||||
--tw-gradient-from: color-mix(in oklch, var(--accent) 40%, transparent) !important;
|
||||
}
|
||||
|
||||
.dark .roundtable-planning .border-primary,
|
||||
.roundtable-planning--dark .border-2.border-primary {
|
||||
border-color: color-mix(in oklch, var(--primary) 50%, var(--border)) !important;
|
||||
}
|
||||
|
||||
/* 分隔线 */
|
||||
.dark .roundtable-planning .bg-slate-200,
|
||||
.roundtable-planning--dark .bg-slate-200 {
|
||||
background-color: var(--border) !important;
|
||||
}
|
||||
|
||||
/* Custom elegant scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
|
||||
Reference in new issue
Block a user