/* Page Builder admin UI - see pagebuilder-ui.js. Visual language matches the reference implementation's PageBuilder.vue: blue (#0d6efd) hover toolbars, dashed selection borders, centered modal overlays, grid-based layout/element pickers. */ .pagebuilder-mount { display: none; border: 1px solid #e0e0e0; padding: 10px; background: #fafafa; } /* Opened via the "Page Builder (Beta)" button - covers the whole viewport, like the reference implementation's fullscreen builder modal, regardless of where this element sits in the page DOM. */ .pagebuilder-mount.pb-fullscreen { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 20000; /* above the KEditor modal (11000) and everything else on this page */ padding: 0; margin: 0; background: #fff; } body.pb-modal-open { overflow: hidden; } /* bootstrap-colorpicker's popup template is
, appended straight to - it only carries Bootstrap 3's default .dropdown-menu z-index (1000), far below the fullscreen page builder overlay above (20000). It was rendering and positioning itself correctly on click, just completely hidden behind the opaque fullscreen background - looked identical to the click doing nothing at all. */ .colorpicker.dropdown-menu { z-index: 20050; } .pb-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #263238; color: #fff; flex: 0 0 auto; } .pb-modal-header .pb-modal-title { font-size: 14px; } .pb-modal-header .pb-modal-title i { margin-right: 6px; } /* Current page's name (opts.pageTitle - see buildChrome() in pagebuilder-ui.js), lighter than the "Page Builder" brand text itself so the two don't compete for attention. */ .pb-modal-title-page { font-weight: 400; color: #b0bec5; } .pb-modal-header-actions .btn { margin-left: 6px; } .pagebuilder-mount.pb-fullscreen .pb-canvas-tabs { padding: 0 16px; margin-bottom: 0; flex: 0 0 auto; } .pagebuilder-mount.pb-fullscreen .pb-layout { flex: 1 1 auto; overflow: hidden; padding: 10px 16px; } .pagebuilder-mount.pb-fullscreen .pb-canvas-view { height: 100%; overflow-y: auto; padding-right: 4px; } .pagebuilder-mount.pb-fullscreen .pb-settings { height: 100%; max-height: none; } .pb-settings .form-control { padding-right: 2px !important; /* override Bootstrap 3's .has-feedback padding-right: 42px */ } /* Canvas mode tabs (Visual / HTML / Preview) */ .pb-canvas-tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 10px; } .pb-canvas-tabs .pb-tab-btn { padding: 8px 16px; border: none; background: #f8f9fa; cursor: pointer; border-bottom: 2px solid transparent; font-size: 12px; } .pb-canvas-tabs .pb-tab-btn.active { background: #fff; border-bottom-color: #0d6efd; color: #0d6efd; } .pb-canvas-tabs .pb-tab-btn:hover { background: #e9ecef; } .pb-canvas-tabs .pb-tab-btn i { margin-right: 4px; } .pb-layout { display: flex; gap: 10px; align-items: flex-start; } .pb-canvas-view { flex: 1 1 auto; min-height: 200px; } .pb-canvas { min-height: 200px; border: 1px dashed #ccc; background: #fff; padding: 10px; border-radius: 3px; } .pb-empty-state { display: flex; align-items: center; justify-content: center; height: 200px; color: #999; font-size: 13px; } /* Section */ /* .pb-section-wrap is purely structural editor chrome - drag handle, hover/selection border, the toolbar - and carries NONE of the section's own settings (no sectionStyles, no identity classes). .pb-section (inner, one level down - see renderCanvas() in pagebuilder-ui.js) is the "real" node instead: it gets the section's actual classes AND inline style, same as the published
does, and on purpose has ZERO CSS of its own here, so nothing an admin sets (Overflow: Hidden, Z-Index, etc.) can ever visually break the toolbar above it - they no longer share a node at all, unlike before. Transparent border at rest (not a visible color) - this chrome should only ever be a hover/selection affordance, never real box-model the published page doesn't also have. Every rule below requires .pb-editing, not just .pb-section-wrap/.pb-column/.pb-element on their own - page.twig (the exported/published page) deliberately reuses those same structural class names (see the comment at the top of page.twig) so canvas and export share one DOM shape, but .pb-editing itself is only ever added by renderCanvas() here, never by page.twig. Without that guard, these bare-class selectors would also match page.twig's output wherever it's rendered alongside this stylesheet - namely the Preview tab, which renders in this same admin document (a plain div, not an iframe) - so hovering "preview" content picked up the editor's own dashed hover borders/backgrounds, plus a stray 1-2px transparent-but-real border even at rest that the actual published page never has. */ .pb-section-wrap.pb-editing { position: relative; border: 2px dashed transparent; border-radius: 4px; transition: all 0.2s ease; } .pb-section-wrap.pb-editing:hover { border-color: #0d6efd; background: rgba(13, 110, 253, 0.02); } .pb-section-wrap.pb-editing.pb-selected { border-color: #0d6efd !important; background: rgba(13, 110, 253, 0.05); } /* Toggled by pagebuilder-ui.js's drag & drop dragover handling - highlights whichever section/column will actually receive the item currently being dragged. */ .pb-section-wrap.pb-editing.pb-drag-over { border-color: #198754 !important; background: rgba(25, 135, 84, 0.08) !important; } .pb-section-toolbar { position: absolute; top: 0; right: 0; z-index: 10; display: none; gap: 2px; padding: 2px; background: #0d6efd; } .pb-section-wrap.pb-editing:hover .pb-section-toolbar { display: flex; } .kr-d-flex{ display: flex !important; } .kr-flex-wrap { flex-wrap: wrap !important; } /* Flex utility classes used by pb_section_view()'s rowClasses (align-items-* and justify-content-*, driven by Section > Design's "Column Align Items"/"Column Justify Content" fields) - this project is currently on Bootstrap 3, which never defines these (they're Bootstrap 4+ flex utilities), so previously they rendered with zero effect both here and on the published page. Defined here for the admin canvas/Preview tab; the identical block inside page.twig is what makes them work on the actual published page, which doesn't load this stylesheet. Naming/ semantics deliberately match Bootstrap 4/5's own utilities wherever they overlap (align- items-*, justify-content-start/center/end) so upgrading Bootstrap later makes these purely redundant rather than needing a rewrite; justify-content-space-between/-around aren't real Bootstrap class names (it uses -between/-around) and will keep needing this definition. */ .align-items-start { align-items: flex-start !important; } .align-items-center { align-items: center !important; } .align-items-end { align-items: flex-end !important; } .align-items-stretch { align-items: stretch !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-center { justify-content: center !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-space-between { justify-content: space-between !important; } .justify-content-space-around { justify-content: space-around !important; } /* Responsive display utility classes used by visibilityClass() (pagebuilder-twig-helpers.js) - d-none/d-sm-block/d-md-none/d-lg-none/d-lg-block, produced by the Visibility checkboxes (Hide on Desktop/Tablet/Mobile, present on every block type's Extra/Design tab) - same underlying issue as the align-items-* and justify-content-* classes above: real Bootstrap 4/5 utility classes this project's Bootstrap 3 never defines, so "Hide on ..." rendered with zero visual effect both here and on the published page. Breakpoints (576/768/992/1200px) and naming match Bootstrap 4/5's own grid-breakpoints exactly, so upgrading Bootstrap later makes this purely redundant. Also defined again, identically, inside page.twig's