Spaces:
Running
Running
Download css/expedition.css from hongcoding/perch-design: direct link, hf CLI and curl.
- Browser
- Download file 12.5 kB
-
https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/expedition.css
- Command line
-
hf download hf://spaces/hongcoding/perch-design/css/expedition.css
-
curl -L -o expedition.css https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/expedition.css
12.5 kB
| /* 知识远征(契约 23A P3 · 工作台第四 tab「远征」)——Warm Paper 令牌, | |
| 零硬编码色:所有颜色走 theme.css 变量(深浅色自动跟随)。 | |
| 布局沿用 .bench / .kb 的整页滚动容器(flex:1 + 独立滚动 + 48px 留白)。 */ | |
| .xp { | |
| flex: 1; | |
| min-width: 0; | |
| overflow-y: auto; | |
| padding: 36px 48px 48px; | |
| } | |
| /* ── 页头 ───────────────────────────────────────────────────────── */ | |
| .xp-head { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 24px; | |
| } | |
| .xp-title { | |
| font-family: var(--font-serif); | |
| font-size: 26px; | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| color: var(--text); | |
| margin: 0; | |
| } | |
| .xp-head-sub { | |
| margin: 6px 0 0; | |
| font-size: 13.5px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| max-width: 60ch; | |
| } | |
| .xp-notice { | |
| margin: 0 0 16px; | |
| padding: 10px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg-elevated); | |
| font-size: 13.5px; | |
| line-height: 1.6; | |
| color: var(--text); | |
| } | |
| .xp-notice.is-danger { | |
| border-color: var(--danger); | |
| } | |
| /* ── 卡片(上块 Deep Research / 下块 订阅监控)─────────────────── */ | |
| .xp-card { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| padding: 22px 24px; | |
| margin-bottom: 28px; | |
| } | |
| .xp-card-head { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .xp-card-title { | |
| font-family: var(--font-serif); | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--text); | |
| margin: 0; | |
| } | |
| .xp-card-hint { | |
| font-size: 12.5px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |
| /* ── 表单 ───────────────────────────────────────────────────────── */ | |
| .xp-form { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .xp-input, | |
| .xp-select { | |
| font-family: var(--font-sans); | |
| font-size: 14px; | |
| line-height: 1.65; | |
| color: var(--text); | |
| background: var(--bg-sunken); | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-control); | |
| padding: 9px 12px; | |
| transition: border-color var(--dur) var(--ease); | |
| } | |
| .xp-input { | |
| flex: 1; | |
| min-width: 260px; | |
| } | |
| .xp-input::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .xp-input:focus-visible, | |
| .xp-select:focus-visible { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| .xp-select { | |
| max-width: 260px; | |
| } | |
| /* ── 按钮 ───────────────────────────────────────────────────────── */ | |
| .xp-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| height: 36px; | |
| padding: 0 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 13.5px; | |
| cursor: pointer; | |
| transition: | |
| background-color var(--dur) var(--ease), | |
| border-color var(--dur) var(--ease), | |
| color var(--dur) var(--ease); | |
| } | |
| .xp-btn:hover:not(:disabled) { | |
| background: var(--bg); | |
| } | |
| .xp-btn:disabled { | |
| opacity: 0.55; | |
| cursor: default; | |
| } | |
| .xp-btn:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| .xp-btn-primary { | |
| border-color: transparent; | |
| background: var(--accent); | |
| color: var(--bg); | |
| font-weight: 600; | |
| } | |
| .xp-btn-primary:hover:not(:disabled) { | |
| filter: brightness(0.94); | |
| background: var(--accent); | |
| } | |
| .xp-btn-quiet { | |
| border-color: transparent; | |
| color: var(--text-secondary); | |
| } | |
| .xp-btn-quiet:hover:not(:disabled) { | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| } | |
| .xp-icon-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 28px; | |
| height: 28px; | |
| border: none; | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); | |
| } | |
| .xp-icon-btn:hover { | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| } | |
| .xp-icon-btn:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| /* ── 进度 ───────────────────────────────────────────────────────── */ | |
| .xp-progress { | |
| margin-top: 16px; | |
| padding: 14px 16px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg); | |
| } | |
| .xp-progress-step { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 13.5px; | |
| line-height: 1.6; | |
| color: var(--text); | |
| word-break: break-all; | |
| } | |
| .xp-progress-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 14px; | |
| margin-top: 8px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .xp-bar { | |
| height: 6px; | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-sunken); | |
| overflow: hidden; | |
| margin-top: 12px; | |
| } | |
| .xp-bar-fill { | |
| height: 100%; | |
| background: var(--accent); | |
| border-radius: var(--radius-chip); | |
| transition: width var(--dur) var(--ease); | |
| } | |
| .xp-phase-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| flex-shrink: 0; | |
| } | |
| /* ── 报告 ───────────────────────────────────────────────────────── */ | |
| .xp-report { | |
| margin-top: 18px; | |
| padding-top: 18px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .xp-report-head { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin-bottom: 14px; | |
| } | |
| .xp-report-stats { | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .xp-report-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .xp-sources { | |
| margin: 18px 0 0; | |
| padding: 14px 16px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg); | |
| } | |
| .xp-sources-title { | |
| font-family: var(--font-serif); | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text); | |
| margin: 0 0 10px; | |
| } | |
| .xp-source-list { | |
| margin: 0; | |
| padding-left: 18px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .xp-source-list li { | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |
| .xp-source-list a { | |
| color: var(--text); | |
| text-decoration: underline; | |
| text-underline-offset: 2px; | |
| word-break: break-all; | |
| } | |
| .xp-source-time { | |
| color: var(--text-tertiary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* ── 历史报告 ───────────────────────────────────────────────────── */ | |
| .xp-history { | |
| margin-top: 20px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .xp-history-title { | |
| font-family: var(--font-serif); | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text); | |
| margin: 0 0 8px; | |
| } | |
| .xp-history-list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .xp-history-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| width: 100%; | |
| padding: 10px 8px; | |
| border: none; | |
| border-bottom: 1px solid var(--border); | |
| background: transparent; | |
| color: inherit; | |
| font-family: inherit; | |
| font-size: 13.5px; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .xp-history-item:last-child { | |
| border-bottom: none; | |
| } | |
| .xp-history-item:hover { | |
| background: var(--accent-soft); | |
| } | |
| .xp-history-item:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: -2px; | |
| } | |
| .xp-history-topic { | |
| flex: 1; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| color: var(--text); | |
| } | |
| .xp-history-meta { | |
| flex-shrink: 0; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* ── 空状态 ─────────────────────────────────────────────────────── */ | |
| .xp-empty { | |
| padding: 22px 4px; | |
| font-family: var(--font-serif); | |
| font-size: 15px; | |
| line-height: 1.7; | |
| color: var(--text-secondary); | |
| } | |
| /* ── 订阅列表 ───────────────────────────────────────────────────── */ | |
| .xp-subs { | |
| list-style: none; | |
| margin: 16px 0 0; | |
| padding: 0; | |
| border-top: 1px solid var(--border); | |
| } | |
| .xp-sub { | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .xp-sub-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 4px; | |
| } | |
| .xp-sub.is-changed .xp-sub-name { | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .xp-sub-main { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .xp-sub-name { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-family: var(--font-serif); | |
| font-size: 14.5px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .xp-sub-url { | |
| display: block; | |
| margin-top: 2px; | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .xp-sub-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-top: 5px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .xp-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| height: 20px; | |
| padding: 0 7px; | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-sunken); | |
| color: var(--text-secondary); | |
| font-size: 11px; | |
| font-weight: 500; | |
| font-family: var(--font-sans); | |
| white-space: nowrap; | |
| } | |
| .xp-badge.is-changed { | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| } | |
| .xp-badge.is-error { | |
| background: var(--bg-sunken); | |
| color: var(--danger); | |
| } | |
| .xp-sub-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| flex-shrink: 0; | |
| } | |
| /* 启停开关(沿用 bench-switch 的形制,颜色全走令牌) */ | |
| .xp-switch { | |
| position: relative; | |
| width: 42px; | |
| height: 24px; | |
| flex-shrink: 0; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-sunken); | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); | |
| } | |
| .xp-switch.is-on { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| .xp-switch::after { | |
| content: ""; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| background: var(--bg); | |
| transition: transform var(--dur) var(--ease); | |
| } | |
| .xp-switch.is-on::after { | |
| transform: translateX(18px); | |
| } | |
| .xp-switch:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| /* ── 变化历史(点开展开)───────────────────────────────────────── */ | |
| .xp-history-panel { | |
| padding: 4px 4px 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .xp-change { | |
| padding: 10px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg); | |
| } | |
| .xp-change-head { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .xp-change-body { | |
| margin: 8px 0 0; | |
| font-family: var(--font-mono); | |
| font-size: 12.5px; | |
| line-height: 1.6; | |
| color: var(--text); | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .xp-change-none { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| padding: 8px 4px; | |
| } | |
| /* ── 小工具 ─────────────────────────────────────────────────────── */ | |
| .xp-inline-form { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| align-items: flex-end; | |
| padding-bottom: 4px; | |
| } | |
| .xp-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| min-width: 0; | |
| } | |
| .xp-field.grow { | |
| flex: 1; | |
| min-width: 240px; | |
| } | |
| .xp-field-label { | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| } | |
| .xp-muted { | |
| font-size: 12.5px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |