/* Manifest Dialogs */ @layer base, components, utilities; /* mnfst:popover-base:start — self-contained so this stylesheet works on its own; the build strips it from manifest.css. Edit styles/snippets/manifest.popover.css. */ [popover]:not(.unstyle):not(:popover-open) { display: none; } @layer base { /* Animates `scale`, not `transform`. With fill mode `both` a transform animation keeps its final value forever, which silently overrides any transform an author put on a popover — so a menu positioned with translate(-50%) simply would not move. The standalone property leaves transform free. */ @keyframes mnfst-popover-in { from { scale: .9 } to { scale: 1 } } :where([popover]):not(.unstyle):popover-open { display: flex; animation: mnfst-popover-in .15s ease-in both } } /* mnfst:popover-base:end */ @layer components { :where(dialog[popover], .dialog):not(.unstyle) { position: fixed; left: 0; right: 0; width: 500px; flex-direction: column; max-width: 100%; min-height: 200px; max-height: 90vh; margin: auto; color: var(--color-content-stark, oklch(43.9% 0 0)); background-color: var(--color-popover-surface, oklch(98.5% 0 0)); border: 0 none; border-radius: calc(var(--radius, 0.5rem) * 2); box-shadow: var(--shadow-lg, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)); &::backdrop { background-color: rgba(0, 0, 0, 0.2); } /* Set layout for common children */ & :where(header, main, footer) { padding: calc(var(--spacing, 0.25rem) * 4); } /* Push header content apart */ & :where(header) { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--spacing, 0.25rem) * 4) } /* Push footer to bottom */ & :where(main) { flex-grow: 1 } /* Push footer content to end */ & :where(footer) { display: flex; justify-content: end; align-items: center; gap: calc(var(--spacing, 0.25rem) * 2); margin-top: auto } /* Turn dialog into alert prompt on mobile */ @media screen and (max-width: 768px) { width: calc(100vw - calc(var(--spacing, 0.25rem) * 4) - calc(var(--spacing, 0.25rem) * 4)) !important; max-height: calc(100vh - calc(var(--spacing, 0.25rem) * 4) - calc(var(--spacing, 0.25rem) * 4)) !important; margin: auto !important } } /* Utility class additions */ :where(.dialog) { inset: 0; z-index: 10; height: fit-content } /* Dark mode override */ .dark :where(dialog)::backdrop { background-color: rgba(0, 0, 0, 0.35) } /* Hide dropdowns when dialogs are open */ html:has(dialog:popover-open) { /* Hide dropdowns outside of any dialog. A generated popover (a datepicker calendar, a colorpicker panel) is appended to , so DOM position alone can't tell page chrome from a menu the dialog itself opened — data-popover-nested marks the latter, which CSS has no way to work out. */ & menu[popover]:not(dialog *):not([data-popover-nested]) { opacity: 0; scale: .9; pointer-events: none; transition: opacity .15s ease-out, scale .15s ease-out; &:popover-open { display: flex !important; } } } /* When multiple dialogs are open, hide dropdowns in all but closest dialog */ html:has(dialog:popover-open ~ dialog:popover-open) { & dialog:popover-open:not(:last-of-type) menu[popover] { opacity: 0; scale: .9; pointer-events: none; transition: opacity .15s ease-out, scale .15s ease-out; &:popover-open { display: flex !important; } } } }