/* ============================================================ Dialog / Panel / DataGrid — surgical overrides only. common-theme.css handles colors, padding, fonts via tokens. We only fix the ~5 values hardcoded (not variable) there. ============================================================ */ /* ── ui-dialog border-radius (hardcoded 0.3rem in common-theme) */ .ui-dialog { border-radius: var(--bs-border-radius-xl) !important; overflow: hidden; } .ui-dialog-titlebar { border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 0 !important; } .ui-dialog-buttonpane { border-radius: 0 0 var(--bs-border-radius-xl) var(--bs-border-radius-xl) !important; } /* ── Brand rule on the dialog's leading edge ───────────────────── The source's chrome marks its dark surfaces with a solid yellow band (topbar border-bottom, totals bar border-top). A 3px rule across the top of the dialog is the same gesture at a scale that suits a modal you open a hundred times a day — it identifies the surface without tinting anything you have to read. */ .ui-dialog::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--wgl-yellow); z-index: 1; pointer-events: none; } /* ── Modal scrim — the source dims to rgba(17,17,17,.72) ─────── */ .ui-widget-overlay, .ui-dialog-overlay, .modal-backdrop { background: var(--s-modal-backdrop) !important; opacity: 1 !important; } /* ── s-DataGrid card — upgrade shadow and radius ─────────────── */ .s-DataGrid { border-radius: var(--bs-card-border-radius) !important; box-shadow: var(--s-shadow-sm); } /* ── s-Panel inline card ─────────────────────────────────────── */ .s-Panel { border-radius: var(--bs-card-border-radius) !important; box-shadow: var(--s-shadow-sm); } /* ── Grid embedded as a dialog's own body ──────────────────────── The .s-DataGrid card styling above is right for a grid sitting on a page, but a dialog is already a card: rendering one inside another gives the nested border/shadow seen in the Send Newsletter picker. Flatten it. Deliberately scoped to .s-DialogGridHost rather than applied to every grid inside every dialog. Opt in by putting the class on the dialog's content wrapper. */ .s-DialogGridHost .s-DataGrid { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent; } /* ── Master-detail grid inside a PropertyGrid category ─────────── Same box-in-a-box problem: the category (Parts, Articles, Media…) is already a bordered card, so the child grid's own border/shadow draws a second frame a few pixels inside the first. The category title and its 1.25rem padding are enough to separate the grid from the form fields. Specificity (0,3,0) beats both the .s-DataGrid card rule above and common-theme's, so no !important is needed here. */ .s-PropertyGrid .category .s-DataGrid { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; } /* ── Modal backdrop blur ─────────────────────────────────────── */ /* * THE EXCLUSION LIST IS LOAD-BEARING. This blurs and disables every direct child * of , so anything that mounts itself there to sit ON TOP of a dialog has * to be named here or it gets treated as the page behind. Two have been caught * that way already, both presenting as something other than what they were: * * - #toast-container -- corelib's notify() targets "body", so a validation * error raised from inside a dialog rendered blurred and, via * pointer-events: none, could not be clicked away. It read as a z-index bug * even though the container already sits at z-index 999999 and paints on top. * * - .lightbox-overlay -- Lightbox.ts does document.body.appendChild(overlay). * Opening a photo from inside the product editor therefore showed a * blur(6px) image, which reads as "the lightbox loaded the thumbnail instead * of the original" and sends you looking at data-full and the upload * pipeline. It is neither: the image is sharp and the filter is on its * container. pointer-events: none came with it, so zoom, close and the * gallery arrows were all dead and only Escape dismissed it. * * z-index cannot save you here -- a filter on an ancestor repaints whatever it * contains regardless of how high the child is stacked. */ body.modal-open > *:not(.modal):not(.select2-drop):not(.ui-dialog-overlay):not(#toast-container):not(.lightbox-overlay) { filter: blur(6px); pointer-events: none; user-select: none; transition: filter var(--s-transition-slow); }