/* * settings-grouped.css — P1.3 ④ 设置(微信式分组列表)。 * * 不抹掉 .form-group / .form-control(老控件还要用),只在 #preferencesModal * 上加一层"分组列表"皮肤: * - 弹窗 body 底色用 ink-50 灰底 * - 每组 .pref-section = 微信"组":顶部 10px 间距 + 12px 字号 caption * - 每行 .pref-row(已存在)统一变成纵向卡片行(白底 + 浅灰分隔) * - 末尾 danger 分组(断开 / 重建)与正常组分开,tone=danger * * 该文件晚于 style.css 加载(见 index.php 的 顺序),通过更具体的选择器 * (`#preferencesModal .pref-section ...`)压住老规则。 */ #preferencesModal .modal-content { /* 微信式弹窗顶到底无装饰 */ background: var(--bg-primary); } #preferencesModal .modal-body { padding: 0 0 16px; background: var(--bg-primary); max-height: 72vh; overflow-y: auto; } /* ========== 组(section)========== */ #preferencesModal .pref-section { margin-top: 14px; background: transparent; } #preferencesModal .pref-section:first-of-type { margin-top: 8px; } #preferencesModal .pref-section-caption { padding: 4px 18px 6px; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; } #preferencesModal .pref-section-body { background: var(--bg-secondary); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); } [data-theme="dark"] #preferencesModal .pref-section-body { background: var(--bg-secondary); } /* ========== 行 ========== */ #preferencesModal .pref-line { display: flex; align-items: center; gap: 12px; padding: 11px 18px; min-height: 48px; border-top: 1px solid var(--border-light); color: var(--text-primary); cursor: default; } #preferencesModal .pref-line:first-child { border-top: 0; } #preferencesModal .pref-line-label { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--text-primary); } #preferencesModal .pref-line-help { margin-top: 3px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; } #preferencesModal .pref-line-control { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; } #preferencesModal .pref-line-control select.form-control { height: 30px; min-width: 110px; font-size: 13px; padding: 4px 26px 4px 10px; } /* checkbox 行:让 checkbox 跟在右侧,而不是行首 — 这是微信"开关"的位置 */ #preferencesModal .pref-line.toggle .pref-line-control { margin-left: auto; } /* danger 组 */ #preferencesModal .pref-section.danger .pref-section-body { background: var(--bg-secondary); } #preferencesModal .pref-section.danger .pref-line { color: var(--color-danger); cursor: pointer; transition: background-color var(--motion-fast); } #preferencesModal .pref-section.danger .pref-line:hover { background: var(--color-danger-bg); } #preferencesModal .pref-section.danger .pref-line-label { color: var(--color-danger); } #preferencesModal .pref-section.danger .pref-line-arrow { color: var(--color-danger); opacity: 0.6; } /* 右箭头(用于 danger 行 / 跳转行) */ #preferencesModal .pref-line-arrow { color: var(--text-muted); flex-shrink: 0; line-height: 1; } /* 内嵌的特殊卡片(写作风格画像 / QQ 绑定)— 让它们在新框架里也能呼吸: * 把它们整体作为一个 .pref-line.embed,内部保留原有结构 */ #preferencesModal .pref-line.embed { align-items: stretch; padding: 14px 18px; } #preferencesModal .pref-line.embed .pref-line-label { flex: 1 1 auto; } /* 弹窗底部主操作:贴顶 sticky,不再分散在各 group */ #preferencesModal .pref-modal-footer { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; background: var(--bg-primary); border-top: 1px solid var(--border-light); margin-top: 14px; }