diff --git a/styles.css b/styles.css index 8516c39..eb4570c 100644 --- a/styles.css +++ b/styles.css @@ -547,7 +547,7 @@ ========================================================================== */ .ff-builder-modal { - max-width: 700px; + max-width: 1100px; margin: 0 auto; } @@ -565,6 +565,48 @@ color: var(--text-normal); } +/* --- Two-column layout --- */ + +.ff-builder-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px; + min-height: 300px; +} + +.ff-builder-editor { + min-width: 0; +} + +/* --- Preview panel --- */ + +.ff-builder-preview { + border-left: 1px solid var(--background-modifier-border); + padding-left: 24px; + min-width: 0; +} + +.ff-builder-preview h2 { + position: sticky; + top: 0; + background: var(--background-primary); + padding-bottom: 8px; + z-index: 1; +} + +.ff-builder-preview-content { + max-height: 55vh; + overflow-y: auto; + padding-right: 4px; +} + +.ff-builder-preview-empty { + padding: 32px 16px; + text-align: center; + font-size: 0.85rem; + color: var(--text-muted); +} + .ff-builder-general { margin-bottom: 8px; } @@ -697,6 +739,34 @@ padding: 10px; } +/* --- Drag & Drop --- */ + +.ff-drag-handle { + cursor: grab; + color: var(--text-faint); + font-size: 1rem; + line-height: 1; + user-select: none; + transition: color 0.15s ease; + padding: 0 2px; +} + +.ff-drag-handle:hover { + color: var(--text-muted); +} + +.ff-builder-field.ff-dragging { + opacity: 0.4; +} + +.ff-builder-field.ff-drop-above { + border-top: 2px solid var(--interactive-accent); +} + +.ff-builder-field.ff-drop-below { + border-bottom: 2px solid var(--interactive-accent); +} + /* --- Add field button --- */ .ff-builder-add-btn { @@ -724,13 +794,29 @@ .ff-builder-footer { display: flex; - justify-content: flex-end; + justify-content: space-between; + align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--background-modifier-border); } +.ff-builder-undo-redo { + display: flex; + gap: 4px; +} + +.ff-builder-footer-right { + display: flex; + gap: 8px; +} + +.ff-builder-action-btn:disabled { + opacity: 0.3; + cursor: not-allowed; +} + /* --- Settings tab empty state --- */ .ff-settings-empty {