wangjia
1c4a81b3f3
用 design/assets/icons/ 的 15 个双色 SVG 图标替换现网纯 Unicode 图标： • 拷贝 design/assets/icons/*.svg → web/assets/icons/（15 个） • app.js 顶部新增 ICONS 对象 + icon() 内联 helper • index.html：徽章组（gate/ready/running/deps）、配置按钮（config）、 同步按钮（sync）、搜索输入框（search + filter-search-wrap 包装）、 清除筛选按钮（close）、「新建」/「新建任务」按钮（add） 各区块头加语义图标：project/task/gate/running/flow • app.js 模板字符串：⛓→deps、✕→close（任务行取消/预览关闭/归档关闭）、 依赖等待标签、ap-reason→reason SVG、分支显示→git、事件项 ev-type→event • style.css：新增 svg.icon 基础尺寸规则、filter-search-wrap 布局、 各语义上下文 --icon-accent 注入（暗/浅主题均用 CSS 变量自动适配）、 .ap-reason::before 移除 content:'↳' 改用 SVG • 品牌字符保留不动：▍▮→·— 及状态 CSS 圆点 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1096 lines
45 KiB
CSS
1096 lines
45 KiB
CSS
/* ════════════════════════════════════════════════════════════════
|
||
MAESTRO 调度台 · phosphor console
|
||
碳绿底 + 磷光绿/琥珀/信号红，等宽中文混排，扫描线质感
|
||
════════════════════════════════════════════════════════════════ */
|
||
|
||
:root {
|
||
--bg: #0a0d0b;
|
||
--bg-deep: #070908;
|
||
--panel: #10140f;
|
||
--panel-2: #151b14;
|
||
--line: #232d23;
|
||
--line-soft: #1a221a;
|
||
--ink: #d8e4d4;
|
||
--muted: #76876f;
|
||
--faint: #4a5747;
|
||
|
||
--green: #5fdd7d;
|
||
--green-dim: #2e6b3d;
|
||
--violet: #b88ef5;
|
||
--violet-dim:#503070;
|
||
--amber: #f0b429;
|
||
--amber-dim: #6b5414;
|
||
--red: #ff5d5d;
|
||
--red-dim: #6b2424;
|
||
--cyan: #59c8d8;
|
||
--cyan-dim: #1e4e57;
|
||
|
||
/* ── 辉光（text-shadow / box-shadow 用） ── */
|
||
--glow-green: 0 0 12px rgba(95, 221, 125, .45);
|
||
--glow-violet: 0 0 14px rgba(184, 142, 245, .4);
|
||
--glow-cyan: 0 0 18px rgba(89, 200, 216, .5);
|
||
--glow-red: 0 0 14px rgba(255, 93, 93, .3);
|
||
|
||
/* ── 圆角 ── */
|
||
--radius-xs: 3px;
|
||
--radius-sm: 4px;
|
||
--radius-md: 6px;
|
||
--radius-lg: 10px;
|
||
--radius-dot: 50%;
|
||
|
||
/* ── 间距阶（px） ── */
|
||
--space-1: 4px;
|
||
--space-2: 6px;
|
||
--space-3: 8px;
|
||
--space-4: 10px;
|
||
--space-5: 12px;
|
||
--space-6: 14px;
|
||
--space-7: 16px;
|
||
--space-8: 20px;
|
||
--space-9: 22px;
|
||
|
||
/* ── 控件内边距 ── */
|
||
--pad-btn: 6px 14px;
|
||
--pad-btn-xs: 2px 8px;
|
||
--pad-input: 7px 10px;
|
||
--pad-chip: 1px 8px;
|
||
--pad-card: 12px 14px;
|
||
|
||
/* ── 浮层阴影 ── */
|
||
--shadow-pop: 0 10px 30px rgba(0, 0, 0, .65);
|
||
--shadow-modal: 0 18px 60px rgba(0, 0, 0, .6);
|
||
--shadow-toast: 0 8px 30px rgba(0, 0, 0, .55);
|
||
|
||
/* ── 语义别名 ── */
|
||
--surface-page: var(--bg);
|
||
--surface-rail: var(--bg-deep);
|
||
--surface-card: var(--panel);
|
||
--surface-raised: var(--panel-2);
|
||
--text-body: var(--ink);
|
||
--text-secondary: var(--muted);
|
||
--text-disabled: var(--faint);
|
||
--border-default: var(--line);
|
||
--border-soft: var(--line-soft);
|
||
--accent: var(--green);
|
||
--accent-dim: var(--green-dim);
|
||
--status-go: var(--green);
|
||
--status-gate: var(--violet);
|
||
--status-bad: var(--red);
|
||
--status-run: var(--cyan);
|
||
|
||
--mono: 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace;
|
||
}
|
||
|
||
/* ── Light 主题：<html data-theme="light"> 激活 — 纸白底，信号色加深保对比，-dim 变淡色底 ── */
|
||
[data-theme="light"] {
|
||
--bg: #f3f6f1;
|
||
--bg-deep: #e9eee6;
|
||
--panel: #fcfdfb;
|
||
--panel-2: #e4ebe1;
|
||
--line: #c9d4c6;
|
||
--line-soft: #dbe3d8;
|
||
|
||
--ink: #1d251b;
|
||
--muted: #5c6b57;
|
||
--faint: #92a08c;
|
||
|
||
--green: #1b8f46;
|
||
--green-dim: #b5e2c3;
|
||
--violet: #7747d1;
|
||
--violet-dim:#dcccf6;
|
||
--amber: #946d06;
|
||
--amber-dim: #ecd9a0;
|
||
--red: #cd3434;
|
||
--red-dim: #f2baba;
|
||
--cyan: #0b7488;
|
||
--cyan-dim: #b2dfe7;
|
||
|
||
--glow-green: 0 0 10px rgba(27, 143, 70, .25);
|
||
--glow-violet: 0 0 10px rgba(119, 71, 209, .22);
|
||
--glow-cyan: 0 0 12px rgba(11, 116, 136, .25);
|
||
--glow-red: 0 0 10px rgba(205, 52, 52, .2);
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html, body { height: 100%; }
|
||
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: var(--mono);
|
||
font-size: 13px;
|
||
line-height: 1.55;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 扫描线 + 暗角 氛围层 */
|
||
body::before {
|
||
content: '';
|
||
position: fixed; inset: 0; z-index: 999; pointer-events: none;
|
||
background:
|
||
repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
|
||
radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.5));
|
||
opacity: .5;
|
||
}
|
||
|
||
::selection { background: var(--green-dim); color: #fff; }
|
||
|
||
/* 滚动条 */
|
||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
|
||
::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }
|
||
|
||
/* ── 三栏骨架 ─────────────────────────────────────────────── */
|
||
#app {
|
||
display: grid;
|
||
grid-template-columns: 232px minmax(0,1fr) 320px;
|
||
height: 100vh;
|
||
}
|
||
|
||
#sidebar {
|
||
background: var(--bg-deep);
|
||
border-right: 1px solid var(--line);
|
||
display: flex; flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
#main { overflow-y: auto; padding: 0 22px 60px; }
|
||
|
||
#eventPanel {
|
||
background: var(--bg-deep);
|
||
border-left: 1px solid var(--line);
|
||
overflow-y: auto;
|
||
padding-bottom: 30px;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
body { overflow: auto; }
|
||
#app { grid-template-columns: 1fr; height: auto; }
|
||
#sidebar, #eventPanel { border: none; border-bottom: 1px solid var(--line); }
|
||
}
|
||
|
||
/* ── Logo ────────────────────────────────────────────────── */
|
||
.logo { padding: 20px 16px 14px; border-bottom: 1px solid var(--line-soft); }
|
||
.logo-word {
|
||
font-size: 19px; font-weight: 700; letter-spacing: .28em;
|
||
color: var(--green);
|
||
text-shadow: 0 0 12px rgba(95,221,125,.45);
|
||
}
|
||
.cursor { animation: blink 1.1s steps(1) infinite; margin-left: 1px; }
|
||
@keyframes blink { 50% { opacity: 0; } }
|
||
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .35em; }
|
||
|
||
/* ── 区块标题 ─────────────────────────────────────────────── */
|
||
.sec-head {
|
||
display: flex; align-items: center; gap: 6px;
|
||
font-size: 11px; font-weight: 600; letter-spacing: .22em;
|
||
color: var(--muted); text-transform: uppercase;
|
||
padding: 18px 0 10px;
|
||
position: sticky; top: 0; z-index: 5;
|
||
background: linear-gradient(var(--bg) 75%, transparent);
|
||
}
|
||
#sidebar .sec-head, .side-head {
|
||
display: flex; align-items: center; gap: 6px;
|
||
font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--muted);
|
||
padding: 16px 16px 8px; background: none; position: static;
|
||
}
|
||
#eventPanel .sec-head { padding: 18px 16px 10px; background: linear-gradient(var(--bg-deep) 75%, transparent); }
|
||
.head-mark { color: var(--green); }
|
||
.head-mark.amber { color: var(--amber); }
|
||
.head-mark.violet { color: var(--violet); }
|
||
.head-mark.cyan { color: var(--cyan); }
|
||
.side-head .btn, .sec-head .btn { margin-left: auto; letter-spacing: .1em; }
|
||
|
||
/* ── 项目列表 ─────────────────────────────────────────────── */
|
||
.project-list { list-style: none; flex: 1; }
|
||
.project-list li {
|
||
padding: 8px 16px 8px 12px;
|
||
border-left: 2px solid transparent;
|
||
cursor: pointer;
|
||
display: flex; align-items: center; gap: 9px;
|
||
}
|
||
.project-list li:hover { background: var(--panel); }
|
||
.project-list li.active {
|
||
background: var(--panel-2);
|
||
border-left-color: var(--green);
|
||
}
|
||
.project-list li.active .p-name { color: var(--green); }
|
||
.project-list li.dragging { opacity: .4; }
|
||
.project-list li.drop-over { box-shadow: inset 0 2px 0 var(--green); }
|
||
.p-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
|
||
.p-name { font-weight: 600; font-size: 13px; }
|
||
.p-path { font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
/* 项目 logo：图片优先，加载失败 onerror 移除自身 → 露出首字母徽章 */
|
||
.p-logo-wrap { position: relative; flex: none; width: 26px; height: 26px; }
|
||
.p-logo-fb {
|
||
position: absolute; inset: 0; display: grid; place-items: center;
|
||
font-size: 13px; font-weight: 700; border-radius: 5px; color: #0a0d0b;
|
||
background: hsl(var(--h, 140) 45% 60%);
|
||
}
|
||
.p-logo {
|
||
position: absolute; inset: 0; width: 100%; height: 100%;
|
||
object-fit: cover; border-radius: 5px; background: var(--bg-deep);
|
||
opacity: 0;
|
||
}
|
||
.p-logo.ok { opacity: 1; }
|
||
.p-empty { padding: 14px 16px; color: var(--faint); font-size: 12px; }
|
||
|
||
.side-foot {
|
||
border-top: 1px solid var(--line-soft);
|
||
padding: 10px 16px; font-size: 11px; color: var(--muted);
|
||
display: flex; align-items: center; gap: 7px;
|
||
}
|
||
.ws-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
|
||
.ws-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
|
||
.ws-dot.off { background: var(--amber); animation: pulse 1s infinite; }
|
||
@keyframes pulse { 50% { opacity: .25; } }
|
||
|
||
/* ── 顶栏 ────────────────────────────────────────────────── */
|
||
#topbar {
|
||
display: flex; align-items: flex-end; gap: 14px;
|
||
padding: 22px 0 14px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.proj-title { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
|
||
.proj-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
|
||
.spacer { flex: 1; }
|
||
.gate-count {
|
||
font-size: 11px; letter-spacing: .12em; color: var(--violet);
|
||
border: 1px solid var(--violet-dim); padding: 4px 10px;
|
||
border-radius: var(--radius-xs);
|
||
animation: pulse 2.2s infinite;
|
||
}
|
||
|
||
/* 顶栏动作（同步 todo / 配置） */
|
||
.top-actions { display: flex; align-items: center; gap: 8px; }
|
||
.sync-meta { font-size: 10.5px; color: var(--faint); letter-spacing: .06em; }
|
||
|
||
/* ── 项目配置面板 ─────────────────────────────────────────── */
|
||
.config-panel { padding: 12px 14px; margin-top: 12px; animation: rise .18s ease both; }
|
||
.config-panel .form-row { align-items: flex-end; }
|
||
.cfg-current {
|
||
font-size: 11px; color: var(--muted); letter-spacing: .06em;
|
||
margin-left: auto; padding-bottom: 7px;
|
||
}
|
||
|
||
/* ── Agent 执行面板 ──────────────────────────────────────── */
|
||
.agent-total { color: var(--cyan); letter-spacing: .08em; }
|
||
/* 订阅额度行（5h/周窗口）：cyan 常态，>80% 琥珀，>95% 红 */
|
||
.agent-usage {
|
||
display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
|
||
font-size: 11px; color: var(--muted); letter-spacing: .04em;
|
||
padding: 6px 2px 8px;
|
||
}
|
||
.agent-usage.unavail { color: var(--faint); }
|
||
.usage-seg { color: var(--cyan); white-space: nowrap; }
|
||
.usage-seg .usage-label { color: var(--muted); }
|
||
.usage-seg .usage-bar { letter-spacing: -.04em; text-shadow: 0 0 8px rgba(89,200,216,.35); }
|
||
.usage-seg .usage-reset { color: var(--faint); }
|
||
.usage-seg .usage-na { color: var(--faint); }
|
||
.usage-seg.warn { color: var(--amber); }
|
||
.usage-seg.warn .usage-bar { text-shadow: 0 0 8px rgba(240,180,41,.35); }
|
||
.usage-seg.crit { color: var(--red); }
|
||
.usage-seg.crit .usage-bar { text-shadow: 0 0 8px rgba(255,93,93,.4); }
|
||
.agent-empty {
|
||
padding: 12px 14px; color: var(--faint); font-size: 12px;
|
||
border: 1px dashed var(--line);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
.agent-flex {
|
||
display: flex; gap: 20px; align-items: stretch;
|
||
background: var(--panel); border: 1px solid var(--cyan-dim);
|
||
padding: 12px 16px;
|
||
border-radius: var(--radius-md);
|
||
animation: rise .2s ease both;
|
||
}
|
||
.agent-big {
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
min-width: 64px; padding: 4px 8px;
|
||
font-size: 40px; font-weight: 700; line-height: 1;
|
||
color: var(--cyan); text-shadow: 0 0 18px rgba(89,200,216,.5);
|
||
border-right: 1px solid var(--line-soft);
|
||
}
|
||
.agent-big-sub {
|
||
font-size: 9px; font-weight: 600; letter-spacing: .3em;
|
||
color: var(--muted); margin-top: 6px;
|
||
}
|
||
.agent-groups { flex: 1; display: grid; gap: 10px; min-width: 0; }
|
||
.agent-proj-head {
|
||
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
|
||
font-size: 12px; margin-bottom: 3px;
|
||
}
|
||
.agent-proj-head b { color: var(--ink); letter-spacing: .04em; }
|
||
.agent-proj-meta { font-size: 10.5px; color: var(--faint); letter-spacing: .06em; }
|
||
.agent-run {
|
||
display: flex; gap: 8px; align-items: center;
|
||
font-size: 12px; padding: 3px 0;
|
||
border-bottom: 1px dashed var(--line-soft);
|
||
}
|
||
.agent-run:last-child { border-bottom: none; }
|
||
.agent-run-dot {
|
||
flex: none; width: 6px; height: 6px; border-radius: 50%;
|
||
background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
|
||
animation: pulse .9s infinite;
|
||
}
|
||
.agent-run-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.agent-run-kind {
|
||
flex: none; font-size: 10px; letter-spacing: .1em;
|
||
color: var(--cyan); border: 1px solid var(--cyan-dim); padding: 0 6px;
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
.agent-run-time { flex: none; margin-left: auto; font-size: 10.5px; color: var(--faint); }
|
||
|
||
/* ── 审批闸 ─────────────────────────────────────────────── */
|
||
.gate-section { margin-top: 18px; }
|
||
.gate-stripe {
|
||
height: 5px;
|
||
background: repeating-linear-gradient(-45deg,
|
||
var(--violet) 0 9px, transparent 9px 18px);
|
||
opacity: .8;
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
.gate-head { padding-top: 12px; position: static; background: none; color: var(--violet); }
|
||
|
||
.gate-card {
|
||
background: var(--panel);
|
||
border: 1px solid var(--violet-dim);
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
margin-bottom: 12px;
|
||
animation: rise .25s ease both;
|
||
}
|
||
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
|
||
|
||
.gate-card-head {
|
||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||
padding: 10px 14px;
|
||
border-bottom: 1px solid var(--line-soft);
|
||
}
|
||
.gate-kind {
|
||
font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
|
||
color: var(--bg); background: var(--violet);
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
.gate-title { font-weight: 600; font-size: 13px; }
|
||
.gate-body { padding: 12px 14px; font-size: 12.5px; }
|
||
.gate-doc-label { font-size: 10.5px; color: var(--muted); letter-spacing: .18em; margin: 8px 0 4px; }
|
||
.gate-doc-label:first-child { margin-top: 0; }
|
||
|
||
pre.doc {
|
||
background: var(--bg-deep);
|
||
border: 1px solid var(--line-soft);
|
||
border-left: 2px solid var(--green-dim);
|
||
border-radius: var(--radius-sm);
|
||
padding: 10px 12px;
|
||
font-family: var(--mono); font-size: 12.5px;
|
||
white-space: pre-wrap; word-break: break-word;
|
||
max-height: 280px; overflow-y: auto;
|
||
color: var(--ink);
|
||
}
|
||
pre.doc.empty { color: var(--faint); border-left-color: var(--line); }
|
||
|
||
.gate-actions {
|
||
display: flex; gap: 10px; align-items: center;
|
||
padding: 10px 14px;
|
||
border-top: 1px solid var(--line-soft);
|
||
}
|
||
|
||
.reject-form { padding: 0 14px 12px; display: flex; gap: 10px; align-items: flex-start; }
|
||
.reject-form textarea {
|
||
flex: 1; min-height: 56px;
|
||
border-color: var(--red-dim);
|
||
}
|
||
.reject-form textarea:focus { border-color: var(--red); }
|
||
|
||
/* ── 按钮 ────────────────────────────────────────────────── */
|
||
.btn {
|
||
font-family: var(--mono); font-size: 12px; font-weight: 600;
|
||
letter-spacing: .08em;
|
||
background: transparent; color: var(--ink);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-sm);
|
||
padding: 6px 14px; cursor: pointer;
|
||
transition: all .12s;
|
||
}
|
||
.btn:hover { border-color: var(--muted); background: var(--panel-2); }
|
||
.btn-xs { padding: 2px 8px; font-size: 11px; }
|
||
.btn-ghost { border-color: transparent; color: var(--muted); }
|
||
.btn-ghost:hover { color: var(--green); border-color: var(--green-dim); background: transparent; }
|
||
|
||
.btn-solid {
|
||
background: var(--green); color: var(--bg-deep); border-color: var(--green);
|
||
}
|
||
.btn-solid:hover { background: #79ec94; border-color: #79ec94; box-shadow: 0 0 14px rgba(95,221,125,.35); }
|
||
|
||
.btn-accept { border-color: var(--green-dim); color: var(--green); }
|
||
.btn-accept:hover { background: var(--green); color: var(--bg-deep); border-color: var(--green); box-shadow: 0 0 14px rgba(95,221,125,.3); }
|
||
.btn-reject { border-color: var(--red-dim); color: var(--red); }
|
||
.btn-reject:hover { background: var(--red); color: var(--bg-deep); border-color: var(--red); box-shadow: 0 0 14px rgba(255,93,93,.3); }
|
||
|
||
.btn:disabled { opacity: .4; cursor: not-allowed; }
|
||
|
||
/* ── 表单 ────────────────────────────────────────────────── */
|
||
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); }
|
||
.form-panel { padding: 14px; margin-bottom: 14px; }
|
||
.form-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
|
||
.form-row + .form-row { margin-top: 12px; }
|
||
.form-actions { justify-content: flex-end; }
|
||
|
||
label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); letter-spacing: .08em; }
|
||
label.grow { flex: 1; }
|
||
label.narrow input { width: 76px; }
|
||
.req { color: var(--red); }
|
||
|
||
input[type=text], input[type=number], select, textarea {
|
||
font-family: var(--mono); font-size: 13px;
|
||
background: var(--bg-deep); color: var(--ink);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-sm);
|
||
padding: 7px 10px;
|
||
outline: none;
|
||
transition: border-color .12s;
|
||
}
|
||
input:focus, select:focus, textarea:focus { border-color: var(--green-dim); box-shadow: 0 0 0 1px var(--green-dim); }
|
||
textarea { resize: vertical; min-height: 72px; width: 100%; }
|
||
|
||
/* 复杂度分段选择 */
|
||
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
|
||
.seg input { position: absolute; opacity: 0; pointer-events: none; }
|
||
.seg label {
|
||
padding: 7px 13px; cursor: pointer;
|
||
font-size: 11px; font-weight: 700; letter-spacing: .12em;
|
||
color: var(--faint); flex-direction: row;
|
||
}
|
||
.seg label + input + label, .seg input + label { border-left: 0; }
|
||
.seg label:not(:first-of-type) { border-left: 1px solid var(--line); }
|
||
.seg input:checked + label.seg-a { background: var(--cyan-dim); color: var(--cyan); }
|
||
.seg input:checked + label.seg-h { background: var(--red-dim); color: var(--red); }
|
||
.seg input:checked + label.seg-m { background: var(--amber-dim); color: var(--amber); }
|
||
.seg input:checked + label.seg-e { background: var(--green-dim); color: var(--green); }
|
||
|
||
/* ── 任务树筛选栏 ─────────────────────────────────────────── */
|
||
.filter-bar {
|
||
background: var(--panel); border: 1px solid var(--line);
|
||
border-radius: var(--radius-md);
|
||
padding: 8px 10px; margin-bottom: 12px;
|
||
display: flex; flex-direction: column; gap: 7px;
|
||
}
|
||
.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
||
#filterKw { width: 190px; padding: 4px 9px; font-size: 12px; }
|
||
.fchips { display: inline-flex; gap: 6px; }
|
||
.fchip {
|
||
font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
|
||
background: transparent; color: var(--faint);
|
||
border: 1px solid var(--line); padding: 2px 8px;
|
||
border-radius: var(--radius-xs);
|
||
cursor: pointer; transition: all .1s;
|
||
}
|
||
.fchip:hover { color: var(--ink); border-color: var(--muted); }
|
||
.fchip.on { color: var(--green); border-color: var(--green-dim); background: rgba(95,221,125,.08); }
|
||
.fc-hard.on { color: var(--red); border-color: var(--red-dim); background: rgba(255,93,93,.08); }
|
||
.fc-medium.on { color: var(--amber); border-color: var(--amber-dim); background: rgba(240,180,41,.08); }
|
||
.fgroup {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 2px 4px; border: 1px dashed var(--line-soft);
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
.fgroup-chip { color: var(--muted); }
|
||
.fgroup-chip.part { color: var(--amber); border-color: var(--amber-dim); }
|
||
.fst { font-weight: 400; letter-spacing: .04em; font-size: 10.5px; }
|
||
.filter-count { font-size: 11px; color: var(--amber); letter-spacing: .08em; }
|
||
.task-row.filter-ctx { opacity: .68; }
|
||
.task-row.filter-ctx .t-title { color: var(--muted); }
|
||
|
||
/* ── 任务树 ─────────────────────────────────────────────── */
|
||
.tree-empty {
|
||
padding: 46px 0; text-align: center; color: var(--faint);
|
||
border: 1px dashed var(--line);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
.tree-empty b { display: block; font-size: 15px; color: var(--muted); margin-bottom: 6px; letter-spacing: .2em; }
|
||
|
||
.task-node { border-left: 1px solid var(--line-soft); }
|
||
.task-node.depth-1 { border-left: none; }
|
||
|
||
.task-row {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 8px 10px 8px 6px;
|
||
border-bottom: 1px solid var(--line-soft);
|
||
cursor: pointer;
|
||
transition: background .1s;
|
||
}
|
||
.task-row:hover { background: var(--panel); }
|
||
.task-row.is-gate { background: rgba(184,142,245,.05); }
|
||
.task-row.expanded { background: var(--panel-2); }
|
||
|
||
.caret {
|
||
width: 16px; flex: none; text-align: center;
|
||
color: var(--muted); font-size: 10px;
|
||
transition: transform .12s; user-select: none;
|
||
}
|
||
.caret.open { transform: rotate(90deg); color: var(--green); }
|
||
.caret.leaf { color: var(--faint); }
|
||
|
||
.t-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.t-title .t-id { color: var(--faint); font-size: 10.5px; margin-left: 6px; letter-spacing: 0; }
|
||
.task-row .spacer { flex: 1; min-width: 8px; }
|
||
|
||
.t-prio { font-size: 10.5px; color: var(--faint); flex: none; }
|
||
.t-prio.hot { color: var(--amber); }
|
||
|
||
/* 复杂度徽章 */
|
||
.cplx {
|
||
flex: none; font-size: 10px; font-weight: 700; letter-spacing: .14em;
|
||
padding: 1px 7px; border: 1px solid;
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
.cplx-hard { color: var(--red); border-color: var(--red-dim); background: rgba(255,93,93,.07); }
|
||
.cplx-medium { color: var(--amber); border-color: var(--amber-dim); background: rgba(240,180,41,.07); }
|
||
.cplx-easy { color: var(--green); border-color: var(--green-dim); background: rgba(95,221,125,.07); }
|
||
|
||
/* 复审结论徽章（exec_review 闸 / RESULT 区块） */
|
||
.verdict {
|
||
display: inline-block; vertical-align: 1px; flex: none;
|
||
font-size: 10px; font-weight: 700; letter-spacing: .14em;
|
||
padding: 1px 7px; margin-left: 6px; border: 1px solid;
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
.verdict-approve { color: var(--green); border-color: var(--green-dim); background: rgba(95,221,125,.1); }
|
||
.verdict-reject { color: var(--red); border-color: var(--red-dim); background: rgba(255,93,93,.1); }
|
||
.verdict-none { color: var(--muted); border-color: var(--line); background: rgba(140,150,140,.08); }
|
||
|
||
/* 复审 SUMMARY 区块：略加边框突出 */
|
||
.review-summary { border-left: 2px solid var(--line); padding-left: 10px; }
|
||
|
||
/* 复杂度徽章可点 + 下拉 */
|
||
.cplx-wrap { position: relative; display: inline-flex; flex: none; }
|
||
button.cplx { font-family: var(--mono); cursor: default; }
|
||
button.cplx-btn { cursor: pointer; transition: box-shadow .12s; }
|
||
button.cplx-btn:hover { box-shadow: 0 0 8px rgba(216,228,212,.18); }
|
||
.cplx-pop {
|
||
position: absolute; top: calc(100% + 5px); right: 0; z-index: 60;
|
||
display: flex; gap: 5px;
|
||
background: var(--bg-deep); border: 1px solid var(--line);
|
||
border-radius: var(--radius-md);
|
||
padding: 6px; box-shadow: var(--shadow-pop);
|
||
animation: rise .12s ease both;
|
||
}
|
||
.cplx-pop .cplx { cursor: pointer; }
|
||
.cplx-pop .cplx:hover { filter: brightness(1.35); }
|
||
.cplx-pop .cplx.cur { outline: 1px solid currentColor; outline-offset: 1px; }
|
||
|
||
/* 状态 chip */
|
||
.chip {
|
||
flex: none; display: inline-flex; align-items: center; gap: 5px;
|
||
font-size: 11px; padding: 1px 8px;
|
||
border: 1px solid var(--line); color: var(--muted);
|
||
border-radius: var(--radius-xs);
|
||
white-space: nowrap;
|
||
}
|
||
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||
.chip-idle { color: var(--muted); }
|
||
.chip-work { color: var(--cyan); border-color: var(--cyan-dim); }
|
||
.chip-gate { color: var(--violet); border-color: var(--violet-dim); }
|
||
.chip-gate::before { animation: pulse 1.4s infinite; }
|
||
.chip-container { color: #9bb4c8; border-color: #2c3c4a; }
|
||
.chip-go { color: var(--green); border-color: var(--green-dim); }
|
||
.chip-run { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(89,200,216,.25); }
|
||
.chip-run::before { animation: pulse .8s infinite; }
|
||
.chip-hold { color: var(--faint); }
|
||
.chip-bad { color: var(--red); border-color: var(--red-dim); }
|
||
.chip-bad::before { animation: pulse 1s infinite; }
|
||
.chip-done { color: var(--bg-deep); background: var(--green); border-color: var(--green); font-weight: 700; }
|
||
.chip-dead { color: var(--faint); text-decoration: line-through; }
|
||
.chip-dead::before { background: var(--faint); }
|
||
|
||
/* 子节点缩进 */
|
||
.task-children { margin-left: 22px; }
|
||
|
||
/* ── 任务详情 ─────────────────────────────────────────────── */
|
||
.task-detail {
|
||
background: var(--panel);
|
||
border-bottom: 1px solid var(--line);
|
||
border-left: 2px solid var(--green-dim);
|
||
padding: 14px 16px;
|
||
animation: rise .2s ease both;
|
||
}
|
||
.detail-grid { display: grid; gap: 14px; }
|
||
.detail-label { font-size: 10.5px; color: var(--muted); letter-spacing: .18em; margin-bottom: 4px; }
|
||
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||
|
||
.approval-item {
|
||
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
|
||
font-size: 12px; padding: 5px 0;
|
||
border-bottom: 1px dashed var(--line-soft);
|
||
}
|
||
.approval-item:last-child { border-bottom: none; }
|
||
.ap-act-accept { color: var(--green); font-weight: 700; }
|
||
.ap-act-reject { color: var(--red); font-weight: 700; }
|
||
.ap-gate { color: var(--muted); }
|
||
.ap-time { color: var(--faint); font-size: 11px; margin-left: auto; }
|
||
.ap-reason { width: 100%; color: var(--amber); font-size: 12px; display: flex; align-items: flex-start; gap: 5px; }
|
||
.ap-reason svg.icon { color: var(--faint); flex-shrink: 0; margin-top: 1px; }
|
||
|
||
.result-kv { font-size: 12px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
|
||
.result-kv dt { color: var(--muted); }
|
||
.result-kv dd { word-break: break-all; }
|
||
|
||
.write-box { margin-top: 4px; }
|
||
.write-box .form-actions { margin-top: 8px; }
|
||
.detail-actions { display: flex; gap: 10px; }
|
||
|
||
/* ── 事件流 ─────────────────────────────────────────────── */
|
||
.event-list { list-style: none; padding: 0 14px; }
|
||
.event-list li {
|
||
padding: 7px 0 7px 12px;
|
||
border-bottom: 1px solid var(--line-soft);
|
||
position: relative;
|
||
font-size: 11.5px;
|
||
animation: rise .25s ease both;
|
||
}
|
||
.event-list li::before {
|
||
content: ''; position: absolute; left: 0; top: 13px;
|
||
width: 5px; height: 5px; background: var(--ev, var(--muted));
|
||
border-radius: 1.5px;
|
||
}
|
||
.ev-head { display: flex; gap: 8px; align-items: baseline; }
|
||
.ev-type { font-weight: 600; color: var(--ev, var(--ink)); letter-spacing: .04em; display: inline-flex; align-items: center; gap: 4px; }
|
||
.ev-time { color: var(--faint); font-size: 10.5px; margin-left: auto; flex: none; }
|
||
.ev-detail { color: var(--muted); margin-top: 1px; word-break: break-word; }
|
||
.ev-empty { padding: 30px 0; color: var(--faint); text-align: center; border: none !important; }
|
||
.ev-empty::before { display: none; }
|
||
|
||
li.ev-created { --ev: var(--green); }
|
||
li.ev-status { --ev: var(--cyan); }
|
||
li.ev-approve { --ev: var(--green); }
|
||
li.ev-rejected { --ev: var(--red); }
|
||
li.ev-gatewait { --ev: var(--violet); }
|
||
li.ev-run { --ev: var(--cyan); }
|
||
li.ev-updated { --ev: var(--muted); }
|
||
|
||
/* ── 模态 ────────────────────────────────────────────────── */
|
||
.modal-root { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
|
||
.modal-root[hidden] { display: none; }
|
||
.modal-mask { position: absolute; inset: 0; background: rgba(4,6,5,.78); backdrop-filter: blur(2px); }
|
||
.modal {
|
||
position: relative; width: min(460px, 92vw);
|
||
padding: 18px 20px 20px;
|
||
display: flex; flex-direction: column; gap: 12px;
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: 0 0 0 1px var(--green-dim), var(--shadow-modal);
|
||
animation: rise .18s ease both;
|
||
}
|
||
.modal .sec-head { padding: 0 0 4px; position: static; background: none; }
|
||
|
||
/* ── Toast ───────────────────────────────────────────────── */
|
||
.toast-root {
|
||
position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
|
||
z-index: 1200; display: flex; flex-direction: column; gap: 8px; align-items: center;
|
||
}
|
||
.toast {
|
||
font-family: var(--mono); font-size: 12.5px;
|
||
background: var(--bg-deep);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-md);
|
||
padding: 9px 16px;
|
||
max-width: 70vw;
|
||
animation: toastIn .18s ease both;
|
||
box-shadow: var(--shadow-toast);
|
||
}
|
||
.toast.err { border-color: var(--red); color: var(--red); }
|
||
.toast.ok { border-color: var(--green-dim); color: var(--green); }
|
||
.toast.warn { border-color: var(--amber-dim); color: var(--amber); }
|
||
.toast.out { opacity: 0; transition: opacity .3s; }
|
||
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
|
||
|
||
/* 待 CC 产出占位 */
|
||
.doc-pending { padding: 10px 12px; border: 1px dashed var(--line, #2a3a2a); border-radius: var(--radius-sm); color: var(--dim, #6a7a6a); font-style: italic; }
|
||
|
||
/* ── 全局预览模式（全屏读方案 + 就地裁决） ── */
|
||
.preview-root { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; }
|
||
.preview-root[hidden] { display: none; }
|
||
.preview-mask { position: absolute; inset: 0; background: rgba(4,6,5,.86); backdrop-filter: blur(3px); }
|
||
.preview-panel {
|
||
position: relative; display: flex; flex-direction: column;
|
||
width: min(1080px, 94vw); height: 94vh;
|
||
background: var(--panel); border: 1px solid var(--violet-dim);
|
||
border-radius: var(--radius-lg); overflow: hidden;
|
||
box-shadow: 0 0 0 1px var(--line-soft), 0 24px 64px rgba(0,0,0,.6);
|
||
}
|
||
.preview-head {
|
||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||
padding: 12px 16px; border-bottom: 1px solid var(--line);
|
||
background: var(--panel-2);
|
||
}
|
||
.preview-title { font-weight: 700; font-size: 15px; color: var(--ink); }
|
||
.preview-body {
|
||
flex: 1; overflow-y: auto; padding: 16px 20px 28px;
|
||
}
|
||
.preview-body .doc {
|
||
font-size: 13.5px; line-height: 1.7;
|
||
white-space: pre-wrap; word-break: break-word;
|
||
max-height: none; overflow-y: visible; /* 解除闸卡片 pre.doc 的 280px 限高，由 .preview-body 统一滚动 */
|
||
}
|
||
.preview-body .gate-doc-label { margin-top: 14px; }
|
||
.preview-foot,
|
||
.archive-modal-actions {
|
||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||
padding: 12px 16px; border-top: 1px solid var(--line);
|
||
background: var(--panel-2);
|
||
}
|
||
.preview-reject { flex-basis: 100%; }
|
||
.gate-preview-btn { margin-left: auto; }
|
||
|
||
/* ── Markdown 渲染产出（.doc.md：闸卡片 / 预览 / 任务详情统一） ── */
|
||
.doc.md {
|
||
background: var(--bg-deep);
|
||
border: 1px solid var(--line-soft);
|
||
border-left: 2px solid var(--green-dim);
|
||
border-radius: var(--radius-sm);
|
||
padding: 12px 16px;
|
||
font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
|
||
color: var(--ink);
|
||
white-space: normal; word-break: break-word;
|
||
max-height: 280px; overflow-y: auto;
|
||
}
|
||
.gate-body .doc.md { max-height: 280px; }
|
||
.preview-body .doc.md { max-height: none; overflow-y: visible; font-size: 13.5px; }
|
||
.task-detail .doc.md { max-height: 360px; }
|
||
|
||
.doc.md .md-h { font-weight: 700; margin: 14px 0 6px; color: var(--green); }
|
||
.doc.md .md-h:first-child { margin-top: 0; }
|
||
.doc.md .md-h1 { font-size: 1.25em; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
|
||
.doc.md .md-h2 { font-size: 1.15em; color: var(--amber); }
|
||
.doc.md .md-h3 { font-size: 1.05em; }
|
||
.doc.md .md-h4, .doc.md .md-h5, .doc.md .md-h6 { font-size: 1em; color: var(--muted); }
|
||
.doc.md p { margin: 6px 0; }
|
||
.doc.md ul, .doc.md ol { margin: 6px 0; padding-left: 22px; }
|
||
.doc.md li { margin: 3px 0; }
|
||
.doc.md code {
|
||
background: var(--panel-2); border: 1px solid var(--line-soft);
|
||
border-radius: var(--radius-xs);
|
||
padding: 0 4px; color: var(--cyan); font-size: .95em;
|
||
}
|
||
.doc.md pre.codeblock {
|
||
background: var(--panel-2); border: 1px solid var(--line-soft);
|
||
border-left: 2px solid var(--cyan-dim);
|
||
border-radius: var(--radius-sm);
|
||
padding: 10px 12px; margin: 8px 0;
|
||
white-space: pre-wrap; word-break: break-word; overflow-x: auto;
|
||
}
|
||
.doc.md pre.codeblock code { background: none; border: none; padding: 0; }
|
||
.doc.md blockquote {
|
||
margin: 8px 0; padding: 6px 12px;
|
||
border-left: 2px solid var(--amber-dim); color: var(--muted);
|
||
background: var(--panel-2);
|
||
}
|
||
.doc.md hr { border: none; border-top: 1px dashed var(--line); margin: 12px 0; }
|
||
.doc.md table { border-collapse: collapse; margin: 8px 0; width: 100%; }
|
||
.doc.md th, .doc.md td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }
|
||
.doc.md th { background: var(--panel-2); color: var(--green); }
|
||
.doc.md a { color: var(--cyan); }
|
||
|
||
/* 顶栏：可执行数量徽章（与 gate-count 同形制，绿色系） */
|
||
.ready-count {
|
||
font-size: 11px; letter-spacing: .12em; color: var(--green);
|
||
border: 1px solid var(--green-dim); padding: 4px 10px;
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
|
||
/* ── 顶栏徽章组：默认 图标+数量，hover 展开文字 ── */
|
||
.badge-group { display: flex; align-items: center; gap: 8px; }
|
||
.bdg {
|
||
display: inline-flex; align-items: center;
|
||
font-size: 11.5px; line-height: 1; letter-spacing: .08em;
|
||
height: 28px; padding: 0 10px; /* 固定高度对齐旁边的 .btn，防字形差异撑高 */
|
||
border-radius: var(--radius-sm);
|
||
cursor: default; white-space: nowrap;
|
||
}
|
||
.bdg .bdg-ico {
|
||
margin-right: 5px; font-size: 12px; line-height: 1;
|
||
font-family: var(--mono); /* 锁等宽字体，避免符号掉进 emoji 字体放大 */
|
||
}
|
||
.bdg .bdg-n { font-weight: 700; }
|
||
.bdg .bdg-label {
|
||
max-width: 0; opacity: 0; overflow: hidden;
|
||
transition: max-width .28s ease, opacity .22s ease, margin-left .28s ease;
|
||
}
|
||
.bdg:hover .bdg-label { max-width: 8em; opacity: 1; margin-left: 5px; }
|
||
|
||
.bdg-gate { color: var(--violet); border: 1px solid var(--violet-dim); }
|
||
.bdg-gate:not(.zero) { animation: pulse 2.2s infinite; }
|
||
.bdg-ready { color: var(--green); border: 1px solid var(--green-dim); }
|
||
.bdg-run { color: var(--cyan); border: 1px solid var(--cyan-dim); }
|
||
.bdg-run:not(.zero) .bdg-ico { animation: pulse .9s infinite; }
|
||
.bdg.zero { color: var(--faint); border-color: var(--line-soft); animation: none; }
|
||
|
||
/* ── SVG 图标集（v1.1 双色调） ── */
|
||
svg.icon {
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
vertical-align: -0.15em;
|
||
flex-shrink: 0;
|
||
overflow: visible;
|
||
}
|
||
.sec-head svg.icon,
|
||
.side-head svg.icon { width: 14px; height: 14px; vertical-align: -3px; }
|
||
/* 搜索输入框带图标包装 */
|
||
.filter-search-wrap {
|
||
position: relative; display: inline-flex; align-items: center;
|
||
}
|
||
.filter-search-wrap svg.icon {
|
||
position: absolute; left: 8px; width: 12px; height: 12px;
|
||
color: var(--muted); pointer-events: none; vertical-align: 0;
|
||
}
|
||
.filter-search-wrap input { padding-left: 28px; }
|
||
/* ── 图标语义色（--icon-accent 注入，暗/浅主题自动继承 CSS 变量） ── */
|
||
/* gate 紫 */
|
||
#bdgGate, .gate-section, .gate-card { --icon-accent: var(--violet); }
|
||
/* ready / task / add / sync / config / search / git 绿 */
|
||
#bdgReady, #topActions, .cfg-sync-row, .filter-search-wrap,
|
||
.dep-item.ok, #taskSection .sec-head, .side-head { --icon-accent: var(--green); }
|
||
/* running / event / flow 青 */
|
||
#bdgRun, .agent-section, #eventPanel { --icon-accent: var(--cyan); }
|
||
/* deps / reason 琥珀 */
|
||
#bdgBlocked, .dep-item.wait, .t-deps-wait, .ap-reason { --icon-accent: var(--amber); }
|
||
|
||
/* ── 依赖可视化 ── */
|
||
.t-deps-wait {
|
||
flex: none; font-size: 10.5px; letter-spacing: .06em;
|
||
color: var(--amber); border: 1px dashed var(--amber-dim);
|
||
padding: 1px 7px; line-height: 1.5; white-space: nowrap;
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
.dep-list { display: grid; gap: 4px; }
|
||
.dep-item {
|
||
display: flex; align-items: center; gap: 8px;
|
||
font-size: 12px; padding: 4px 10px;
|
||
background: var(--bg-deep); border: 1px solid var(--line-soft);
|
||
border-left: 2px solid var(--amber-dim);
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
.dep-item.ok { border-left-color: var(--green-dim); }
|
||
.dep-item.ok .dep-mark { color: var(--green); }
|
||
.dep-item.wait .dep-mark { color: var(--amber); }
|
||
.dep-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
/* 依赖锚点跳转 */
|
||
.dep-item { cursor: pointer; transition: border-color .12s, background .12s; }
|
||
.dep-item:hover { background: var(--panel-2); border-color: var(--muted); }
|
||
.dep-go { margin-left: auto; color: var(--faint); font-size: 12px; }
|
||
.dep-item:hover .dep-go { color: var(--cyan); }
|
||
/* 依赖编辑器 */
|
||
.deps-edit-btn { margin-left: 8px; vertical-align: middle; }
|
||
.dep-empty { font-size: 12px; color: var(--faint); padding: 4px 10px; }
|
||
.dep-pick-list { max-height: 240px; overflow-y: auto; }
|
||
.dep-pick {
|
||
display: flex; align-items: center; gap: 8px;
|
||
font-size: 12px; padding: 4px 10px; cursor: pointer;
|
||
background: var(--bg-deep); border: 1px solid var(--line-soft);
|
||
border-left: 2px solid var(--line-soft);
|
||
border-radius: var(--radius-sm);
|
||
transition: border-color .12s, background .12s;
|
||
}
|
||
.dep-pick:hover { background: var(--panel-2); border-color: var(--muted); }
|
||
.dep-pick.on { border-left-color: var(--cyan); }
|
||
.dep-pick.on .dep-check { color: var(--cyan); }
|
||
.dep-check { font-size: 13px; color: var(--faint); }
|
||
.deps-edit-foot { display: flex; gap: 8px; margin-top: 6px; }
|
||
.task-row.flash { animation: locate-flash 1.8s ease-out; }
|
||
@keyframes locate-flash {
|
||
0%, 35% { background: var(--amber-dim); box-shadow: inset 2px 0 0 var(--amber); }
|
||
100% { background: transparent; box-shadow: none; }
|
||
}
|
||
|
||
/* 徽章组扩展：被阻塞 / 总量 */
|
||
.bdg-blocked { color: var(--amber); border: 1px dashed var(--amber-dim); }
|
||
.bdg-total { color: var(--ink); border: 1px solid var(--line); }
|
||
|
||
/* ── 归档区 ── */
|
||
#archiveSection { margin-top: 28px; opacity: .82; }
|
||
.archive-row {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 7px 12px; font-size: 12.5px;
|
||
border-bottom: 1px dashed var(--line-soft);
|
||
}
|
||
.archive-row:hover { background: var(--panel); }
|
||
.archive-row .t-title { color: var(--muted); }
|
||
.archive-subs { flex: none; font-size: 10.5px; color: var(--faint); }
|
||
.archive-time { flex: none; font-size: 11px; color: var(--faint); }
|
||
.archive-size { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
|
||
.archive-size select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); padding: 2px 6px; font-family: var(--mono); border-radius: var(--radius-sm); }
|
||
.archive-pager { display: flex; align-items: center; gap: 12px; padding: 10px 0; justify-content: center; }
|
||
.archive-page { font-size: 11px; color: var(--muted); }
|
||
|
||
/* 归档详情：状态流转时间线 */
|
||
.tl { display: grid; gap: 0; margin-top: 4px; }
|
||
.tl-item {
|
||
display: flex; gap: 12px; align-items: baseline;
|
||
padding: 5px 0 5px 14px; font-size: 12px;
|
||
border-left: 2px solid var(--line);
|
||
position: relative;
|
||
}
|
||
.tl-item::before {
|
||
content: ''; position: absolute; left: -4px; top: 11px;
|
||
width: 6px; height: 6px; border-radius: 50%; background: var(--green-dim);
|
||
}
|
||
.tl-time { flex: none; color: var(--faint); font-size: 11px; min-width: 150px; }
|
||
.tl-text { color: var(--ink); }
|
||
.tl-who { color: var(--muted); font-size: 11px; }
|
||
.archive-row { cursor: pointer; }
|
||
|
||
/* 顶栏动作不换行（同步 todo / 配置 按钮文字曾被挤成两行） */
|
||
.top-actions { flex-wrap: nowrap; }
|
||
.top-actions .btn, .sync-meta { white-space: nowrap; }
|
||
|
||
/* 归档分页底栏：尺寸 chip 组替代原生下拉 */
|
||
.archive-size-chips { display: inline-flex; align-items: center; gap: 6px; margin-left: 18px; }
|
||
.archive-size-label { font-size: 11px; color: var(--faint); margin-right: 2px; }
|
||
|
||
/* 配置面板内的同步行 */
|
||
.cfg-sync-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-soft); align-items: center; gap: 10px; }
|
||
|
||
/* 配置面板：可伸展输入（logo） */
|
||
.config-panel label.grow { flex: 1; display: flex; flex-direction: column; gap: 4px; }
|
||
.config-panel label.grow input { width: 100%; }
|
||
|
||
/* ── 任务行：取消 / 删除快捷按钮（默认隐藏，鼠标悬停行时显示） ── */
|
||
.task-row-cancel,
|
||
.task-row-delete {
|
||
flex: none; opacity: 0; transition: opacity .15s;
|
||
pointer-events: none;
|
||
}
|
||
.task-row:hover .task-row-cancel,
|
||
.task-row:hover .task-row-delete {
|
||
opacity: 1; pointer-events: auto;
|
||
}
|
||
.task-row-cancel { color: var(--red); }
|
||
.task-row-delete { color: var(--faint); }
|
||
.task-row-delete:hover { color: var(--red) !important; }
|
||
|
||
/* ── 任务详情：取消 / 删除操作区 ── */
|
||
.detail-actions {
|
||
display: flex; align-items: flex-start; gap: 10px;
|
||
flex-wrap: wrap;
|
||
padding-top: 6px;
|
||
border-top: 1px dashed var(--line-soft);
|
||
}
|
||
.detail-action-confirm {
|
||
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
||
padding: 6px 10px;
|
||
background: rgba(255,93,93,.06);
|
||
border: 1px solid var(--red-dim);
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
.detail-action-confirm-del {
|
||
background: rgba(255,93,93,.09);
|
||
}
|
||
.detail-confirm-msg {
|
||
font-size: 12px; color: var(--ink);
|
||
}
|
||
|
||
/* ── 归档详情：执行历史 + 转录回放 ── */
|
||
.run-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
|
||
.run-item { border: 1px solid var(--line-soft); background: var(--panel); padding: 8px 10px; border-radius: var(--radius-md); }
|
||
.run-head { display: flex; align-items: center; gap: 10px; font-size: 12px; flex-wrap: wrap; }
|
||
.run-head .spacer { flex: 1; }
|
||
.run-kind { color: var(--ink); font-weight: 600; }
|
||
.run-st { font-size: 11px; padding: 1px 6px; border: 1px solid var(--line); color: var(--muted); border-radius: var(--radius-xs); }
|
||
.run-st-succeeded { color: var(--green); border-color: var(--green-dim); }
|
||
.run-st-failed { color: var(--red); border-color: var(--red-dim); }
|
||
.run-st-started { color: var(--cyan); border-color: var(--cyan-dim); }
|
||
.run-time { color: var(--faint); font-size: 11px; letter-spacing: 0; }
|
||
.run-err { margin-top: 6px; font-size: 12px; color: var(--red); }
|
||
|
||
.transcript { margin-top: 8px; border-top: 1px dashed var(--line-soft); padding-top: 8px; }
|
||
.transcript-loading, .transcript-empty { color: var(--muted); font-size: 12px; }
|
||
.transcript-err { color: var(--red); font-size: 12px; }
|
||
|
||
.t-stream { display: flex; flex-direction: column; gap: 8px; }
|
||
.t-msg { font-size: 12.5px; border-left: 2px solid var(--line); padding: 2px 0 2px 10px; }
|
||
.t-msg .doc.md { margin-top: 2px; }
|
||
.t-text { border-left-color: var(--green-dim); }
|
||
.t-result { border-left-color: var(--green); }
|
||
.t-tool { border-left-color: var(--cyan-dim); }
|
||
.t-tool-result { border-left-color: var(--amber-dim); }
|
||
.t-tool-result.is-err { border-left-color: var(--red-dim); }
|
||
.t-fallback { border-left-color: var(--amber); }
|
||
.t-badge {
|
||
display: inline-block; font-size: 10px; letter-spacing: .08em;
|
||
padding: 1px 6px; margin-right: 8px; border: 1px solid var(--line); color: var(--muted);
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
.t-badge-a { color: var(--green); border-color: var(--green-dim); }
|
||
.t-badge-r { color: var(--green); border-color: var(--green); }
|
||
.t-badge-t { color: var(--cyan); border-color: var(--cyan-dim); }
|
||
.t-badge-tr { color: var(--amber); border-color: var(--amber-dim); }
|
||
.t-badge-w { color: var(--amber); border-color: var(--amber); }
|
||
.t-tool-name { color: var(--cyan); font-weight: 600; }
|
||
.t-fallback-txt { color: var(--amber); }
|
||
.t-trunc { color: var(--faint); font-size: 11px; margin-top: 2px; }
|
||
.t-pre {
|
||
margin: 4px 0 0; padding: 6px 8px; background: var(--bg-deep); border: 1px solid var(--line-soft);
|
||
border-radius: var(--radius-sm);
|
||
font-size: 11.5px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto;
|
||
}
|
||
.t-fold { margin-top: 4px; }
|
||
.t-fold > summary { cursor: pointer; color: var(--muted); font-size: 11.5px; }
|
||
.t-fold > summary:hover { color: var(--green); }
|
||
.t-fold .t-pre { max-height: 480px; }
|
||
|
||
/* ════════ 指标面板（健康度与成本） ════════ */
|
||
#metricsSection { margin-top: 28px; }
|
||
.metrics-scope { margin-left: 8px; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
|
||
.metric-cards {
|
||
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 10px;
|
||
}
|
||
.metric-card {
|
||
border: 1px solid var(--line); background: var(--panel);
|
||
border-radius: var(--radius-md);
|
||
padding: 10px 12px; min-width: 0;
|
||
}
|
||
.metric-card.est { border-style: dashed; }
|
||
.metric-val {
|
||
font-size: 26px; font-weight: 700; line-height: 1; color: var(--ink);
|
||
}
|
||
.metric-card.ok .metric-val { color: var(--green); text-shadow: 0 0 14px rgba(95,221,125,.35); }
|
||
.metric-card.warn .metric-val { color: var(--amber); text-shadow: 0 0 14px rgba(240,180,41,.3); }
|
||
.metric-card.crit .metric-val { color: var(--red); text-shadow: 0 0 14px rgba(255,93,93,.35); }
|
||
.metric-unit { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 2px; }
|
||
.metric-label {
|
||
margin-top: 6px; font-size: 10px; font-weight: 600;
|
||
letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
|
||
}
|
||
.metric-sub { margin-top: 4px; font-size: 11px; color: var(--faint); }
|
||
.metric-est { color: var(--cyan); }
|
||
|
||
.metric-models {
|
||
margin-top: 14px; border: 1px solid var(--line-soft);
|
||
background: var(--bg-deep); padding: 10px 12px;
|
||
border-radius: var(--radius-md);
|
||
}
|
||
.metric-models-head {
|
||
font-size: 10px; font-weight: 600; letter-spacing: .14em;
|
||
text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
|
||
}
|
||
.metric-model-row {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 3px 0; font-size: 11.5px;
|
||
}
|
||
.metric-model-name { width: 90px; flex: none; color: var(--cyan); }
|
||
.metric-model-bar {
|
||
flex: 1; height: 8px; min-width: 40px;
|
||
background: var(--panel-2); border: 1px solid var(--line-soft); overflow: hidden;
|
||
border-radius: var(--radius-xs);
|
||
}
|
||
.metric-model-fill {
|
||
display: block; height: 100%;
|
||
background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
|
||
}
|
||
.metric-model-num { flex: none; color: var(--muted); white-space: nowrap; }
|