Spaces:
Running
Running
Download css/glance.css from hongcoding/perch-design: direct link, hf CLI and curl.
- Browser
- Download file 3.79 kB
-
https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/glance.css
- Command line
-
hf download hf://spaces/hongcoding/perch-design/css/glance.css
-
curl -L -o glance.css https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/glance.css
3.79 kB
| /* 每日一瞥(契约 18A A2):Warm Paper 全令牌配色,晨报式克制排版。 | |
| 一句体检(衬线略大)→ 两行任务 → 一行数字 → 预警列表 + 巡检开关。 */ | |
| .glance { | |
| flex: 1; | |
| min-width: 0; | |
| overflow-y: auto; | |
| padding: 36px 48px 48px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| .glance-head h1 { | |
| font-size: 30px; | |
| } | |
| .glance-date { | |
| margin: 6px 0 0; | |
| font-size: 13.5px; | |
| color: var(--text-secondary); | |
| } | |
| /* ── 晨报主体:一句话体检 ─────────────────────────────────────── */ | |
| .glance-card { | |
| max-width: 760px; | |
| padding: 24px 26px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| background: var(--bg-elevated); | |
| } | |
| .glance-headline { | |
| margin: 0; | |
| font-family: var(--font-serif); | |
| font-size: 20px; | |
| font-weight: 600; | |
| line-height: 1.5; | |
| letter-spacing: -0.01em; | |
| color: var(--text); | |
| } | |
| /* 严重度只染 headline 的小徽点(语义色仅用于状态语境) */ | |
| .glance-headline.is-warn::before, | |
| .glance-headline.is-critical::before { | |
| content: ""; | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| margin-right: 10px; | |
| border-radius: 50%; | |
| vertical-align: 0.2em; | |
| } | |
| .glance-headline.is-warn::before { | |
| background: var(--warning); | |
| } | |
| .glance-headline.is-critical::before { | |
| background: var(--danger); | |
| } | |
| .glance-lines { | |
| margin: 16px 0 0; | |
| padding-top: 14px; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .glance-line { | |
| margin: 0; | |
| font-size: 14px; | |
| line-height: 1.65; | |
| color: var(--text-secondary); | |
| } | |
| .glance-digits { | |
| margin: 14px 0 0; | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| font-variant-numeric: tabular-nums; | |
| color: var(--text-secondary); | |
| } | |
| .glance-meta { | |
| margin: 12px 0 0; | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| } | |
| /* ── 预警区 ───────────────────────────────────────────────────── */ | |
| .glance-section { | |
| max-width: 760px; | |
| } | |
| .glance-section h2 { | |
| font-size: 18px; | |
| margin-bottom: 4px; | |
| } | |
| .glance-section-sub { | |
| margin: 0 0 10px; | |
| font-size: 12.5px; | |
| color: var(--text-tertiary); | |
| line-height: 1.5; | |
| } | |
| .glance-alert { | |
| padding: 12px 14px; | |
| border: 1px solid var(--border); | |
| border-left: 3px solid var(--warning); | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-elevated); | |
| margin-bottom: 8px; | |
| } | |
| .glance-alert-title { | |
| margin: 0; | |
| font-weight: 600; | |
| font-size: 13.5px; | |
| color: var(--text); | |
| } | |
| .glance-alert-detail { | |
| margin: 3px 0 0; | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |
| .glance-quiet { | |
| margin: 0; | |
| padding: 12px 14px; | |
| border: 1px dashed var(--border); | |
| border-radius: var(--radius-chip); | |
| font-size: 13px; | |
| color: var(--text-tertiary); | |
| } | |
| /* 巡检开关行(复用 pref-row / pref-switch 的骨架,宽度自适应) */ | |
| .glance-switches { | |
| max-width: 760px; | |
| border-top: 1px solid var(--border); | |
| padding-top: 4px; | |
| } | |
| .glance-switch-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 11px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .glance-switch-row:last-child { | |
| border-bottom: none; | |
| } | |
| .glance-switch-label { | |
| font-size: 13.5px; | |
| color: var(--text); | |
| } | |
| .glance-switch-hint { | |
| margin: 2px 0 0; | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| } | |
| .glance-refresh { | |
| align-self: flex-start; | |
| } | |
| /* 空载 / 出错态(衬线一句话,不画问号机器人) */ | |
| .glance-state { | |
| font-family: var(--font-serif); | |
| font-size: 17px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| .glance-state-error { | |
| color: var(--danger); | |
| } | |