Spaces:
Running
Running
Download css/launcher.css from hongcoding/perch-design: direct link, hf CLI and curl.
- Browser
- Download file 5.82 kB
-
https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/launcher.css
- Command line
-
hf download hf://spaces/hongcoding/perch-design/css/launcher.css
-
curl -L -o launcher.css https://huggingface.co/spaces/hongcoding/perch-design/resolve/main/css/launcher.css
5.82 kB
| /* 启动器:大输入框 + 模糊搜索结果列表(Warm Paper,颜色一律走 theme.css 令牌) */ | |
| /* ---------- 通用容器 ---------- */ | |
| .launcher { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| overflow: hidden; | |
| } | |
| /* ---------- 主窗口内嵌版:普通面板,靠左上对齐留白 ---------- */ | |
| .launcher--page { | |
| flex: 1; | |
| height: 100%; | |
| background: transparent; | |
| } | |
| .launcher--page .launcher-search, | |
| .launcher--page .launcher-body, | |
| .launcher--page .launcher-foot { | |
| width: min(720px, 100%); | |
| } | |
| /* ---------- 浮窗版:毛玻璃 + 圆角 + 极轻阴影 ---------- */ | |
| /* 注意:透明窗口上 WebKit 的 backdrop-filter 会把元素整个画没(macOS 已知坑), | |
| 所以模糊交给系统的窗口特效(tauri.conf.json 的 windowEffects), | |
| CSS 只负责 85% 暖纸底色,透出桌面就靠它本身是半透明的。 */ | |
| .launcher--overlay { | |
| flex: 1; | |
| min-height: 0; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-float); | |
| background: var(--glass); | |
| box-shadow: var(--shadow-float); | |
| animation: launcher-in 180ms var(--ease); | |
| } | |
| /* 透明窗口本体:桌面要从圆角外透出来 */ | |
| body.launcher-surface { | |
| background: transparent; | |
| } | |
| .launcher-overlay { | |
| height: 100%; | |
| display: flex; | |
| padding: 12px; | |
| box-sizing: border-box; | |
| } | |
| @keyframes launcher-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(6px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ---------- 输入区 ---------- */ | |
| .launcher-search { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin: 16px 16px 8px; | |
| padding: 10px 16px; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-card); | |
| background: var(--bg-sunken); | |
| transition: | |
| border-color var(--dur) var(--ease), | |
| background-color var(--dur) var(--ease); | |
| } | |
| .launcher-search:focus-within { | |
| border-color: var(--accent); | |
| } | |
| .launcher-search-icon { | |
| flex-shrink: 0; | |
| color: var(--text-tertiary); | |
| } | |
| .launcher-input { | |
| flex: 1; | |
| min-width: 0; | |
| border: none; | |
| background: transparent; | |
| color: var(--text); | |
| font-family: var(--font-serif); | |
| font-size: 26px; | |
| line-height: 1.4; | |
| letter-spacing: -0.01em; | |
| outline: none; | |
| cursor: text; | |
| } | |
| .launcher-input::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .launcher-kbd { | |
| flex-shrink: 0; | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| white-space: nowrap; | |
| } | |
| /* ---------- 结果列表 ---------- */ | |
| .launcher-body { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 4px 8px 8px; | |
| } | |
| .launcher-list { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .launcher-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); | |
| } | |
| .launcher-item:hover { | |
| background: color-mix(in srgb, var(--accent-soft) 40%, transparent); | |
| } | |
| .launcher-item.is-selected { | |
| background: var(--accent-soft); | |
| } | |
| .launcher-item-name { | |
| flex: 1; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .launcher-item-name mark { | |
| background: transparent; | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .launcher-item-meta { | |
| flex-shrink: 0; | |
| display: flex; | |
| gap: 12px; | |
| font-size: 12.5px; | |
| color: var(--text-tertiary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* ---------- 空态 / 状态行 ---------- */ | |
| .launcher-empty { | |
| padding: 20px 16px; | |
| } | |
| .launcher-empty-title { | |
| margin: 0 0 6px; | |
| font-family: var(--font-serif); | |
| font-size: 20px; | |
| color: var(--text); | |
| } | |
| .launcher-empty-note { | |
| margin: 0; | |
| font-size: 13.5px; | |
| color: var(--text-secondary); | |
| } | |
| .launcher-note { | |
| margin: 0; | |
| padding: 16px; | |
| font-size: 13.5px; | |
| color: var(--text-secondary); | |
| } | |
| .launcher-note.is-error { | |
| color: var(--danger); | |
| } | |
| /* ---------- 底栏 ---------- */ | |
| .launcher-foot { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 10px 20px 14px; | |
| border-top: 1px solid var(--border); | |
| font-size: 12.5px; | |
| color: var(--text-tertiary); | |
| } | |
| .launcher-hint { | |
| color: var(--text-tertiary); | |
| } | |
| .launcher-settings { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 4px; | |
| min-width: 0; | |
| } | |
| .launcher-settings-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 0; | |
| } | |
| .launcher-settings-note { | |
| max-width: 480px; | |
| font-size: 12px; | |
| line-height: 1.6; | |
| color: var(--text-tertiary); | |
| } | |
| .launcher-settings-label { | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| } | |
| .launcher-settings-error { | |
| color: var(--danger); | |
| } | |
| .launcher-chips { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .launcher-chip { | |
| height: 26px; | |
| 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); | |
| } | |
| .launcher-chip:hover { | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| } | |
| .launcher-chip.is-active { | |
| border-color: var(--accent-soft); | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| } | |
| .launcher-foot-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .launcher-refresh { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| height: 28px; | |
| padding: 0 10px; | |
| border: none; | |
| 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); | |
| } | |
| .launcher-refresh:hover { | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| } | |