/* builder.css — demo builder UI chrome (W2 — single right sidebar).
*
* Layout:
* topnav (56px) · canvas (flex: 1) · right sidebar (360px, 4 tabs).
*
* No left sidebar — every panel (Elements / Controls / Page / Themes)
* lives in the single right sidebar's tab strip per user direction
* (W2 mid-wave restructure 2026-05-07).
*
* Loaded after tokens.css + app.css; consumes --demo-* tokens only. No
* hardcoded hex anywhere. Light/dark inverts via [data-theme] on ;
* Bootstrap form controls + BuilderJS internals (.bjs-* / .form-control /
* .toggle-switch / .form-range) sync via the matching `data-bs-theme`
* attribute that theme-toggle.js mirrors.
*
* Sections:
* 1. Layout shell + body reset
* 2. Top nav (.demo-builder__topnav)
* 3. Right sidebar (tab strip + 4 panels)
* 4. Canvas + device-mode classes
* 5. Loading overlay
* 6. BuilderJS bridge — SettingsContainer wrapper styling, scrollbars
* 7. Change Theme modal
* 8. Notifications (toast)
* 9. Responsive tweaks (≤1280, ≤1024, ≤768)
*
* @see docs/archived/demo/DESIGN.md §5
* @see docs/archived/demo/W2_BUILDER_UI.md
*/
/* ──────────────────────────────────────────────
* 1. Layout shell + token aliases
* ────────────────────────────────────────────── */
:root {
--demo-builder-topnav-h: 56px;
--demo-builder-sidebar-w: 360px; /* 3-widget grid + breathing room */
--demo-builder-canvas-bg: var(--demo-bg-elevated);
--demo-builder-canvas-paper: #ffffff; /* email canvas always paints on white paper */
--demo-builder-canvas-grid: rgba(0, 0, 0, 0.05); /* faint grid line — design-tool vibe */
--demo-builder-canvas-grid-strong: rgba(0, 0, 0, 0.07);
--demo-builder-scrollbar-thumb: var(--demo-border);
--demo-builder-scrollbar-thumb-hover: var(--demo-text-muted);
}
[data-theme='dark'] {
--demo-builder-canvas-bg: #0a0d12; /* a touch deeper than --demo-bg for contrast */
--demo-builder-canvas-paper: #ffffff; /* still white — emails render on white */
--demo-builder-canvas-grid: rgba(255, 255, 255, 0.04);
--demo-builder-canvas-grid-strong: rgba(255, 255, 255, 0.06);
/* ── Dark-mode tone bridge ─────────────────────────────────────────
* BuilderJS dark palette in dist/builder.css uses #1a1a1a-family
* grays; demo chrome's dark uses the cooler #11161d-family. The
* two reading side-by-side feels like "two different dark themes".
* Override the BG-family `--bjs-*` tokens (text/border stay native
* — BuilderJS's text contrast is fine) so the BuilderJS surfaces
* inside the right sidebar inherit the chrome's tone. Loaded after
* /dist/builder.css (see builder.php) so this wins the cascade. */
--bjs-bg: var(--demo-bg-elevated);
--bjs-bg-subtle: var(--demo-bg-elevated);
--bjs-bg-surface: var(--demo-bg-elevated);
--bjs-bg-muted-subtle: var(--demo-bg);
}
.demo-body--app {
overflow: hidden;
height: 100vh;
}
.demo-builder {
display: flex;
align-items: stretch;
height: calc(100vh - var(--demo-builder-topnav-h));
}
/* ──────────────────────────────────────────────
* 2. Top nav
* ────────────────────────────────────────────── */
.demo-builder__topnav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--demo-space-3);
height: var(--demo-builder-topnav-h);
padding: 0 var(--demo-space-4);
background: var(--demo-bg);
border-bottom: 1px solid var(--demo-border);
flex-shrink: 0;
}
.demo-builder__topnav-section {
display: inline-flex;
align-items: center;
gap: var(--demo-space-2);
}
.demo-builder__topnav-section--left { justify-self: start; }
.demo-builder__topnav-section--center { justify-self: center; }
.demo-builder__topnav-section--right { justify-self: end; }
.demo-builder__brand {
display: inline-flex;
align-items: center;
gap: var(--demo-space-2);
color: var(--demo-text-strong);
font-weight: var(--demo-fw-semibold);
font-size: var(--demo-fs-md);
text-decoration: none;
}
.demo-builder__brand:hover { color: var(--demo-text-strong); }
.demo-builder__brand-logo {
display: inline-block;
width: 28px;
height: 28px;
background-image: url('/assets/brand/logo_light.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
[data-theme='dark'] .demo-builder__brand-logo {
background-image: url('/assets/brand/logo_dark.svg');
}
.demo-builder__brand-wordmark { letter-spacing: -0.01em; }
.demo-builder__brand-accent { color: var(--demo-accent); }
.demo-builder__sep {
display: inline-block;
width: 1px;
height: 24px;
background: var(--demo-border);
margin: 0 var(--demo-space-2);
}
.demo-builder__theme-badge {
display: inline-flex;
align-items: center;
gap: var(--demo-space-1);
padding: 4px 10px;
background: var(--demo-accent-soft);
color: var(--demo-accent);
font-size: 13px;
font-weight: var(--demo-fw-semibold);
letter-spacing: var(--demo-ls-body);
border-radius: var(--demo-radius-pill);
max-width: 280px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.demo-builder__theme-badge-icon {
font-size: 16px;
line-height: 1;
}
.demo-builder__device-toggle {
display: inline-flex;
align-items: center;
padding: 2px;
background: var(--demo-bg-elevated);
border: 1px solid var(--demo-border);
border-radius: var(--demo-radius-md);
}
.demo-builder__device-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 32px;
background: transparent;
border: 0;
color: var(--demo-text-muted);
cursor: pointer;
border-radius: var(--demo-radius-sm);
transition: background 120ms ease, color 120ms ease;
}
.demo-builder__device-btn .material-symbols-outlined { font-size: 18px; }
.demo-builder__device-btn:hover { color: var(--demo-text); }
.demo-builder__device-btn:focus-visible {
outline: 2px solid var(--demo-accent);
outline-offset: 1px;
}
.demo-builder__device-btn.is-active {
background: var(--demo-bg);
color: var(--demo-text-strong);
box-shadow: var(--demo-shadow-sm);
}
.demo-builder__icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: 1px solid transparent;
color: var(--demo-text-muted);
cursor: pointer;
border-radius: var(--demo-radius-md);
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.demo-builder__icon-btn .material-symbols-outlined { font-size: 20px; }
.demo-builder__icon-btn:hover {
background: var(--demo-bg-elevated);
color: var(--demo-text);
}
.demo-builder__icon-btn:focus-visible {
outline: 2px solid var(--demo-accent);
outline-offset: 2px;
}
.demo-builder__icon-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Export dropdown */
.demo-builder__export {
position: relative;
}
.demo-builder__export-caret {
font-size: 16px;
margin-left: 2px;
}
.demo-builder__export-menu {
position: absolute;
top: calc(100% + var(--demo-space-2));
right: 0;
z-index: 30;
width: 360px;
margin: 0;
padding: var(--demo-space-2);
list-style: none;
background: var(--demo-bg);
border: 1px solid var(--demo-border);
border-radius: var(--demo-radius-lg);
box-shadow: var(--demo-shadow-lg);
}
.demo-builder__export-menu[hidden] { display: none; }
.demo-builder__export-item {
display: block;
width: 100%;
padding: var(--demo-space-3);
background: transparent;
border: 0;
border-radius: var(--demo-radius-md);
text-align: left;
cursor: pointer;
transition: background 120ms ease;
}
.demo-builder__export-item:hover,
.demo-builder__export-item:focus-visible {
background: var(--demo-bg-elevated);
outline: none;
}
.demo-builder__export-item-title {
display: block;
color: var(--demo-text-strong);
font-size: var(--demo-fs-sm);
font-weight: var(--demo-fw-semibold);
margin-bottom: 2px;
}
.demo-builder__export-item-desc {
display: block;
color: var(--demo-text-muted);
font-size: var(--demo-fs-xs);
line-height: 1.4;
}
/* ──────────────────────────────────────────────
* 3. Right sidebar (single column, 4 tabs)
* ────────────────────────────────────────────── */
.demo-builder__sidebar {
display: flex;
flex-direction: column;
background: var(--demo-bg-elevated);
overflow: hidden;
flex-shrink: 0;
}
.demo-builder__sidebar--right {
width: var(--demo-builder-sidebar-w);
border-left: 1px solid var(--demo-border);
}
/* Tab strip — flush with sidebar edges, no padding around the buttons.
* Each tab carries a transparent 2 px bottom border that flips to
* `--demo-text-strong` on active. The strip's own `border-bottom: 1px`
* sits beneath; the active tab's 2 px border overlaps it so the
* indicator visually "lives" on the bottom edge of the tab — the
* "folder tab" feel the user asked for. No tab radius, no inset
* shadow, no inner padding around the strip. */
.demo-builder__sidebar-tabs {
display: flex;
align-items: stretch;
gap: 0;
padding: 0;
background: var(--demo-bg);
border-bottom: 1px solid var(--demo-border);
flex-shrink: 0;
}
.demo-builder__sidebar-tab {
flex: 1;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: var(--demo-space-3) var(--demo-space-2);
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* overlap the strip border-bottom */
color: var(--demo-text-muted);
font-size: var(--demo-fs-xs);
font-weight: var(--demo-fw-medium);
cursor: pointer;
transition: color 120ms ease, border-color 120ms ease;
}
.demo-builder__sidebar-tab .material-symbols-outlined { font-size: 18px; }
.demo-builder__sidebar-tab-label { line-height: 1; }
.demo-builder__sidebar-tab:hover { color: var(--demo-text); }
.demo-builder__sidebar-tab:focus-visible {
outline: 2px solid var(--demo-accent);
outline-offset: -2px;
}
.demo-builder__sidebar-tab.is-active {
color: var(--demo-text-strong);
font-weight: var(--demo-fw-semibold);
border-bottom-color: var(--demo-text-strong);
}
.demo-builder__sidebar-panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.demo-builder__sidebar-panel[hidden] { display: none; }
.demo-builder__sidebar-body {
flex: 1;
min-height: 0;
overflow-y: auto;
/* Flush with sidebar edges — let the inner content (widget grid,
* Controls renderer) decide its own gutter. Vertical padding keeps
* the first row off the panel header divider. */
/* padding: var(--demo-space-3) 0; */
}
.demo-builder__panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--demo-space-2);
padding: var(--demo-space-3);
border-bottom: 1px solid var(--demo-border);
flex-shrink: 0;
}
.demo-builder__panel-title {
margin: 0;
color: var(--demo-text-strong);
font-size: var(--demo-fs-sm);
font-weight: var(--demo-fw-semibold);
letter-spacing: var(--demo-ls-caps);
text-transform: uppercase;
}
.demo-builder__panel-hint-inline {
color: var(--demo-text-muted);
font-size: var(--demo-fs-xs);
}
.demo-builder__panel-empty,
.demo-builder__panel-hint {
margin: 0;
padding: var(--demo-space-4);
color: var(--demo-text-muted);
font-size: var(--demo-fs-sm);
text-align: center;
}
/* Padded wrapper for action buttons inside a panel body. The sidebar-body
* is flush with the sidebar edges (vertical-only padding) so consumers
* that want gutter bring their own — this is the canonical pattern for
* stretched-width buttons (Open page controls, future "Reset", etc.). */
.demo-builder__panel-action {
padding: 0 var(--demo-space-3) var(--demo-space-3);
}
.demo-builder__panel-action-btn {
width: 100%;
justify-content: center;
}
.demo-builder__panel-empty .material-symbols-outlined {
display: block;
margin: 0 auto var(--demo-space-3);
font-size: 32px;
color: var(--demo-text-muted);
opacity: 0.6;
}
.demo-builder__panel-empty p { margin: 0; }
/* Theme list (Themes panel) — 2-up grid of thumbnail cards. */
.demo-builder__theme-list {
list-style: none;
margin: 0;
/* The sidebar-body is now flush with the sidebar edges (vertical
* padding only, no sides), so each consumer that wants gutter brings
* its own. Theme list = symmetric padding on all four sides. */
padding: var(--demo-space-3);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--demo-space-2);
}
.demo-builder__theme-list-item { margin: 0; }
.demo-builder__theme-list-link {
display: block;
border: 1px solid var(--demo-border);
border-radius: var(--demo-radius-md);
overflow: hidden;
text-decoration: none;
color: var(--demo-text);
background: var(--demo-bg);
transition: border-color 120ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.demo-builder__theme-list-link:hover {
border-color: var(--demo-text-muted);
transform: translateY(-1px);
box-shadow: var(--demo-shadow-sm);
}
.demo-builder__theme-list-link.is-current {
border-color: var(--demo-accent);
box-shadow: 0 0 0 1px var(--demo-accent);
}
.demo-builder__theme-list-thumb {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
background: var(--demo-bg-elevated);
border-bottom: 1px solid var(--demo-border);
overflow: hidden;
}
.demo-builder__theme-list-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.demo-builder__theme-list-title {
display: block;
padding: var(--demo-space-2) var(--demo-space-3);
font-size: var(--demo-fs-xs);
color: var(--demo-text);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Import (collapsible details). */
.demo-builder__import {
margin-top: var(--demo-space-4);
border-top: 1px solid var(--demo-border);
padding-top: var(--demo-space-3);
}
.demo-builder__import > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--demo-space-2);
padding: var(--demo-space-2) var(--demo-space-3);
border-radius: var(--demo-radius-md);
color: var(--demo-text);
font-size: var(--demo-fs-sm);
font-weight: var(--demo-fw-medium);
}
.demo-builder__import > summary:hover { background: var(--demo-bg); }
.demo-builder__import > summary::-webkit-details-marker { display: none; }
.demo-builder__import > summary .material-symbols-outlined { font-size: 18px; color: var(--demo-text-muted); }
.demo-builder__import-form {
display: flex;
flex-direction: column;
gap: var(--demo-space-3);
padding: var(--demo-space-3) 0;
}
.demo-builder__import-drop {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--demo-space-2);
padding: var(--demo-space-5);
background: var(--demo-bg);
border: 2px dashed var(--demo-border);
border-radius: var(--demo-radius-md);
color: var(--demo-text-muted);
text-align: center;
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease;
}
.demo-builder__import-drop:hover,
.demo-builder__import-drop.is-dragover {
border-color: var(--demo-accent);
background: var(--demo-accent-soft);
color: var(--demo-text);
}
.demo-builder__import-drop .material-symbols-outlined { font-size: 28px; }
.demo-builder__import-drop-text { font-size: var(--demo-fs-sm); }
.demo-builder__import-help {
margin: 0;
color: var(--demo-text-muted);
font-size: var(--demo-fs-xs);
}
/* ──────────────────────────────────────────────
* 4. Canvas
* ────────────────────────────────────────────── */
.demo-builder__canvas {
flex: 1;
min-width: 0;
overflow: auto;
background-color: var(--demo-builder-canvas-bg);
/* Subtle 24px grid pattern — Figma/Linear/Mailchimp design-tool vibe.
* Two stacked linear-gradients build the grid lines on a flat token
* background. Both grid tokens flip via [data-theme=dark] so light +
* dark inherit the same intensity ratio. Stronger lines every 96px
* (4× the base) give a "major grid" feel without noise. */
background-image:
linear-gradient(to right, var(--demo-builder-canvas-grid-strong) 1px, transparent 1px),
linear-gradient(to bottom, var(--demo-builder-canvas-grid-strong) 1px, transparent 1px),
linear-gradient(to right, var(--demo-builder-canvas-grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--demo-builder-canvas-grid) 1px, transparent 1px);
background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
background-position: 0 0;
padding: var(--demo-space-6) var(--demo-space-7);
transition: background-color 200ms ease;
}
.demo-builder__canvas-inner {
margin: 0 auto;
background: var(--demo-builder-canvas-paper);
/* Stronger shadow than the chrome's --demo-shadow-md so the email
* paper visibly floats above the patterned canvas. */
box-shadow: var(--demo-shadow-lg);
border-radius: var(--demo-radius-md);
transition: max-width 200ms ease, width 200ms ease;
}
.demo-builder[data-current-mode='preview'] .demo-builder__canvas {
padding: var(--demo-space-7);
}
.demo-builder[data-current-device='desktop'] .demo-builder__canvas-inner {
max-width: 100%;
width: 100%;
}
.demo-builder[data-current-device='tablet'] .demo-builder__canvas-inner {
max-width: 768px;
width: 768px;
}
.demo-builder[data-current-device='mobile'] .demo-builder__canvas-inner {
max-width: 375px;
width: 375px;
}
/* ──────────────────────────────────────────────
* 5. Loading overlay
* ────────────────────────────────────────────── */
.demo-builder__loading {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: var(--demo-bg);
transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.demo-builder__loading.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.demo-builder__loading-spinner {
width: 36px;
height: 36px;
border: 3px solid var(--demo-border);
border-top-color: var(--demo-accent);
border-radius: 50%;
animation: demo-builder-spin 800ms linear infinite;
}
@keyframes demo-builder-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.demo-builder__loading-spinner { animation: none; }
}
/* ──────────────────────────────────────────────
* 6. BuilderJS bridge
*
* BuilderJS internals (#WidgetsContainer + #SettingsContainer) own their
* own typography + spacing via `dist/builder.css` (which exposes its
* dark-mode palette via `[data-theme="dark"]`). The chrome only needs to:
* - paint the surrounding sidebar so the panel has bg continuity
* - thin every scrollbar to match the chrome's quiet aesthetic
* - bridge any class that BuilderJS leaves un-themed (BootStrap form
* controls + form labels)
* ────────────────────────────────────────────── */
#WidgetsContainer,
#SettingsContainer {
color: var(--demo-text);
}
#MainContainer {
/* Builder injects its iframe here. */
min-height: 320px;
}
/* Eliminate the iframe-inline-element bottom gap. Without `display: block`,
* iframe defaults to inline and leaves a descender-sized strip below it
* — the wrapper's white background bleeds through that strip and reads
* as a strange "extra row" beneath the email. Discovered 2026-05-07. */
#MainContainer > iframe {
display: block;
}
/* Widget palette — override BuilderJS's hard-coded 95px per card so the
* grid packs 3-per-row inside the sidebar's content area at 360px. The
* `.widget-item-image` rich variant (image+text widgets) stays full-
* width — its content is too dense for 3-column compaction.
*
* src/builder.css already drops the inner max-height/overflow + side
* padding on `.widget-items` / `.widgets-box` so the sidebar's own
* scroll handles overflow (no nested scrollbar). The chrome only needs
* to tighten the per-card width here. */
.demo-builder__sidebar #WidgetsContainer .widget-group-items {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--demo-space-2);
}
.demo-builder__sidebar #WidgetsContainer .widget-item:not(.widget-item-image):not(.widget-rich) {
width: 100%;
padding: var(--demo-space-3) var(--demo-space-2);
}
.demo-builder__sidebar #WidgetsContainer .widget-item-image,
.demo-builder__sidebar #WidgetsContainer .widget-rich {
grid-column: 1 / -1; /* rich/image variants span the row */
}
.demo-builder__sidebar #WidgetsContainer .widget-icon-box .material-symbols-rounded {
font-size: 22px; /* tightened from BuilderJS default 26px to fit 3-up */
}
.demo-builder__sidebar #WidgetsContainer .widget-label,
.demo-builder__sidebar #WidgetsContainer .widget-item .widget-label {
font-size: var(--demo-fs-xs);
line-height: 1.25;
}
/* The "✨ Just drag & drop the widget…" intro card ships from BuilderJS
* as a Bootstrap `.alert.fst-italic` (16 px italic) — too loud for the
* chrome. Demote it to a quiet hint: smaller, non-italic, muted text. */
.demo-builder__sidebar #WidgetsContainer .widget-header {
padding: var(--demo-space-3) var(--demo-space-3) 0;
}
.demo-builder__sidebar #WidgetsContainer .widget-header .alert {
margin: 0;
padding: var(--demo-space-2) var(--demo-space-3);
background: var(--demo-bg-elevated);
color: var(--demo-text-muted);
font-size: var(--demo-fs-xs);
font-style: normal;
line-height: 1.4;
}
/* Thin scrollbars — chrome-wide. Honours --demo-* tokens so dark mode
* inverts automatically. Scoped to the builder surface so the design /
* docs / showcase pages keep platform-default scrollbars. */
.demo-builder,
.demo-builder *,
.demo-builder__modal-body,
.demo-builder__notifications {
scrollbar-width: thin;
scrollbar-color: var(--demo-builder-scrollbar-thumb) transparent;
}
.demo-builder ::-webkit-scrollbar,
.demo-builder__modal-body ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.demo-builder ::-webkit-scrollbar-track,
.demo-builder__modal-body ::-webkit-scrollbar-track {
background: transparent;
}
.demo-builder ::-webkit-scrollbar-thumb,
.demo-builder__modal-body ::-webkit-scrollbar-thumb {
background: var(--demo-builder-scrollbar-thumb);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.demo-builder ::-webkit-scrollbar-thumb:hover,
.demo-builder__modal-body ::-webkit-scrollbar-thumb:hover {
background: var(--demo-builder-scrollbar-thumb-hover);
background-clip: padding-box;
}
/* BuilderJS uses bare `` / `