/* ============================================================ 彩色主题（叠加在墨水极简 body.ink 之上）红房子 #cc4045 / 商务蓝 #0153e5 / 薄荷绿 #13a7a5 本文件在 styles-ink.css 之后加载，同优先级规则后者生效。用法： ============================================================ */ /* ---------- 红房子红 #cc4045 ---------- */ body.red-theme { --primary: 357 58% 53%; --ring: 357 58% 53%; --info: 357 58% 53%; --info-bg: 357 58% 95%; --success: 142 64% 28%; --success-bg: 142 69% 94%; --warning: 32 95% 44%; --warning-bg: 48 96% 92%; } body.red-theme .btn-primary:hover { background: hsl(357 58% 45%); } /* ---------- 商务蓝 #0153e5 ---------- */ body.blue-theme { --primary: 218 99% 45%; --ring: 218 99% 45%; --info: 218 99% 45%; --info-bg: 218 99% 95%; --success: 142 64% 28%; --success-bg: 142 69% 94%; --warning: 32 95% 44%; --warning-bg: 48 96% 92%; } body.blue-theme .btn-primary:hover { background: hsl(218 99% 38%); } /* ---------- 薄荷绿 #13a7a5 ---------- */ body.mint-theme { --primary: 179 80% 36%; --ring: 179 80% 36%; --info: 179 80% 36%; --info-bg: 179 80% 95%; --success: 142 64% 28%; --success-bg: 142 69% 94%; --warning: 32 95% 44%; --warning-bg: 48 96% 92%; } body.mint-theme .btn-primary:hover { background: hsl(179 80% 30%); } /* ============================================================ 品牌色应用到关键交互元素（三个彩色主题共用） ============================================================ */ :is(body.red-theme, body.blue-theme, body.mint-theme) .btn-primary { background: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .btn-primary:disabled { background: hsl(var(--primary) / .5); } :is(body.red-theme, body.blue-theme, body.mint-theme) .nav-item.active { color: hsl(var(--primary)); background: hsl(var(--primary) / .08); } :is(body.red-theme, body.blue-theme, body.mint-theme) .seg-item.active { background: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .tab.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .tab.active .count { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .progress > div { background: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .pagination .page-btn.active { background: hsl(var(--primary)); border-color: transparent; } :is(body.red-theme, body.blue-theme, body.mint-theme) .text-primary { color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .badge-primary { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .badge-info { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .chat-msg.user .bubble { background: hsl(var(--primary)); border-color: transparent; } :is(body.red-theme, body.blue-theme, body.mint-theme) .chat-msg .bubble .ref a { color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .input:focus, :is(body.red-theme, body.blue-theme, body.mint-theme) .select:focus, :is(body.red-theme, body.blue-theme, body.mint-theme) .textarea:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .15); } :is(body.red-theme, body.blue-theme, body.mint-theme) .step.done .step-dot { background: hsl(var(--primary)); border-color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .step.active .step-dot { border-color: hsl(var(--primary)); color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .step-line.done { background: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .flow-node.selected { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .15); } :is(body.red-theme, body.blue-theme, body.mint-theme) .member.selected > rect, :is(body.red-theme, body.blue-theme, body.mint-theme) .member.selected > circle, :is(body.red-theme, body.blue-theme, body.mint-theme) .member.selected > path:first-child { stroke: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .palette-item:hover { border-color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .theme-opt .check svg { color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .g-tooltip { border-color: hsl(var(--primary) / .45); } :is(body.red-theme, body.blue-theme, body.mint-theme) .badge-success { background: hsl(var(--success-bg)); color: hsl(var(--success)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .badge-warning { background: hsl(var(--warning-bg)); color: hsl(var(--warning)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .badge-destructive { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .avatar { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .sidebar-brand .logo { background: hsl(var(--primary)); } :is(body.red-theme, body.blue-theme, body.mint-theme) .agent-icon { background: hsl(var(--primary) / .08); color: hsl(var(--primary)); }