/* Yooplr modal dialogs. * * Driven by the state-in-URL pattern (?show=, ?edit=, ?new=) — the engine * layout renders one or two elements in * based on those params, and the yooplr-dialog Stimulus controller * promotes them with showModal() on connect. * * Yooplr used to borrow UltimateTurboModal's CSS (dialog.utmr.modal-container) * but UTM is built around frame requests and isn't compatible with our * pattern. These rules are self-contained and scoped under body.yooplr per * the project's CSS convention. */ body.yooplr { dialog.modal-container { position: fixed; inset: 0; padding: 0; margin: 0; border: none; background: transparent; width: 100%; height: 100%; max-width: 100vw; max-height: 100dvh; overflow-y: auto; &::backdrop { background-color: rgba(17, 24, 39, 0.7); } /* Stack edit/new above show when both are open. */ &[data-slot="show"] { z-index: 50; } &[data-slot="edit"], &[data-slot="new"] { z-index: 60; } .modal-inner { display: flex; padding: 1rem; padding-top: 5vh; justify-content: center; align-items: flex-start; min-height: 100%; } .modal-content { position: relative; background-color: #ffffff; border-radius: 0.5rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); max-height: 100vh; @media (min-width: 640px) { max-width: 48rem; margin-top: 2rem; margin-bottom: 2rem; } } .modal-header { display: flex; padding: 1rem 1rem 0.75rem; justify-content: space-between; align-items: center; } .modal-title-h { font-weight: 600; line-height: 1.75rem; } .modal-close-button { display: inline-flex; padding: 0.375rem; background: transparent; color: var(--secondary, #9CA3AF); border-radius: 0.5rem; text-decoration: none; &:hover { color: var(--primary, #111827); background-color: #E5E7EB; } } /* Inner padding so content doesn't touch the modal edge. */ .modal-main { padding: 0.75rem 1rem 1rem; overflow-y: auto; max-height: 75vh; } } /* "show" modals (item lists, trees, general) fill the viewport with a small inset rather than being sized by their content; .modal-main owns scroll. */ dialog.modal-container[data-slot="show"] { overflow: hidden; .modal-inner { align-items: stretch; padding: 1rem; height: 100%; min-height: 0; } .modal-content { width: 100%; max-width: none; margin: 0; display: flex; flex-direction: column; min-height: 0; max-height: none; } .modal-main { flex: 1; min-height: 0; max-height: none; } @media (min-width: 640px) { .modal-inner { padding: 2rem; } } } }