Lightbox

Recipe CSS

This is the exact CSS your kit ships for Lightbox — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Lightbox — fullscreen image viewer overlay === */
.lightbox { position: fixed; inset: 0; z-index: var(--k-z-modal); background: var(--k-scrim-strong); display: grid; place-items: center; animation: var(--k-anim-fade-in, k-fade-in 160ms ease) both; }
.lightbox__stage { max-width: 78%; max-height: 76%; border-radius: var(--k-radius-md); box-shadow: var(--k-shadow-lg); }
/* Loading: a light spinner on the scrim while the full-size image fetches (show it
 * until the <img> onLoad, then swap in .lightbox__stage). */
.lightbox__loading { width: var(--k-control-h-lg); height: var(--k-control-h-lg); border-radius: 50%; border: var(--k-ring-w, 3px) solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: var(--k-anim-spin, k-spin 800ms linear infinite); }
@media (prefers-reduced-motion: reduce) { .lightbox__loading { animation-duration: 2s; } }
.lightbox__btn { position: absolute; width: var(--k-icon-chip); height: var(--k-icon-chip); border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background var(--k-dur-fast, 140ms) var(--k-ease, ease); }
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__btn--close { top: 16px; right: 16px; }
.lightbox__btn--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.8); font-size: var(--k-type-small); font-variant-numeric: tabular-nums; }