/** * Gallery lightbox. Pairs with assets/js/ppls-lightbox.js — see the header * there for why this exists (Weebly's fancybox lived on their CDN). * * Layout follows what production shows: dimmed full-screen backdrop, the * full-size image centred, close top-right, arrows at the sides, and a * thumbnail filmstrip along the bottom. */ /* Above the WordPress admin bar (99999) — a modal that the admin bar punched through would look broken to a logged-in editor. */ .ppls-lb { position: fixed; inset: 0; z-index: 100000; display: none; background: rgba(0, 0, 0, 0.86); } .ppls-lb.is-open { display: block; } /* Set on while open so the page behind cannot scroll. */ .ppls-lb-lock { overflow: hidden; } .ppls-lb-stage { position: absolute; inset: 0 0 92px; /* leave room for the filmstrip */ display: flex; align-items: center; justify-content: center; padding: 24px; } .ppls-lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; /* portrait shots must not be stretched */ box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6); transition: opacity 0.15s ease; } .ppls-lb.is-loading .ppls-lb-img { opacity: 0.25; } /* Shared appearance only. `position` belongs to the individual controls — putting it here made `.ppls-lb button` (0,1,1) outrank any override on `.ppls-lb-thumb` (0,1,0), so the filmstrip thumbnails went absolute, contributed no height, and the strip collapsed to its padding. */ .ppls-lb button { border: 0; background: none; color: #fff; cursor: pointer; font-family: inherit; line-height: 1; opacity: 0.75; transition: opacity 0.15s ease; } .ppls-lb button:hover, .ppls-lb button:focus-visible { opacity: 1; outline: none; } .ppls-lb-close { position: absolute; top: 10px; right: 16px; z-index: 2; font-size: 40px; padding: 8px 12px; } .ppls-lb-prev, .ppls-lb-next { position: absolute; top: 50%; z-index: 2; font-size: 64px; padding: 12px 20px; transform: translateY(-50%); margin-top: -46px; /* centre against the stage, not the filmstrip */ } .ppls-lb-prev { left: 4px; } .ppls-lb-next { right: 4px; } /* Filmstrip ------------------------------------------------------------- */ .ppls-lb-strip { position: absolute; right: 0; bottom: 0; left: 0; display: flex; gap: 6px; overflow-x: auto; justify-content: center; padding: 12px; background: rgba(0, 0, 0, 0.4); scrollbar-width: thin; } .ppls-lb-thumb { flex: 0 0 auto; width: 84px; height: 60px; padding: 0; background-color: #222; background-position: center; background-size: cover; border: 2px solid transparent; opacity: 0.55; } .ppls-lb-thumb.is-current { border-color: #fff; opacity: 1; } /* A long gallery must scroll rather than shrink its thumbnails. */ .ppls-lb-strip:has(.ppls-lb-thumb:nth-child(12)) { justify-content: flex-start; } @media screen and (max-width: 782px) { .ppls-lb-stage { inset: 0 0 74px; padding: 8px; } .ppls-lb-prev, .ppls-lb-next { font-size: 44px; padding: 10px 12px; margin-top: -37px; } .ppls-lb-close { font-size: 34px; } .ppls-lb-thumb { width: 62px; height: 46px; } }