/** * Video Modal block — pop-up styles. * * Ported from the (now-removed) bod/modal-block plugin's dist/blocks.style.build.css, * trimmed to only what the theme's video pop-ups actually use (selector trigger, fade * transition, the five sizes, overlay + closer). Class names are kept identical to the * old plugin so existing theme overrides — e.g. body .bod-block-popup-wrap .bod-block-popup.size-l * { width: 70% } in style.css — continue to apply. * * Enqueued on the front-end only, so the block's InnerBlocks content stays visible and * editable inside the block editor (where this file is not loaded). */ /* The block's on-page wrapper is inert once the JS moves the pop-up to . */ .qube-video-modal { display: none; } .bod-block-popup-overlay, .bod-block-popup-wrap { position: fixed; display: none; top: 0; left: 0; width: 100%; } .bod-block-popup-overlay { z-index: 10001; height: 100%; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; } .bod-block-popup-overlay.active { opacity: 1; } .bod-block-popup-wrap { z-index: 10002; } .bod-block-popup-wrap.active { opacity: 1; } .bod-block-popup-wrap.active .bod-block-popup-closer { opacity: 1; } .bod-block-popup-wrap .bod-block-popup { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; overflow: auto; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; } .bod-block-popup-wrap .bod-block-popup.size-s { width: 400px; } .bod-block-popup-wrap .bod-block-popup.size-m { width: 600px; } .bod-block-popup-wrap .bod-block-popup.size-l { width: 800px; } .bod-block-popup-wrap .bod-block-popup.size-xl { width: 1000px; } .bod-block-popup-wrap .bod-block-popup.size-f { width: 100%; } .bod-block-popup-wrap .bod-block-popup .bod-modal-title h2 { margin: 0; clear: none; } .bod-block-popup-wrap .bod-block-popup.fade { opacity: 1; } .bod-block-popup-wrap .bod-block-popup-closer { position: fixed; top: 0; right: 0; text-align: center; font-weight: normal; line-height: 48px; height: 48px; width: 48px; color: black; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0; background-color: rgba(255, 255, 255, 0.2); } .bod-block-popup-wrap .bod-block-popup-closer:before { content: '\00D7'; font-size: 48px; } .bod-block-popup-wrap .bod-block-popup-closer:hover { cursor: pointer; }