/** * ACF Gallery & Repeater Addon - Lightbox Styles */ /* Scroll lock applied to while a lightbox is open */ body.agrfuxd-scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } .agrfuxd-lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; display: flex; flex-direction: column; opacity: 0; visibility: hidden; /* Never swallow clicks or wheel events while closed. "visibility" is not interpolated until the transition ends, so without this the closed overlay keeps blocking the page for the length of the fade out. */ pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } .agrfuxd-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .agrfuxd-lightbox .agrfuxd-is-hidden { display: none !important; } .agrfuxd-lightbox-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.95); } .agrfuxd-lightbox-container { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 80px; z-index: 1; } /* Shared button reset. The icons are inline SVG paths with fill="currentColor", so the buttons must carry an explicit colour - otherwise the arrows inherit the theme's body text colour (usually near black) and disappear against the dark overlay, which reads as "there are no previous/next buttons". The !important flags keep themes that blanket-style button/button svg from re-hiding them. */ .agrfuxd-lightbox-close, .agrfuxd-lightbox-nav { position: absolute; z-index: 10; display: flex !important; align-items: center; justify-content: center; padding: 0; background: rgba(255, 255, 255, 0.1) !important; border: none !important; border-radius: 50% !important; box-shadow: none; color: #fff !important; opacity: 1; cursor: pointer; transition: background 0.2s ease; } .agrfuxd-lightbox-close:hover, .agrfuxd-lightbox-close:focus, .agrfuxd-lightbox-nav:hover, .agrfuxd-lightbox-nav:focus { background: rgba(255, 255, 255, 0.25) !important; color: #fff !important; } .agrfuxd-lightbox-close svg, .agrfuxd-lightbox-nav svg { display: block; fill: #fff; pointer-events: none; } .agrfuxd-lightbox-close svg path, .agrfuxd-lightbox-nav svg path { fill: currentColor; } .agrfuxd-lightbox-close { top: 15px; right: 15px; width: 44px; height: 44px; } .agrfuxd-lightbox-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; } .agrfuxd-lightbox-prev { left: 15px; } .agrfuxd-lightbox-next { right: 15px; } .agrfuxd-lightbox-content { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; } .agrfuxd-lightbox-image-wrapper { position: relative; max-width: 100%; max-height: calc(100vh - 200px); } .agrfuxd-lightbox-image { max-width: 100%; max-height: calc(100vh - 200px); object-fit: contain; opacity: 0; transition: opacity 0.3s ease; } .agrfuxd-lightbox-image.is-loaded { opacity: 1; } .agrfuxd-lightbox-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } .agrfuxd-lightbox-loader.is-loading { display: block; } .agrfuxd-spinner { width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; animation: agrfuxd-spin 0.8s linear infinite; } @keyframes agrfuxd-spin { to { transform: rotate(360deg); } } .agrfuxd-lightbox-info { margin-top: 15px; text-align: center; color: #fff; } .agrfuxd-lightbox-title { margin: 0; font-size: 16px; font-weight: 500; } .agrfuxd-lightbox-caption { margin: 5px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.7); } .agrfuxd-lightbox-counter { display: inline-block; margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.5); } .agrfuxd-lightbox-thumbnails { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 8px; padding: 15px; background: rgba(0, 0, 0, 0.5); overflow-x: auto; } .agrfuxd-lightbox-thumb { flex-shrink: 0; width: 60px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; opacity: 0.6; transition: all 0.2s ease; background: transparent; } .agrfuxd-lightbox-thumb:hover, .agrfuxd-lightbox-thumb.is-active { opacity: 1; border-color: #fff; } .agrfuxd-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; } /* Hide scrollbar on lightbox thumbnails */ .agrfuxd-lightbox-thumbnails::-webkit-scrollbar { height: 6px; } .agrfuxd-lightbox-thumbnails::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } .agrfuxd-lightbox-thumbnails::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; } /* Responsive */ @media (max-width: 768px) { .agrfuxd-lightbox-container { padding: 50px 15px; } .agrfuxd-lightbox-nav { width: 40px; height: 40px; } .agrfuxd-lightbox-prev { left: 5px; } .agrfuxd-lightbox-next { right: 5px; } .agrfuxd-lightbox-thumb { width: 50px; height: 50px; } }