perch-design / css /task.css
hongcoding's picture
feat: Warm Paper 设计系统开源(48 CSS + 令牌 + 实时预览)
f402bb3 verified
Raw History Blame Contribute Delete
6.5 kB
/* 任务模式(契约 6D:对话/任务切换 + 三档批准)。
只服务 Composer 的模式切换、ChatWorkbench 的任务提示条;Warm Paper 令牌配色。 */
/* 模式切换 pill(对话 | 任务):任务选中时用 accent 底 */
.mode-switch {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid var(--border);
border-radius: var(--radius-control);
background: var(--bg-sunken);
}
.mode-pill {
padding: 4px 12px;
border: none;
border-radius: calc(var(--radius-control) - 2px);
background: transparent;
color: var(--text-secondary);
font-size: 12.5px;
cursor: pointer;
transition: background-color var(--dur) var(--ease);
}
.mode-pill:hover {
color: var(--text);
}
.mode-pill.is-active {
background: var(--accent);
color: var(--bg);
}
/* 权限档三选(下拉) */
.perm-picker {
display: inline-flex;
align-items: center;
gap: 6px;
}
.perm-label {
font-size: 11.5px;
color: var(--text-tertiary);
white-space: nowrap;
}
.perm-picker select {
padding: 4px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-control);
background: var(--bg);
color: var(--text);
font-size: 12.5px;
cursor: pointer;
}
.perm-picker select:focus {
border-color: var(--accent);
}
/* 任务模式头部提示条(琥珀细条,温和不吓人) */
.task-notice {
margin: 0 32px;
padding: 8px 14px;
border: 1px solid var(--border);
border-left: 3px solid var(--warning);
border-radius: var(--radius-card);
background: var(--bg-elevated);
color: var(--text-secondary);
font-size: 12.5px;
line-height: 1.6;
}
.task-notice strong {
color: var(--text);
font-weight: 600;
}
.task-notice-mode {
color: var(--accent);
font-weight: 600;
}
/* ── 狂暴模式(契约 9A):提示条左上的火焰开关 + 进行中状态 ──────────── */
.task-notice-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
/* 火焰开关:关闭=幽灵按钮;开启=金渐变徽章(warning 金 → accent 陶土,走令牌) */
.frenzy-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-control);
background: transparent;
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition:
background var(--dur) var(--ease),
color var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.frenzy-toggle:hover {
color: var(--text);
border-color: var(--warning);
}
.frenzy-toggle.is-on {
border-color: transparent;
color: var(--bg);
background: linear-gradient(135deg, var(--warning), var(--accent));
}
.frenzy-toggle.is-on:hover {
color: var(--bg);
filter: brightness(1.04);
}
.frenzy-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* 自查 / 站岗进行中状态小签(契约 9A:「自查第 N 轮」「站岗质询」) */
.task-notice-status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--radius-chip);
font-size: 11.5px;
font-weight: 600;
background: var(--bg-sunken);
color: var(--text-secondary);
animation: task-status-pulse 1.6s var(--ease) infinite;
}
.task-notice-status.is-sentry {
color: var(--warning);
background: color-mix(in srgb, var(--warning) 12%, var(--bg));
}
.task-notice-status.is-check {
color: var(--accent);
background: var(--accent-soft);
}
@keyframes task-status-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.55;
}
}
/* 狂暴开启时的一句话说明 */
.task-notice-frenzy-note {
font-size: 11.5px;
color: var(--text-tertiary);
}
/* 提示条正文段落(配合上面的 head 行,去掉默认段距) */
.task-notice-body {
margin: 0;
}
/* 消息流里的工具卡容器(卡片视觉复用 agent.css 的 .agent-tool-card) */
.msg-task-cards {
display: flex;
flex-direction: column;
gap: 8px;
margin: 4px 0 8px;
}
/* 「本会话自动允许」勾选框 */
.task-always {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
}
.task-always input {
accent-color: var(--accent);
cursor: pointer;
}
/* ── edit_file 改动预览(契约 6H):旧文 / 新文两栏 mono 对照 ────────── */
.edit-diff {
border: 1px solid var(--border);
border-radius: var(--radius-chip);
overflow: hidden;
margin-top: 6px;
}
.edit-diff-label {
font-size: 11px;
color: var(--text-tertiary);
padding: 4px 10px;
background: var(--bg-sunken);
border-bottom: 1px solid var(--border);
}
.edit-diff-cols {
display: grid;
grid-template-columns: 1fr 1fr;
}
.edit-diff-col {
min-width: 0;
}
.edit-diff-col + .edit-diff-col {
border-left: 1px solid var(--border);
}
.edit-diff-col-head {
font-size: 11px;
padding: 3px 10px;
font-family: var(--font-mono);
border-bottom: 1px solid var(--border);
}
/* 旧文淡红底 / 新文淡绿底(语义色 danger/success 的淡底,深浅色都成立) */
.edit-diff-col.is-removed .edit-diff-col-head {
color: var(--danger);
background: color-mix(in srgb, var(--danger) 12%, var(--bg));
}
.edit-diff-col.is-added .edit-diff-col-head {
color: var(--success);
background: color-mix(in srgb, var(--success) 12%, var(--bg));
}
.edit-diff-col pre {
margin: 0;
padding: 6px 0;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.55;
overflow-x: auto;
}
.edit-diff-col.is-removed pre {
background: color-mix(in srgb, var(--danger) 6%, var(--bg));
}
.edit-diff-col.is-added pre {
background: color-mix(in srgb, var(--success) 6%, var(--bg));
}
.edit-diff-line {
padding: 0 10px;
white-space: pre-wrap;
word-break: break-all;
}
/* 窄屏两栏改上下叠放,避免挤成一条 */
@media (max-width: 640px) {
.edit-diff-cols {
grid-template-columns: 1fr;
}
.edit-diff-col + .edit-diff-col {
border-left: none;
border-top: 1px solid var(--border);
}
}
/* 超过 40 行的折叠开关 */
.edit-diff-toggle {
display: block;
width: 100%;
padding: 5px 10px;
font-size: 11px;
color: var(--text-secondary);
background: var(--bg-sunken);
border: none;
border-top: 1px solid var(--border);
cursor: pointer;
text-align: center;
}
.edit-diff-toggle:hover {
color: var(--text);
}