283 lines
7.1 KiB
CSS
283 lines
7.1 KiB
CSS
/* 并行多智能体面板样式。
|
||
*
|
||
* 嵌入安全：只引 Tailwind 的 theme + utilities（**不引 preflight**，避免重置宿主全局样式）。
|
||
* 颜色用作用域内的 `--pa-*` 深蓝 token（取自《深蓝 UI 规范》ZS-004 / ZS-002，与圆桌 Step2
|
||
* 深色一致），全部包在根类 `.parallel-agents` 下，绝不污染宿主。布局用 Tailwind 工具类，
|
||
* 主题色用下面的 `.pa-*` 语义类。 */
|
||
|
||
@layer theme, base, components, utilities;
|
||
@import "tailwindcss/theme.css" layer(theme);
|
||
@import "tailwindcss/utilities.css" layer(utilities);
|
||
|
||
/* ── 作用域 token（深色深蓝，自带成色，不依赖宿主主题）─────────────────────── */
|
||
.parallel-agents {
|
||
--pa-bg: #0c1836; /* 页面背景 zs-004-09 */
|
||
--pa-card: #122347; /* 卡片 / 气泡容器 zs-004-08 */
|
||
--pa-muted: #16294d; /* 次级表面（步骤卡 / 并行列底） */
|
||
--pa-accent: #1a2f5a; /* hover / 软高亮 */
|
||
--pa-fg: #c5cfe0; /* 正文 zs-004-02 */
|
||
--pa-fg-muted: #6e88b0; /* 次级文字 zs-004-04 */
|
||
--pa-border: #2d4473; /* 容器边框 zs-004-06 */
|
||
--pa-input: #4a6491; /* 控件描边 */
|
||
--pa-primary: #1677ff; /* 主操作 zs-002-06 */
|
||
--pa-primary-fg: #ffffff;
|
||
--pa-chip-bg: #16335f; /* badge 底 */
|
||
--pa-chip-fg: #4096ff; /* badge 文字 */
|
||
--pa-amber: #f59e0b;
|
||
--pa-emerald: #10b981;
|
||
--pa-rose: #ef4444;
|
||
|
||
color: var(--pa-fg);
|
||
background-color: var(--pa-bg);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
box-sizing: border-box;
|
||
}
|
||
.parallel-agents *,
|
||
.parallel-agents *::before,
|
||
.parallel-agents *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 滚动条 */
|
||
.parallel-agents ::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
.parallel-agents ::-webkit-scrollbar-thumb {
|
||
background: color-mix(in oklch, var(--pa-primary) 40%, var(--pa-border));
|
||
border-radius: 999px;
|
||
}
|
||
.parallel-agents ::-webkit-scrollbar-thumb:hover {
|
||
background: color-mix(in oklch, var(--pa-primary) 60%, var(--pa-border));
|
||
}
|
||
|
||
/* ── 语义颜色类（组件用这些上色，布局仍用 Tailwind 工具类）──────────────────── */
|
||
.parallel-agents .pa-bg {
|
||
background-color: var(--pa-bg);
|
||
}
|
||
.parallel-agents .pa-card {
|
||
background-color: var(--pa-card);
|
||
}
|
||
.parallel-agents .pa-surface {
|
||
background-color: var(--pa-muted);
|
||
}
|
||
.parallel-agents .pa-surface-soft {
|
||
background-color: color-mix(in oklch, var(--pa-muted) 55%, transparent);
|
||
}
|
||
.parallel-agents .pa-border {
|
||
border-color: var(--pa-border);
|
||
}
|
||
.parallel-agents .pa-text {
|
||
color: var(--pa-fg);
|
||
}
|
||
.parallel-agents .pa-text-muted {
|
||
color: var(--pa-fg-muted);
|
||
}
|
||
.parallel-agents .pa-text-primary {
|
||
color: var(--pa-primary);
|
||
}
|
||
|
||
/* 输入框 / 文本域 */
|
||
.parallel-agents .pa-input {
|
||
background-color: var(--pa-card);
|
||
border: 1px solid var(--pa-border);
|
||
color: var(--pa-fg);
|
||
border-radius: 8px;
|
||
}
|
||
.parallel-agents .pa-input::placeholder {
|
||
color: color-mix(in oklch, var(--pa-fg-muted) 80%, transparent);
|
||
}
|
||
.parallel-agents .pa-input:focus {
|
||
outline: none;
|
||
border-color: color-mix(in oklch, var(--pa-primary) 55%, var(--pa-border));
|
||
}
|
||
|
||
/* 主按钮 / 次按钮 */
|
||
.parallel-agents .pa-btn-primary {
|
||
background-color: var(--pa-primary);
|
||
color: var(--pa-primary-fg);
|
||
border-radius: 8px;
|
||
transition: filter 0.15s ease;
|
||
}
|
||
.parallel-agents .pa-btn-primary:hover {
|
||
filter: brightness(1.08);
|
||
}
|
||
.parallel-agents .pa-btn-primary:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
.parallel-agents .pa-btn-ghost {
|
||
border: 1px solid var(--pa-border);
|
||
color: var(--pa-fg);
|
||
background-color: transparent;
|
||
border-radius: 8px;
|
||
transition: background-color 0.15s ease;
|
||
}
|
||
.parallel-agents .pa-btn-ghost:hover {
|
||
background-color: var(--pa-accent);
|
||
}
|
||
.parallel-agents .pa-btn-ghost:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 状态徽标（"实时输出" / "已完成" …）—— 对齐 Step2 confidence chip */
|
||
.parallel-agents .pa-badge {
|
||
background-color: var(--pa-chip-bg);
|
||
color: var(--pa-chip-fg);
|
||
border: 1px solid var(--pa-border);
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
border-radius: 4px;
|
||
padding: 1px 6px;
|
||
font-size: 11px;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* 席位状态角标色 */
|
||
.parallel-agents .pa-dot-running {
|
||
background-color: var(--pa-primary);
|
||
color: #fff;
|
||
}
|
||
.parallel-agents .pa-dot-done {
|
||
background-color: var(--pa-emerald);
|
||
color: #fff;
|
||
}
|
||
.parallel-agents .pa-dot-error {
|
||
background-color: var(--pa-rose);
|
||
color: #fff;
|
||
}
|
||
|
||
/* 流式光标 + loading 点 */
|
||
.parallel-agents .pa-cursor {
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 13px;
|
||
margin-left: 2px;
|
||
vertical-align: middle;
|
||
background: var(--pa-primary);
|
||
animation: pa-pulse 1s ease-in-out infinite;
|
||
}
|
||
@keyframes pa-pulse {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.25;
|
||
}
|
||
}
|
||
.parallel-agents .pa-bounce {
|
||
animation: pa-bounce 0.9s infinite;
|
||
}
|
||
@keyframes pa-bounce {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-3px);
|
||
}
|
||
}
|
||
@keyframes pa-spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
.parallel-agents .pa-spin {
|
||
animation: pa-spin 0.8s linear infinite;
|
||
}
|
||
@keyframes pa-ping {
|
||
75%,
|
||
100% {
|
||
transform: scale(1.8);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
.parallel-agents .pa-ping {
|
||
animation: pa-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||
}
|
||
|
||
/* ── Markdown 正文（对齐 Step2 sharedMarkdownComponents 的深色观感）──────────── */
|
||
.parallel-agents .pa-md {
|
||
color: var(--pa-fg);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
word-break: break-word;
|
||
}
|
||
.parallel-agents .pa-md p {
|
||
margin: 0.35em 0;
|
||
}
|
||
.parallel-agents .pa-md h1,
|
||
.parallel-agents .pa-md h2,
|
||
.parallel-agents .pa-md h3,
|
||
.parallel-agents .pa-md h4 {
|
||
font-weight: 700;
|
||
margin: 0.7em 0 0.35em;
|
||
color: var(--pa-fg);
|
||
}
|
||
.parallel-agents .pa-md h1 {
|
||
font-size: 1.3em;
|
||
}
|
||
.parallel-agents .pa-md h2 {
|
||
font-size: 1.18em;
|
||
}
|
||
.parallel-agents .pa-md h3 {
|
||
font-size: 1.06em;
|
||
}
|
||
.parallel-agents .pa-md ul,
|
||
.parallel-agents .pa-md ol {
|
||
margin: 0.35em 0;
|
||
padding-left: 1.4em;
|
||
}
|
||
.parallel-agents .pa-md li {
|
||
margin: 0.2em 0;
|
||
}
|
||
.parallel-agents .pa-md a {
|
||
color: var(--pa-chip-fg);
|
||
text-decoration: underline;
|
||
}
|
||
.parallel-agents .pa-md code {
|
||
background: var(--pa-muted);
|
||
border: 1px solid var(--pa-border);
|
||
border-radius: 4px;
|
||
padding: 0.1em 0.35em;
|
||
font-size: 0.9em;
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
}
|
||
.parallel-agents .pa-md pre {
|
||
background: var(--pa-muted);
|
||
border: 1px solid var(--pa-border);
|
||
border-radius: 8px;
|
||
padding: 0.75em;
|
||
overflow-x: auto;
|
||
margin: 0.5em 0;
|
||
}
|
||
.parallel-agents .pa-md pre code {
|
||
background: transparent;
|
||
border: 0;
|
||
padding: 0;
|
||
}
|
||
.parallel-agents .pa-md blockquote {
|
||
border-left: 3px solid var(--pa-border);
|
||
padding-left: 0.75em;
|
||
color: var(--pa-fg-muted);
|
||
margin: 0.5em 0;
|
||
}
|
||
.parallel-agents .pa-md table {
|
||
border-collapse: collapse;
|
||
margin: 0.5em 0;
|
||
width: 100%;
|
||
}
|
||
.parallel-agents .pa-md th,
|
||
.parallel-agents .pa-md td {
|
||
border: 1px solid var(--pa-border);
|
||
padding: 0.35em 0.6em;
|
||
text-align: left;
|
||
}
|
||
.parallel-agents .pa-md th {
|
||
background: var(--pa-muted);
|
||
}
|