/** * Skylit Popups — modal shell (plugin utility). * * Per-popup width/height/bg/color are set on .skylit-modal__dialog via CSS custom properties * (--skylit-modal-width, --skylit-modal-height, --skylit-modal-bg, --skylit-modal-color). * * Scroll lock: overflow hidden on html/body (scroll position unchanged). Shell is portaled to * so position:fixed centers in the viewport. --skylit-modal-scrollbar-gap compensates * fixed headers when the scrollbar disappears. */ html { scrollbar-gutter: stable; } html.skylit-modal-open { overflow: hidden; } html.skylit-modal-open body.skylit-modal-open { overflow: hidden; } .skylit-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .skylit-modal[hidden] { display: none !important; } .skylit-modal__overlay { position: absolute; inset: 0; background: var(--skylit-modal-overlay-bg, rgba(0, 0, 0, 0.55)); } .skylit-modal__overlay[hidden] { display: none !important; } .skylit-modal__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: var(--skylit-modal-width, 28rem); max-height: var(--skylit-modal-height, min(90vh, 48rem)); background: var(--skylit-modal-bg, #fff); color: var(--skylit-modal-color, #1a1a1a); border-radius: 0.5rem; box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.25); outline: none; } .skylit-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0.5rem; flex-shrink: 0; } .skylit-modal__title { margin: 0; font-size: 1.125rem; line-height: 1.35; font-weight: 600; } .skylit-modal__title:empty { display: none; } .skylit-modal__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; border-radius: 0.25rem; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: inherit; } .skylit-modal__close:hover, .skylit-modal__close:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); } .skylit-modal__body { overflow: auto; padding: 0.5rem 1.25rem 1.25rem; flex: 1 1 auto; } .skylit-modal__loading, .skylit-modal__error { margin: 0; padding: 1rem 0; } .skylit-modal__error { color: #b32d2e; }