218 lines
6.7 KiB
CSS
218 lines
6.7 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* 圆桌规划 — 浅色红色主题（对齐 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;
|
||
}
|
||
|
||
.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 */
|
||
.dark .roundtable-planning,
|
||
.roundtable-planning--dark {
|
||
--rt-page-bg: var(--background);
|
||
--rt-primary: var(--primary);
|
||
--rt-primary-hover: var(--primary);
|
||
--rt-primary-soft: var(--accent);
|
||
color: var(--foreground);
|
||
background-color: var(--background);
|
||
}
|
||
|
||
.dark .roundtable-planning ::-webkit-scrollbar-thumb,
|
||
.roundtable-planning--dark ::-webkit-scrollbar-thumb {
|
||
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: 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: color-mix(in oklch, var(--primary) 35%, transparent);
|
||
}
|
||
|
||
/* 页面底与浅色专用背景 */
|
||
.dark .roundtable-planning.bg-\[\#fef6f6\],
|
||
.roundtable-planning--dark.bg-\[\#fef6f6\] {
|
||
background-color: var(--background) !important;
|
||
}
|
||
|
||
/* 表面：白底卡片 → card */
|
||
.dark .roundtable-planning .bg-white,
|
||
.roundtable-planning--dark .bg-white {
|
||
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;
|
||
}
|
||
|
||
.dark .roundtable-planning .from-slate-50,
|
||
.roundtable-planning--dark .from-slate-50 {
|
||
--tw-gradient-from: var(--muted) !important;
|
||
}
|
||
|
||
.dark .roundtable-planning .to-white,
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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\] {
|
||
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 {
|
||
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;
|
||
}
|
||
|
||
.dark .roundtable-planning .hover\:bg-slate-50:hover,
|
||
.roundtable-planning--dark .hover\:bg-slate-50:hover {
|
||
background-color: var(--accent) !important;
|
||
}
|
||
|
||
/* 顶栏 */
|
||
.dark .roundtable-planning > header,
|
||
.roundtable-planning--dark > header {
|
||
background-color: var(--card) !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;
|
||
}
|
||
|
||
/* 输入区 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;
|
||
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: color-mix(in oklch, var(--primary) 35%, var(--border));
|
||
}
|