dialog-lite/dist/dialog-lite.css

DialogLite is designed to control a dialog box (modal window) on a web page, providing the functionality to open, close and apply custom styles through a simple interface.

:root{--z-index-dialog-lite:992;--z-index-dialog-lite-backdrop:993;--z-index-dialog-lite-container:994}.dialog-lite{z-index:var(--z-index-dialog-lite,992);width:100vw;position:fixed;inset:0;overflow:clip auto}.dialog-lite--in{-webkit-overflow-scrolling:touch}.dialog-lite--out{pointer-events:none}.dialog-lite__backdrop{z-index:var(--z-index-dialog-lite-backdrop,993);margin:auto;position:fixed;inset:0}.dialog-lite--in .dialog-lite__backdrop{background-color:var(--c-dialog-lite-backdrop-in,#0c0c13d1);transition:background-color .4s cubic-bezier(.61,1,.88,1)}.dialog-lite--out .dialog-lite__backdrop{pointer-events:none;background-color:var(--c-dialog-lite-backdrop-out,#0f0f1000);transition:background-color .5s cubic-bezier(0,0,.5,1)}.dialog-lite__container{pointer-events:none;z-index:var(--z-index-dialog-lite-container,994);place-content:center;width:100vw;display:grid;position:relative}@supports (min-height:100dvh){.dialog-lite__container{min-height:100dvh}}@supports not (min-height:100dvh){.dialog-lite__container{min-height:100vh}}.dialog-lite__container-inner{margin:20px;position:relative}.dialog-lite--in .dialog-lite__container-inner{pointer-events:auto;opacity:1;transition:opacity .4s cubic-bezier(.61,1,.88,1),transform .4s cubic-bezier(.61,1,.88,1);transform:translateY(0)}.dialog-lite--out .dialog-lite__container-inner{pointer-events:none;opacity:0;transition:opacity .5s cubic-bezier(0,0,.5,1),transform .55s cubic-bezier(.22,1,.5,.95);transform:translateY(40px)}.dialog-lite-close-button{cursor:pointer;place-content:center;width:50px;height:50px;display:grid;position:absolute;inset:0 0 auto auto}.dialog-lite-close-button .svg-icon{fill:#000;width:24px;height:24px}