/** * Pool Builder — Modals (UNSCOPED, namespaced) * ============================================================================= * Copied verbatim to public/css/ by the `css:modals` build step (NOT run through * postcss-prefix-selector) and loaded globally, because every plugin modal is * portaled to on open — OUTSIDE #wppb_wrapper — so the scoped stylesheet * can never reach it. * * SAFETY: every selector here is namespaced to the plugin's modals * (.wppb-modal*, #wppbOptionInfoModal, #wppbModelGalleryModal, * #wppbDisclosureModal, #seriesInfoModal, .wppb-close, body.wppb-modal-open). * Nothing targets a generic theme element. Do NOT add bare element/class * selectors to this file. Values are LITERAL (not var(--wppb-*)) because the * design tokens are scoped to #wppb_wrapper and are undefined at . * * The shared handler (public/js/wppb-modal.js) only toggles classes * (.wppb-modal-active / .show on the modal, .wppb-modal-open on ) and * sets --wppb-modal-top for the WP admin-bar offset; all visual styling is here. */ /* --- Backdrop --------------------------------------------------------------- */ .wppb-modal-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.5) !important; z-index: 999997 !important; transition: opacity 0.3s ease !important; pointer-events: auto !important; } /* Lock page scroll while a modal is open */ body.wppb-modal-open { overflow: hidden !important; position: relative !important; } /* Keep theme fixed bars (e.g. a sticky bottom bar) below the open modal */ body.wppb-modal-open .bottom-bar, body.wppb-modal-open .fixed-bottom, body.wppb-modal-open [style*="position: fixed"] { z-index: 999998 !important; } /* --- Open-modal positioning ------------------------------------------------- */ /* --wppb-modal-top is the WP admin-bar offset, set inline by the handler. */ .wppb-modal-active { position: fixed !important; top: var(--wppb-modal-top, 0) !important; left: 0 !important; width: 100% !important; height: calc(100% - var(--wppb-modal-top, 0px)) !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 1rem !important; overflow: auto !important; pointer-events: auto !important; } /* Hide every plugin modal while inactive. Keyed off `.wppb-modal` ONLY — not `.modal`/`.fade`, which the handler strips on show to dodge theme modal-library CSS (jQuery Modal). Still namespaced, so it never touches a theme/other-plugin modal. Covers themes that ship jQuery Modal CSS and those that don't. */ .wppb-modal:not(.wppb-modal-active) { display: none !important; } /* --- Box model -------------------------------------------------------------- */ /* Bootstrap's Reboot ships `*{box-sizing:border-box}`, but our Bootstrap is scoped to #wppb_wrapper, so that reset is rewritten to `#wppb_wrapper *` and never reaches the body-portaled modal. Without it the modal falls back to the default `content-box`, where the grid shim's `width:50%` + padding overflows the row and the columns wrap (series modal text drops below the image on themes that don't supply their own global reset, e.g. pools-today). Re-assert border-box on the modal subtree only — namespaced, so nothing else is touched. */ .wppb-modal, .wppb-modal *, .wppb-modal *::before, .wppb-modal *::after { box-sizing: border-box !important; } /* --- Dialog / content frame ------------------------------------------------- */ #wppbOptionInfoModal .modal-dialog, #wppbModelGalleryModal .modal-dialog, #wppbDisclosureModal .modal-dialog, #seriesInfoModal .modal-dialog { position: relative !important; margin: auto !important; max-width: 600px !important; width: 100% !important; max-height: 90vh !important; pointer-events: auto !important; z-index: 1000000 !important; } #wppbOptionInfoModal .modal-content, #wppbModelGalleryModal .modal-content, #wppbDisclosureModal .modal-content, #seriesInfoModal .modal-content { position: relative !important; background-color: #fff !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; border-radius: 0.5rem !important; outline: 0 !important; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important; max-height: 90vh !important; overflow-y: auto !important; pointer-events: auto !important; /* Theme-independent typography so modal text reads the same on any theme. */ color: #212529 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 1rem !important; line-height: 1.5 !important; } #wppbOptionInfoModal .modal-header, #wppbModelGalleryModal .modal-header, #wppbDisclosureModal .modal-header, #seriesInfoModal .modal-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 1rem !important; border-bottom: 1px solid #dee2e6 !important; background-color: #fff !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } #wppbOptionInfoModal .modal-title, #wppbModelGalleryModal .modal-title, #wppbDisclosureModal .modal-title, #seriesInfoModal .modal-title { margin: 0 !important; font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.3 !important; } #wppbOptionInfoModal .modal-body, #wppbModelGalleryModal .modal-body, #wppbDisclosureModal .modal-body, #seriesInfoModal .modal-body { position: relative !important; padding: 1.5rem !important; background-color: #fff !important; overflow-y: auto !important; } #wppbOptionInfoModal .modal-footer, #wppbModelGalleryModal .modal-footer, #wppbDisclosureModal .modal-footer, #seriesInfoModal .modal-footer { display: flex !important; align-items: center !important; justify-content: flex-end !important; padding: 1rem !important; border-top: 1px solid #dee2e6 !important; background-color: #fff !important; } /* --- Close controls --------------------------------------------------------- */ /* Header "X" button */ .wppb-modal .btn-close, .wppb-modal-active .btn-close { box-sizing: content-box !important; width: 1em !important; height: 1em !important; padding: 0.25em !important; color: #000 !important; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important; border: 0 !important; border-radius: 0.25rem !important; opacity: 0.5 !important; cursor: pointer !important; } .wppb-modal .btn-close:hover, .wppb-modal-active .btn-close:hover { opacity: 0.75 !important; } /* Footer text "Close" button — matches the bottom-bar Back button outline (btn-outline-secondary) so it reads as a button at level. */ .wppb-modal .wppb-close, .wppb-modal-active .wppb-close { border: 1px solid #6c757d !important; border-radius: 8px !important; color: #6c757d !important; background-color: transparent !important; padding: 8px 16px !important; font: inherit !important; cursor: pointer !important; transition: background-color 0.15s ease, color 0.15s ease !important; } .wppb-modal .wppb-close:hover, .wppb-modal-active .wppb-close:hover { background-color: #6c757d !important; color: #fff !important; } /* --- Media (images / video) ------------------------------------------------- */ /* Constrain ALL modal media — Bootstrap's .img-fluid is scoped to the wrapper and can't reach the portaled modal, so images would otherwise render at natural size and overflow (a key cause of the oversized series modal). */ .wppb-modal img, .wppb-modal video { max-width: 100% !important; height: auto !important; } #wppbOptionVideo, #wppbOptionImage { width: 100%; max-height: 300px; object-fit: cover; border-radius: 8px; } #wppbOptionVideoContainer, #wppbOptionImageContainer { margin-bottom: 1rem; } #wppbOptionVideoContainer video, #wppbOptionImageContainer img { width: 100%; height: auto; border-radius: 0.375rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } #wppbOptionImageContainer img { max-height: 250px; object-fit: cover; } /* Series modal image */ #seriesInfoModal .series-image-container img, #seriesModalImage { width: 100%; height: auto; max-height: 300px; border-radius: 0.375rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } /* --- Body typography -------------------------------------------------------- */ #wppbOptionDescription { font-size: 0.95rem; line-height: 1.6; color: #495057; } /* Series "Models & Sizes" list */ #seriesModalSizes { font-size: 0.95rem; line-height: 1.6; color: #495057; } #seriesModalSizes ul { margin: 0; padding: 0; list-style: none; } /* --- Bootstrap-utility shim for modal CONTENT ------------------------------- */ /* The modal markup uses Bootstrap utilities (col-*, row, d-block, fw-bold, mb-*, etc.), but Bootstrap is scoped to #wppb_wrapper and can't reach the portaled modal. Re-provide the small subset the markup actually uses, namespaced to .wppb-modal so nothing leaks. (The gallery carousel CSS is a separate, pre-existing scoping gap and is not shimmed here.) */ .wppb-modal .row { display: flex; flex-wrap: wrap; margin-right: -0.75rem; margin-left: -0.75rem; } .wppb-modal .col-md-4, .wppb-modal .col-md-6, .wppb-modal .col-md-8, .wppb-modal .col-12 { width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; } @media (min-width: 768px) { .wppb-modal .col-md-4 { width: 33.3333%; } .wppb-modal .col-md-6 { width: 50%; } .wppb-modal .col-md-8 { width: 66.6667%; } } .wppb-modal .d-block { display: block !important; } .wppb-modal .rounded { border-radius: 0.375rem !important; } .wppb-modal .fw-bold { font-weight: 700 !important; } .wppb-modal .text-muted { color: #6c757d !important; } .wppb-modal .small, .wppb-modal small { font-size: 0.875em; } .wppb-modal .mb-0 { margin-bottom: 0 !important; } .wppb-modal .mb-2 { margin-bottom: 0.5rem !important; } .wppb-modal .mt-3 { margin-top: 1rem !important; } .wppb-modal .list-unstyled { padding-left: 0; list-style: none; } /* --- Responsive ------------------------------------------------------------- */ @media (max-width: 768px) { #wppbOptionInfoModal .modal-dialog, #wppbModelGalleryModal .modal-dialog, #wppbDisclosureModal .modal-dialog, #seriesInfoModal .modal-dialog { margin: 1rem !important; max-width: calc(100% - 2rem) !important; } .wppb-modal-active { padding: 0.5rem !important; } #wppbOptionImageContainer img { max-height: 200px; } #wppbOptionInfoModal .col-md-6, #seriesInfoModal .col-md-6 { margin-bottom: 1rem; } }