/* Editor-shell (golf 3, PAG-033, DSC-101). * * De frame-, handvat- en toolbarstijlen van de bewerklaag staan in * editor_chrome.css (ds-*); hier staat alleen wat de interactieve shell * daarbovenop nodig heeft: de Concept/Live-schakelaar wisselt van staat via * aria-pressed, en dat kan niet met utilities per staat in de ERB. */ .pe-toggle-optie { color: var(--color-subtle); } .pe-toggle-optie:hover { color: var(--color-black); } .pe-toggle-optie[aria-pressed="true"] { background: var(--color-black); color: var(--color-offwhite); } /* Sectie-controls (golf 4, PAG-047): de bovenste sectie heeft geen ↑-knop en * de onderste geen ↓-knop. De frames zijn de enige kinderen van het * document-element, dus first/last-child wijst ze exact aan; kan niet met * utilities omdat de knop in het gedeelde icon_button-component rendert. */ [data-page-editable="section"]:first-child [data-test-id="editor-sectie-omhoog"], [data-page-editable="section"]:last-child [data-test-id="editor-sectie-omlaag"] { display: none; } /* UX-audit-wave2 (page-editor-widgets #5, PAG-122) + FEEDBACK ronde 4: de * MOVE-greep versleept naar een 2D-gridcel, wat op de éénkoloms mobiele layout * niet werkt en met touch nauwelijks (zie pages/editor/_mobile_notice, dezelfde * md-breakpoint). Onder md verbergen we de greep dus in plaats van een * onwerkbare affordance te tonen; de rest van de bewerklaag (selecteren, * toolbar-knoppen, de breedte/hoogte-dropdowns) blijft bruikbaar via tap. */ @media (width < 48rem) { .ds-widget-toolbar-grip { display: none; } } /* FEEDBACK aug 2026 (Lennart): een nieuwe, lege sectie was geen sleepdoel. Het * grid krijgt zijn hoogte van zijn widgets, dus zonder widgets is de rechthoek * 0px hoog — en widget_grid_controller#gridUnder kiest de doelsectie juist op * die rechthoek. De zone (pages/_section, alleen in bewerkmodus) geeft de lege * sectie hoogte en laat zien dat je er iets naartoe kunt slepen. * pointer-events: none — de drop hoort door de zone heen op het grid te landen, * en de tekst mag geen tekstselectie of hover opvangen tijdens het slepen. */ /* Het grid van een lege sectie in bewerkmodus (components/_widget_grid met * `leeg`). Twee dingen tegelijk: hoogte, zodat er überhaupt iets te raken valt * (widget_grid_controller#gridUnder kiest de doelsectie op de rechthoek van het * grid), en een positioneringscontext voor de zone-overlay hieronder. De extra * ondermarge is de baan voor de '+ Widget toevoegen'-knop, die absoluut * onderaan de sectie hangt (bottom-4). */ .ds-widget-grid--leeg { position: relative; min-height: calc(var(--ds-row-unit) * 2 + 2.5rem); } .ds-sectie-sleepzone { /* FEEDBACK aug 2026 (Lennart): als OVERLAY, niet als gridkind. Als gridkind * bezette de zone echte rijen, waardoor een widget die je erin sleepte * eronder landde en het vlak omlaag sprong — alsof de zone zelf een widget * was. Absoluut gepositioneerd telt hij niet mee in de gridplaatsing: de * widget landt in rij 0, precies waar je 'm neerlegt. */ position: absolute; inset: 0 0 2.5rem; display: flex; align-items: center; justify-content: center; padding: 1rem; /* currentColor: werkt zowel op een lichte als op een donkere sectie, waar de * tekstkleur al omgeschakeld is (duotone-regel). */ border: 1px dashed currentColor; border-radius: 0.5rem; opacity: 0.45; font-size: 0.8125rem; text-align: center; pointer-events: none; } /* Tijdens het slepen springt de zone iets meer in het oog, zodat duidelijk is * wáár de lege sectie ligt. .ds-sortable-dragging staat op zolang er * gesleept wordt (widget_grid_controller#startDrag). */ .ds-sortable-dragging .ds-sectie-sleepzone { border-color: var(--color-brand, #ff6a13); color: var(--color-brand, #ff6a13); opacity: 1; }