frutjam/dist/components/modal.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.modal{border:none;color:inherit;--radius-modal:calc(var(--border-radius)*4);position:fixed;inset:0;margin:0;display:grid;align-items:center;justify-items:center;width:100%;height:100%;max-width:none;max-height:none;z-index:999;padding:.75rem;overflow:hidden;overscroll-behavior:contain;pointer-events:none;visibility:hidden;background-color:transparent;transition:visibility allow-discrete .2s ease,overlay allow-discrete .2s ease;&::backdrop{background-color:light-dark(#000,#000);@supports (color:color-mix(in lab,red,red)){background-color:light-dark(color-mix(in oklch,#000 10%,var(--color-base-600) 40%),color-mix(in oklch,#000 10%,var(--color-base-400) 40%))}opacity:0;transition:opacity .2s ease-out}&[open]{pointer-events:auto;visibility:visible;&::backdrop{opacity:1}@starting-style{&::backdrop{opacity:0}}--modal-content--translate:0 0;--modal-content--scale:1;--modal-content--opacity:1}}.modal-backdrop{display:grid;grid-column-start:1;grid-row-start:1;align-self:stretch;justify-self:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;cursor:pointer;outline:none;z-index:-1;color:transparent;font-size:0}.modal-content{translate:var(--modal-content--translate,var(--modal-slide--translate,none));scale:var(--modal-content--scale,var(--modal-slide--scale,95%));opacity:var(--modal-content--opacity,0);grid-column-start:1;grid-row-start:1;width:91.66667%;max-width:32rem;max-height:100vh;padding:1.5rem;overflow-y:auto;overscroll-behavior:contain;background-color:var(--color-base);border-radius:var(--radius-modal);border:1px solid var(--color-base-soft);box-shadow:0 4px 6px -1px light-dark(var(--color-base-950),color-mix(in srgb,#000 45%,transparent)),0 10px 32px -4px light-dark(var(--color-base-950),color-mix(in srgb,#000 55%,transparent));@supports (color:color-mix(in lab,red,red)){box-shadow:0 4px 6px -1px light-dark(color-mix(in oklch,var(--color-base-950) 12%,transparent),color-mix(in oklch,#000 45%,transparent)),0 10px 32px -4px light-dark(color-mix(in oklch,var(--color-base-950) 10%,transparent),color-mix(in oklch,#000 55%,transparent))}transition:translate .2s ease-out,scale .2s ease-out,opacity .2s ease-out,box-shadow .2s ease-out;@media (forced-colors:active){outline:1px solid}}.modal-bottom{align-items:end}.modal-middle{align-items:center}.modal-top{align-items:start}.modal-center{justify-items:center}.modal-end{justify-items:end}.modal-start{justify-items:start}.modal-slide-down{--modal-slide--translate:0 -100%;--modal-slide--scale:1}.modal-slide-end{--modal-slide--translate:-100% 0;--modal-slide--scale:1}.modal-slide-start{--modal-slide--translate:100% 0;--modal-slide--scale:1}.modal-slide-up{--modal-slide--translate:0 100%;--modal-slide--scale:1}