perch-design / css /launcher.css
hongcoding's picture
feat: Warm Paper 设计系统开源(48 CSS + 令牌 + 实时预览)
f402bb3 verified
Raw History Blame Contribute Delete
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);
}