/** * CookieShift — Banner Builder Workspace * --------------------------------------------------------------------------- * Turns the "Preview banner" action into a full-screen Builder Workspace * (Builder ~30% / Live preview ~70%), similar to Figma / Webflow / Framer. * * This is a LAYOUT-ONLY enhancement layered on top of the compiled dashboard: * - It reuses the existing editor panel (.consent-setup-editor), * the existing live preview iframe/runtime (.consent-setup-preview) and * the existing header controls (Save / Discard / device modes / language / * translations / Banner.js status). No editor/preview/runtime is rewritten. * - The companion script banner-workspace.js toggles: * (set once on load) * .consent-setup-shell.cs-workspace-open (while workspace open) * (scroll lock) * * Everything is gated behind `.cs-workspace-ready` so the page degrades to the * original inline layout if the enhancement script fails to load. * `!important` + the gating class keep these rules above the route-chunk CSS * (SettingsPage-*.css) which is injected into after this file. */ /* =========================================================================== 1. Landing view (workspace closed): declutter to a clean summary The original page keeps its header + topbar (Current website, Last scan, Issues, "Preview banner" button). The inline split editor/preview is hidden and the actual editing happens inside the Builder Workspace. =========================================================================== */ .cs-workspace-ready .consent-setup-shell:not(.cs-workspace-open) .consent-setup-main { display: none !important; } .cs-workspace-ready .consent-setup-shell:not(.cs-workspace-open) .consent-setup-header-actions { display: none !important; } .cs-workspace-ready .consent-setup-shell:not(.cs-workspace-open) { overflow: auto; } /* Friendly empty-state filling the freed space. */ .cs-workspace-ready .consent-setup-shell:not(.cs-workspace-open)::after { content: "Your banner now opens in a full-screen Builder Workspace.\A Click \201CPreview banner\201D above to design, translate and preview it."; white-space: pre-line; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin: 24px 32px 32px; padding: 56px 24px; color: var(--ds-color-muted, #64748b); font-family: "DM Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.7; background: var(--ds-color-surface, #ffffff); border: 1px dashed var(--ds-color-border, #e2e8f0); border-radius: 16px; } /* Make the "Preview banner" CTA the obvious primary action on the landing. */ .cs-workspace-ready .consent-setup-shell:not(.cs-workspace-open) .consent-setup-topbar-right button, .cs-workspace-ready .consent-setup-shell:not(.cs-workspace-open) .consent-setup-hero-preview-row button { background: var(--ds-color-shell-accent, #2562ff) !important; color: #ffffff !important; border-color: transparent !important; font-weight: 600 !important; } .cs-workspace-ready .consent-setup-shell:not(.cs-workspace-open) .consent-setup-topbar-right button:hover, .cs-workspace-ready .consent-setup-shell:not(.cs-workspace-open) .consent-setup-hero-preview-row button:hover { filter: brightness(1.05); } /* =========================================================================== 2. Builder Workspace (workspace open): full-screen 30 / 70 layout =========================================================================== */ .cs-workspace-ready .consent-setup-shell.cs-workspace-open { position: fixed !important; inset: 0 !important; z-index: 6000 !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: var(--ds-color-bg, #f8fafc) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; animation: cs-workspace-fade-in 0.18s ease-out; } @keyframes cs-workspace-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Scroll lock on the underlying document while the workspace is open. */ body.cs-workspace-lock { overflow: hidden !important; } /* Header / topbar stay pinned at the top of the workspace. */ .cs-workspace-ready .consent-setup-shell.cs-workspace-open .consent-setup-header { flex-shrink: 0 !important; margin-bottom: 0; } .cs-workspace-ready .consent-setup-shell.cs-workspace-open .consent-setup-topbar { flex-shrink: 0 !important; margin-top: 0 !important; min-height: 0 !important; background: transparent !important; border: none !important; } /* Builder ~30% | Live preview ~70%. */ .cs-workspace-ready .consent-setup-shell.cs-workspace-open .consent-setup-main.consent-setup-layout.consent-setup-layout--split { flex: 1 1 auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(320px, 26.5%) 1fr !important; max-height: none !important; overflow: hidden !important; } /* Let the builder use the full 30% instead of the fixed 360px cap. */ .cs-workspace-ready .consent-setup-shell.cs-workspace-open .consent-setup-editor.consent-settings-panel { max-width: 800px !important; width: 509px !important; } /* Live preview fills its 70% column (drop the sticky/max-height inline caps). */ .cs-workspace-ready .consent-setup-shell.cs-workspace-open .consent-setup-preview.consent-preview-panel { position: static !important; align-self: stretch !important; height: 100% !important; max-height: none !important; min-height: 0 !important; } /* =========================================================================== 3. Close control (rendered in by banner-workspace.js, outside React) =========================================================================== */ .cs-workspace-close { position: fixed; top: -1px; right: -1px; z-index: 2147483647; display: none; align-items: center; gap: 4px; padding: 5px 14px; font-family: "DM Sans", system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--ds-color-neutral, #0f172a); background: var(--ds-color-surface, #ffffff); border: 1px solid var(--ds-color-border, #e2e8f0); border-radius: 0 0 0 14px; cursor: pointer; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16); } .cs-workspace-close.is-visible { display: inline-flex; } .cs-workspace-close:hover { background: var(--ds-color-bg, #f8fafc); border-color: var(--ds-color-muted-2, #94a3b8); } .cs-workspace-close svg { width: 16px; height: 16px; flex-shrink: 0; } /* =========================================================================== 4. Responsive: stack Builder above Preview on narrow screens. Desktop / Tablet / Mobile preview device modes live inside the preview component and are unaffected by this layout. =========================================================================== */ @media (max-width: 960px) { .cs-workspace-ready .consent-setup-shell.cs-workspace-open .consent-setup-main.consent-setup-layout.consent-setup-layout--split { grid-template-columns: 1fr !important; grid-template-rows: minmax(220px, 46vh) 1fr !important; } .cs-workspace-ready .consent-setup-shell.cs-workspace-open .consent-setup-editor.consent-settings-panel { border-right: none !important; border-bottom: 1px solid var(--ds-color-border, #e2e8f0) !important; } .cs-workspace-close span { display: none; } }