/* 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; } .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 { position: relative; border: 2px dashed #dee2e6; border-radius: 4px; margin-bottom: 12px; transition: all 0.2s ease; } .pb-section:hover { border-color: #0d6efd; background: rgba(13, 110, 253, 0.02); } .pb-section.pb-selected { border-color: #0d6efd !important; background: rgba(13, 110, 253, 0.05); } .pb-section-toolbar { position: absolute; top: 0; right: 0; z-index: 10; display: none; gap: 2px; padding: 2px; background: #0d6efd; } .pb-section:hover .pb-section-toolbar { display: flex; } .kr-d-flex{ display: flex !important; } .kr-flex-wrap { flex-wrap: wrap !important; } /* Columns */ .pb-columns { display: flex; padding: 18px 8px 8px; flex-wrap: wrap; } .pb-column { min-height: 80px; position: relative; border: 1px dashed transparent; border-radius: 3px; box-sizing: border-box; } .pb-column:hover { border-color: #6c757d; } .pb-column.pb-selected { border: 2px solid #0d6efd !important; } .pb-column.pb-drag-over { border-color: #198754 !important; background: rgba(25, 135, 84, 0.15) !important; } .pb-column-toolbar { position: absolute; top: 0; left: 0; z-index: 10; display: none; gap: 2px; padding: 2px; background: #0d6efd; border-radius: 0 3px 0 0; } .pb-column:hover .pb-column-toolbar { display: flex; } .pb-column-dropzone { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: #999; cursor: pointer; font-size: 12px; text-align: center; } .pb-column-dropzone:hover { color: #0d6efd; } .pb-column-dropzone i { font-size: 32px; } /* Elements */ .pb-element { position: relative; border: 1px dashed transparent; margin-bottom: 6px; border-radius: 3px; } .pb-element:hover { border-color: #66afe9; } .pb-element.pb-selected { border: 2px solid #0d6efd !important; } .pb-element-toolbar { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; background: #0d6efd; color: #fff; border-radius: 4px; padding: 2px 4px; white-space: nowrap; } .pb-element:hover .pb-element-toolbar { display: flex; align-items: center; gap: 2px; } .pb-element-toolbar .pb-drag-handle { cursor: grab; color: #fff; padding: 0 4px; } .pb-element-toolbar .pb-drag-handle:active { cursor: grabbing; } .pb-section-toolbar .btn, .pb-column-toolbar .btn, .pb-element-toolbar .btn { padding: 1px 6px; } /* Progressive-disclosure toolbar, matching the reference implementation's .section-actions/.column-actions/ .element-actions: the drag-handle and delete button (built directly into the toolbar, outside .pb-toolbar-actions - see toolbarHtml() in pagebuilder-ui.js) stay visible as soon as the toolbar itself shows; the rest (settings/add/copy/etc.) sit in .pb-toolbar-actions, collapsed to zero width, and only slide open once the toolbar itself is hovered. */ .pb-toolbar-actions { display: flex; align-items: center; gap: 2px; max-width: 0; overflow: hidden; transition: max-width 0.3s ease; } .pb-section-toolbar:hover .pb-toolbar-actions, .pb-column-toolbar:hover .pb-toolbar-actions, .pb-element-toolbar:hover .pb-toolbar-actions { max-width: 300px; } .pb-element-preview { pointer-events: none; } .pb-element-preview [contenteditable="true"] { pointer-events: auto; outline: 1px dashed #66afe9; } /* Slider block's dynamic slide list (rebuilt by pagebuilder-ui.js, not server-rendered) */ .pb-slide-row { border: 1px solid #ddd; border-radius: 3px; padding: 8px; margin-bottom: 8px; background: #fff; } .pb-slide-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .pb-slide-row-header .btn { padding: 1px 6px; } .pb-slide-image-preview { margin-bottom: 6px; min-height: 20px; } .pb-slide-row .form-control { margin-top: 6px; } .pb-slide-upload-spinner { margin-left: 6px; } /* Settings sidebar - matches the reference implementation's .builder-inspector: one border separating it from the canvas, plain background, no shadow/card treatment. */ .pb-settings { flex: 0 0 300px; border: 1px solid #ddd; background: #fff; border-radius: 3px; max-height: 640px; overflow-y: auto; } /* Element/Page inspector tabs - matches the reference implementation's own Element Options/Page Options/Global Options tab bar (PageBuilder.vue), reusing this file's existing .pb-canvas-tabs/.pb-tab-btn visual language (active = white bg + blue underline) instead of inventing a new tab style. */ .pb-inspector-tabs { display: flex; border-bottom: 1px solid #ddd; } .pb-inspector-tab { flex: 1 1 auto; padding: 8px 10px; border: none; background: #f8f9fa; cursor: pointer; border-bottom: 2px solid transparent; font-size: 12px; } .pb-inspector-tab.active { background: #fff; border-bottom-color: #0d6efd; color: #0d6efd; } .pb-inspector-tab:hover { background: #e9ecef; } .pb-settings-empty { color: #999; font-size: 12px; padding: 15px; text-align: center; } .pb-settings-panel { padding: 15px; } .pb-settings-panel .form-group { margin-bottom: 14px; margin-inline:0; } .pb-settings-panel .form-group:last-child { margin-bottom: 0; } .pb-settings-panel label.control-label { font-size: 12px; font-weight: normal; color: #333; margin-bottom: 4px; display: block; text-align: left; } /* Margin/Padding/Border-width Top/Right/Bottom/Left groups are wrapped two-per-row in the *.html.twig panels as
...
...
, mirroring the reference implementation's own
...Top...
...Right...
layout for the same fields. Bootstrap 3's default 15px gutter is too wide for this 300px sidebar, so it's tightened here. */ .pb-settings-panel .row { margin-left: -5px; margin-right: -5px; } .pb-settings-panel .row > [class*="col-"] { padding-left: 5px; padding-right: 5px; } /* Page Options' Custom CSS/JS fields (CodeMirror 5 - see _ensureCodeEditors in pagebuilder-ui.js) - bordered/rounded to match this panel's other form controls, sized to fit the 300px sidebar instead of CodeMirror's 300px-tall default. */ .pb-settings-panel .CodeMirror { border: 1px solid #ddd; border-radius: 3px; height: 220px; font-size: 12px; } /* Section headers within a tab, e.g. "Margin" / "Typography" - authored in the *.html.twig panels as

Label

, mirroring the reference implementation's plain
Margin
. Distinct from instructional notes like

Leave empty to...

, which are left as Bootstrap's normal muted help-block styling. */ .pb-tab-content .help-block:has(> strong:only-child) { margin: 15px 0 8px; } .pb-tab-content .help-block:has(> strong:only-child):first-child { margin-top: 0; } .pb-tab-content .help-block:has(> strong:only-child) strong { font-size: 14px; font-weight: 700; color: #333; } /* Tabs - Bootstrap 3's default nav-tabs, just made icon-only when inactive (see pb-tab-label below); no added borders/shadows beyond what nav-tabs already draws. */ .pb-tabs > li > a { padding: 6px 10px; font-size: 12px; } .pb-tab-content { border: 1px solid #ddd; border-top: none; padding: 10px; border-radius: 0 0 3px 3px; } /* Icon-only for inactive tabs, icon+label for the active one - matches the reference implementation's settings tabs (e.g. TextSettings.vue), which only render the label the tab is selected. Bootstrap's tab.js already toggles li.active on click, so this needs no extra JS. */ .pb-tabs > li > a .pb-tab-label { display: none; } .pb-tabs > li.active > a .pb-tab-label { display: inline; } /* Dimension fields: number input + unit