.misticeasearc-image-popup-box { position: relative; background: #000; box-sizing: border-box; overflow: visible; } .misticeasearc-image-popup-box .misticeasearc-image-popup-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; font-size: 20px; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 3; } .misticeasearc-image-popup-box .misticeasearc-image-popup-prev { left: 10px; } .misticeasearc-image-popup-box .misticeasearc-image-popup-next { right: 10px; } .misticeasearc-image-popup-box .misticeasearc-hit { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; cursor: pointer; background: transparent; -webkit-user-select: none; user-select: none; } .misticeasearc-image-popup-box .misticeasearc-hit-left { left: 0; } .misticeasearc-image-popup-box .misticeasearc-hit-right { right: 0; } .misticeasearc-image-popup-box .misticeasearc-image-popup-nav { opacity: 0 !important; pointer-events: none !important; transition: opacity .18s ease !important; } .misticeasearc-image-popup-box.hover-left .misticeasearc-image-popup-prev, .misticeasearc-image-popup-box.reveal-left .misticeasearc-image-popup-prev, .misticeasearc-image-popup-box.hover-right .misticeasearc-image-popup-next, .misticeasearc-image-popup-box.reveal-right .misticeasearc-image-popup-next, .misticeasearc-image-popup-box.hinting .misticeasearc-image-popup-nav { opacity: 1 !important; pointer-events: auto !important; } @media (hover: none) { .misticeasearc-image-popup-box.hover-left .misticeasearc-image-popup-prev, .misticeasearc-image-popup-box.hover-right .misticeasearc-image-popup-next { opacity: 0 !important; pointer-events: none !important; } } @media (max-width: 480px) { .misticeasearc-image-popup-box .misticeasearc-image-popup-nav { width: 25px; height: 25px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .misticeasearc-image-popup-box .misticeasearc-image-popup-nav { transition: none; } } /* ============================================================= * Image navigation portal (modal mode) * * In modal mode, `.misticeasearc-window.misticeasearc-modal` is centered with `transform`. * That makes `position: fixed` descendants behave like they are fixed to the * window (not the viewport). To keep arrows anchored to the browser viewport, * we render a portal copy of the arrows under . * ============================================================= */ :root { --misticeasearc-image-nav-edge: 3vw; } .misticeasearc-image-popup-nav-portal { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; font-size: 20px; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 1000002; } .misticeasearc-image-popup-nav-portal.misticeasearc-image-popup-prev { left: var(--misticeasearc-image-nav-edge, 3vw); } .misticeasearc-image-popup-nav-portal.misticeasearc-image-popup-next { right: var(--misticeasearc-image-nav-edge, 3vw); } @media (max-width: 480px) { .misticeasearc-image-popup-nav-portal { width: 25px; height: 25px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .misticeasearc-image-popup-nav-portal { transition: none; } } .misticeasearc-image-popup-title { position: absolute; left: 15px; right: 15px; bottom: 10px; color: #fff; text-align: center; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 1; } .misticeasearc-image-popup-box.misticeasearc-has-title .misticeasearc-image-popup-title { display: block; }