/** * Migala Vendor Form — Guided listing flow. * * Scoped to .migala-post-form.migala-guided (toggle in widget settings). * The JS layer (migala-post-form.js) adds .mgl-shell to the widget container, * builds the dark step rail (.mgl-rail) as a sibling of the form, and flags the * page with body.mgl-has-guided-form so the body-teleported media library can be * themed. All Voxel markup stays untouched. * * Tip: use the "Elementor Canvas" page template so the form owns the viewport. */ /* ================================== */ /* Anti-FOUC cloak */ /* ================================== */ /* This stylesheet loads in , so the canvas styling is present on first * paint — but the dark rail is built by JS in the footer. Without a cloak the * form paints full-width first, then jumps sideways when the rail appears. * Hide the canvas until JS finishes building the shell (.mgl-ready), then fade * it in. Failsafe: if the script never runs, reveal anyway after 3s. */ .migala-post-form.migala-guided { opacity: 0; animation: mgl-failsafe-reveal 0s linear 3s forwards; } .mgl-shell.mgl-ready .migala-post-form.migala-guided { opacity: 1; animation: none; transition: opacity .28s ease; } @keyframes mgl-failsafe-reveal { to { opacity: 1; } } /* never cloak inside the Elementor editor (re-renders frequently; no FOUC there) */ body.elementor-editor-active .migala-post-form.migala-guided { opacity: 1 !important; animation: none !important; } /* ================================== */ /* Shell: dark rail + white canvas */ /* ================================== */ .mgl-shell { --mgl-text: #222222; --mgl-muted: #6a6a6a; --mgl-border: #dddddd; --mgl-border-strong: #222222; --mgl-bg: #ffffff; --mgl-soft: #f7f7f7; --mgl-dark: #0f0f0f; --mgl-accent: var(--ts-accent-1, #e61e4d); --mgl-radius: 14px; --mgl-max: 680px; --mgl-rail-w: 340px; display: flex; align-items: stretch; min-height: 100vh; background: var(--mgl-dark); } .mgl-shell.mgl-no-rail { background: var(--mgl-bg); } /* ----- Rail (left, dark) ----- */ .mgl-rail { width: var(--mgl-rail-w); flex-shrink: 0; position: sticky; top: 0; align-self: flex-start; height: 100vh; display: flex; flex-direction: column; gap: 22px; padding: 36px 24px; background: var(--mgl-dark); color: #fff; box-sizing: border-box; } /* Header — on desktop it's a quiet caption; on mobile it's the collapse toggle. */ .mgl-rail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0; background: none; border: none; color: inherit; text-align: left; cursor: default; } .mgl-rail-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mgl-rail-counter { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.5); } .mgl-rail-current { font-size: 16px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mgl-rail-chevron { display: none; } .mgl-rail-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; } .mgl-rail-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; color: rgba(255,255,255,.55); transition: color .2s ease, border-color .2s ease, background-color .2s ease; cursor: pointer; } .mgl-rail-step:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); } /* warning dot — required fields still missing in this step */ .mgl-rail-flag { margin-left: auto; flex-shrink: 0; width: 9px; height: 9px; } .mgl-rail-step.mgl-has-missing .mgl-rail-flag { border-radius: 50%; background: #ffb020; box-shadow: 0 0 0 3px rgba(255,176,32,.18); } .mgl-rail-index { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); font-size: 12px; font-weight: 600; } .mgl-rail-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mgl-rail-title { font-size: 15px; font-weight: 600; line-height: 1.3; } .mgl-rail-desc { font-size: 12.5px; color: rgba(255,255,255,.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; } .mgl-rail-step.is-active { color: #fff; border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.04); } .mgl-rail-step.is-active .mgl-rail-index { border-color: #fff; background: #fff; color: var(--mgl-dark); } .mgl-rail-step.is-done { color: rgba(255,255,255,.85); } .mgl-rail-step.is-done .mgl-rail-index { border-color: transparent; background: rgba(255,255,255,.18); } /* success screen: drop the dark rail entirely for a clean centered view */ .mgl-shell.mgl-success { background: #fff; } .mgl-shell.mgl-success .mgl-rail { display: none; } .mgl-shell.mgl-success .migala-post-form.migala-guided { border-radius: 0; } /* ================================== */ /* Canvas (the Voxel form) */ /* ================================== */ .migala-post-form.migala-guided { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; position: relative; background: var(--mgl-bg, #fff); color: var(--mgl-text, #222); padding: 0 24px; -webkit-font-smoothing: antialiased; } .mgl-shell:not(.mgl-no-rail) .migala-post-form.migala-guided { border-radius: 24px 0 0 24px; } /* Flatten Voxel's progress header so its parts can be re-arranged */ .migala-post-form.migala-guided .ts-form-progres, .migala-post-form.migala-guided .ts-active-step { display: contents; } /* ----- Slim progress segments (top of canvas) ----- */ .migala-post-form.migala-guided .step-percentage { order: 0; display: flex; gap: 6px; width: 100%; max-width: var(--mgl-max); margin: 0 auto; padding: 26px 0 0; list-style: none; } .migala-post-form.migala-guided .step-percentage li { flex: 1; height: 4px; border-radius: 99px; background: #ebebeb; transition: background-color .35s ease; } .migala-post-form.migala-guided .step-percentage li.step-done { background: var(--mgl-text); } /* ----- Step actions: Save as draft + Cancel ----- */ /* .step-nav (migala-create-post.php, rendered by Vue near the step heading) * used to float top-right (position: absolute) above the step content, then * briefly sat as two extra full-size pills in the footer row alongside * Previous/Next/Publish. Both put it on equal visual footing with the * every-step navigation, which is the wrong hierarchy: Previous/Next/Publish * are used constantly, Save as draft/Cancel are used rarely. * * migala-post-form.js relocates the real .step-nav node (marked here with * .mgl-step-actions) out of the footer: * - with a rail (multi-step forms) on a wide-enough viewport, it moves into * the rail, below the step list; * - on a narrow viewport it falls back into the footer even when a rail * exists — the rail header already competes for space with the guest * login panel also relocated there (see guest-post-form.js), so a third * stacked row reads as clutter there; * - on single-step forms (no rail at all — see hasRail in * migala-post-form.js) it's always the footer. * * A real account can also save a draft (two actions: Save as draft + * Cancel); a guest can't (config.can_save_draft is false server-side), so * there's only Cancel. Two actions are tucked behind a single "more * actions" (⋯) trigger+menu (.mgl-more, wrapping .step-nav renamed * .mgl-more-menu) so they don't compete with Previous/Next/Publish for * attention; with just the one, there's nothing to tuck behind an opaque * "⋯" for, so .step-nav (.mgl-step-actions--single) is shown directly * instead of being wrapped in .mgl-more. * * Base rules below are scoped to .mgl-shell (covers both the rail, a sibling * of the form, and the footer fallback, inside the form) with a couple of * location-specific overrides for sizing/theming. */ /* Voxel's own markup also ships a pair of small icon-only Previous/Next * buttons inside .step-nav (for a different, non-guided layout). Those would * otherwise ride along wherever .step-nav ends up, duplicating the real, * labeled Previous/Next that already live in the footer row. Hide anything * in here that isn't .ts-save-draft (.mgl-cancel isn't a .ts-icon-btn, so * it's unaffected) — applies whether or not it ends up behind .mgl-more. */ .mgl-step-actions .ts-icon-btn:not(.ts-save-draft) { display: none; } .mgl-shell .mgl-more { position: relative; } .migala-post-form.migala-guided .ts-form-footer .mgl-more, .migala-post-form.migala-guided .ts-form-footer .mgl-step-actions--single { order: -1; flex-shrink: 0; } .mgl-rail .mgl-more, .mgl-rail .mgl-step-actions--single { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); /* Pin to the very bottom of the rail via flex order rather than relying * on DOM position: the guest login panel (guest-post-form.js * relocateIntoRail()) lands in the rail on its own async poll, after * this node is already appended — without an explicit order they'd * render in whichever order happened to finish first, and this ends up * above the login panel instead of below it. */ order: 10; } .mgl-shell .mgl-more-trigger { padding: 0; border-radius: 999px; border: 1px solid var(--mgl-border); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .migala-post-form.migala-guided .ts-form-footer .mgl-more-trigger { width: 48px; height: 48px; } .migala-post-form.migala-guided .ts-form-footer .mgl-more-trigger:hover, .migala-post-form.migala-guided .ts-form-footer .mgl-more.is-open .mgl-more-trigger { background: var(--mgl-soft); border-color: var(--mgl-border-strong); } /* In the rail it reads as a full-width row (icon + "More options" label) — * a lone circle of dots would look orphaned against a full-width dark rail. */ .mgl-rail .mgl-more-trigger { width: 100%; height: 44px; padding: 0 14px; gap: 10px; border-radius: 12px; border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; } .mgl-rail .mgl-more-trigger:hover, .mgl-rail .mgl-more.is-open .mgl-more-trigger { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); } /* The 3 dots are drawn as one 4px box plus two box-shadow copies offset * ±7px — but box-shadow doesn't participate in layout, so flex only ever * reserved space for the 4px box itself. The rightmost shadow dot actually * draws ~7px past that box's edge, eating most of the gap to the label next * to it — hence "too close". Reserve the true 18px footprint (4px dot + 7px * offset + 4px dot, each side) on the element itself via a pseudo-element, * so `gap` on the trigger measures from the real visual edge instead. */ .mgl-shell .mgl-more-dots { position: relative; width: 18px; height: 4px; flex-shrink: 0; } .mgl-shell .mgl-more-dots::before { content: ''; position: absolute; top: 0; left: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--mgl-text); box-shadow: -7px 0 0 var(--mgl-text), 7px 0 0 var(--mgl-text); } .mgl-rail .mgl-more-dots::before { background: #fff; box-shadow: -7px 0 0 #fff, 7px 0 0 #fff; } /* Icon-only in the footer (tight row alongside Prev/Next/Publish); labelled * in the rail, where the trigger reads as its own row. */ .mgl-more-label { display: none; } .mgl-rail .mgl-more-label { display: inline; white-space: nowrap; } /* One action only (a guest has no draft to save — nothing to tuck the lone * Cancel behind an opaque "⋯" for): .step-nav (.mgl-step-actions--single) is * shown directly, its .mgl-cancel link styled to roughly match the ⋯ * trigger's own footprint in each location. */ .mgl-step-actions--single .mgl-cancel { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .migala-post-form.migala-guided .ts-form-footer .mgl-step-actions--single .mgl-cancel { height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--mgl-border); color: var(--mgl-muted); font-size: 14px; font-weight: 600; } .migala-post-form.migala-guided .ts-form-footer .mgl-step-actions--single .mgl-cancel:hover { background: var(--mgl-soft); border-color: var(--mgl-border-strong); color: var(--mgl-text); } /* Matches .mgl-rail .mgl-more-trigger's own footprint (border + fill on * hover) — plain text with only a top divider (the original treatment) read * as too low-contrast against the dark rail to register as a button at all. */ .mgl-rail .mgl-step-actions--single .mgl-cancel { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; } .mgl-rail .mgl-step-actions--single .mgl-cancel:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; } .mgl-step-actions--single .mgl-cancel.disabled { opacity: .4; pointer-events: none; } /* The menu itself: a small popover anchored above the trigger (so it never * gets clipped by the bottom of the viewport), hidden until .mgl-more.is-open. * Stays light regardless of trigger location — it's read against its own * white background, not the dark rail behind it. */ .mgl-shell .mgl-more-menu { display: none; flex-direction: column; gap: 2px; position: absolute; bottom: calc(100% + 10px); left: 0; min-width: 190px; padding: 6px; background: var(--mgl-bg, #fff); border: 1px solid var(--mgl-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.14); z-index: 30; } .mgl-rail .mgl-more-menu { z-index: 40; box-shadow: 0 12px 32px rgba(0,0,0,.4); } .mgl-shell .mgl-more.is-open .mgl-more-menu { display: flex; } /* Inside the menu, both actions read as plain list rows (left-aligned, * borderless, full width) rather than standalone pill buttons — the pill * treatment is what made them look like "another primary action" earlier. */ .mgl-shell .mgl-more-menu .ts-save-draft, .mgl-shell .mgl-more-menu .mgl-cancel { width: 100%; min-height: 42px; padding: 0 12px; border: none; border-radius: 9px; background: transparent; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--mgl-text); } .mgl-shell .mgl-more-menu .ts-save-draft:hover, .mgl-shell .mgl-more-menu .mgl-cancel:hover { background: var(--mgl-soft); } .mgl-shell .mgl-more-menu .ts-save-draft svg { display: none; } .mgl-shell .mgl-more-menu .ts-save-draft::before, .mgl-shell .mgl-more-menu .ts-save-draft::after { display: none !important; } .mgl-shell .mgl-more-menu .ts-save-draft .mgl-save-label { white-space: nowrap; font-size: 14px; font-weight: 600; } .mgl-shell .mgl-more-menu .mgl-cancel { color: var(--mgl-muted); transition: background-color .15s ease, color .15s ease; } .mgl-shell .mgl-more-menu .mgl-cancel:hover { color: var(--mgl-text); } .mgl-shell .mgl-more-menu .mgl-cancel.disabled { opacity: .4; pointer-events: none; } /* ----- Step heading ----- */ .migala-post-form.migala-guided .active-step-details { order: 1; width: 100%; max-width: var(--mgl-max); margin: 0 auto; /* Was 72px to clear the step-nav pill that used to float on top of it * (position: absolute); step-nav is relocated out of here entirely now * (into the rail or the footer — see "Step actions" above), so this * only needs its own breathing room. */ padding: 36px 0 6px; } .migala-post-form.migala-guided .active-step-details p { margin: 0; text-align: center; font-size: 36px; line-height: 1.18; font-weight: 700; letter-spacing: -0.02em; color: var(--mgl-text); } /* ================================== */ /* Step body + fields */ /* ================================== */ .migala-post-form.migala-guided .create-form-step { order: 2; flex: 1; width: 100%; max-width: var(--mgl-max); margin: 0 auto; grid-row-gap: 30px; padding: 36px 0 150px; animation: mgl-step-in .4s cubic-bezier(.2,.7,.2,1) both; /* This grid is flex:1 inside a min-height:100vh column, so it's taller than its * content. By default align-content behaves as "stretch", which inflates the * auto rows to fill that height and spreads fields apart with big gaps. Pack the * rows at the top (extra space falls to the bottom) and keep each field at its * natural height. */ align-content: start; align-items: start; } /* Keep number/text inputs at their intended height even if a parent tries to * stretch them, and keep the suffix-bearing number wrapper from adding height. */ .migala-post-form.migala-guided .ts-form-group .input-container { display: block; } .migala-post-form.migala-guided .ts-form-group input[type="text"], .migala-post-form.migala-guided .ts-form-group input[type="email"], .migala-post-form.migala-guided .ts-form-group input[type="url"], .migala-post-form.migala-guided .ts-form-group input[type="number"], .migala-post-form.migala-guided .ts-form-group input[type="tel"], .migala-post-form.migala-guided .ts-form-group input[type="password"] { height: 56px; } @keyframes mgl-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .migala-post-form.migala-guided .ts-form-group > label { font-size: 16px; font-weight: 600; color: var(--mgl-text); margin-bottom: 10px; } .migala-post-form.migala-guided .ts-form-group > label .is-required { font-weight: 400; color: var(--mgl-muted); } .migala-post-form.migala-guided .ts-form-group input[type="text"], .migala-post-form.migala-guided .ts-form-group input[type="email"], .migala-post-form.migala-guided .ts-form-group input[type="url"], .migala-post-form.migala-guided .ts-form-group input[type="number"], .migala-post-form.migala-guided .ts-form-group input[type="tel"], .migala-post-form.migala-guided .ts-form-group input[type="password"], .migala-post-form.migala-guided .ts-form-group textarea, .migala-post-form.migala-guided .ts-form-group .ts-filter { border: 1px solid var(--mgl-border); border-radius: var(--mgl-radius); min-height: 56px; font-size: 16px; background: var(--mgl-bg); transition: border-color .2s ease, box-shadow .2s ease; } /* Voxel sets textarea { overflow: hidden; height: 44px } and relies on a JS * autosizer — give textareas a usable starting height and real scrolling. */ .migala-post-form.migala-guided .ts-form-group textarea { height: auto; min-height: 140px; max-height: 420px; overflow-y: auto; resize: vertical; line-height: 1.6; padding: 14px 16px; } .migala-post-form.migala-guided .ts-form-group input:focus, .migala-post-form.migala-guided .ts-form-group textarea:focus, .migala-post-form.migala-guided .ts-form-group .ts-filter:focus, .migala-post-form.migala-guided .ts-form-group .ts-filter.ts-filled { border-color: var(--mgl-border-strong); box-shadow: 0 0 0 1px var(--mgl-border-strong); outline: none; } .migala-post-form.migala-guided .ts-form-group.ts-has-errors input, .migala-post-form.migala-guided .ts-form-group.ts-has-errors textarea, .migala-post-form.migala-guided .ts-form-group.ts-has-errors .ts-filter { border-color: #c13515; box-shadow: none; } .migala-post-form.migala-guided .ts-form-group .is-required { color: #c13515; font-weight: 500; } /* validation messages must read as errors, not muted "Optional" gray. * Includes fields whose label is a direct child of the errored group (e.g. * file/image uploads) — needs to outrank the muted label rule above. */ .migala-post-form.migala-guided .ts-has-errors .ts-form-group > label .is-required, .migala-post-form.migala-guided .ts-form-group.ts-has-errors > label .is-required, .migala-post-form.migala-guided .ts-has-errors .is-required { color: #c13515; font-weight: 600; } /* repeater rows as cards */ .migala-post-form.migala-guided .ts-field-repeater { border: 1px solid var(--mgl-border); border-radius: var(--mgl-radius); transition: border-color .2s ease, box-shadow .2s ease; } .migala-post-form.migala-guided .ts-field-repeater:not(.collapsed) { border-color: var(--mgl-border-strong); box-shadow: 0 6px 18px rgba(0,0,0,.08); } .migala-post-form.migala-guided .ts-repeater-add { border: 1px dashed var(--mgl-border-strong); border-radius: var(--mgl-radius); min-height: 56px; font-weight: 600; background: transparent; transition: background-color .15s ease; } .migala-post-form.migala-guided .ts-repeater-add:hover { background: var(--mgl-soft); } /* rich text (TinyMCE classic) editor */ .migala-post-form .ts-form-group .mce-tinymce { display: block; width: 100% !important; border: 1px solid var(--mgl-border, #ddd); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: none; } .migala-post-form .ts-form-group .mce-edit-area { min-height: 160px; } .migala-post-form .ts-form-group .mce-edit-area > iframe { min-height: 160px !important; width: 100% !important; display: block; } /* Inline select/checkbox choices (e.g. a single-choice "I Agree" confirmation * field) truncate their label with an ellipsis by default (Voxel's * .ts-term-dropdown li>a>span is built for short category/filter labels). * Long agreement text needs to wrap instead of being cut off. */ .migala-post-form .ts-form-group .ts-term-dropdown-list { height: auto; overflow: visible; } .migala-post-form .ts-form-group .ts-term-dropdown li { height: auto; overflow: visible; } .migala-post-form .ts-form-group .ts-term-dropdown li > a { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; } .migala-post-form .ts-form-group .ts-term-dropdown li > a > span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; } /* The 20px checkmark box sits flush with the top of the flex row, but the * text's line box (line-height 1.5) has extra leading above the glyphs, so * the checkbox reads as slightly higher than the first line of text. Nudge * it down to align with the text's cap-height instead of the line box. */ .migala-post-form .ts-form-group .ts-term-dropdown li > a > .ts-checkbox-container { margin-top: 2px; } .migala-post-form .ts-form-group .inline-multilevel { overflow: visible; } .migala-post-form .ts-form-group .editor-container[contenteditable] { display: block; width: 100%; min-height: 160px; border: 1px solid var(--mgl-border, #ddd); border-radius: 14px; padding: 14px 16px; font-size: 16px; line-height: 1.6; background: #fff; cursor: text; } /* textarea list mode (inclusions / exclusions) */ .migala-post-form .migala-list-textarea { width: 100%; min-height: 170px; resize: vertical; line-height: 1.7; padding: 14px 16px; } .migala-post-form .migala-list-count { margin: 8px 2px 0; font-size: 13px; color: var(--mgl-muted, #6a6a6a); } /* HTML / heading UI fields — relax tight line-height */ .migala-post-form.migala-guided .ui-html-field .ui-html-content, .migala-post-form.migala-guided .ui-html-content p, .migala-post-form.migala-guided .ui-html-content li, .migala-post-form.migala-guided .ui-heading-field { line-height: 1.5; } .migala-post-form.migala-guided .ui-html-content > * { margin-top: 0; } .migala-post-form.migala-guided .ui-html-content > * + * { margin-top: .6em; } /* Location field — geolocate as a square icon button beside the address input. * The field is a 12-col grid (Voxel's form-field-grid); switch it to * [input | button] columns and let every other row (map toggle, map, lat/lng) * span the full width. */ .migala-post-form.migala-guided .ts-form-group.ts-location-field.form-field-grid { grid-template-columns: minmax(0, 1fr) auto; grid-gap: 12px 10px; align-items: end; } .migala-post-form.migala-guided .ts-location-field > .ts-form-group { grid-column: 1 / -1; } .migala-post-form.migala-guided .ts-location-field > .ts-form-group:nth-child(1) { grid-column: 1; } .migala-post-form.migala-guided .ts-location-field > .ts-form-group:nth-child(2) { grid-column: 2; } .migala-post-form.migala-guided .ts-location-field .ts-btn.ts-btn-large { width: 56px; min-width: 56px; height: 56px; min-height: 56px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mgl-border); border-radius: var(--mgl-radius); background: var(--mgl-bg); transition: background-color .15s ease, border-color .15s ease; } .migala-post-form.migala-guided .ts-location-field .ts-btn.ts-btn-large:hover { background: var(--mgl-soft); border-color: var(--mgl-border-strong); } /* icon only — drop the "Geolocate my address" label */ .migala-post-form.migala-guided .ts-location-field .ts-btn.ts-btn-large p { display: none; } .migala-post-form.migala-guided .ts-location-field .ts-btn.ts-btn-large svg { width: 20px; height: 20px; } /* ================================== */ /* Photo / gallery grid (in-form) */ /* ================================== */ /* Tile grid: square tiles that always fill the row edge-to-edge. auto-fill * keeps every tile the same size whether the field holds one image or many * (a lone Upload tile stays one column wide, not full width). */ .migala-post-form.migala-guided .inline-file-field .ts-file-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } /* vuedraggable renders an wrapper — let its tiles join the grid */ .migala-post-form.migala-guided .inline-file-field .ts-file-list inline-template { display: contents; } /* every tile (uploaded image or upload button) is the same square */ .migala-post-form.migala-guided .inline-file-field .ts-file, .migala-post-form.migala-guided .inline-file-field .pick-file-input { width: 100%; aspect-ratio: 1 / 1; } /* the "Upload" tile (+) goes last */ .migala-post-form.migala-guided .inline-file-field .pick-file-input { order: 99; display: flex; align-items: center; justify-content: center; border: 1px solid var(--mgl-border); border-radius: var(--mgl-radius); background: var(--mgl-bg); transition: background-color .15s ease, border-color .15s ease; } .migala-post-form.migala-guided .inline-file-field .pick-file-input:hover { background: var(--mgl-soft); border-color: var(--mgl-border-strong); } .migala-post-form.migala-guided .inline-file-field .pick-file-input a { flex-direction: column; gap: 6px; color: var(--mgl-text); font-weight: 600; font-size: 14px; } /* image tiles */ .migala-post-form.migala-guided .inline-file-field .ts-file { position: relative; border-radius: var(--mgl-radius); overflow: hidden; background-size: cover; background-position: center; border: 1px solid var(--mgl-border); } .migala-post-form.migala-guided .inline-file-field .ts-file-img { background-color: #f0f0f0; } .migala-post-form.migala-guided .inline-file-field .ts-file .ts-file-info { display: none; } .migala-post-form.migala-guided .inline-file-field .ts-file-img .ts-file-info { display: none; } /* delete button — circular, top-right */ .migala-post-form.migala-guided .inline-file-field .ts-remove-file { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.95); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); opacity: 0; transition: opacity .15s ease; } .migala-post-form.migala-guided .inline-file-field .ts-file:hover .ts-remove-file { opacity: 1; } .migala-post-form.migala-guided .inline-file-field .ts-remove-file svg { width: 15px; height: 15px; } /* "Media library" trigger — compact left-aligned pill under the tiles, not a * full-width centered link floating in the empty column */ .migala-post-form.migala-guided .inline-file-field > .ts-btn.ts-btn-4 { width: auto; max-width: max-content; align-self: flex-start; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; height: 40px; padding: 0 16px; margin-top: 12px; border: 1px solid var(--mgl-border); border-radius: 999px; background: var(--mgl-bg); color: var(--mgl-text); font-size: 14px; font-weight: 600; transition: background-color .15s ease, border-color .15s ease; } .migala-post-form.migala-guided .inline-file-field > .ts-btn.ts-btn-4:hover { background: var(--mgl-soft); border-color: var(--mgl-border-strong); } .migala-post-form.migala-guided .inline-file-field > .ts-btn.ts-btn-4 svg { width: 16px; height: 16px; } /* ================================== */ /* Floating bottom bar */ /* ================================== */ .migala-post-form.migala-guided .ts-form-footer { order: 3; position: sticky; bottom: 0; z-index: 10; width: calc(100% + 48px); margin: 0 -24px; padding: 16px 24px 18px; background: var(--mgl-bg); border-top: 1px solid #ebebeb; display: flex; align-items: center; /* flex-start: ⋯ (order:-1) sits flush left, .ts-nextprev (Previous+Next) * stretches to fill the middle — Previous flush against ⋯ on its left * edge, Next pinned to its own right edge (margin-left:auto, below) — * and Publish/Save changes pushes itself flush right with its own * margin-left:auto. Net effect: "back" controls cluster on the left, * "forward" controls cluster on the right, same shape as a typical * wizard footer. * nowrap (not wrap): always exactly one row, desktop and mobile alike — the * mobile media query below shrinks Previous/Next to icon-only buttons and * trims Publish's padding specifically so everything still fits without * ever needing a second line. */ justify-content: flex-start; flex-wrap: nowrap; gap: 10px 16px; } .migala-post-form.migala-guided .ts-nextprev { display: flex; /* Stretches to fill the space between the ⋯/Previous cluster and * Publish/Save changes. Next (li:last-child, below) gets its own * margin-left:auto to pin it to the *right* edge of that stretched box — * Previous (if present) naturally sits flush at the left, so the row * reads as "back" isolated on the left, "forward" isolated on the right, * same as Publish. This also correctly handles Previous being absent * (step 1): unlike justify-content:space-between, which collapses a * single remaining child to the *start* of the row, margin-left:auto * keeps Next pinned right whether Previous exists or not. * flex-shrink:1 + min-width:0: the footer row never wraps (flex-wrap: * nowrap above, at every breakpoint) — without shrink capability here, a * narrow viewport would overflow instead of gracefully compressing. */ flex: 1 1 auto; min-width: 0; justify-content: flex-start; align-items: center; gap: 8px; margin: 0; list-style: none; } /* Pins Next to the right edge of .ts-nextprev's box (see comment above) — * this is what actually keeps it away from the ⋯/Previous cluster. */ .migala-post-form.migala-guided .ts-nextprev li:last-child { margin-left: auto; } /* Same pill shape/border treatment as "Next step" (just outlined instead of * solid) instead of an underlined text link, so the two read as a matched * pair rather than two different control styles. */ .migala-post-form.migala-guided .ts-form-footer .ts-prev { background: transparent; border: 1px solid var(--mgl-border); box-shadow: none; padding: 0 22px; min-height: 48px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--mgl-text); border-radius: 999px; } .migala-post-form.migala-guided .ts-form-footer .ts-prev:hover { background: var(--mgl-soft); border-color: var(--mgl-border-strong); } /* shared sizing for footer primary buttons */ .migala-post-form.migala-guided .ts-form-footer .ts-next, .migala-post-form.migala-guided .ts-form-footer .ts-save-changes { width: auto; /* override Voxel's .form-btn width:100% (the full-bleed bar) */ flex: 0 0 auto; justify-content: center; border: none; color: #fff; border-radius: 999px; padding: 0 26px; min-height: 48px; font-weight: 600; font-size: 15px; transition: transform .15s ease, background-color .2s ease, filter .2s ease; } /* Voxel colors every .ts-btn icon (whether it's an inline or a font * icon , e.g. after picking a different icon in the widget's Content tab) * off a --ts-icon-color custom property, NOT off the button's actual text * color — and .ts-btn-2 (the class on our Publish/Save-changes button) hardcodes * that variable to white: * .ts-btn i, .ts-btn svg { color/fill: var(--ts-icon-color) } * .ts-btn-2 { color: #fff; --ts-icon-color: #fff } * So even though the widget's Style tab can recolor the button's text (the * "Publish" label), the icon stays pinned to white regardless, because it * never reads that custom text color at all. Re-point the variable itself at * currentColor so both icon types pick up whatever color is actually applied * to the button's text — this is more specific than .ts-btn-2's rule (3 * classes vs. 1), so it wins regardless of stylesheet load order. Also force * `fill` directly for the inline fallback icons, since their `fill` is * a hardcoded #343C54 baked into the SVG file rather than currentColor. */ /* .mgl-step-actions (not .step-nav — that node can now live in the rail, * outside .migala-post-form.migala-guided entirely, once relocated by * migala-post-form.js; see the "Step actions" block above) so this still * matches wherever it currently sits. */ .migala-post-form.migala-guided .ts-btn, .mgl-step-actions .ts-save-draft, .mgl-step-actions .mgl-cancel { --ts-icon-color: currentColor; } .migala-post-form.migala-guided .ts-btn svg, .migala-post-form.migala-guided .ts-btn svg path, .mgl-step-actions svg, .mgl-step-actions svg path { fill: currentColor; } /* "Next step" — solid dark */ .migala-post-form.migala-guided .ts-form-footer .ts-next { background: var(--mgl-dark); } .migala-post-form.migala-guided .ts-form-footer .ts-next:hover { transform: translateY(-1px); background: #000; } /* "Publish" / "Save changes" — configurable colors (widget Style tab), accent by default. * min-width keeps the button from collapsing when its label is swapped for the * "Please wait…" spinner on submit. */ .migala-post-form.migala-guided .ts-form-footer .ts-save-changes { background: var(--mgl-submit-bg, linear-gradient(90deg, var(--mgl-accent, #e61e4d), #d70466)); color: var(--mgl-submit-color, #fff); order: 3; /* Was a fixed 12px. .ts-nextprev's own flex-grow (above) already pushes * this flush right in the common case, making this mostly redundant * there — but .ts-nextprev doesn't render at all on a single-step form * (activeSteps.length <= 1, migala-create-post.php), and this is the * only thing pinning Publish/Save changes to the right when that * happens. auto absorbs whatever space is actually left over either way. */ margin-left: auto; padding: 0 20px; min-width: 168px; /* min-height/font-size inherited from the shared .ts-next/.ts-save-changes * rule above (48px/15px) — this used to override them down to 44px/14px, * so Publish was a different size than Previous/Next. Kept in sync so * every primary button in this footer row (Previous, Next, Publish) is * the same size. */ } .migala-post-form.migala-guided .ts-form-footer .ts-save-changes:hover { transform: translateY(-1px); background: var(--mgl-submit-bg-hover, var(--mgl-submit-bg, linear-gradient(90deg, var(--mgl-accent, #e61e4d), #d70466))); color: var(--mgl-submit-color-hover, var(--mgl-submit-color, #fff)); filter: brightness(1.03); } .migala-post-form.migala-guided .ts-form-footer .disabled { opacity: 0; pointer-events: none; } .migala-post-form.migala-guided .ts-form-footer .ts-loader-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* Note: "Cancel" (behind .mgl-more (⋯) too, if a logged-in account can also * save a draft — see "Step actions" above, styled above) lives in the dark * rail on wide-enough multi-step forms, or here in the footer (order:-1, * ahead of Previous/Next/Publish) on narrow viewports / single-step forms * that have no rail. See migala-post-form.js. */ /* ================================== */ /* Success screen */ /* ================================== */ .migala-post-form.migala-guided .ts-edit-success { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 24px; gap: 6px; animation: mgl-success-in .5s cubic-bezier(.2,.7,.2,1) both; } @keyframes mgl-success-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* the big success checkmark (direct child icon) — pops in */ .migala-post-form.migala-guided .ts-edit-success > svg, .migala-post-form.migala-guided .ts-edit-success > i { width: 60px; height: 60px; font-size: 60px; margin-bottom: 10px; animation: mgl-pop .55s cubic-bezier(.2,.8,.25,1.35) both .05s; } @keyframes mgl-pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } } .migala-post-form.migala-guided .ts-edit-success h4 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 22px; } /* action buttons — stacked, centered, with normal-sized icons */ .migala-post-form.migala-guided .ts-edit-success .es-buttons { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; margin: 0 auto; } .migala-post-form.migala-guided .ts-edit-success .es-buttons .ts-btn { width: 100%; min-height: 50px; border-radius: 12px; font-weight: 600; gap: 10px; } .migala-post-form.migala-guided .ts-edit-success .es-buttons .ts-btn svg, .migala-post-form.migala-guided .ts-edit-success .es-buttons .ts-btn i { width: 18px; height: 18px; font-size: 18px; } /* ================================== */ /* Media library popup (teleported) */ /* Scoped to pages that host the form */ /* ================================== */ body.mgl-has-guided-form .ts-media-library .ts-field-popup { border-radius: 18px; border: none; box-shadow: 0 18px 60px rgba(0,0,0,.28); overflow: hidden; } /* Turn the media library into a real centered modal on desktop. Voxel anchors * the popup near its trigger (inline styles on the container) and caps the * scroll area at 293px (popup-kit.css .ts-popup-content-wrapper) — both make it * feel cramped. Fix the container to the viewport center and give the file * grid most of the screen height. */ @media (min-width: 768px) { body.mgl-has-guided-form .ts-media-library .ts-field-popup-container { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: min(92vw, 780px); max-width: 780px; margin: 0; } body.mgl-has-guided-form .ts-media-library .ts-field-popup { min-width: 0 !important; width: 100%; max-height: 86vh; display: flex; flex-direction: column; } /* the scrollable file area — let it breathe (Voxel caps it at 293px) */ body.mgl-has-guided-form .ts-media-library .ts-popup-content-wrapper { max-height: calc(86vh - 150px); /* popup height minus search bar + footer */ } } /* mobile: keep Voxel's bottom-sheet behavior, just allow a taller list */ @media (max-width: 767px) { body.mgl-has-guided-form .ts-media-library .ts-popup-content-wrapper { max-height: 60vh; } } body.mgl-has-guided-form .ts-media-library .ts-popup-content-wrapper { padding: 6px 22px 16px; } /* search input */ body.mgl-has-guided-form .ts-media-library .ts-sticky-top { padding: 18px 0 14px; background: #fff; } body.mgl-has-guided-form .ts-media-library .ts-input-icon { border: 1px solid var(--mgl-border, #ddd); border-radius: 99px; padding: 0 16px; min-height: 50px; transition: border-color .2s ease, box-shadow .2s ease; } body.mgl-has-guided-form .ts-media-library .ts-input-icon:focus-within { border-color: #222; box-shadow: 0 0 0 1px #222; } body.mgl-has-guided-form .ts-media-library .ts-input-icon input { border: none !important; box-shadow: none !important; min-height: 48px; font-size: 15px; background: none; } /* grid */ body.mgl-has-guided-form .ts-media-library .ts-file-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 6px 0; } body.mgl-has-guided-form .ts-media-library .ts-file-list inline-template { display: contents; } body.mgl-has-guided-form .ts-media-library .ts-file { position: relative; aspect-ratio: 1 / 1; border-radius: var(--mgl-radius, 14px); overflow: hidden; background-size: cover; background-position: center; background-color: #f0f0f0; border: 1px solid var(--mgl-border, #ddd); cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; } body.mgl-has-guided-form .ts-media-library .ts-file:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.12); } body.mgl-has-guided-form .ts-media-library .ts-file .ts-file-info { display: none; } /* hide the non-select upload indicator so only the checkmark badge shows */ body.mgl-has-guided-form .ts-media-library .ts-remove-file:not(.ts-select-file) { display: none; } /* selected state: dark ring + checkmark badge */ body.mgl-has-guided-form .ts-media-library .ts-file.selected { box-shadow: 0 0 0 2px #222; border-color: #222; } body.mgl-has-guided-form .ts-media-library .ts-select-file { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); } body.mgl-has-guided-form .ts-media-library .ts-file.selected .ts-select-file { display: inline-flex; } body.mgl-has-guided-form .ts-media-library .ts-select-file svg { width: 14px; height: 14px; } /* footer controls */ body.mgl-has-guided-form .ts-media-library .ts-popup-controller { border-top: 1px solid #ebebeb; padding: 14px 22px; } body.mgl-has-guided-form .ts-media-library .ts-popup-controller .ts-btn-2 { background: var(--mgl-dark, #0f0f0f); color: #fff; border-radius: 10px; min-height: 46px; font-weight: 600; } body.mgl-has-guided-form .ts-media-library .ts-popup-controller .ts-btn-2:hover { background: #000; } /* the Upload / drag-drop modal (same .ts-file-upload structure) */ body.mgl-has-guided-form .ts-field-popup .ts-file-upload .ts-file-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } body.mgl-has-guided-form .ts-field-popup .ts-file-upload .ts-file-list inline-template { display: contents; } /* ================================== */ /* Responsive */ /* ================================== */ @media (max-width: 1024px) { .mgl-shell { --mgl-rail-w: 280px; } } @media (max-width: 880px) { .mgl-shell { flex-direction: column; background: var(--mgl-bg); } .mgl-rail { position: sticky; top: 0; z-index: 30; width: 100%; height: auto; flex-direction: column; gap: 0; padding: 16px 20px; border-radius: 0 0 12px 12px; } .mgl-rail-header { cursor: pointer; } .mgl-rail-chevron { display: inline-block; width: 10px; height: 10px; border-right: 2px solid rgba(255,255,255,.7); border-bottom: 2px solid rgba(255,255,255,.7); transform: rotate(45deg); transition: transform .2s ease; flex-shrink: 0; } /* collapsed by default on mobile; the step list is hidden until opened */ .mgl-rail-steps { display: none; } .mgl-shell.mgl-rail-open .mgl-rail-steps { display: flex; margin-top: 16px; max-height: 50vh; } .mgl-shell.mgl-rail-open .mgl-rail-chevron { transform: rotate(-135deg); } .mgl-shell .migala-post-form.migala-guided { border-radius: 0; padding: 0 18px; min-height: auto; } .migala-post-form.migala-guided .mgl-more-trigger { width: 44px; height: 44px; } .migala-post-form.migala-guided .active-step-details { padding-top: 56px; } .migala-post-form.migala-guided .active-step-details p { font-size: 26px; } .migala-post-form.migala-guided .create-form-step { grid-row-gap: 24px; padding-bottom: 120px; } .migala-post-form.migala-guided .ts-form-footer { width: calc(100% + 36px); margin: 0 -18px; padding: 12px 18px 14px; gap: 8px; } /* Previous/Next collapse to icon-only circular buttons on mobile — the * same footprint as the ⋯ trigger — freeing up enough width that ⋯, * Previous, Next, and Publish/Save changes all fit on one line even on a * 320px phone. The label is still there for screen readers (aria-label * on the ) and visually hidden, not removed. */ .migala-post-form.migala-guided .ts-form-footer .ts-prev, .migala-post-form.migala-guided .ts-form-footer .ts-next { width: 44px; height: 44px; min-height: 44px; padding: 0; flex-shrink: 0; } .migala-post-form.migala-guided .mgl-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* (.ts-nextprev's own min-width:0 is set unconditionally in the base rule * above now — needed at every breakpoint, not just mobile, since the row * never wraps.) This one's mobile-specific: lets the individual Previous/ * Next
  • s compress on a truly narrow phone. */ .migala-post-form.migala-guided .ts-nextprev li { min-width: 0; } /* Publish/Save changes keeps its label (it's the one thing on this row * that must stay unambiguous) but sheds its desktop min-width so the row * as a whole still fits in one line. flex-shrink stays 0 (not 1) here — * unlike Previous/Next (fixed-size icon buttons, immune to this) or ⋯, * this is the one element on the row with real text content, and * min-width:0 + flex-shrink:1 let the browser shrink its box *below* * that content's natural min-width — the label then overflows right up * to (or past) the padded edges, so the 16px padding is still correctly * set but reads as visually gone since there's no room left for it to * show. * (An overflow-x:auto fallback on .ts-form-footer was considered for the * rare case where even this still doesn't fit, but rejected: setting * overflow-x without overflow-y forces the browser to treat overflow-y as * auto too, which would clip the ⋯ menu — it opens *above* the footer's * own box via position:absolute. flex-shrink:0 here is the fix instead.) */ .migala-post-form.migala-guided .ts-form-footer .ts-save-changes { padding: 0 16px; /* height, not just min-height: matches the ⋯/Previous/Next circles * (44px) exactly rather than trusting content to land on the same * number — a wide short pill next to two round icon buttons can look * shorter than it measures even when the numbers technically agree. */ height: 44px; min-height: 44px; font-size: 14px; flex-shrink: 0; white-space: nowrap; } } @media (max-width: 560px) { .migala-post-form.migala-guided .inline-file-field .ts-file-list { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } body.mgl-has-guided-form .ts-media-library .ts-file-list { grid-template-columns: repeat(2, 1fr); } } /* ================================== */ /* Repeater row summary (e.g. budget) */ /* Not scoped to .migala-guided — see note below. */ /* ================================== */ /* "$34,343"-style summary next to a repeater row's own label (repeater-field.php * child override) — a muted pill so it reads as supplementary info, not a second * title. */ .mgl-repeater-summary { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--mgl-soft, #f7f7f7); color: var(--mgl-muted, #6a6a6a); font-size: 12.5px; font-weight: 600; white-space: nowrap; } /* ================================== */ /* Hierarchical taxonomy field */ /* Not scoped to .migala-guided — the term dropdown is used with or without */ /* the guided step layout, and migala-post-form.css/js load unconditionally */ /* whenever this widget renders (see create-post-form.php get_style_depends).*/ /* ================================== */ /* The expand/collapse chevron (.ts-hierarchy-toggle) wraps Voxel's default * .ts-right-icon — a 10x10px, low-contrast CSS-border arrow with no label. * Top-level categories default to expanded now (taxonomy-hierarchy.js), so * this is only needed to re-collapse/reopen a branch — but give it a real * tap target and a clearer, more visible icon for that case. */ .ts-hierarchy-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; margin: -6px -6px -6px 0; border-radius: 50%; transition: background-color .15s ease; } .ts-hierarchy-toggle:hover { background: rgba(0,0,0,.06); } .ts-hierarchy-toggle .ts-right-icon { width: 8px; height: 8px; margin: 0; border-color: var(--mgl-text, #222); border-width: 0 2px 2px 0; opacity: .65; } .ts-hierarchy-toggle:hover .ts-right-icon { opacity: 1; }