648 lines
26 KiB
CSS
648 lines
26 KiB
CSS
/* 注意：不要在这里 `@import "tailwindcss"`。Tailwind 已由全局 globals.css 引入，
|
||
* 本文件被打进同一份样式表，再次 import 会把整套 theme/utilities 重复发一遍
|
||
* （CSS 体积翻倍，且重复发出的 --text-* 等主题变量会和全局覆盖打架）。
|
||
* 本文件只写圆桌页自己的作用域规则即可。 */
|
||
|
||
/* 圆桌规划 — 浅色红色主题（对齐 docs/浅红色ui修改.md） */
|
||
.roundtable-planning {
|
||
--rt-primary: var(--workspace-brand, #f5222d);
|
||
--rt-primary-hover: var(--brand-900, #cf1322);
|
||
--rt-primary-active: var(--brand-950, #a8071a);
|
||
--rt-primary-soft: var(--brand-200, #feeded);
|
||
--rt-page-bg: #fef6f6;
|
||
/* 圆桌全页最小可读字号（含 Step 3 方案展示 / 结果绘制），跟随「设置 → 字号」。 */
|
||
--roundtable-chat-font-size: calc(16px * var(--ui-font-scale, 1));
|
||
--roundtable-chat-meta-font-size: calc(16px * var(--ui-font-scale, 1));
|
||
font-size: calc(16px * var(--ui-font-scale, 1));
|
||
}
|
||
|
||
/* 会商对话区：气泡正文、步骤卡、Markdown 块 */
|
||
.roundtable-chat-message {
|
||
font-size: var(--roundtable-chat-font-size);
|
||
line-height: 1.625;
|
||
}
|
||
|
||
.roundtable-chat-meta {
|
||
font-size: var(--roundtable-chat-meta-font-size);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/*
|
||
* 抬升页内显式写死的小字号类（text-xs / text-sm / text-[10–14px] / calc），
|
||
* 并让它们跟随设置页字号倍率，避免 Step 3、左右记录区和对话列表遗漏。
|
||
* text-base 及以上标题由全局 --text-* token 处理。
|
||
*/
|
||
.roundtable-planning :where(.text-xs, .text-sm) {
|
||
font-size: calc(16px * var(--ui-font-scale, 1));
|
||
}
|
||
|
||
.roundtable-planning :where(
|
||
[class*="text-[9px"],
|
||
[class*="text-[10px"],
|
||
[class*="text-[10.5px"],
|
||
[class*="text-[11px"],
|
||
[class*="text-[11.5px"],
|
||
[class*="text-[12px"],
|
||
[class*="text-[13px"],
|
||
[class*="text-[14px"],
|
||
[class*="text-[calc"]
|
||
):not(.w-5) {
|
||
font-size: calc(16px * var(--ui-font-scale, 1));
|
||
}
|
||
|
||
.roundtable-planning ::-webkit-scrollbar-thumb {
|
||
background: #fcb5b9;
|
||
}
|
||
|
||
.roundtable-planning ::-webkit-scrollbar-thumb:hover {
|
||
background: #fa9196;
|
||
}
|
||
|
||
.roundtable-planning .custom-scrollbar-inner::-webkit-scrollbar-thumb {
|
||
background: #fddadc;
|
||
}
|
||
|
||
/* 深色模式：跟随全局 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: rgba(6, 14, 36, 0.92); /* zs-004-09 页面底，半透明 */
|
||
--foreground: #c5cfe0; /* zs-004-02 正文字体 */
|
||
--card: rgba(3, 38, 80, 0.82); /* 卡片底：对齐 sidebar-contents 半透明深蓝 */
|
||
--card-foreground: #c5cfe0;
|
||
--popover: rgba(3, 38, 80, 0.92); /* 下拉 / 浮层，略深一档 */
|
||
--popover-foreground: #c5cfe0;
|
||
--muted: rgba(2, 24, 58, 0.75); /* 次级容器（步骤条 / slate-50 表面） */
|
||
--muted-foreground: #6e88b0; /* zs-004-04 次级字体 */
|
||
--secondary: rgba(26, 47, 90, 0.78); /* zs-004-07 次级按钮底，半透明 */
|
||
--secondary-foreground: #c5cfe0;
|
||
--accent: rgba(26, 47, 90, 0.78); /* hover / 软高亮表面，半透明 */
|
||
--accent-foreground: #e8edf5; /* zs-004-01 */
|
||
|
||
/* —— 主色 / 链接（ZS-002 渐蓝系） —— */
|
||
--primary: #1677ff; /* zs-002-06 主操作 */
|
||
--primary-foreground: #ffffff;
|
||
--ring: rgba(22, 119, 255, 0.45);
|
||
|
||
/* —— 边框 / 控件描边：对齐 sidebar-contents 的蓝色发光边框 —— */
|
||
--border: rgba(43, 143, 254, 0.55); /* sidebar border-color 同款蓝边 */
|
||
--input: rgba(90, 169, 255, 0.35); /* 控件描边，略浅 */
|
||
|
||
/* —— 功能语义色 —— */
|
||
--destructive: #f5222d; /* zs-001-06 错误 */
|
||
|
||
/* —— brand-* 别名改深蓝（关键）：globals.css 只在 :root 把 --brand-* 定为浅红/红，
|
||
* .dark 未覆盖，导致组件里 var(--brand-200/900/950) 在深色下泛粉/泛红、与深蓝冲突。
|
||
* 这里改为渐蓝系 ZS-002，所有 bg-[var(--brand-200)] / text-[var(--brand-900)] 等
|
||
* 一并由红转蓝。 —— */
|
||
--workspace-brand: #1677ff; /* 与 primary 对齐 */
|
||
--brand-200: #16335f; /* 浅红 chip 底 → 深蓝软底（chip / 头像底） */
|
||
--brand-900: #4096ff; /* 红强调 / 按钮 hover → 蓝（zs-002-05） */
|
||
--brand-950: #91caff; /* 深红文字 → 浅蓝（zs-002-03，深底上可读） */
|
||
|
||
/* Tailwind opacity fallbacks used by Chrome 109. Keep these in sync with
|
||
* the scoped semantic tokens above, otherwise /5, /20, etc. become opaque. */
|
||
--legacy-background-rgb: 6 14 36;
|
||
--legacy-foreground-rgb: 197 207 224;
|
||
--legacy-card-rgb: 3 38 80;
|
||
--legacy-muted-rgb: 2 24 58;
|
||
--legacy-muted-foreground-rgb: 110 136 176;
|
||
--legacy-secondary-rgb: 26 47 90;
|
||
--legacy-accent-rgb: 26 47 90;
|
||
--legacy-primary-rgb: 22 119 255;
|
||
--legacy-primary-foreground-rgb: 255 255 255;
|
||
--legacy-ring-rgb: 22 119 255;
|
||
--legacy-border-rgb: 43 143 254;
|
||
--legacy-input-rgb: 90 169 255;
|
||
--legacy-destructive-rgb: 245 34 45;
|
||
--legacy-workspace-brand-rgb: 22 119 255;
|
||
--legacy-brand-200-rgb: 22 51 95;
|
||
|
||
/* —— 圆桌局部别名（回落到上面已覆盖的 token） —— */
|
||
--rt-page-bg: var(--background);
|
||
--rt-primary: var(--primary);
|
||
--rt-primary-hover: var(--primary);
|
||
--rt-primary-soft: var(--accent);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
/* 整页背景换深蓝主题底图（仅页面根 .roundtable-planning；浅色不受影响）。
|
||
* background-image 叠在 background-color 上 —— 底色作为图加载前/未覆盖区域的回落；
|
||
* cover 铺满、fixed 固定不随内容滚动（大屏背板观感，与应用渲染大屏一致）。
|
||
* url() 里的 SVG 由 Vite 当独立资源输出（非内联），浏览器缓存。 */
|
||
.dark .roundtable-planning {
|
||
background-color: var(--background);
|
||
background-image: url("../../assets/img/layout-bg-theme-dark-blue.svg");
|
||
background-size: cover;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
/* Portal 弹窗（RecommendAgentsDialog 等挂 .roundtable-planning--dark 但不在页面根内）：
|
||
* 不透明实底、无底图 —— 对齐 §21 Modal 容器色 ZS-004-08。 */
|
||
.roundtable-planning--dark:not(.roundtable-planning) {
|
||
--background: #122347;
|
||
--card: #0c1836;
|
||
--popover: #122347;
|
||
--muted: #0f1c3d;
|
||
--secondary: #1a2f5a;
|
||
--accent: #1a2f5a;
|
||
--legacy-background-rgb: 18 35 71;
|
||
--legacy-card-rgb: 12 24 54;
|
||
--legacy-muted-rgb: 15 28 61;
|
||
--legacy-secondary-rgb: 26 47 90;
|
||
--legacy-accent-rgb: 26 47 90;
|
||
background-color: var(--background);
|
||
background-image: none;
|
||
}
|
||
|
||
.dark .roundtable-planning ::-webkit-scrollbar-thumb,
|
||
.roundtable-planning--dark ::-webkit-scrollbar-thumb {
|
||
background: rgb(32 132 255 / 70%);
|
||
background: color-mix(in oklch, var(--primary) 45%, var(--border));
|
||
}
|
||
|
||
.dark .roundtable-planning ::-webkit-scrollbar-thumb:hover,
|
||
.roundtable-planning--dark ::-webkit-scrollbar-thumb:hover {
|
||
background: rgb(29 128 255 / 82%);
|
||
background: color-mix(in oklch, var(--primary) 65%, var(--border));
|
||
}
|
||
|
||
.dark .roundtable-planning .custom-scrollbar-inner::-webkit-scrollbar-thumb,
|
||
.roundtable-planning--dark .custom-scrollbar-inner::-webkit-scrollbar-thumb {
|
||
background: rgb(22 119 255 / 35%);
|
||
background: color-mix(in oklch, var(--primary) 35%, transparent);
|
||
}
|
||
|
||
/* =============================================================================
|
||
* 深色兜底映射 —— 把组件里写死的浅色 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;
|
||
}
|
||
|
||
/* ---- 表面：白 / 近白底 → 卡片底（半透明，对齐 sidebar-contents 风格） ---- */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
:is(.bg-white, .bg-white\/70, .hover\:bg-white:hover, .bg-\[\#fcfcfd\], .bg-\[\#fffdfa\]) {
|
||
background-color: var(--card) !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\/40,
|
||
.bg-slate-50\/50, .bg-slate-50\/60, .bg-slate-50\/80, .bg-slate-100,
|
||
.bg-slate-100\/80
|
||
) {
|
||
background-color: var(--muted) !important;
|
||
}
|
||
|
||
/* ---- 次级表面 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;
|
||
}
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .to-white {
|
||
--tw-gradient-to: var(--card) !important;
|
||
}
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
:is(.from-\[var\(--brand-200\)\]) {
|
||
--tw-gradient-from: rgb(26 47 90 / 60%) !important;
|
||
}
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
:is(.via-\[var\(--brand-200\)\]) {
|
||
--tw-gradient-via: rgb(26 47 90 / 60%) !important;
|
||
}
|
||
|
||
/* ---- 品牌浅红底（brand-200 等） → accent ---- */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark) [class*="brand-200"] {
|
||
background-color: rgb(26 47 90 / 70%) !important;
|
||
background-color: color-mix(in oklch, var(--accent) 70%, transparent) !important;
|
||
}
|
||
|
||
/* ---- 中性文字：深 → 正文色 ---- */
|
||
: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;
|
||
}
|
||
|
||
/* ---- 中性文字：中 / 浅 → 次级文字色 ---- */
|
||
: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;
|
||
}
|
||
|
||
/* ---- 中性边框：slate / red / 白 / #e2e8f0（含透明度档）→ border ---- */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
:is(
|
||
.border-white, .border-white\/70, .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;
|
||
}
|
||
|
||
/* ---- divide-slate-100 子项分隔线 → border ---- */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* =============================================================================
|
||
* neutral 家族 + Step1 左栏写死的米色/浅底（业务链关系图背板、分析记录卡）。
|
||
*
|
||
* 这些是 RoundtableEntryRail / 分析记录 用 neutral-* 与米色 arbitrary hex
|
||
* （#FAF6F5 / #ECE7E4 / #E8D0CC）写死的浅色，上面 slate 表只覆盖 slate-* 与
|
||
* #e2e8f0，未含 neutral 与这些米色，导致深色下「关系图背景」「第N步 tag 底」
|
||
* 等仍泛白。这里按 slate 同一套语义 token 收口；neutral-900 浮层底（深色 tooltip）
|
||
* 保留不动。
|
||
* ========================================================================== */
|
||
|
||
/* ---- 表面：米白底 / neutral-50·100（含 tag 底）→ muted ---- */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
:is(
|
||
.bg-\[\#FAF6F5\], .bg-\[\#faf6f5\],
|
||
.bg-neutral-50, .bg-neutral-50\/50, .bg-neutral-100
|
||
) {
|
||
background-color: var(--muted) !important;
|
||
}
|
||
|
||
/* ---- 次级表面 hover：neutral-50 → accent ---- */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
.hover\:bg-neutral-50:hover {
|
||
background-color: var(--accent) !important;
|
||
}
|
||
|
||
/* ---- neutral / 米色边框（含 #ECE7E4 / #E8D0CC 虚线，透明度档）→ border ---- */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
:is(
|
||
.border-neutral-100, .border-neutral-200, .border-neutral-300,
|
||
.hover\:border-neutral-300:hover,
|
||
.border-\[\#ECE7E4\], .border-\[\#ece7e4\],
|
||
.border-\[\#E8D0CC\], .border-\[\#E8D0CC\]\/60
|
||
) {
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* ---- neutral 文字：深 → 正文色 ---- */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
:is(.text-neutral-900, .text-neutral-800, .text-neutral-700) {
|
||
color: var(--foreground) !important;
|
||
}
|
||
|
||
/* ---- neutral 文字：中 / 浅 → 次级文字色（深色 tooltip 内的 neutral-300 同样可读） ---- */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
:is(.text-neutral-500, .text-neutral-400, .text-neutral-300) {
|
||
color: var(--muted-foreground) !important;
|
||
}
|
||
|
||
/* ---- Step1 右侧「澄清记录」：覆盖 hover:bg-slate-50/80，避免深色下泛灰白 ---- */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
.roundtable-clarification-entry:hover {
|
||
background-color: rgb(22 119 255 / 18%) !important;
|
||
}
|
||
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
.roundtable-clarification-entry:hover h4 {
|
||
color: #e8edf5 !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: rgb(22 119 255 / 30%) !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: rgb(32 132 255 / 70%) !important;
|
||
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: #054059 !important;
|
||
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: #20a1ca !important;
|
||
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: #333e42 !important;
|
||
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: #809598 !important;
|
||
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: rgb(245 158 11 / 35%) !important;
|
||
--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: #2d2b4e !important;
|
||
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: #053d6f !important;
|
||
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: #1f98f5 !important;
|
||
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: #212e6e !important;
|
||
background-color: color-mix(in oklch, #a855f7 18%, var(--card)) !important;
|
||
}
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .border-purple-200 {
|
||
border-color: #5f77fb !important;
|
||
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: #2f3144 !important;
|
||
background-color: color-mix(in oklch, #f97316 18%, var(--card)) !important;
|
||
}
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .border-orange-200\/50 {
|
||
border-color: #828bc7 !important;
|
||
border-color: color-mix(in oklch, #f97316 42%, var(--border)) !important;
|
||
}
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .bg-pink-100\/40 {
|
||
background-color: #2e2862 !important;
|
||
background-color: color-mix(in oklch, #ec4899 18%, var(--card)) !important;
|
||
}
|
||
|
||
/* =============================================================================
|
||
* 残留红色清理 —— 内联 SVG 红填充 + 红色发光阴影 → 深蓝系。
|
||
* （这些是写死在组件里的红：头像 fill 属性、按钮 rgba(245,34,45) 阴影，
|
||
* 不经 token，需在此单独改写；仅深色生效。）
|
||
* ========================================================================== */
|
||
|
||
/* 头像等内联 SVG 的红色 fill（CSS 可覆盖 SVG presentation 属性） */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark) [fill="#f5222d"] {
|
||
fill: #1677ff !important;
|
||
}
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark) [fill="#cf1322"] {
|
||
fill: #0958d9 !important;
|
||
}
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark) [fill="#a8071a"] {
|
||
fill: #003eb3 !important;
|
||
}
|
||
|
||
/* 红色发光阴影 → 蓝色发光 */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
.shadow-\[0_2px_8px_rgba\(245\2c 34\2c 45\2c 0\.15\)\] {
|
||
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.28) !important;
|
||
}
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark)
|
||
.shadow-\[0_8px_30px_rgba\(245\2c 34\2c 45\2c 0\.06\)\] {
|
||
box-shadow: 0 8px 30px rgba(22, 119, 255, 0.14) !important;
|
||
}
|
||
|
||
/* =============================================================================
|
||
* 结构件覆盖（顶栏 / 步骤条 / 次要按钮）—— 保留原有针对性规则。
|
||
* ========================================================================== */
|
||
|
||
/* 顶栏 */
|
||
.dark .roundtable-planning > header,
|
||
.roundtable-planning--dark > header {
|
||
background-color: #122347 !important;
|
||
border-color: var(--border) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* 步骤条容器 */
|
||
.dark .roundtable-planning header .rounded-2xl.border,
|
||
.roundtable-planning--dark header .rounded-2xl.border {
|
||
background-color: var(--muted) !important;
|
||
border-color: var(--border) !important;
|
||
}
|
||
|
||
/* 次要按钮（白底） */
|
||
.dark .roundtable-planning header button.bg-white,
|
||
.roundtable-planning--dark header button.bg-white {
|
||
background-color: var(--secondary) !important;
|
||
color: var(--foreground) !important;
|
||
}
|
||
|
||
/* 历史记录下拉面板：深色下改为不透明实底（避免 token 半透明透出底图）。 */
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .rt-history-dropdown-panel {
|
||
background-color: #122347 !important;
|
||
background-image: none !important;
|
||
}
|
||
|
||
:is(.dark .roundtable-planning, .roundtable-planning--dark) .rt-history-dropdown-header {
|
||
background-color: #122347 !important;
|
||
}
|
||
|
||
/* =============================================================================
|
||
* 派活链路流程图连接线（DispatchChainModal）。
|
||
*
|
||
* 弹窗经 Radix Dialog portal 到 <body>，**不在** .roundtable-planning 作用域内，
|
||
* 因此这些类必须是**全局**（无作用域前缀），并用语义 token（--primary/--border）
|
||
* 自适应明暗。连线三态：pending(灰虚线静止) / done(主色实线) / active(主色流动虚线)。
|
||
* ========================================================================== */
|
||
@keyframes rt-chain-flow {
|
||
to {
|
||
background-position: 18px 0;
|
||
}
|
||
}
|
||
|
||
.rt-chain-connector {
|
||
width: 100%;
|
||
height: 3px;
|
||
border-radius: 9999px;
|
||
/* 默认（pending）：灰色等距虚线 */
|
||
background-image: linear-gradient(
|
||
90deg,
|
||
var(--border) 45%,
|
||
transparent 45%
|
||
);
|
||
background-size: 12px 100%;
|
||
background-repeat: repeat-x;
|
||
}
|
||
|
||
.rt-chain-connector--done {
|
||
background-image: none;
|
||
background-color: var(--primary);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.rt-chain-connector--active {
|
||
background-image: linear-gradient(
|
||
90deg,
|
||
var(--primary) 45%,
|
||
transparent 45%
|
||
);
|
||
background-size: 18px 100%;
|
||
background-repeat: repeat-x;
|
||
animation: rt-chain-flow 0.55s linear infinite;
|
||
}
|
||
|
||
/* Custom elegant scrollbar styling */
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #cbd5e1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #94a3b8;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
background: #e2e8f0;
|
||
}
|
||
|
||
.custom-scrollbar-inner::-webkit-scrollbar-thumb {
|
||
background: #fddadc;
|
||
}
|
||
|
||
.dark .custom-scrollbar-inner::-webkit-scrollbar-thumb,
|
||
.roundtable-planning--dark .custom-scrollbar-inner::-webkit-scrollbar-thumb {
|
||
background: rgb(36 135 254 / 65%);
|
||
background: color-mix(in oklch, var(--primary) 35%, var(--border));
|
||
}
|
||
|
||
/* =============================================================================
|
||
* 会商消息列表滚动条易用性修复（Step1/Step2/Step3 都受益）。
|
||
*
|
||
* 症状：鼠标移到右侧纵向滚动条滑块上特别容易触发「左右拖动」，导致点不到滑块。
|
||
*
|
||
* 根因 1（Step2/Step3 有沙箱/流程图分栏时）：分栏拖拽手柄
|
||
* `#roundtable-step2-separator`（react-resizable-panels Separator）默认命中区是
|
||
* `::after { left:50%; width:16px; transform:translateX(-50%) }`——居中跨在分隔线
|
||
* 上、向左探出 8px，正好压住左侧消息列表那条贴右边的纵向滚动条。于是抓滚动条时
|
||
* 实际抓到了 `cursor-col-resize` 的手柄命中区 → 误触发左右拖动、点不到滑块。
|
||
* 修法：把命中区整体挪到分隔线**右侧（沙箱一侧）**，左侧滚动条彻底让出。
|
||
* ID 选择器特异性(1,0,1) 高于 Tailwind 的 `after:*` 工具类(0,1,1)，无视加载顺序生效。
|
||
*
|
||
* 根因 2（所有步骤通用）：默认滚动条只有 6px，太细难抓。仅在 .roundtable-planning
|
||
* 作用域内加宽到 12px，并用「透明边框 + background-clip:padding-box」把可见滑块收
|
||
* 成带内边距的圆条（更像可抓的条，而非贴边细线），命中区仍是整 12px。
|
||
* ========================================================================== */
|
||
#roundtable-step2-separator::after {
|
||
left: 0;
|
||
right: auto;
|
||
width: 14px;
|
||
transform: none;
|
||
}
|
||
|
||
.roundtable-planning ::-webkit-scrollbar {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
.roundtable-planning ::-webkit-scrollbar-thumb {
|
||
border: 3px solid transparent;
|
||
background-clip: padding-box;
|
||
border-radius: 9999px;
|
||
}
|