Spaces:
Running
Running
Download css/palette.css from hongcoding/perch-design: direct link, hf CLI and curl.
- Browser
- Download file 6.06 kB
-
https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/palette.css
- Command line
-
hf download hf://spaces/hongcoding/perch-design/css/palette.css
-
curl -L -o palette.css https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/palette.css
6.06 kB
| /* ⌘K 统一浮窗(契约 19A-A1):大输入框 + 模式 chips + 结果区。 | |
| Warm Paper 浮窗样式,颜色一律走 theme.css 令牌。 | |
| 注意(design-system §7 + 坑位记录):透明窗口上 WebKit 的 backdrop-filter | |
| 会把元素整个画没,所以**不写 backdrop-filter**,直接用 85% 暖纸半透明底(--glass)。 */ | |
| /* ---------- 容器 ---------- */ | |
| body.palette-surface { | |
| background: transparent; | |
| } | |
| .palette-overlay { | |
| height: 100%; | |
| display: flex; | |
| padding: 12px; | |
| box-sizing: border-box; | |
| } | |
| .palette-card { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| min-height: 0; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-float); | |
| background: var(--glass); | |
| box-shadow: var(--shadow-float); | |
| overflow: hidden; | |
| animation: palette-in 180ms var(--ease); | |
| } | |
| @keyframes palette-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(6px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ---------- 输入区 ---------- */ | |
| .palette-search { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin: 14px 14px 8px; | |
| padding: 10px 16px; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-card); | |
| background: var(--bg-sunken); | |
| transition: border-color var(--dur) var(--ease); | |
| } | |
| .palette-search:focus-within { | |
| border-color: var(--accent); | |
| } | |
| .palette-search-icon { | |
| flex-shrink: 0; | |
| color: var(--text-tertiary); | |
| } | |
| .palette-input { | |
| flex: 1; | |
| min-width: 0; | |
| border: none; | |
| background: transparent; | |
| color: var(--text); | |
| font-family: var(--font-serif); | |
| font-size: 24px; | |
| line-height: 1.4; | |
| letter-spacing: -0.01em; | |
| outline: none; | |
| cursor: text; | |
| } | |
| .palette-input::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .palette-kbd { | |
| flex-shrink: 0; | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| white-space: nowrap; | |
| } | |
| /* ---------- 模式 chips ---------- */ | |
| .palette-chips { | |
| display: flex; | |
| gap: 6px; | |
| padding: 0 14px 8px; | |
| } | |
| .palette-chip { | |
| display: inline-flex; | |
| align-items: baseline; | |
| gap: 6px; | |
| height: 28px; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 12.5px; | |
| cursor: pointer; | |
| transition: | |
| background-color var(--dur) var(--ease), | |
| border-color var(--dur) var(--ease); | |
| } | |
| .palette-chip:hover { | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| } | |
| .palette-chip.is-active { | |
| border-color: var(--accent-soft); | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| } | |
| .palette-chip-slash { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| color: var(--text-tertiary); | |
| } | |
| /* ---------- 结果区 ---------- */ | |
| .palette-body { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 2px 8px 8px; | |
| } | |
| .palette-list { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .palette-item { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 16px; | |
| width: 100%; | |
| padding: 9px 14px; | |
| border: none; | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 14.5px; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .palette-item:hover { | |
| background: color-mix(in srgb, var(--accent-soft) 40%, transparent); | |
| } | |
| .palette-item.is-selected { | |
| background: var(--accent-soft); | |
| } | |
| .palette-item-name { | |
| flex: 1; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .palette-item-name mark { | |
| background: transparent; | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .palette-item-meta { | |
| flex-shrink: 0; | |
| display: flex; | |
| gap: 12px; | |
| font-size: 12.5px; | |
| color: var(--text-tertiary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* ---------- 空态 / 状态行 ---------- */ | |
| .palette-empty { | |
| padding: 18px 14px; | |
| } | |
| .palette-empty-title { | |
| margin: 0 0 6px; | |
| font-family: var(--font-serif); | |
| font-size: 19px; | |
| color: var(--text); | |
| } | |
| .palette-empty-note { | |
| margin: 0; | |
| font-size: 13.5px; | |
| color: var(--text-secondary); | |
| } | |
| .palette-note { | |
| margin: 0; | |
| padding: 14px; | |
| font-size: 13.5px; | |
| color: var(--text-secondary); | |
| } | |
| .palette-note.is-error { | |
| color: var(--danger); | |
| } | |
| .palette-task { | |
| margin: 6px 6px 0; | |
| padding: 12px 14px; | |
| font-family: var(--font-serif); | |
| font-size: 17px; | |
| line-height: 1.6; | |
| color: var(--text); | |
| } | |
| .palette-error { | |
| margin: 8px 8px 0; | |
| color: var(--danger); | |
| font-size: 12.5px; | |
| } | |
| /* ---------- 闲时提示 ---------- */ | |
| .palette-hints { | |
| padding: 12px 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .palette-hint-line { | |
| margin: 0; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .palette-hint-line.is-quiet { | |
| color: var(--text-tertiary); | |
| } | |
| .palette-hint-line kbd, | |
| .palette-foot kbd { | |
| padding: 1px 5px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-sunken); | |
| font-family: var(--font-mono); | |
| font-size: 11.5px; | |
| color: var(--text); | |
| } | |
| /* ---------- 回答(复用 Markdown;呼吸光标同划词浮层) ---------- */ | |
| .palette-answer { | |
| margin: 4px 6px 0; | |
| } | |
| .palette-answer-body { | |
| max-height: 320px; | |
| overflow-y: auto; | |
| font-size: 14.5px; | |
| line-height: 1.7; | |
| color: var(--text); | |
| } | |
| .palette-answer-body > :first-child { | |
| margin-top: 0; | |
| } | |
| .palette-cursor { | |
| display: inline-block; | |
| width: 2px; | |
| height: 1.05em; | |
| margin-left: 3px; | |
| border-radius: 1px; | |
| background: var(--accent); | |
| vertical-align: text-bottom; | |
| animation: palette-cursor-breathe 1s ease-in-out infinite; | |
| } | |
| @keyframes palette-cursor-breathe { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.15; | |
| } | |
| } | |
| /* ---------- 底栏 ---------- */ | |
| .palette-foot { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 9px 18px 12px; | |
| border-top: 1px solid var(--border); | |
| font-size: 12.5px; | |
| color: var(--text-tertiary); | |
| } | |
| .palette-hint { | |
| color: var(--text-tertiary); | |
| } | |
| .palette-hint.is-quiet { | |
| color: var(--text-tertiary); | |
| opacity: 0.85; | |
| } | |