/* Section Settings Drawer — generic schema-driven drawer (page_editor). Token-based: works in light/dark via --public-* overrides in static/css/base/site.css (class-based dark mode on ). */ .ssd-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 92vw; z-index: 10010; display: flex; flex-direction: column; background: var(--public-card-bg, #ffffff); color: var(--public-text-strong, #0f172a); border-left: 1px solid var(--public-card-border, #e2e8f0); box-shadow: var(--ds-shadow-lg, -8px 0 30px rgba(15, 23, 42, 0.12)); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .ssd-drawer.is-open { transform: translateX(0); } .ssd-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--public-card-border, #e2e8f0); } .ssd-title { flex: 1; margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--public-text-strong, #0f172a); } .ssd-status { font-size: 0.72rem; color: var(--public-text-muted, #64748b); } .ssd-status.is-saved { color: var(--ds-color-success, #10b981); } .ssd-status.is-error { color: var(--ds-color-danger, #ef4444); } .ssd-close { background: none; border: none; cursor: pointer; color: var(--public-text-muted, #64748b); padding: 0.3rem 0.45rem; border-radius: var(--ds-radius-sm, 6px); } .ssd-close:hover { background: var(--public-surface-2, #f1f5f9); color: var(--public-text-strong, #0f172a); } .ssd-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.9rem; } .ssd-field { display: flex; flex-direction: column; gap: 0.35rem; } .ssd-label { font-size: 0.72rem; font-weight: 600; text-transform: capitalize; color: var(--public-text-muted, #64748b); } .ssd-input { width: 100%; font-size: 0.82rem; padding: 0.45rem 0.6rem; border-radius: var(--ds-radius-sm, 8px); border: 1px solid var(--public-card-border, #cbd5e1); background: var(--public-surface-1, #ffffff); color: var(--public-text-strong, #0f172a); } .ssd-input:focus { outline: 2px solid var(--theme-primary, #2563eb); outline-offset: 1px; } textarea.ssd-input { min-height: 4.5rem; resize: vertical; } .ssd-toggle { position: relative; width: 2.4rem; height: 1.3rem; border-radius: 999px; border: none; cursor: pointer; background: var(--public-surface-2, #e2e8f0); transition: background 0.2s; } .ssd-toggle.is-on { background: var(--theme-primary, #2563eb); } .ssd-toggle-knob { position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--public-card-bg, #ffffff); box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.2)); transition: transform 0.2s; } .ssd-toggle.is-on .ssd-toggle-knob { transform: translateX(1.1rem); } .ssd-range-wrap { display: flex; align-items: center; gap: 0.6rem; } .ssd-range { flex: 1; accent-color: var(--theme-primary, #2563eb); } .ssd-range-val { min-width: 2.2rem; text-align: right; font-size: 0.75rem; color: var(--public-text-muted, #64748b); } .ssd-chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; } .ssd-chip { font-size: 0.72rem; padding: 0.3rem 0.65rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--public-card-border, #cbd5e1); background: var(--public-surface-1, #ffffff); color: var(--public-text-muted, #475569); } .ssd-chip.is-active { background: var(--theme-primary, #2563eb); border-color: var(--theme-primary, #2563eb); color: #ffffff; } .ssd-color { width: 2.6rem; height: 1.8rem; padding: 0; border: 1px solid var(--public-card-border, #cbd5e1); border-radius: var(--ds-radius-sm, 6px); background: none; cursor: pointer; } .ssd-media-btn { font-size: 0.78rem; padding: 0.5rem 0.7rem; border-radius: var(--ds-radius-sm, 8px); border: 1px dashed var(--public-card-border, #cbd5e1); background: var(--public-surface-1, #ffffff); color: var(--public-text-muted, #475569); cursor: pointer; text-align: left; } .ssd-media-btn:hover { border-color: var(--theme-primary, #2563eb); color: var(--theme-primary, #2563eb); }