/** * Gradba lightbox. * * Colours are hardcoded rather than taken from the theme's custom properties on purpose: an * image viewer is a dark room whichever palette the site is wearing, and a warm off-white * backdrop would tint every photo judged against it. */ /* The cursor is the only hint that a forum image is interactive, so it has to be right. */ .wpforo-post-content img, .wpf-content img, .wpforo-comment-text img { cursor: zoom-in; } /* ...but not on the furniture the viewer skips, or the cursor promises something that does not happen. Kept in sync with SKIP in lightbox.js. */ .wpforo-post-content .wpf-reaction-icon img, .wpforo-post-content .avatar, .wpforo-post-content img.emoji, .wpf-content .avatar, .wpf-content img.emoji { cursor: default; } /* Scroll lock. Applied to rather than because wpForo already sets overflow on body in places, and losing that fight puts the page behind the overlay in motion. */ .gradba-lb-open { overflow: hidden; } .gradba-lb { position: fixed; inset: 0; z-index: 999999; /* wpForo's own dialog sits at 999998. */ display: flex; align-items: center; justify-content: center; padding: clamp(8px, 3vw, 40px); background: rgb(18 16 12 / 0.94); overscroll-behavior: contain; } .gradba-lb[hidden] { display: none; } .gradba-lb-figure { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; max-width: 100%; max-height: 100%; } .gradba-lb-figure img { display: block; max-width: 100%; /* Leave room for the counter beneath without letting a tall image push it off-screen. */ max-height: calc(100vh - 96px); width: auto; height: auto; object-fit: contain; border-radius: 6px; background: rgb(255 255 255 / 0.04); transition: opacity 0.15s ease; } .gradba-lb.is-loading .gradba-lb-figure img { opacity: 0.35; } /* An image that will not load gets a visible placeholder rather than an invisible one. A zero-size in a dark room is indistinguishable from a broken viewer, and some imported posts do reference files that no longer resolve. */ .gradba-lb.is-broken .gradba-lb-figure::before { content: ''; display: block; width: min(60vw, 320px); aspect-ratio: 4 / 3; border: 2px dashed rgb(255 255 255 / 0.25); border-radius: 8px; } .gradba-lb.is-broken .gradba-lb-figure img { display: none; } .gradba-lb-counter { color: rgb(255 255 255 / 0.7); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* --- controls ----------------------------------------------------------- */ .gradba-lb button { position: absolute; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.1); color: #fff; cursor: pointer; transition: background 0.12s ease, transform 0.12s ease; -webkit-tap-highlight-color: transparent; } .gradba-lb button:hover { background: rgb(255 255 255 / 0.2); } .gradba-lb button:active { transform: scale(0.94); } .gradba-lb button:focus-visible { outline: 3px solid #fbb03b; outline-offset: 3px; } .gradba-lb button[hidden] { display: none; } .gradba-lb-close { top: 14px; right: 14px; width: 44px; height: 44px; } /* Glyphs drawn in CSS: two files is the whole plugin's asset budget, and an icon font or SVG sprite for three arrows would be a third. */ .gradba-lb-close::before, .gradba-lb-close::after { content: ''; position: absolute; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .gradba-lb-close::before { transform: rotate(45deg); } .gradba-lb-close::after { transform: rotate(-45deg); } .gradba-lb-nav { top: 50%; width: 48px; height: 48px; margin-top: -24px; } .gradba-lb-prev { left: 14px; } .gradba-lb-next { right: 14px; } .gradba-lb-nav::before { content: ''; width: 13px; height: 13px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 2px; } .gradba-lb-prev::before { transform: rotate(-135deg); margin-left: 4px; } .gradba-lb-next::before { transform: rotate(45deg); margin-right: 4px; } /* On a phone the side arrows would sit on top of the photo; swipe covers navigation there, so move them to the bottom corners where they stay reachable one-handed. */ @media (max-width: 600px) { .gradba-lb-nav { top: auto; bottom: 16px; margin-top: 0; } .gradba-lb-figure img { max-height: calc(100vh - 150px); } } @media (prefers-reduced-motion: reduce) { .gradba-lb button, .gradba-lb-figure img { transition: none; } }