dialog-lite/dist/index.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.

.dialog-lite{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-index-dialog-lite, 992);width:100vw;overflow:clip auto}.dialog-lite--in{-webkit-overflow-scrolling:touch}.dialog-lite--out{pointer-events:none}.dialog-lite__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;z-index:var(--z-index-dialog-lite-backdrop, 993)}.dialog-lite--in .dialog-lite__backdrop{background-color:var(--c-dialog-lite-backdrop-in, hsla(240, 22%, 6%, .82));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, hsla(200, 2%, 6%, 0));transition:background-color .5s cubic-bezier(0,0,.5,1)}.dialog-lite__container{pointer-events:none;position:relative;z-index:var(--z-index-dialog-lite-container, 994);display:grid;place-content:center;width:100vw}@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{position:relative;margin:20px}.dialog-lite--in .dialog-lite__container-inner{pointer-events:auto;opacity:1;transform:translateY(0);transition:opacity .4s cubic-bezier(.61,1,.88,1),transform .4s cubic-bezier(.61,1,.88,1)}.dialog-lite--out .dialog-lite__container-inner{pointer-events:none;opacity:0;transform:translateY(40px);transition:opacity .5s cubic-bezier(0,0,.5,1),transform .55s cubic-bezier(.22,1,.5,.95)}.dialog-lite-close-button{cursor:pointer;position:absolute;inset:0 0 auto auto;display:grid;place-content:center;width:50px;height:50px}.dialog-lite-close-button .svg-icon{width:24px;height:24px;fill:#000}