Spaces:
Running
Running
Download css/task.css from hongcoding/perch-design: direct link, hf CLI and curl.
- Browser
- Download file 6.5 kB
-
https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/task.css
- Command line
-
hf download hf://spaces/hongcoding/perch-design/css/task.css
-
curl -L -o task.css https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/task.css
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); | |
| } | |