perch-design / css /prefs-ui.css
hongcoding's picture
feat: Warm Paper 设计系统开源(48 CSS + 令牌 + 实时预览)
f402bb3 verified
Raw History Blame Contribute Delete
3.31 kB
/* 模型偏好分组(契约 14A)的控件样式——只用 theme.css 的色彩令牌,
不硬编码任何颜色;风格对齐设置页其余分组(Warm Paper)。 */
/* 顶部「MiMo 预置建议」一键应用条 */
.mp-preset {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-top: 1px solid var(--border);
}
.mp-preset-text {
min-width: 0;
}
.mp-preset-label {
font-weight: 500;
color: var(--text);
}
.mp-preset-hint {
margin: 2px 0 0;
font-size: 12.5px;
color: var(--text-tertiary);
line-height: 1.5;
}
.mp-preset-btn {
appearance: none;
border: 1px solid var(--accent);
background: var(--accent);
color: var(--bg);
font: inherit;
font-size: 13px;
line-height: 1;
padding: 8px 14px;
border-radius: var(--radius-control);
cursor: pointer;
flex-shrink: 0;
transition: opacity var(--dur) var(--ease);
}
.mp-preset-btn:hover {
opacity: 0.9;
}
.mp-preset-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mp-preset-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* 模型行列表 */
.mp-list {
margin-top: 4px;
}
.mp-row {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 0;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.mp-row:first-child {
border-top: none;
}
.mp-row-text {
min-width: 0;
flex: 1 1 180px;
}
.mp-row-name {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
color: var(--text);
}
.mp-row-id {
margin: 2px 0 0;
font-size: 12px;
color: var(--text-tertiary);
font-family: var(--font-mono);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 云 / 本机 徽章 */
.mp-badge {
font-size: 11px;
line-height: 1;
padding: 3px 7px;
border-radius: var(--radius-chip);
flex-shrink: 0;
}
.mp-badge.is-cloud {
background: var(--accent-soft);
color: var(--accent);
}
.mp-badge.is-local {
background: var(--bg-sunken);
color: var(--text-secondary);
border: 1px solid var(--border);
}
/* 单个控件(思考档下拉 / 最大回复长度输入) */
.mp-field {
display: flex;
flex-direction: column;
gap: 4px;
flex-shrink: 0;
}
.mp-field-label {
font-size: 12px;
color: var(--text-secondary);
}
.mp-select {
appearance: none;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font: inherit;
font-size: 13px;
padding: 7px 10px;
border-radius: var(--radius-control);
min-width: 92px;
cursor: pointer;
}
.mp-select:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.mp-number {
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font: inherit;
font-size: 13px;
padding: 7px 10px;
border-radius: var(--radius-control);
width: 130px;
}
.mp-number.is-invalid {
border-color: var(--danger);
}
.mp-number:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.mp-number.is-invalid:focus-visible {
outline-color: var(--danger);
}
.mp-field-error {
margin: 0;
font-size: 12px;
color: var(--danger);
line-height: 1.4;
max-width: 220px;
}
/* 操作反馈(一键应用结果) */
.mp-notice {
margin: 8px 0 0;
font-size: 12.5px;
color: var(--text-secondary);
}