@magic-spells/dialog-panel/dist/dialog-panel.min.css

A lightweight, customizable Dialog Panel web component for creating accessible and responsive modal dialogs.

:root{--dp-panel-top:0;--dp-panel-left:0;--dp-panel-width:100vw;--dp-panel-height:100vh;--dp-panel-z-index:10;--dp-overlay-z-index:1000;--dp-overlay-background:rgba(20,23,26,.4);--dp-overlay-backdrop-filter:blur(2px) saturate(120%);--dp-overlay-transition:all 400ms ease-out;--dp-content-display:block;--dp-content-background:#fff;--dp-content-z-index:1001;--dp-content-shadow:0 10px 25px rgba(0,0,0,.15);--dp-content-border-radius:8px;--dp-transition-duration:400ms;--dp-transition-timing:ease-out}dialog-panel{display:contents}dialog-panel[aria-hidden=false] dialog-content,dialog-panel[aria-hidden=false] dialog-overlay{filter:blur(0);opacity:1;pointer-events:auto;transform:scale(1)}dialog-overlay{backdrop-filter:var(--dp-overlay-backdrop-filter,blur(2px) saturate(120%));background-color:var(--dp-overlay-background,rgba(20,23,26,.4));height:100vh;left:0;top:0;transition:var(--dp-overlay-transition,all .3s ease-out);width:100vw;z-index:var(--dp-overlay-z-index,1000)}dialog-content,dialog-overlay{opacity:0;pointer-events:none;position:fixed}dialog-content{background:var(--dp-content-background,#fff);border-radius:var(--dp-content-border-radius,8px);box-shadow:var(--dp-content-shadow,0 10px 25px rgba(0,0,0,.15));display:var(--dp-content-display,block);left:50%;max-height:85vh;max-width:90vw;overflow:auto;top:50%;transform:translate(-50%,-50%) scale(.95);transition:opacity var(--dp-transition-duration,.3s) var(--dp-transition-timing,ease-out),transform var(--dp-transition-duration,.3s) var(--dp-transition-timing,ease-out);z-index:var(--dp-content-z-index,1001)}dialog-panel[aria-hidden=false] dialog-content{transform:translate(-50%,-50%) scale(1)}dialog-content.hidden{display:none}