/** * styles/components/_preset-save-dialog.less * * Layout for the Preset Save Dialog. * All selectors scoped under .scrying-pool. * Uses --sp-* tokens only — no Foundry --color-* / --font-* / --border-* tokens. */ // The ApplicationV2 window root already has .scrying-pool .preset-save-dialog applied // via DEFAULT_OPTIONS.classes. The content lives inside PARTS. .scrying-pool.preset-save-dialog { // ── Form ─────────────────────────────────────────────────────────────── .preset-save-dialog__form { display: flex; flex-direction: column; height: 100%; gap: 0; } // ── Header ──────────────────────────────────────────────────────────── .preset-save-dialog__header { padding: 12px 16px; border-bottom: 1px solid var(--sp-border); flex-shrink: 0; } .preset-save-dialog__title { margin: 0; font-size: 14px; font-weight: bold; color: var(--sp-text, inherit); } // ── Body ────────────────────────────────────────────────────────────── .preset-save-dialog__body { padding: 16px; overflow-y: auto; flex: 1 1 auto; } .preset-save-dialog__field { display: flex; flex-direction: column; gap: 4px; } .preset-save-dialog__label { font-size: 12px; color: var(--sp-text-muted); cursor: default; } .preset-save-dialog__input { font-size: 14px; padding: 6px 10px; border: 1px solid var(--sp-border); border-radius: 3px; background: var(--sp-bg, #fff); color: var(--sp-text, inherit); outline: none; transition: border-color 0.15s, box-shadow 0.15s; &:focus { border-color: var(--sp-accent, #4a6f9c); box-shadow: 0 0 0 1px var(--sp-accent, #4a6f9c); } &::placeholder { color: var(--sp-text-muted); } } // ── Footer ──────────────────────────────────────────────────────────── .preset-save-dialog__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--sp-border); flex-shrink: 0; } .preset-save-dialog__btn { font-size: 12px; padding: 6px 14px; border-radius: 3px; cursor: pointer; transition: opacity 0.15s; // Save button — primary &--save { background: var(--sp-accent, #4a6f9c); color: #fff; border: none; &:hover { opacity: 0.85; } &:active { opacity: 0.7; } } // Cancel button — secondary &--cancel { background: transparent; color: var(--sp-text-muted); border: 1px solid var(--sp-border); &:hover { color: var(--sp-text, inherit); border-color: currentColor; } } } }