/* ============================================================ Ink 墨水极简主题（覆盖默认 shadcn tokens）原则：黑白灰阶、大量留白、文字优先、细线分隔、无彩色装饰用法：或给根容器加 .ink ============================================================ */ body.ink { /* 黑白 tokens */ --background: 0 0% 100%; --foreground: 240 6% 9%; --card: 0 0% 100%; --card-foreground: 240 6% 9%; --primary: 0 0% 9%; /* 主色 = 墨黑 */ --primary-foreground: 0 0% 100%; --secondary: 0 0% 97%; --secondary-foreground: 240 6% 9%; --muted: 0 0% 96.5%; --muted-foreground: 240 4% 42%; --accent: 0 0% 95%; --accent-foreground: 240 6% 9%; --border: 240 5% 88%; --input: 240 5% 84%; --ring: 0 0% 9%; --destructive: 0 72% 40%; --destructive-foreground: 0 0% 100%; --success: 240 6% 30%; /* 状态色灰阶化 */ --success-bg: 0 0% 95%; --warning: 0 0% 25%; --warning-bg: 0 0% 93%; --info: 240 5% 35%; --info-bg: 0 0% 96%; --radius: 0.25rem; /* 控件保持紧凑直角，卡片单独圆角 */ --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.06); --shadow-md: 0 6px 16px rgb(0 0 0 / 0.09); --shadow-lg: 0 14px 36px rgb(0 0 0 / 0.14); } /* 标题衬线化：宋体墨感 */ body.ink .brand-name, body.ink .topbar-title, body.ink .page-head h1, body.ink .card-title, body.ink .modal-title, body.ink .drawer-header h2, body.ink .flow-node .node-head, body.ink .agent-card .title { font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Source Han Serif SC", serif; font-weight: 600; letter-spacing: .02em; } /* 留白加大 */ body.ink .content { padding: 32px 36px; } body.ink .card-body { padding: 22px; } body.ink .stat-card { padding: 20px 22px; } body.ink .table td { padding: 13px 16px; } body.ink .table th { padding: 11px 16px; background: hsl(var(--card)); } /* 卡片：圆角 + 柔和阴影 + hover 高亮 + 选中高亮 */ body.ink .card { box-shadow: var(--shadow-sm); border-radius: 12px; border-color: hsl(var(--border)); transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; } body.ink .card:hover { box-shadow: var(--shadow-md); border-color: hsl(240 5% 80%); } body.ink .card-header:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; } body.ink .card-footer:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } body.ink .agent-card.selected, body.ink .kb-item.selected, body.ink .stat-card.selected { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .12), var(--shadow-md); } /* 主按钮墨黑 */ body.ink .btn-primary { background: hsl(var(--primary)); color: #fff; border-radius: 2px; } body.ink .btn-primary:hover { background: hsl(0 0% 20%); } body.ink .btn-outline { border-radius: 2px; } body.ink .btn-ghost { border-radius: 2px; } /* 徽标灰阶化 */ body.ink .badge { background: hsl(var(--secondary)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); font-weight: 500; } body.ink .badge-success, body.ink .badge-warning, body.ink .badge-destructive, body.ink .badge-info, body.ink .badge-primary { background: hsl(var(--secondary)); color: hsl(var(--foreground)); } body.ink .badge .dot { background: hsl(var(--foreground)); } /* 趋势/强调文字去彩色 */ body.ink .trend-up { color: hsl(var(--foreground)); } body.ink .trend-down { color: hsl(var(--destructive)); } body.ink .text-primary { color: hsl(var(--foreground)); font-weight: 500; } body.ink .perm-tag { border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); color: hsl(var(--foreground)); } /* 表单：更细边框 */ body.ink .input, body.ink .select, body.ink .textarea { border-radius: 2px; border-color: hsl(var(--input)); background: #fff; } body.ink .input:focus, body.ink .select:focus, body.ink .textarea:focus { border-color: hsl(var(--foreground)); box-shadow: 0 0 0 2px rgb(0 0 0 / 0.08); } /* 输入框文字提示：等宽感 */ body.ink .input::placeholder { letter-spacing: .02em; } /* Tabs：细线下划线 */ body.ink .tab { border-radius: 0; } body.ink .tab.active { border-bottom-color: hsl(var(--foreground)); } /* 进度条墨黑 */ body.ink .progress > div { background: hsl(var(--foreground)); } /* 侧边栏：白底细线，激活项黑字 */ body.ink .sidebar { background: #fff; } body.ink .nav-item.active { background: hsl(var(--secondary)); color: hsl(var(--foreground)); } body.ink .sidebar-brand .logo { background: hsl(0 0% 9%); border-radius: 2px; } /* 图标按钮 hover 灰 */ body.ink .icon-btn:hover { background: hsl(var(--secondary)); } /* ============================================================ Agent 工作流画布（Ink 专属） ============================================================ */ /* 画布：网格纸质感（极淡点阵） */ body.ink .canvas-area { background-color: #fff; background-image: radial-gradient(circle, rgb(0 0 0 / 0.07) 1px, transparent 1px); background-size: 22px 22px; } /* 节点：纸张卡片 + 细边框 + 编号 */ body.ink .flow-node { border-radius: 2px; border: 1px solid hsl(var(--border)); box-shadow: none; background: #fff; } body.ink .flow-node.selected { border-color: hsl(var(--foreground)); box-shadow: 0 0 0 2px rgb(0 0 0 / 0.10); } body.ink .flow-node .node-head { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--secondary) / .6); font-size: 13px; } body.ink .flow-node .node-head svg { color: hsl(var(--foreground)); } body.ink .flow-node .port { border-color: hsl(var(--foreground)); background: #fff; } /* 节点类型标签（文字化，无彩色） */ .ink .node-tag { display: inline-block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); padding: 1px 6px; border-radius: 2px; margin-left: auto; } /* 连线示意（横向数据流箭头） */ .ink .flow-link { position: absolute; height: 1px; background: hsl(0 0% 30%); transform-origin: left center; } .ink .flow-link::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: hsl(0 0% 30%); } /* 节点面板（左侧 palette）文字化 */ body.ink .palette-item { border-radius: 2px; border-color: hsl(var(--border)); background: #fff; } body.ink .palette-item:hover { border-color: hsl(var(--foreground)); box-shadow: none; } body.ink .palette-item svg { color: hsl(var(--foreground)); } /* 属性面板 */ body.ink .node-prop { background: #fff; } /* 调试面板：等宽日志、行分隔 */ body.ink .debug-panel { border-top: 1px solid hsl(var(--border)); background: #fff; } body.ink .debug-log { font-family: var(--mono); font-size: 12px; line-height: 1.9; background: #fff; } body.ink .debug-log .log-line { display: flex; gap: 10px; padding: 2px 0; border-bottom: 1px dashed hsl(0 0% 92%); } body.ink .debug-log .log-ts { color: hsl(var(--muted-foreground)); flex-shrink: 0; } body.ink .debug-log .log-ok { color: hsl(0 0% 20%); } body.ink .debug-log .log-warn { color: hsl(0 0% 40%); font-weight: 500; } body.ink .debug-log .log-err { color: hsl(0 72% 40%); font-weight: 500; } /* 节点执行状态：墨色圆点 */ body.ink .node-state { width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid hsl(var(--muted-foreground)); display: inline-block; flex-shrink: 0; } body.ink .node-state.running { border-color: hsl(var(--foreground)); background: hsl(var(--foreground)); } body.ink .node-state.done { border-color: hsl(var(--foreground)); background: #fff; } body.ink .node-state.error { border-color: hsl(0 72% 40%); background: hsl(0 72% 40%); } /* 纸感按钮：文字型 */ body.ink .btn-ghost { color: hsl(var(--foreground)); } /* ============================================================ 全站套用 Ink 后的兼容补齐（彩色元素灰阶化） ============================================================ */ /* 头像（含彩色变体）统一灰阶 */ body.ink .avatar, body.ink .avatar.teal, body.ink .avatar.amber, body.ink .avatar.rose { background: hsl(var(--secondary)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); } /* 复选框/单选：墨黑 accent */ body.ink input[type="checkbox"], body.ink input[type="radio"] { accent-color: #111; } /* 步骤条（样本详情/委托进度）墨黑化 */ body.ink .step .step-dot { border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); } body.ink .step.done .step-dot { background: hsl(var(--foreground)); border-color: hsl(var(--foreground)); color: #fff; } body.ink .step.active .step-dot { border-color: hsl(var(--foreground)); color: hsl(var(--foreground)); } body.ink .step-line { background: hsl(var(--border)); } body.ink .step-line.done { background: hsl(var(--foreground)); } /* 分页当前页 */ body.ink .pagination .page-btn.active { background: hsl(var(--foreground)); color: #fff; border-color: transparent; } /* 表格行 hover 更淡 */ body.ink .table tbody tr:hover { background: hsl(0 0% 96%); } /* 画布节点选中/运行状态（etl 画布） */ body.ink .flow-node .node-head svg { color: hsl(var(--foreground)); } body.ink .flow-node .node-body { color: hsl(var(--muted-foreground)); } /* 家系图：选中成员高亮 */ body.ink .member.selected > rect, body.ink .member.selected > circle, body.ink .member.selected > path:first-child { stroke-width: 3; stroke: hsl(0 0% 9%); } /* AI 对话：assistant 气泡细线描边，user 气泡墨黑 */ body.ink .chat-msg .bubble { border: 1px solid hsl(var(--border)); background: #fff; } body.ink .chat-msg.user .bubble { background: hsl(var(--foreground)); color: #fff; border-color: transparent; } body.ink .chat-msg .bubble .tool-call { background: hsl(var(--secondary)); } /* 高亮/信息提示条去彩色（仅墨水黑白主题生效，彩色主题保留品牌色） */ body.ink:not(.red-theme):not(.blue-theme):not(.mint-theme) [style*="info-bg"] { background: hsl(var(--secondary)) !important; } /* 上传虚线框 */ body.ink .card[style*="dashed"] { border-style: dashed !important; } /* 侧边栏品牌区（图片 logo 容器） */ body.ink .sidebar-brand { padding: 14px 18px 12px; } /* AI 预审提示框（报告审核页）灰阶（仅墨水黑白主题） */ body.ink:not(.red-theme):not(.blue-theme):not(.mint-theme) .mt-3 [style*="warning"] { color: hsl(var(--foreground)); }