Spaces:
Running
Running
| /* 设置页「可调控项」新分组的控件（契约 10A）——只用 theme.css 的色彩令牌， | |
| 不硬编码任何颜色；风格对齐 Warm Paper（design-system.md）。 */ | |
| /* 分组内的一行：左侧说明，右侧控件 */ | |
| .pref-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 12px 0; | |
| border-top: 1px solid var(--border); | |
| } | |
| .pref-row:first-of-type { | |
| border-top: none; | |
| } | |
| .pref-row-text { | |
| min-width: 0; | |
| } | |
| .pref-row-label { | |
| font-weight: 500; | |
| color: var(--text); | |
| } | |
| .pref-row-hint { | |
| margin: 2px 0 0; | |
| font-size: 12.5px; | |
| color: var(--text-tertiary); | |
| line-height: 1.5; | |
| } | |
| /* 分组内的子标题（把一行行控件分段） */ | |
| .pref-subhead { | |
| margin: 20px 0 4px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| letter-spacing: 0.02em; | |
| color: var(--text-secondary); | |
| } | |
| .pref-subhead:first-of-type { | |
| margin-top: 8px; | |
| } | |
| /* 分段控件（三选/五选 pill）：一排等宽小按钮，选中用 accent 底 */ | |
| .pref-seg { | |
| display: inline-flex; | |
| gap: 4px; | |
| padding: 3px; | |
| background: var(--bg-sunken); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| flex-shrink: 0; | |
| } | |
| .pref-seg-btn { | |
| appearance: none; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font: inherit; | |
| font-size: 13px; | |
| line-height: 1; | |
| padding: 7px 12px; | |
| border-radius: var(--radius-chip); | |
| cursor: pointer; | |
| transition: background var(--dur) var(--ease), color var(--dur) var(--ease); | |
| white-space: nowrap; | |
| } | |
| .pref-seg-btn:hover { | |
| color: var(--text); | |
| background: var(--bg-elevated); | |
| } | |
| .pref-seg-btn.is-active { | |
| background: var(--accent); | |
| color: var(--bg); | |
| } | |
| .pref-seg-btn:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 1px; | |
| } | |
| /* 下拉（模型/轮询等）：与设置页其它输入框同款 */ | |
| .pref-select { | |
| font: inherit; | |
| font-size: 13px; | |
| color: var(--text); | |
| background: var(--bg-sunken); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| padding: 8px 10px; | |
| min-width: 200px; | |
| cursor: pointer; | |
| } | |
| .pref-select:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 1px; | |
| } | |
| /* 开关（记忆/语义检索）：胶囊滑块，选中=accent */ | |
| .pref-switch { | |
| appearance: none; | |
| border: 1px solid var(--border); | |
| background: var(--bg-sunken); | |
| position: relative; | |
| width: 42px; | |
| height: 24px; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); | |
| } | |
| .pref-switch::after { | |
| content: ""; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| transition: transform var(--dur) var(--ease); | |
| } | |
| .pref-switch[aria-checked="true"] { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| .pref-switch[aria-checked="true"]::after { | |
| transform: translateX(18px); | |
| background: var(--bg); | |
| border-color: transparent; | |
| } | |
| .pref-switch:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| /* 保存/失败的一句人话提示（成功淡出、失败用 danger） */ | |
| .pref-notice { | |
| margin: 10px 0 0; | |
| font-size: 12.5px; | |
| line-height: 1.5; | |
| } | |
| .pref-notice.is-ok { | |
| color: var(--success); | |
| } | |
| .pref-notice.is-error { | |
| color: var(--danger); | |
| } | |
| /* 「关于」里的审计日志按钮行 */ | |
| .pref-audit-row { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .pref-confirm { | |
| display: inline-flex; | |
| gap: 8px; | |
| align-items: center; | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| } | |
| .gpu-accel-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| padding: 12px 0; | |
| border-top: 1px solid var(--border); | |
| } | |
| .gpu-accel-actions button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| } | |
| .gpu-accel-message { | |
| margin: 4px 0 10px; | |
| color: var(--success); | |
| font-size: 12.5px; | |
| line-height: 1.5; | |
| } | |
| .gpu-accel-message.is-error { | |
| color: var(--danger); | |
| } | |
| .gpu-accel-status { | |
| padding-top: 12px; | |
| border-top: 1px solid var(--border); | |
| color: var(--text-secondary); | |
| font-size: 12.5px; | |
| } | |
| .gpu-accel-status > strong { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--text); | |
| font-weight: 550; | |
| } | |
| .gpu-accel-status > p { | |
| margin: 0; | |
| color: var(--text-tertiary); | |
| } | |
| .gpu-accel-model { | |
| display: grid; | |
| grid-template-columns: minmax(120px, 1fr) auto auto; | |
| gap: 12px; | |
| padding: 7px 0; | |
| border-top: 1px solid var(--border-subtle, var(--border)); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .gpu-accel-model span:first-child { | |
| min-width: 0; | |
| overflow-wrap: anywhere; | |
| color: var(--text); | |
| } | |
| @media (max-width: 620px) { | |
| .gpu-accel-model { | |
| grid-template-columns: 1fr auto; | |
| } | |
| .gpu-accel-model span:first-child { | |
| grid-column: 1 / -1; | |
| } | |
| } | |