/* Shared lightbox styles. Theme-agnostic structure with CSS variables. Custom properties (set on .cms-lightbox or any ancestor): --cms-lightbox-bg overlay background (default rgba(0,0,0,0.92)) --cms-lightbox-fg icon/text color in overlay (default #fff) --cms-lightbox-padding inner padding around the image (default 4vmin) --cms-lightbox-z z-index of the overlay (default 9999) */ .cms-lightbox { --cms-lightbox-bg: rgba(0, 0, 0, 0.92); --cms-lightbox-fg: #fff; --cms-lightbox-padding: 4vmin; --cms-lightbox-z: 9999; } /* Overlay: appended to , lifted above everything. */ .cms-lightbox__overlay { position: fixed; inset: 0; background: var(--cms-lightbox-bg); color: var(--cms-lightbox-fg); display: none; align-items: center; justify-content: center; padding: var(--cms-lightbox-padding); z-index: var(--cms-lightbox-z); opacity: 0; transition: opacity 0.2s ease; } .cms-lightbox__overlay--open { display: flex; opacity: 1; } .cms-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .cms-lightbox__image { max-width: 100%; max-height: calc(100vh - 2 * var(--cms-lightbox-padding)); object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; } .cms-lightbox__caption { font: 400 0.875rem/1.4 system-ui, sans-serif; text-align: center; opacity: 0.8; max-width: 60ch; } .cms-lightbox__caption:empty { display: none; } /* Buttons (close + nav) — share visuals, differ only by position. */ .cms-lightbox__close, .cms-lightbox__nav { position: absolute; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0.5rem; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; opacity: 0.8; transition: opacity 0.15s ease, transform 0.15s ease; } .cms-lightbox__close:hover, .cms-lightbox__nav:hover { opacity: 1; } .cms-lightbox__close svg, .cms-lightbox__nav svg { width: 100%; height: 100%; } .cms-lightbox__close { top: 1rem; right: 1rem; } .cms-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); } .cms-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); } .cms-lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.1); } .cms-lightbox__nav--next:hover { transform: translateY(-50%) scale(1.1); } .cms-lightbox__nav[hidden] { display: none; } @media (max-width: 480px) { .cms-lightbox__close, .cms-lightbox__nav { width: 2.5rem; height: 2.5rem; } .cms-lightbox__close { top: 0.5rem; right: 0.5rem; } .cms-lightbox__nav--prev { left: 0.25rem; } .cms-lightbox__nav--next { right: 0.25rem; } }