/**
* Custom styles for Shared Albums for Google Photos (by JanZeman) plugin
*/
.jzsa-album {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
/* Use configurable background; fallback to black if not set */
background-color: var(--gallery-bg-color, #FFFFFF);
--jzsa-controls-visible-opacity: 0.8;
--jzsa-controls-fade-duration: 350ms;
--jzsa-controls-fade-easing: linear;
--jzsa-info-fade-duration: 10ms;
--jzsa-controls-bg-duration: 0.3s;
--jzsa-controls-bg-easing: ease;
--jzsa-controls-bg: rgba(0, 0, 0, 0.35);
--jzsa-controls-bg-hover: rgba(0, 0, 0, 0.7);
--jzsa-controls-circle-size: 44px;
--jzsa-controls-square-size: 40px;
--jzsa-carousel-tile-btn-gap: 1px;
--jzsa-controls-icon-size: 20px;
--jzsa-controls-pill-radius: 20px;
--jzsa-controls-square-radius: 4px;
--jzsa-bottom-control-gap: 1px;
--jzsa-progress-safe-gap: 3px;
--jzsa-safe-stack-gap: 4px;
--jzsa-slideshow-progress-bottom: 4px;
--jzsa-slideshow-progress-height: 2px;
--jzsa-play-visual-size: 22px;
--jzsa-inline-bottom-pill-bottom: calc(
var(--jzsa-slideshow-progress-bottom) +
var(--jzsa-slideshow-progress-height) +
var(--jzsa-progress-safe-gap)
);
--jzsa-info-pill-height: calc(8px + (var(--jzsa-info-font-size, 12px) * 1.5));
--jzsa-inline-play-center-bottom-no-pill: calc(
var(--jzsa-slideshow-progress-bottom) +
var(--jzsa-slideshow-progress-height) +
var(--jzsa-progress-safe-gap) +
(var(--jzsa-play-visual-size) / 2)
);
--jzsa-inline-play-visual-bottom-no-pill: calc(
var(--jzsa-inline-play-center-bottom-no-pill) -
(var(--jzsa-play-visual-size) / 2)
);
--jzsa-inline-play-center-bottom: calc(
var(--jzsa-inline-bottom-pill-bottom) +
var(--jzsa-info-pill-height) +
var(--jzsa-bottom-control-gap) +
(var(--jzsa-play-visual-size) / 2)
);
--jzsa-inline-play-visual-bottom: calc(
var(--jzsa-inline-play-center-bottom) -
(var(--jzsa-play-visual-size) / 2)
);
--jzsa-info-horizontal-inset: 12px;
--jzsa-info-min-gap: 8px;
--jzsa-info-center-max-width-default: 33%;
--jzsa-info-center-max-width-expanded: 66%;
--jzsa-info-center-max-width: var(--jzsa-info-center-max-width-default);
--jzsa-info-corner-max-width: calc((100% - var(--jzsa-info-center-max-width-default)) / 2 - var(--jzsa-info-horizontal-inset) - var(--jzsa-info-min-gap));
--jzsa-info-center-max-width-fs: calc(var(--jzsa-info-center-max-width-default) / var(--jzsa-controls-fs-scale));
--jzsa-info-center-max-width-expanded-fs: calc(var(--jzsa-info-center-max-width-expanded) / var(--jzsa-controls-fs-scale));
--jzsa-info-corner-max-width-fs: calc(var(--jzsa-info-corner-max-width) / var(--jzsa-controls-fs-scale));
/* info-top is constrained by corner action buttons. Default reserves 1 slot each side
(fullscreen right + mirror left for symmetry). Expands to 4 slots when link/download
are also active (overridden below). Wide variant is for info-top-secondary, info-bottom
stack, and the pagination pill. */
--jzsa-info-top-max-width: calc(100% - 2 * var(--jzsa-controls-circle-size));
--jzsa-info-top-max-width-fs: calc((100% - 2 * var(--jzsa-controls-circle-size-fs)) / var(--jzsa-controls-fs-scale));
--jzsa-info-wide-max-width-fs: calc((100% - 24px) / var(--jzsa-controls-fs-scale));
--jzsa-info-top-fs-offset: 9px;
--jzsa-info-bottom-fs-offset: 20px;
--jzsa-controls-circle-size-fs: 55px;
--jzsa-nav-opacity: 1;
--jzsa-nav-opacity-hover: 1;
--jzsa-nav-opacity-active: 1;
--jzsa-controls-fs-scale: 1.25;
--jzsa-controls-color: #ffffff;
/* Flat icon-contrast helpers (no visible button backgrounds). */
position: relative; /* For loader overlay positioning */
}
/* Kill Android tap-highlight rectangle on all interactive elements */
.jzsa-album button,
.jzsa-album [role="button"],
.jzsa-album a,
.jzsa-album .swiper-slide,
.jzsa-album .plyr__control,
.jzsa-gallery-album button,
.jzsa-gallery-album a,
.jzsa-gallery-album .plyr__control {
-webkit-tap-highlight-color: transparent;
}
/* Initial gallery fade-in on load (content appears gradually). */
.jzsa-album.jzsa-content-intro {
opacity: 0;
transition: opacity 1000ms ease-out;
}
.jzsa-album.jzsa-content-intro.jzsa-content-intro-visible {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.jzsa-album.jzsa-content-intro {
opacity: 1;
transition: none;
}
}
/* Make sure all structural layers share the same background color */
.jzsa-album,
.jzsa-album .swiper,
.jzsa-album .swiper-wrapper,
.jzsa-album .swiper-slide,
.jzsa-album .swiper-zoom-container {
background-color: var(--gallery-bg-color, #FFFFFF);
}
.jzsa-album .swiper-slide img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
width: auto;
height: auto;
}
/* image-fit="cover" - fill container, may crop */
.jzsa-album[data-image-fit="cover"] .swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
}
/* image-fit="contain" - show whole image, no crop, may letterbox */
.jzsa-album[data-image-fit="contain"] .swiper-slide img {
object-fit: contain;
width: 100%;
height: 100%;
}
/* fullscreen-image-fit overrides image-fit when in fullscreen.
Each vendor prefix MUST be in its own rule - grouping them causes browsers
to drop the entire rule when they encounter an unrecognised pseudo-class. */
.jzsa-album:fullscreen[data-fullscreen-image-fit="contain"] .swiper-slide img {
object-fit: contain;
width: 100%;
height: 100%;
}
.jzsa-album:-webkit-full-screen[data-fullscreen-image-fit="contain"] .swiper-slide img {
object-fit: contain;
width: 100%;
height: 100%;
}
.jzsa-album.jzsa-pseudo-fullscreen[data-fullscreen-image-fit="contain"] .swiper-slide img {
object-fit: contain;
width: 100%;
height: 100%;
}
.jzsa-album:fullscreen[data-fullscreen-image-fit="cover"] .swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
}
.jzsa-album:-webkit-full-screen[data-fullscreen-image-fit="cover"] .swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
}
.jzsa-album.jzsa-pseudo-fullscreen[data-fullscreen-image-fit="cover"] .swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
}
/* Optional fullscreen display caps: keep the fullscreen chrome and backdrop,
but render the photo inside a smaller centered box. */
.jzsa-album:fullscreen[data-has-fullscreen-display-limits="true"] .swiper-slide,
.jzsa-album:-webkit-full-screen[data-has-fullscreen-display-limits="true"] .swiper-slide,
.jzsa-album.jzsa-pseudo-fullscreen[data-has-fullscreen-display-limits="true"] .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
.jzsa-album:fullscreen[data-has-fullscreen-display-limits="true"] .swiper-zoom-container,
.jzsa-album:-webkit-full-screen[data-has-fullscreen-display-limits="true"] .swiper-zoom-container,
.jzsa-album.jzsa-pseudo-fullscreen[data-has-fullscreen-display-limits="true"] .swiper-zoom-container {
width: min(100%, var(--jzsa-fullscreen-display-max-width, 100%));
height: min(100%, var(--jzsa-fullscreen-display-max-height, 100%));
max-width: 100%;
max-height: 100%;
margin: auto;
}
/* Responsive aspect-ratio for slider/carousel when both width and height were explicitly set.
The inline style carries height: Xpx as a fallback for browsers that don't support aspect-ratio.
This @supports block overrides that fallback on modern browsers so the height scales
proportionally as the container shrinks below the declared width. In mosaic mode,
the bounded size lives on the outer wrapper, so it needs the same override too.
Each vendor-prefixed fullscreen pseudo-class must be in its own selector to avoid
the whole rule being dropped when a browser encounters an unrecognised pseudo-class. */
@supports (aspect-ratio: 1) {
.jzsa-album[data-responsive-ar="true"]:not(:fullscreen):not(.jzsa-pseudo-fullscreen) {
aspect-ratio: var(--jzsa-ar);
height: auto !important;
}
.jzsa-album[data-responsive-ar="true"]:not(:-webkit-full-screen):not(.jzsa-pseudo-fullscreen) {
aspect-ratio: var(--jzsa-ar);
height: auto !important;
}
.jzsa-gallery-wrapper[data-responsive-ar="true"] {
aspect-ratio: var(--jzsa-ar);
height: auto !important;
}
}
/* Navigation buttons */
.jzsa-album .swiper-button-next,
.jzsa-album .swiper-button-prev {
color: var(--jzsa-controls-color, #fff);
background: transparent !important;
width: var(--jzsa-controls-circle-size);
height: var(--jzsa-controls-circle-size);
border-radius: 0;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.jzsa-album .swiper-button-prev { left: 0; }
.jzsa-album .swiper-button-next { right: 0; }
/* show-navigation="false" - hide prev/next arrows */
.jzsa-album[data-show-navigation="false"] .swiper-button-prev,
.jzsa-album[data-show-navigation="false"] .swiper-button-next {
display: none !important;
}
/* interaction-lock="true" - hide interactive plugin controls and prevent interaction */
.jzsa-album[data-interaction-lock="true"] .swiper-button-prev,
.jzsa-album[data-interaction-lock="true"] .swiper-button-next,
.jzsa-album[data-interaction-lock="true"] .swiper-button-play-pause,
.jzsa-album[data-interaction-lock="true"] .swiper-button-fullscreen,
.jzsa-album[data-interaction-lock="true"] .swiper-button-external-link,
.jzsa-album[data-interaction-lock="true"] .swiper-button-download,
.jzsa-album[data-interaction-lock="true"] .swiper-album-title,
.jzsa-album[data-interaction-lock="true"] .jzsa-carousel-slide-fs-btn,
.jzsa-album[data-interaction-lock="true"] .jzsa-carousel-slide-overlay-btn,
.jzsa-album[data-interaction-lock="true"] .jzsa-gallery-thumb-fs-btn {
display: none !important;
pointer-events: none !important;
}
.jzsa-gallery-shell .jzsa-gallery-album[data-interaction-lock="true"] ~ .jzsa-gallery-controls {
display: none !important;
pointer-events: none !important;
}
.jzsa-album .swiper-button-next:after,
.jzsa-album .swiper-button-prev:after {
content: '' !important;
display: block;
width: 22px;
height: 22px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: transform 0.15s ease;
}
.jzsa-album .swiper-button-external-link:after,
.jzsa-album .swiper-button-download:after,
.jzsa-album .swiper-button-play-pause:after,
.jzsa-album .swiper-button-fullscreen:after {
transition: transform 0.15s ease;
}
.jzsa-album .swiper-button-next:hover:after,
.jzsa-album .swiper-button-prev:hover:after,
.jzsa-album .swiper-button-play-pause:hover:after,
.jzsa-album .swiper-button-fullscreen:hover:after,
.jzsa-album .swiper-button-external-link:hover:after,
.jzsa-album .swiper-button-download:hover:after {
transform: scale(1.1);
}
.jzsa-album .swiper-button-next:after {
background-image: url("data:image/svg+xml;utf8,");
}
.jzsa-album .swiper-button-prev:after {
background-image: url("data:image/svg+xml;utf8,");
}
.jzsa-mosaic .swiper-button-next:after,
.jzsa-mosaic .swiper-button-prev:after {
content: '' !important;
display: block;
width: 18px;
height: 18px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.jzsa-mosaic .swiper-button-next:after {
background-image: url("data:image/svg+xml;utf8,");
}
.jzsa-mosaic .swiper-button-prev:after {
background-image: url("data:image/svg+xml;utf8,");
}
.jzsa-album .swiper-button-next.swiper-button-disabled,
.jzsa-album .swiper-button-prev.swiper-button-disabled {
display: none;
}
/* External link button */
.jzsa-album .swiper-button-external-link {
position: absolute;
top: 0;
left: 0;
width: var(--jzsa-controls-circle-size);
height: var(--jzsa-controls-circle-size);
background: transparent !important;
border-radius: 0;
border: none !important;
outline: none !important;
box-shadow: none !important;
cursor: pointer;
z-index: 10;
display: none;
align-items: center;
justify-content: center;
text-decoration: none;
}
.jzsa-album .swiper-button-external-link:after {
content: '';
display: block;
width: 21px;
height: 21px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Download button */
.jzsa-album .swiper-button-download {
position: absolute;
top: 0;
left: 0;
width: var(--jzsa-controls-circle-size);
height: var(--jzsa-controls-circle-size);
background: transparent !important;
border: none !important;
border-radius: 0;
outline: none !important;
box-shadow: none !important;
cursor: pointer;
z-index: 10;
display: none;
align-items: center;
justify-content: center;
}
.jzsa-album:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen)[data-show-link-button="true"] > .swiper-button-external-link,
.jzsa-album:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen)[data-show-download-button="true"] > .swiper-button-download {
display: flex;
}
.jzsa-album.jzsa-is-fullscreen[data-fullscreen-show-link-button="true"] > .swiper-button-external-link,
.jzsa-album.jzsa-pseudo-fullscreen[data-fullscreen-show-link-button="true"] > .swiper-button-external-link,
.jzsa-album:fullscreen[data-fullscreen-show-link-button="true"] > .swiper-button-external-link,
.jzsa-album:-webkit-full-screen[data-fullscreen-show-link-button="true"] > .swiper-button-external-link,
.jzsa-album.jzsa-is-fullscreen[data-fullscreen-show-download-button="true"] > .swiper-button-download,
.jzsa-album.jzsa-pseudo-fullscreen[data-fullscreen-show-download-button="true"] > .swiper-button-download,
.jzsa-album:fullscreen[data-fullscreen-show-download-button="true"] > .swiper-button-download,
.jzsa-album:-webkit-full-screen[data-fullscreen-show-download-button="true"] > .swiper-button-download {
display: flex;
}
/* Inline mode: when both link and download are visible, offset download button. */
.jzsa-album:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen)[data-show-link-button="true"][data-show-download-button="true"] > .swiper-button-download {
left: calc(var(--jzsa-controls-icon-size) + 18px);
}
/* Fullscreen mode: when both link and download are visible, offset download button. */
.jzsa-album.jzsa-is-fullscreen[data-fullscreen-show-link-button="true"][data-fullscreen-show-download-button="true"] > .swiper-button-download,
.jzsa-album.jzsa-pseudo-fullscreen[data-fullscreen-show-link-button="true"][data-fullscreen-show-download-button="true"] > .swiper-button-download,
.jzsa-album:fullscreen[data-fullscreen-show-link-button="true"][data-fullscreen-show-download-button="true"] > .swiper-button-download,
.jzsa-album:-webkit-full-screen[data-fullscreen-show-link-button="true"][data-fullscreen-show-download-button="true"] > .swiper-button-download {
left: calc(var(--jzsa-controls-icon-size) + 24px);
}
/* Only when BOTH link and download are active do they occupy 2 slots on the left corner.
Reserve 4 slots total (2 each side for symmetry) so info-top never overlaps the buttons. */
.jzsa-album[data-show-link-button="true"][data-show-download-button="true"] {
--jzsa-info-top-max-width: calc(100% - 4 * var(--jzsa-controls-circle-size));
}
.jzsa-album.jzsa-is-fullscreen[data-fullscreen-show-link-button="true"][data-fullscreen-show-download-button="true"],
.jzsa-album.jzsa-pseudo-fullscreen[data-fullscreen-show-link-button="true"][data-fullscreen-show-download-button="true"],
.jzsa-album:fullscreen[data-fullscreen-show-link-button="true"][data-fullscreen-show-download-button="true"],
.jzsa-album:-webkit-full-screen[data-fullscreen-show-link-button="true"][data-fullscreen-show-download-button="true"] {
--jzsa-info-top-max-width-fs: calc((100% - 4 * var(--jzsa-controls-circle-size-fs)) / var(--jzsa-controls-fs-scale));
}
.jzsa-album .swiper-button-download:after {
content: '';
display: block;
width: 21px;
height: 21px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Slideshow progress bar (only visible when slideshow is running) */
.jzsa-album .swiper-slideshow-progress {
position: absolute;
bottom: var(--jzsa-slideshow-progress-bottom);
left: 50%;
transform: translateX(-50%);
width: 39px;
height: var(--jzsa-slideshow-progress-height);
background: rgba(255, 255, 255, 0.2);
background: color-mix(in srgb, var(--jzsa-controls-color, #fff) 25%, transparent);
border-radius: 1px;
z-index: 10;
display: block;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
opacity: var(--jzsa-controls-visible-opacity);
}
/* In fullscreen mode, position it below the raised pagination */
.jzsa-album.jzsa-is-fullscreen .swiper-slideshow-progress {
bottom: 11px;
}
.jzsa-album .swiper-slideshow-progress-bar {
height: 100%;
width: 100%;
background: var(--jzsa-controls-color, #fff);
transform-origin: left;
transition: transform linear;
}
/* Play/Pause button */
.jzsa-album .swiper-button-play-pause {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
width: var(--jzsa-controls-circle-size);
height: var(--jzsa-controls-circle-size);
background: transparent !important;
border: none !important;
border-radius: 0;
cursor: pointer;
z-index: 10;
display: none;
align-items: center;
justify-content: center;
appearance: none;
-webkit-appearance: none;
padding: 0;
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none !important;
box-shadow: none !important;
}
.jzsa-album.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen)[data-has-active-bottom-center="true"] .swiper-button-play-pause {
bottom: calc(
var(--jzsa-inline-play-center-bottom) -
(var(--jzsa-controls-circle-size) / 2)
);
}
.jzsa-album .swiper-button-play-pause:focus,
.jzsa-album .swiper-button-play-pause:focus-visible,
.jzsa-album .swiper-button-play-pause:active {
outline: none !important;
box-shadow: none !important;
border: none !important;
}
/* When the active bottom-center info box is empty, move play/pause down near the progress bar. */
.jzsa-album[data-has-active-bottom-center="false"] .swiper-button-play-pause {
bottom: -1px;
}
.jzsa-album.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen)[data-has-active-bottom-center="false"] .swiper-button-play-pause {
bottom: calc(
var(--jzsa-inline-play-center-bottom-no-pill) -
(var(--jzsa-controls-circle-size) / 2)
);
}
/* Show play/pause button in fullscreen only when a slideshow is enabled
(either fullscreen-slideshow or inline slideshow that carries into fullscreen).
Both "auto" and "manual" modes show the button; "disabled" does not. */
.jzsa-album.jzsa-is-fullscreen[data-fullscreen-slideshow="auto"] .swiper-button-play-pause,
.jzsa-album.jzsa-is-fullscreen[data-fullscreen-slideshow="manual"] .swiper-button-play-pause,
.jzsa-album.jzsa-is-fullscreen[data-slideshow="auto"] .swiper-button-play-pause,
.jzsa-album.jzsa-is-fullscreen[data-slideshow="manual"] .swiper-button-play-pause {
display: flex;
bottom: 41px;
}
.jzsa-album.jzsa-is-fullscreen[data-fullscreen-slideshow="auto"][data-has-active-bottom-center="false"] .swiper-button-play-pause,
.jzsa-album.jzsa-is-fullscreen[data-fullscreen-slideshow="manual"][data-has-active-bottom-center="false"] .swiper-button-play-pause,
.jzsa-album.jzsa-is-fullscreen[data-slideshow="auto"][data-has-active-bottom-center="false"] .swiper-button-play-pause,
.jzsa-album.jzsa-is-fullscreen[data-slideshow="manual"][data-has-active-bottom-center="false"] .swiper-button-play-pause {
bottom: 2px;
}
.jzsa-album.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen) .swiper-button-play-pause {
display: flex;
}
@media (hover: hover) and (pointer: fine) {
.jzsa-album.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen) .swiper-button-play-pause {
opacity: 0;
pointer-events: none;
}
.jzsa-album.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen):hover .swiper-button-play-pause,
.jzsa-album.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen):focus-within .swiper-button-play-pause {
opacity: 0.15;
pointer-events: auto;
}
}
/* Keep inline hover behavior predictable (do not force opacity via control intro animation). */
.jzsa-album.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen).jzsa-loaded .swiper-button-play-pause {
animation: none;
}
@media (hover: none), (pointer: coarse) {
.jzsa-album.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen) .swiper-button-play-pause {
opacity: 0;
pointer-events: none;
animation: none;
}
}
/* Play icon (default - slideshow paused) */
.jzsa-album .swiper-button-play-pause:after {
content: '';
display: block;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Pause icon (slideshow running) */
.jzsa-album .swiper-button-play-pause.playing:after {
background-image: url("data:image/svg+xml;utf8,");
}
/* Countdown ring when slideshow is interrupted (will auto-resume) */
.jzsa-album .swiper-button-play-pause .jzsa-countdown-ring {
position: absolute;
top: 50%;
left: 50%;
width: var(--jzsa-play-visual-size);
height: var(--jzsa-play-visual-size);
transform: translate(-50%, -50%) rotate(-90deg);
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.jzsa-album .swiper-button-play-pause .jzsa-countdown-ring.jzsa-visible {
opacity: 0.45;
}
.jzsa-album .swiper-button-play-pause .jzsa-countdown-ring circle {
fill: none;
stroke: #ffffff;
stroke-width: 1.75;
stroke-linecap: round;
/* circumference = 2 * PI * 9 ≈ 56.55 */
stroke-dasharray: 56.55;
stroke-dashoffset: 56.55;
animation: jzsa-countdown 30s linear forwards;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}
@keyframes jzsa-countdown {
from { stroke-dashoffset: 69.12; }
to { stroke-dashoffset: 0; }
}
/* Fullscreen button */
.jzsa-album .swiper-button-fullscreen {
position: absolute;
top: 0;
right: 0;
width: var(--jzsa-controls-circle-size);
height: var(--jzsa-controls-circle-size);
background: transparent !important;
border-radius: 0;
border: none !important;
outline: none !important;
box-shadow: none !important;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.jzsa-album .swiper-button-fullscreen:after {
content: '';
display: block;
width: 26px;
height: 26px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* When in fullscreen, show exit fullscreen icon */
.jzsa-album:fullscreen .swiper-button-fullscreen:after,
.jzsa-album:-webkit-full-screen .swiper-button-fullscreen:after {
background-image: url("data:image/svg+xml;utf8,");
}
/* Scale top controls up in fullscreen - each scales from its nearest corner */
.jzsa-album:fullscreen .swiper-button-fullscreen,
.jzsa-album:-webkit-full-screen .swiper-button-fullscreen,
.jzsa-album.jzsa-pseudo-fullscreen .swiper-button-fullscreen {
top: -2px;
transform: scale(var(--jzsa-controls-fs-scale));
transform-origin: top right;
}
.jzsa-album:fullscreen .swiper-button-external-link,
.jzsa-album:-webkit-full-screen .swiper-button-external-link,
.jzsa-album.jzsa-pseudo-fullscreen .swiper-button-external-link,
.jzsa-album:fullscreen .swiper-button-download,
.jzsa-album:-webkit-full-screen .swiper-button-download,
.jzsa-album.jzsa-pseudo-fullscreen .swiper-button-download {
top: -2px;
transform: scale(var(--jzsa-controls-fs-scale));
transform-origin: top left;
}
.jzsa-album:fullscreen .swiper-button-prev,
.jzsa-album:-webkit-full-screen .swiper-button-prev,
.jzsa-album.jzsa-pseudo-fullscreen .swiper-button-prev {
transform: scale(var(--jzsa-controls-fs-scale));
transform-origin: center left;
}
.jzsa-album:fullscreen .swiper-button-next,
.jzsa-album:-webkit-full-screen .swiper-button-next,
.jzsa-album.jzsa-pseudo-fullscreen .swiper-button-next {
transform: scale(var(--jzsa-controls-fs-scale));
transform-origin: center right;
}
.jzsa-album:fullscreen .swiper-button-play-pause,
.jzsa-album:-webkit-full-screen .swiper-button-play-pause,
.jzsa-album.jzsa-pseudo-fullscreen .swiper-button-play-pause {
transform: translateX(-50%) scale(var(--jzsa-controls-fs-scale));
transform-origin: bottom center;
}
.jzsa-album:fullscreen .swiper-pagination,
.jzsa-album:-webkit-full-screen .swiper-pagination,
.jzsa-album.jzsa-pseudo-fullscreen .swiper-pagination {
transform: translateX(-50%) scale(var(--jzsa-controls-fs-scale));
transform-origin: bottom center;
max-width: var(--jzsa-info-wide-max-width-fs);
}
.jzsa-album:fullscreen .swiper-album-title,
.jzsa-album:-webkit-full-screen .swiper-album-title,
.jzsa-album.jzsa-pseudo-fullscreen .swiper-album-title {
transform: translateX(-50%) scale(var(--jzsa-controls-fs-scale));
transform-origin: top center;
}
/* Fullscreen mode styling */
.jzsa-album:fullscreen {
width: 100vw !important;
height: 100vh !important;
max-width: 100vw;
max-height: 100vh;
background-color: var(--gallery-bg-color, #FFFFFF);
}
.jzsa-album:-webkit-full-screen {
width: 100vw !important;
height: 100vh !important;
max-width: 100vw;
max-height: 100vh;
background-color: var(--gallery-bg-color, #FFFFFF);
}
/* Pseudo fullscreen styling for iPhone (CSS-based fallback).
Use dvh (dynamic viewport height) so the container respects the actual
visible area on iOS Safari, where 100vh extends behind the browser chrome
and would hide bottom-aligned controls (e.g. Plyr bar). */
.jzsa-album.jzsa-pseudo-fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100% !important;
height: auto !important;
max-width: none;
max-height: none;
padding-bottom: env(safe-area-inset-bottom, 0px);
box-sizing: border-box;
background-color: var(--gallery-bg-color, #FFFFFF);
z-index: 9999;
animation: jzsa-pseudo-fs-in 0.25s ease-out;
}
@keyframes jzsa-pseudo-fs-in {
from { opacity: 0; }
to { opacity: 1; }
}
html.jzsa-no-scroll,
body.jzsa-no-scroll {
overflow: hidden;
height: 100%;
}
/* Album title */
.jzsa-album .swiper-album-title {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: var(--jzsa-controls-bg);
color: #fff;
padding: 6px 16px;
border-radius: var(--jzsa-controls-pill-radius);
font-size: 14px;
font-weight: 600;
z-index: 10;
max-width: 80%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Pagination */
.jzsa-album .swiper-pagination {
background: var(--jzsa-controls-bg);
color: var(--jzsa-controls-color, #fff);
padding: 4px 12px;
box-sizing: border-box;
border-radius: var(--jzsa-controls-pill-radius);
display: inline-block;
bottom: 9px;
left: 50%;
right: auto;
margin: 0;
transform: translateX(-50%);
max-width: calc(100% - 2 * var(--jzsa-controls-circle-size));
width: max-content;
font-size: var(--jzsa-info-font-size, 12px);
line-height: 1.5;
text-align: center;
font-family: var(--jzsa-info-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
color: var(--jzsa-info-font-color, var(--jzsa-controls-color, #fff));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: var(--jzsa-controls-visible-opacity);
}
.jzsa-album[data-info-wrap="true"] .jzsa-info-box,
.jzsa-album[data-info-wrap="true"] .swiper-pagination {
white-space: normal;
text-overflow: clip;
}
.jzsa-album.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen)[data-has-active-bottom-center="true"] .swiper-pagination {
bottom: var(--jzsa-inline-bottom-pill-bottom);
}
/* Move pagination up in fullscreen to make room for progress bar below */
.jzsa-album.jzsa-is-fullscreen .swiper-pagination {
bottom: var(--jzsa-info-bottom-fs-offset);
}
/* Loading state */
.jzsa-album .swiper-lazy-loading {
opacity: 0.5;
}
/* Progressive image loading */
.jzsa-album .jzsa-progressive-image {
transition: opacity 0.3s ease-in-out;
}
.jzsa-album .jzsa-progressive-image.jzsa-full-loaded {
opacity: 1;
}
/* Image error placeholder */
.jzsa-album .jzsa-progressive-image.jzsa-image-error {
position: relative;
background: #2a2a2a;
display: flex;
align-items: center;
justify-content: center;
}
.jzsa-album .jzsa-progressive-image.jzsa-image-error::before {
content: '';
position: absolute;
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.1);
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.jzsa-album .jzsa-progressive-image.jzsa-image-error::after {
content: '✕';
position: absolute;
font-size: 48px;
color: rgba(255, 255, 255, 0.5);
font-weight: 300;
line-height: 1;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Custom background color support (redundant but kept for clarity) */
.jzsa-album[data-background-color] {
background-color: var(--gallery-bg-color, #FFFFFF);
}
/* Carousel mode specific styles */
.jzsa-album[data-mode="carousel"] .swiper-slide {
width: auto;
height: auto;
position: relative;
}
.jzsa-album[data-mode="carousel"] .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Slider mode: round the container, not individual slides.
.swiper already has overflow:hidden, so border-radius on the container
clips all content - including mid-transition slides - to rounded corners. */
.jzsa-album[data-mode="slider"] {
border-radius: var(--jzsa-corner-radius, 0);
}
/* Gallery mode thumbnails */
.jzsa-album .jzsa-gallery-thumb {
border-radius: var(--jzsa-corner-radius, 0);
}
/* Carousel mode - adjust image sizing */
.jzsa-album[data-mode="carousel"] .swiper-zoom-container {
width: 100%;
height: 100%;
}
/* Carousel: clip individual slides (multiple visible at once, each needs its own corners).
clip-path works on GPU-composited slides where overflow:hidden+border-radius does not. */
.jzsa-album[data-mode="carousel"] .swiper-slide {
clip-path: inset(0 round var(--jzsa-corner-radius, 0px));
}
/* Carousel mode: slides are clickable and open fullscreen slideshow */
.jzsa-album[data-mode="carousel"] .swiper-slide {
cursor: pointer;
}
.jzsa-album[data-mode="carousel"] .swiper-slide:hover {
/* Keep cursor feedback for clickability but avoid any dimming/fog effect */
opacity: 1;
transition: opacity 0.2s ease;
}
/* Carousel per-tile top controls (fullscreen/link/download) */
.jzsa-album[data-mode="carousel"] .swiper-slide .jzsa-carousel-slide-overlay-btn {
top: 0;
left: auto;
right: auto;
z-index: 12;
display: flex;
opacity: 0;
pointer-events: none;
transition: background var(--jzsa-controls-bg-duration) var(--jzsa-controls-bg-easing),
opacity var(--jzsa-controls-fade-duration) var(--jzsa-controls-fade-easing);
}
.jzsa-album[data-mode="carousel"] .swiper-slide .jzsa-carousel-slide-fs-btn {
right: 0;
left: auto;
}
.jzsa-album[data-mode="carousel"] .swiper-slide .jzsa-carousel-slide-left-primary {
left: 0;
right: auto;
}
.jzsa-album[data-mode="carousel"] .swiper-slide .jzsa-carousel-slide-left-secondary {
/* Keep download as a close visual neighbor of link (icon-level spacing). */
left: calc(var(--jzsa-controls-icon-size) + 18px);
right: auto;
}
/* In carousel preview mode, hide the single container-level fullscreen button.
Per-tile buttons are used instead. */
.jzsa-album.jzsa-carousel-tile-fs-enabled:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) > .swiper-button-fullscreen {
display: none !important;
}
/* In carousel preview mode, keep link/download attached to each visible tile. */
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) > .swiper-button-external-link,
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) > .swiper-button-download {
display: none !important;
}
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) > .swiper-pagination,
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) > .jzsa-info-box,
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) > .jzsa-info-stack {
display: none !important;
}
/* Keep the container-level fullscreen button available while fullscreen is active
so exiting fullscreen is always obvious. */
.jzsa-album.jzsa-carousel-tile-fs-enabled:fullscreen > .swiper-button-fullscreen,
.jzsa-album.jzsa-carousel-tile-fs-enabled:-webkit-full-screen > .swiper-button-fullscreen,
.jzsa-album.jzsa-carousel-tile-fs-enabled.jzsa-is-fullscreen > .swiper-button-fullscreen,
.jzsa-album.jzsa-carousel-tile-fs-enabled.jzsa-pseudo-fullscreen > .swiper-button-fullscreen {
display: flex !important;
}
@media (hover: hover) and (pointer: fine) {
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide .jzsa-carousel-slide-overlay-btn {
opacity: 0 !important;
pointer-events: none !important;
animation: none !important;
}
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide:hover .jzsa-carousel-slide-overlay-btn,
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide:focus-within .jzsa-carousel-slide-overlay-btn {
opacity: var(--jzsa-controls-visible-opacity) !important;
pointer-events: auto !important;
}
}
/* Touch reveal via JS (same approach as gallery items - covers iOS 13+ and all touch devices). */
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide.jzsa-slide-touched .jzsa-carousel-slide-overlay-btn {
opacity: var(--jzsa-controls-visible-opacity) !important;
pointer-events: auto !important;
}
/* Per-tile buttons are preview-mode affordances only. Hide in fullscreen. */
.jzsa-album[data-mode="carousel"].jzsa-is-fullscreen .jzsa-carousel-slide-overlay-btn,
.jzsa-album[data-mode="carousel"].jzsa-pseudo-fullscreen .jzsa-carousel-slide-overlay-btn,
.jzsa-album[data-mode="carousel"]:fullscreen .jzsa-carousel-slide-overlay-btn,
.jzsa-album[data-mode="carousel"]:-webkit-full-screen .jzsa-carousel-slide-overlay-btn {
opacity: 0 !important;
pointer-events: none !important;
}
.jzsa-album:fullscreen .swiper-slide,
.jzsa-album:-webkit-full-screen .swiper-slide,
.jzsa-album.jzsa-pseudo-fullscreen .swiper-slide {
-webkit-touch-callout: none;
user-select: none;
}
/* Fullscreen: disable corner-radius - edges meet the screen boundary. */
.jzsa-album:fullscreen,
.jzsa-album:-webkit-full-screen,
.jzsa-album.jzsa-pseudo-fullscreen {
border-radius: 0 !important;
clip-path: none !important;
}
/* Gallery loading overlay (shown until first image is ready) */
.jzsa-album .jzsa-loader {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
color: #fff;
z-index: 20;
pointer-events: none;
opacity: 1;
transition: opacity 0.35s ease-in-out;
}
.jzsa-album.jzsa-loader-pending .jzsa-loader {
opacity: 0;
visibility: hidden;
}
/* Dashed border shows the placeholder area while content is loading */
.jzsa-album.jzsa-loader-pending {
outline: 2px dashed rgba(128, 128, 128, 0.4);
outline-offset: -2px;
}
.jzsa-album.jzsa-loaded {
outline: none;
}
.jzsa-album.jzsa-loader-pending.jzsa-loader-visible .jzsa-loader {
opacity: 1;
visibility: visible;
}
.jzsa-album.jzsa-loaded .jzsa-loader {
opacity: 0;
visibility: hidden;
}
/* Fullscreen quality gate: hide slideshow briefly until active full-res image is ready. */
.jzsa-album.jzsa-fullscreen-waiting .jzsa-loader {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.jzsa-album.jzsa-fullscreen-waiting .swiper-wrapper {
visibility: hidden;
}
.jzsa-album.jzsa-fullscreen-waiting .swiper-button-prev,
.jzsa-album.jzsa-fullscreen-waiting .swiper-button-next,
.jzsa-album.jzsa-fullscreen-waiting .swiper-pagination,
.jzsa-album.jzsa-fullscreen-waiting .swiper-button-fullscreen:not(.jzsa-gallery-thumb-fs-btn),
.jzsa-album.jzsa-fullscreen-waiting .swiper-button-play-pause,
.jzsa-album.jzsa-fullscreen-waiting .swiper-button-download,
.jzsa-album.jzsa-fullscreen-waiting .swiper-button-external-link,
.jzsa-album.jzsa-fullscreen-waiting .swiper-slideshow-progress {
opacity: 0;
visibility: hidden;
pointer-events: none;
animation: none;
}
/* Safe default: keep slider controls hidden until initial content is ready.
This prevents controls flashing before images on slower or highly optimized setups. */
.jzsa-album.swiper:not(.jzsa-loaded) .swiper-button-prev,
.jzsa-album.swiper:not(.jzsa-loaded) .swiper-button-next,
.jzsa-album.swiper:not(.jzsa-loaded) .swiper-pagination,
.jzsa-album.swiper:not(.jzsa-loaded) .swiper-button-fullscreen:not(.jzsa-gallery-thumb-fs-btn),
.jzsa-album.swiper:not(.jzsa-loaded) .swiper-button-play-pause,
.jzsa-album.swiper:not(.jzsa-loaded) .swiper-button-download,
.jzsa-album.swiper:not(.jzsa-loaded) .swiper-button-external-link,
.jzsa-album.swiper:not(.jzsa-loaded) .swiper-slideshow-progress {
opacity: 0;
visibility: hidden;
pointer-events: none;
animation: none;
}
/* Keep Swiper slide content hidden until the first image is considered loaded. */
.jzsa-album.swiper:not(.jzsa-loaded) .swiper-wrapper {
visibility: hidden;
}
/* Hide controls while gallery is still in loading-pending state. */
.jzsa-album.jzsa-loader-pending .swiper-button-prev,
.jzsa-album.jzsa-loader-pending .swiper-button-next,
.jzsa-album.jzsa-loader-pending .swiper-pagination,
.jzsa-album.jzsa-loader-pending .swiper-button-fullscreen:not(.jzsa-gallery-thumb-fs-btn),
.jzsa-album.jzsa-loader-pending .swiper-button-play-pause,
.jzsa-album.jzsa-loader-pending .swiper-button-download,
.jzsa-album.jzsa-loader-pending .swiper-button-external-link,
.jzsa-album.jzsa-loader-pending .swiper-slideshow-progress {
opacity: 0;
visibility: hidden;
pointer-events: none;
animation: none;
}
.jzsa-album.jzsa-loaded .swiper-button-prev,
.jzsa-album.jzsa-loaded .swiper-button-next,
.jzsa-album.jzsa-loaded .swiper-pagination,
.jzsa-album.jzsa-loaded .swiper-button-fullscreen:not(.jzsa-gallery-thumb-fs-btn),
.jzsa-album.jzsa-loaded .swiper-button-play-pause,
.jzsa-album.jzsa-loaded .swiper-button-download:not(.jzsa-gallery-thumb-download-btn):not(.jzsa-carousel-slide-overlay-btn),
.jzsa-album.jzsa-loaded .swiper-button-external-link:not(.jzsa-gallery-thumb-link-btn):not(.jzsa-carousel-slide-overlay-btn),
.jzsa-album.jzsa-loaded .swiper-slideshow-progress {
visibility: visible;
animation: jzsa-controls-fade-in-soft 1000ms ease-out both;
}
.jzsa-album.jzsa-loaded .swiper-button-prev,
.jzsa-album.jzsa-loaded .swiper-button-next,
.jzsa-album.jzsa-loaded .swiper-button-play-pause {
animation: none;
}
/* Gallery controls live in a sibling overlay shell; hide them while content is pending. */
.jzsa-gallery-shell > .jzsa-gallery-album.jzsa-loader-pending ~ .jzsa-gallery-controls {
opacity: 0;
visibility: hidden;
pointer-events: none;
animation: none;
}
.jzsa-gallery-shell > .jzsa-gallery-album:not(.jzsa-loaded) ~ .jzsa-gallery-controls {
opacity: 0;
visibility: hidden;
pointer-events: none;
animation: none;
}
.jzsa-gallery-shell > .jzsa-gallery-album.jzsa-loaded ~ .jzsa-gallery-controls {
visibility: visible;
animation: jzsa-controls-fade-in 1000ms ease-out both;
}
@keyframes jzsa-controls-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes jzsa-controls-fade-in-soft {
from {
opacity: 0;
}
to {
opacity: var(--jzsa-controls-visible-opacity);
}
}
@keyframes jzsa-controls-fade-in-subtle {
from {
opacity: 0;
}
to {
opacity: 0.15;
}
}
.jzsa-loader-inner {
text-align: center;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.jzsa-loader-visible .jzsa-loader-inner {
opacity: 1;
}
.jzsa-loader-spinner {
width: 42px;
height: 42px;
border-radius: 50%;
border: 3px solid rgba(128, 128, 128, 0.25);
border-top-color: rgba(128, 128, 128, 0.8);
margin: 0 auto 12px;
animation: jzsa-spin 0.9s linear infinite;
}
.jzsa-loader-text {
font-size: 14px;
letter-spacing: 0.02em;
color: rgba(128, 128, 128, 0.8);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@keyframes jzsa-spin {
to {
transform: rotate(360deg);
}
}
/* Gesture hints overlay */
.jzsa-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.85);
color: #fff;
padding: 16px 24px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
text-align: center;
max-width: 90%;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.jzsa-hint-visible {
opacity: 1;
}
/* Info box overlays - format-string driven per-photo metadata labels.
Each box is positioned absolutely within the slide or gallery item.
Boxes are only rendered when their format string resolves to non-empty text.
Styled to match the pagination pill (controls-bg, controls-color, pill radius). */
.jzsa-info-box {
position: absolute;
background: var(--jzsa-controls-bg);
color: var(--jzsa-info-font-color, var(--jzsa-controls-color, #fff));
padding: 4px 12px;
box-sizing: border-box;
border-radius: var(--jzsa-controls-pill-radius);
font-size: var(--jzsa-info-font-size, 12px);
line-height: 1.5;
font-family: var(--jzsa-info-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
pointer-events: none;
z-index: 10;
max-width: var(--jzsa-info-corner-max-width);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
opacity: var(--jzsa-controls-visible-opacity);
transition: opacity var(--jzsa-info-fade-duration) linear;
}
.jzsa-album[data-info-text-align="left"] .jzsa-info-box,
.jzsa-album[data-info-text-align="left"] .swiper-pagination {
text-align: left;
}
.jzsa-album[data-info-text-align="right"] .jzsa-info-box,
.jzsa-album[data-info-text-align="right"] .swiper-pagination {
text-align: right;
}
/* Per-box overrides — come after global rules so same specificity wins by order */
.jzsa-album[data-info-top-text-align="left"] .jzsa-info-top { text-align: left; }
.jzsa-album[data-info-top-text-align="center"] .jzsa-info-top { text-align: center; }
.jzsa-album[data-info-top-text-align="right"] .jzsa-info-top { text-align: right; }
.jzsa-album[data-info-top-secondary-text-align="left"] .jzsa-info-top-secondary { text-align: left; }
.jzsa-album[data-info-top-secondary-text-align="center"] .jzsa-info-top-secondary { text-align: center; }
.jzsa-album[data-info-top-secondary-text-align="right"] .jzsa-info-top-secondary { text-align: right; }
.jzsa-album[data-info-bottom-text-align="left"] .swiper-pagination { text-align: left; }
.jzsa-album[data-info-bottom-text-align="center"] .swiper-pagination { text-align: center; }
.jzsa-album[data-info-bottom-text-align="right"] .swiper-pagination { text-align: right; }
.jzsa-info-stack {
position: static;
}
/* Box positions - lives inside the flex stack; no absolute position needed here. */
.jzsa-info-bottom { bottom: 9px; left: 50%; transform: translateX(-50%); max-width: var(--jzsa-info-center-max-width-expanded); }
.jzsa-info-top { top: 9px; left: 50%; transform: translateX(-50%); bottom: auto; max-width: var(--jzsa-info-center-max-width-default); }
.jzsa-info-top-secondary { top: 9px; left: 50%; transform: translateX(-50%); bottom: auto; max-width: var(--jzsa-info-center-max-width-default); }
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen)[data-has-active-bottom-center="true"] .jzsa-info-stack-bottom {
bottom: calc(
var(--jzsa-inline-bottom-pill-bottom) +
var(--jzsa-info-pill-height) +
var(--jzsa-safe-stack-gap)
);
}
.jzsa-album.swiper.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen)[data-has-active-bottom-center="true"] .jzsa-info-stack-bottom {
bottom: calc(
var(--jzsa-inline-play-visual-bottom) +
var(--jzsa-play-visual-size) +
var(--jzsa-bottom-control-gap)
);
}
.jzsa-album.swiper.jzsa-inline-slideshow-controls:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen)[data-has-active-bottom-center="false"] .jzsa-info-stack-bottom {
bottom: calc(
var(--jzsa-inline-play-visual-bottom-no-pill) +
var(--jzsa-play-visual-size) +
var(--jzsa-bottom-control-gap)
);
}
/* Top stack is always a vertical column - all top zones are centred, never side-by-side.
Boxes are positioned relative within the flex container, so info-top-secondary always
renders below info-top. When info-top is hidden it naturally rises to top. */
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .jzsa-info-stack-top {
position: absolute;
left: 0;
right: 0;
top: 9px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 10;
}
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .jzsa-info-stack-top .jzsa-info-box {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
max-width: calc(100% - 24px);
}
/* info-top: narrows with active corner buttons (link/download add slots). */
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .jzsa-info-stack-top .jzsa-info-top {
max-width: var(--jzsa-info-top-max-width);
}
/* info-top-secondary: always clears the nav arrows (1 slot each side), but does not shrink
further when link/download buttons are active — those buttons are above it in the corners. */
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .jzsa-info-stack-top .jzsa-info-top-secondary {
max-width: calc(100% - 2 * var(--jzsa-controls-circle-size));
}
/* Bottom stack is always a vertical column - is centred, stacked above the pill.
Positioning adjusts based on whether the pill (info-bottom) is active. */
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .jzsa-info-stack-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 9px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 10;
}
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .jzsa-info-stack-bottom .jzsa-info-box {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
max-width: calc(100% - 24px);
}
/* Fullscreen: top stack is a vertical column; scale applied to the container. */
.jzsa-album:fullscreen .jzsa-info-stack-top,
.jzsa-album:-webkit-full-screen .jzsa-info-stack-top,
.jzsa-album.jzsa-pseudo-fullscreen .jzsa-info-stack-top,
.jzsa-album.jzsa-is-fullscreen .jzsa-info-stack-top {
position: absolute;
left: 0;
right: 0;
top: var(--jzsa-info-top-fs-offset);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 10;
transform: scale(var(--jzsa-controls-fs-scale));
transform-origin: top center;
}
.jzsa-album:fullscreen .jzsa-info-stack-top .jzsa-info-box,
.jzsa-album:-webkit-full-screen .jzsa-info-stack-top .jzsa-info-box,
.jzsa-album.jzsa-pseudo-fullscreen .jzsa-info-stack-top .jzsa-info-box,
.jzsa-album.jzsa-is-fullscreen .jzsa-info-stack-top .jzsa-info-box {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
max-width: var(--jzsa-info-wide-max-width-fs);
}
/* Fullscreen: info-top narrows with active corner buttons. */
.jzsa-album:fullscreen .jzsa-info-stack-top .jzsa-info-top,
.jzsa-album:-webkit-full-screen .jzsa-info-stack-top .jzsa-info-top,
.jzsa-album.jzsa-pseudo-fullscreen .jzsa-info-stack-top .jzsa-info-top,
.jzsa-album.jzsa-is-fullscreen .jzsa-info-stack-top .jzsa-info-top {
max-width: var(--jzsa-info-top-max-width-fs);
}
/* Fullscreen: info-top-secondary clears nav arrows only (1 slot each side, fixed). */
.jzsa-album:fullscreen .jzsa-info-stack-top .jzsa-info-top-secondary,
.jzsa-album:-webkit-full-screen .jzsa-info-stack-top .jzsa-info-top-secondary,
.jzsa-album.jzsa-pseudo-fullscreen .jzsa-info-stack-top .jzsa-info-top-secondary,
.jzsa-album.jzsa-is-fullscreen .jzsa-info-stack-top .jzsa-info-top-secondary {
max-width: calc((100% - 2 * var(--jzsa-controls-circle-size-fs)) / var(--jzsa-controls-fs-scale));
}
/* Fullscreen: bottom stack is a vertical column; scale applied to the container. */
.jzsa-album:fullscreen .jzsa-info-stack-bottom,
.jzsa-album:-webkit-full-screen .jzsa-info-stack-bottom,
.jzsa-album.jzsa-pseudo-fullscreen .jzsa-info-stack-bottom,
.jzsa-album.jzsa-is-fullscreen .jzsa-info-stack-bottom {
position: absolute;
left: 0;
right: 0;
bottom: var(--jzsa-info-bottom-fs-offset);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 10;
transform: scale(var(--jzsa-controls-fs-scale));
transform-origin: bottom center;
}
.jzsa-album:fullscreen .jzsa-info-stack-bottom .jzsa-info-box,
.jzsa-album:-webkit-full-screen .jzsa-info-stack-bottom .jzsa-info-box,
.jzsa-album.jzsa-pseudo-fullscreen .jzsa-info-stack-bottom .jzsa-info-box,
.jzsa-album.jzsa-is-fullscreen .jzsa-info-stack-bottom .jzsa-info-box {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
max-width: var(--jzsa-info-wide-max-width-fs);
}
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide .jzsa-carousel-tile-info-box {
z-index: 11;
max-width: calc(100% - 18px);
}
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide .jzsa-info-top,
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide .jzsa-info-top-secondary {
top: 9px;
max-width: 66%;
}
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide .jzsa-info-bottom {
bottom: 9px;
left: 50%;
transform: translateX(-50%);
max-width: 66%;
}
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide .jzsa-carousel-tile-info-stack {
position: absolute;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 11;
}
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide .jzsa-carousel-tile-info-stack.jzsa-info-stack-top {
top: 9px;
}
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide .jzsa-carousel-tile-info-stack.jzsa-info-stack-bottom {
bottom: 9px;
}
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide .jzsa-carousel-tile-info-box {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
max-width: calc(100% - 18px);
}
/* The standalone info-bottom (counter) is absolutely positioned at the tile bottom. */
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-slide .jzsa-carousel-tile-info-box.jzsa-info-bottom {
position: absolute;
bottom: 9px;
left: 50%;
transform: translateX(-50%);
top: auto;
right: auto;
max-width: 66%;
}
/* Carousel + inline slideshow: push bottom stack above the play button. */
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen).jzsa-inline-slideshow-controls[data-has-active-bottom-center="true"] .swiper-slide .jzsa-carousel-tile-info-stack.jzsa-info-stack-bottom {
bottom: calc(var(--jzsa-inline-play-visual-bottom) + var(--jzsa-play-visual-size) + var(--jzsa-bottom-control-gap));
}
.jzsa-album[data-mode="carousel"]:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen).jzsa-inline-slideshow-controls[data-has-active-bottom-center="false"] .swiper-slide .jzsa-carousel-tile-info-stack.jzsa-info-stack-bottom {
bottom: calc(var(--jzsa-inline-play-visual-bottom-no-pill) + var(--jzsa-play-visual-size) + var(--jzsa-bottom-control-gap));
}
.jzsa-album[data-mode="carousel"].jzsa-is-fullscreen .swiper-slide .jzsa-carousel-tile-info-box,
.jzsa-album[data-mode="carousel"].jzsa-pseudo-fullscreen .swiper-slide .jzsa-carousel-tile-info-box,
.jzsa-album[data-mode="carousel"]:fullscreen .swiper-slide .jzsa-carousel-tile-info-box,
.jzsa-album[data-mode="carousel"]:-webkit-full-screen .swiper-slide .jzsa-carousel-tile-info-box {
display: none !important;
}
/* Gallery thumbnail-specific info box constraints */
/* z-index: 12 so info stacks sit above .jzsa-video-wrapper (z-index: 11) for video tiles */
.jzsa-gallery-item .jzsa-info-stack-top,
.jzsa-gallery-item .jzsa-info-stack-bottom {
position: absolute;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 12;
}
.jzsa-gallery-item .jzsa-info-stack-top { top: 4px; }
.jzsa-gallery-item .jzsa-info-stack-bottom { bottom: 4px; }
.jzsa-gallery-item .jzsa-info-box {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
max-width: 85%;
}
/* Global download status toast used for "preparing/download started" feedback. */
.jzsa-download-status {
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%) translateY(10px);
background: rgba(16, 16, 16, 0.88);
color: #fff;
border-radius: 999px;
padding: 8px 14px;
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.01em;
z-index: 99999;
opacity: 0;
pointer-events: none;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.jzsa-download-status.jzsa-download-status-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.jzsa-download-status.jzsa-download-status-error {
background: rgba(162, 24, 24, 0.92);
}
/* ============================================================================
Gallery mode
============================================================================ */
/* Gallery container: reset swiper height so it grows with its content */
.jzsa-gallery-album {
height: auto;
background-color: var(--gallery-bg-color, #FFFFFF);
position: static;
}
.jzsa-gallery-album.jzsa-gallery-loading {
min-height: 140px;
}
.jzsa-gallery-album.jzsa-gallery-loading .jzsa-loader {
background: radial-gradient(circle at top, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.58));
}
/* Uniform gallery layout */
.jzsa-gallery-album[data-gallery-layout="grid"] {
display: grid;
grid-template-columns: repeat(var(--jzsa-gallery-columns, 3), 1fr);
gap: var(--jzsa-gallery-gap, 4px);
align-content: start;
}
@media (max-width: 768px) {
.jzsa-gallery-album[data-gallery-layout="grid"] {
grid-template-columns: repeat(var(--jzsa-gallery-columns-tablet, 2), 1fr);
}
}
@media (max-width: 480px) {
.jzsa-gallery-album[data-gallery-layout="grid"] {
grid-template-columns: repeat(var(--jzsa-gallery-columns-mobile, 1), 1fr);
}
}
.jzsa-gallery-album[data-gallery-layout="grid"] .jzsa-gallery-thumb {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.jzsa-gallery-album[data-gallery-layout="grid"] .jzsa-gallery-placeholder {
width: 100%;
aspect-ratio: 4 / 3;
display: block;
box-sizing: border-box;
border: 2px dashed rgba(128, 128, 128, 0.15);
background: rgba(128, 128, 128, 0.04);
border-radius: 2px;
pointer-events: none;
user-select: none;
}
.jzsa-gallery-album[data-gallery-layout="grid"] .jzsa-gallery-tile-fill {
aspect-ratio: auto;
}
.jzsa-gallery-album[data-gallery-layout="grid"][data-image-fit="contain"] .jzsa-gallery-thumb {
object-fit: contain;
}
/* Justified gallery layout */
.jzsa-gallery-album[data-gallery-layout="justified"] .jzsa-justified-row {
display: flex;
gap: var(--jzsa-gallery-gap, 4px);
margin-bottom: var(--jzsa-gallery-gap, 4px);
overflow: hidden;
}
.jzsa-gallery-album[data-gallery-layout="justified"] .jzsa-justified-row:last-child {
margin-bottom: 0;
}
.jzsa-gallery-album[data-gallery-layout="justified"] .jzsa-gallery-thumb {
object-fit: cover;
flex-shrink: 0;
display: block;
}
.jzsa-gallery-album[data-gallery-layout="justified"][data-image-fit="contain"] .jzsa-gallery-thumb {
object-fit: contain;
}
/* Shared thumbnail base */
.jzsa-gallery-thumb {
-webkit-user-drag: none;
user-select: none;
}
.jzsa-gallery-item {
position: relative;
contain: layout style paint;
-webkit-user-select: none;
user-select: none;
}
.jzsa-gallery-item .jzsa-gallery-thumb-fs-btn,
.jzsa-gallery-item .jzsa-gallery-thumb-link-btn,
.jzsa-gallery-item .jzsa-gallery-thumb-download-btn {
position: absolute;
top: 0;
z-index: 12;
display: flex;
opacity: 0;
pointer-events: none;
transition: background var(--jzsa-controls-bg-duration) var(--jzsa-controls-bg-easing),
opacity var(--jzsa-controls-fade-duration) var(--jzsa-controls-fade-easing);
}
.jzsa-gallery-item .jzsa-gallery-thumb-fs-btn {
right: 0;
}
.jzsa-gallery-item .jzsa-gallery-thumb-link-btn {
left: 0;
}
.jzsa-gallery-item .jzsa-gallery-thumb-download-btn {
left: 0;
}
/* When both link and download buttons are on a thumbnail, offset the download button.
Extra specificity needed to override the slider-mode rule for .swiper-button-download. */
.jzsa-gallery-album .jzsa-gallery-item .jzsa-gallery-thumb-link-btn + .jzsa-gallery-thumb-download-btn.swiper-button-download {
left: calc(var(--jzsa-controls-icon-size) + 18px);
}
@media (hover: hover) and (pointer: fine) {
.jzsa-gallery-album .jzsa-gallery-item:hover .jzsa-gallery-thumb-fs-btn,
.jzsa-gallery-album .jzsa-gallery-item:hover .jzsa-gallery-thumb-link-btn,
.jzsa-gallery-album .jzsa-gallery-item:hover .jzsa-gallery-thumb-download-btn {
opacity: var(--jzsa-controls-visible-opacity);
pointer-events: auto;
}
.jzsa-gallery-album .jzsa-gallery-item:hover .jzsa-info-stack-top {
position: absolute;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 10;
}
.jzsa-gallery-album .jzsa-gallery-item:hover .jzsa-info-stack-top {
top: 4px;
}
.jzsa-gallery-album .jzsa-gallery-item:hover .jzsa-info-stack-top .jzsa-info-box {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
max-width: calc(100% - 8px);
}
}
.jzsa-gallery-album .jzsa-gallery-item:focus-within .jzsa-gallery-thumb-fs-btn,
.jzsa-gallery-album .jzsa-gallery-item:focus-within .jzsa-gallery-thumb-link-btn,
.jzsa-gallery-album .jzsa-gallery-item:focus-within .jzsa-gallery-thumb-download-btn {
opacity: var(--jzsa-controls-visible-opacity);
pointer-events: auto;
}
.jzsa-gallery-album .jzsa-gallery-item:focus-within .jzsa-info-stack-top {
position: absolute;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 10;
}
.jzsa-gallery-album .jzsa-gallery-item:focus-within .jzsa-info-stack-top {
top: 4px;
}
.jzsa-gallery-album .jzsa-gallery-item:focus-within .jzsa-info-stack-top .jzsa-info-box {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
max-width: calc(100% - 8px);
}
/* Touch reveal via JS (covers iOS 13+ where hover:hover is reported but primary input is touch). */
.jzsa-gallery-album .jzsa-gallery-item.jzsa-item-touched .jzsa-gallery-thumb-fs-btn,
.jzsa-gallery-album .jzsa-gallery-item.jzsa-item-touched .jzsa-gallery-thumb-link-btn,
.jzsa-gallery-album .jzsa-gallery-item.jzsa-item-touched .jzsa-gallery-thumb-download-btn {
opacity: var(--jzsa-controls-visible-opacity);
pointer-events: auto;
}
/* gallery-buttons-on-mobile="always": permanently visible on touch devices (jzsa-touch-device class added by JS). */
.jzsa-gallery-album.jzsa-touch-device .jzsa-gallery-item .jzsa-gallery-thumb-fs-btn,
.jzsa-gallery-album.jzsa-touch-device .jzsa-gallery-item .jzsa-gallery-thumb-link-btn,
.jzsa-gallery-album.jzsa-touch-device .jzsa-gallery-item .jzsa-gallery-thumb-download-btn {
opacity: var(--jzsa-controls-visible-opacity);
pointer-events: auto;
}
/* gallery-buttons-on-mobile="on-tap": wink 3 times on one item as a discoverability hint. */
@keyframes jzsa-wink {
0% { opacity: 0; }
10% { opacity: var(--jzsa-controls-visible-opacity); }
24% { opacity: 0; }
34% { opacity: var(--jzsa-controls-visible-opacity); }
48% { opacity: 0; }
58% { opacity: var(--jzsa-controls-visible-opacity); }
72%, 100% { opacity: 0; }
}
.jzsa-gallery-item.jzsa-item-wink .jzsa-gallery-thumb-fs-btn,
.jzsa-gallery-item.jzsa-item-wink .jzsa-gallery-thumb-link-btn,
.jzsa-gallery-item.jzsa-item-wink .jzsa-gallery-thumb-download-btn {
animation: jzsa-wink 2s ease-in-out forwards;
pointer-events: none;
}
.jzsa-gallery-album .jzsa-gallery-item.jzsa-item-touched .jzsa-info-stack-top {
position: absolute;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 10;
}
.jzsa-gallery-album .jzsa-gallery-item.jzsa-item-touched .jzsa-info-stack-top {
top: 4px;
}
.jzsa-gallery-album .jzsa-gallery-item.jzsa-item-touched .jzsa-info-stack-top .jzsa-info-box {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
max-width: calc(100% - 8px);
}
.jzsa-gallery-album.jzsa-gallery-draggable {
cursor: grab;
user-select: none;
}
.jzsa-gallery-shell.jzsa-gallery-draggable {
cursor: grab;
}
.jzsa-gallery-album.jzsa-gallery-draggable .jzsa-gallery-thumb {
cursor: inherit;
}
.jzsa-gallery-album.jzsa-gallery-draggable.jzsa-gallery-grabbing {
cursor: grabbing;
}
.jzsa-gallery-shell.jzsa-gallery-draggable.jzsa-gallery-grabbing {
cursor: grabbing;
}
.jzsa-gallery-album.jzsa-gallery-draggable.jzsa-gallery-grabbing .jzsa-gallery-thumb {
cursor: inherit;
}
.jzsa-gallery-shell.jzsa-gallery-draggable .jzsa-gallery-slide-stage,
.jzsa-gallery-shell.jzsa-gallery-draggable .jzsa-gallery-slide-track,
.jzsa-gallery-shell.jzsa-gallery-draggable .jzsa-gallery-slide-panel {
cursor: inherit;
}
/* Pointer cursor on gallery items when click or double-click opens fullscreen.
Applies to both photo thumbnails and video cells. Must appear after the
draggable cursor rules above (same specificity, source-order wins). */
.jzsa-gallery-album[data-fullscreen-toggle="click"] .jzsa-gallery-thumb,
.jzsa-gallery-album[data-fullscreen-toggle="double-click"] .jzsa-gallery-thumb,
.jzsa-gallery-album[data-fullscreen-toggle="click"] .jzsa-gallery-item-video,
.jzsa-gallery-album[data-fullscreen-toggle="double-click"] .jzsa-gallery-item-video {
cursor: pointer;
}
.jzsa-gallery-album.jzsa-gallery-scrollable {
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
/* Gallery pagination controls (uses existing Swiper-style controls) */
.jzsa-gallery-shell {
position: relative;
margin-left: auto;
margin-right: auto;
}
.jzsa-gallery-shell.jzsa-gallery-shell-bounded {
overflow: hidden;
}
.jzsa-gallery-shell.jzsa-gallery-transitioning {
overflow: hidden;
}
.jzsa-gallery-controls {
position: absolute;
inset: 0;
z-index: 20;
background-color: transparent;
pointer-events: none;
}
.jzsa-gallery-controls .swiper-button-prev,
.jzsa-gallery-controls .swiper-button-next {
margin-top: 0;
top: 50%;
transform: translateY(-50%);
pointer-events: auto;
}
.jzsa-gallery-controls .swiper-pagination {
top: auto;
bottom: 10px;
left: 10px;
right: 10px;
transform: none;
margin: 0 auto;
max-width: max-content;
pointer-events: none;
opacity: var(--jzsa-controls-visible-opacity);
}
.jzsa-gallery-controls .swiper-button-fullscreen {
pointer-events: auto;
}
.jzsa-gallery-controls .swiper-button-play-pause {
width: var(--jzsa-controls-circle-size);
height: var(--jzsa-controls-circle-size);
bottom: 40px;
pointer-events: none;
}
.jzsa-gallery-controls.jzsa-gallery-slideshow-enabled .swiper-button-play-pause {
display: flex;
}
@media (hover: hover) and (pointer: fine) {
.jzsa-gallery-controls .swiper-button-prev,
.jzsa-gallery-controls .swiper-button-next,
.jzsa-gallery-controls .swiper-button-fullscreen {
opacity: 0;
pointer-events: none;
}
.jzsa-gallery-shell:hover .jzsa-gallery-controls .swiper-button-prev,
.jzsa-gallery-shell:hover .jzsa-gallery-controls .swiper-button-next,
.jzsa-gallery-shell:hover .jzsa-gallery-controls .swiper-button-fullscreen,
.jzsa-gallery-shell:focus-within .jzsa-gallery-controls .swiper-button-prev,
.jzsa-gallery-shell:focus-within .jzsa-gallery-controls .swiper-button-next,
.jzsa-gallery-shell:focus-within .jzsa-gallery-controls .swiper-button-fullscreen {
opacity: var(--jzsa-controls-visible-opacity);
pointer-events: auto;
}
.jzsa-gallery-controls.jzsa-gallery-slideshow-enabled .swiper-button-play-pause {
opacity: 0;
pointer-events: none;
}
.jzsa-gallery-shell:hover .jzsa-gallery-controls.jzsa-gallery-slideshow-enabled .swiper-button-play-pause,
.jzsa-gallery-shell:focus-within .jzsa-gallery-controls.jzsa-gallery-slideshow-enabled .swiper-button-play-pause {
opacity: var(--jzsa-controls-visible-opacity);
pointer-events: auto;
}
}
@media (hover: none), (pointer: coarse) {
.jzsa-gallery-controls.jzsa-gallery-slideshow-enabled .swiper-button-play-pause {
display: none;
opacity: 0;
pointer-events: none;
}
}
/* Single & carousel mode (desktop): hide controls until hover/focus, matching gallery UX. */
@media (hover: hover) and (pointer: fine) {
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-prev,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-next,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-fullscreen:not(.jzsa-gallery-thumb-fs-btn),
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-play-pause,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-external-link:not(.jzsa-carousel-slide-overlay-btn),
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-download:not(.jzsa-carousel-slide-overlay-btn) {
opacity: 0;
pointer-events: none;
animation: none;
}
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):hover .swiper-button-prev,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):hover .swiper-button-next,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):hover .swiper-button-fullscreen:not(.jzsa-gallery-thumb-fs-btn),
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):hover .swiper-button-play-pause,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):hover .swiper-button-external-link:not(.jzsa-carousel-slide-overlay-btn),
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):hover .swiper-button-download:not(.jzsa-carousel-slide-overlay-btn),
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):focus-within .swiper-button-prev,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):focus-within .swiper-button-next,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):focus-within .swiper-button-fullscreen:not(.jzsa-gallery-thumb-fs-btn),
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):focus-within .swiper-button-play-pause,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):focus-within .swiper-button-external-link:not(.jzsa-carousel-slide-overlay-btn),
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen):focus-within .swiper-button-download:not(.jzsa-carousel-slide-overlay-btn) {
opacity: var(--jzsa-controls-visible-opacity);
pointer-events: auto;
}
/* Fullscreen (desktop): same hide-on-mouse-away behavior */
.jzsa-album.swiper.jzsa-is-fullscreen .swiper-button-prev,
.jzsa-album.swiper.jzsa-is-fullscreen .swiper-button-next,
.jzsa-album.swiper.jzsa-is-fullscreen .swiper-button-fullscreen,
.jzsa-album.swiper.jzsa-is-fullscreen .swiper-button-play-pause,
.jzsa-album.swiper.jzsa-is-fullscreen .swiper-button-external-link,
.jzsa-album.swiper.jzsa-is-fullscreen .swiper-button-download,
.jzsa-album.swiper.jzsa-pseudo-fullscreen .swiper-button-prev,
.jzsa-album.swiper.jzsa-pseudo-fullscreen .swiper-button-next,
.jzsa-album.swiper.jzsa-pseudo-fullscreen .swiper-button-fullscreen,
.jzsa-album.swiper.jzsa-pseudo-fullscreen .swiper-button-play-pause,
.jzsa-album.swiper.jzsa-pseudo-fullscreen .swiper-button-external-link,
.jzsa-album.swiper.jzsa-pseudo-fullscreen .swiper-button-download {
opacity: 0;
pointer-events: none;
animation: none;
}
.jzsa-album.swiper.jzsa-is-fullscreen:hover .swiper-button-prev,
.jzsa-album.swiper.jzsa-is-fullscreen:hover .swiper-button-next,
.jzsa-album.swiper.jzsa-is-fullscreen:hover .swiper-button-fullscreen,
.jzsa-album.swiper.jzsa-is-fullscreen:hover .swiper-button-play-pause,
.jzsa-album.swiper.jzsa-is-fullscreen:hover .swiper-button-external-link,
.jzsa-album.swiper.jzsa-is-fullscreen:hover .swiper-button-download,
.jzsa-album.swiper.jzsa-pseudo-fullscreen:hover .swiper-button-prev,
.jzsa-album.swiper.jzsa-pseudo-fullscreen:hover .swiper-button-next,
.jzsa-album.swiper.jzsa-pseudo-fullscreen:hover .swiper-button-fullscreen,
.jzsa-album.swiper.jzsa-pseudo-fullscreen:hover .swiper-button-play-pause,
.jzsa-album.swiper.jzsa-pseudo-fullscreen:hover .swiper-button-external-link,
.jzsa-album.swiper.jzsa-pseudo-fullscreen:hover .swiper-button-download {
opacity: var(--jzsa-controls-visible-opacity);
pointer-events: auto;
}
}
/* Touch devices (inline slider): hide all controls until tap; reveal via jzsa-touch-active class. */
@media (hover: none), (pointer: coarse) {
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-prev,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-next,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-play-pause,
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-external-link:not(.jzsa-carousel-slide-overlay-btn),
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-download:not(.jzsa-carousel-slide-overlay-btn),
.jzsa-album.swiper:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-fullscreen:not(.jzsa-gallery-thumb-fs-btn):not(.jzsa-carousel-slide-overlay-btn) {
opacity: 0;
pointer-events: none;
animation: none;
transition: opacity var(--jzsa-controls-fade-duration) var(--jzsa-controls-fade-easing);
}
.jzsa-album.swiper.jzsa-touch-active:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-prev,
.jzsa-album.swiper.jzsa-touch-active:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-next,
.jzsa-album.swiper.jzsa-touch-active:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-play-pause,
.jzsa-album.swiper.jzsa-touch-active:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-external-link:not(.jzsa-carousel-slide-overlay-btn),
.jzsa-album.swiper.jzsa-touch-active:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-download:not(.jzsa-carousel-slide-overlay-btn),
.jzsa-album.swiper.jzsa-touch-active:not(.jzsa-is-fullscreen):not(.jzsa-pseudo-fullscreen) .swiper-button-fullscreen:not(.jzsa-gallery-thumb-fs-btn):not(.jzsa-carousel-slide-overlay-btn) {
opacity: var(--jzsa-controls-visible-opacity);
pointer-events: auto;
}
}
/* Keep play/pause visible while the autoresume countdown ring is actually shown. */
.jzsa-album.jzsa-countdown-ring-visible .swiper-button-play-pause {
opacity: var(--jzsa-controls-visible-opacity) !important;
pointer-events: auto !important;
}
.jzsa-gallery-slide-stage {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
pointer-events: none;
z-index: 15;
}
.jzsa-gallery-slide-track {
display: flex;
width: 200%;
transition: transform 0.6s ease;
}
.jzsa-gallery-slide-panel {
flex: 0 0 50%;
max-width: 50%;
overflow: hidden;
}
.jzsa-gallery-slide-panel .jzsa-justified-row:last-child {
margin-bottom: 0;
}
.jzsa-gallery-slide-panel .jzsa-gallery-thumb {
display: block;
}
.jzsa-gallery-slide-panel .jzsa-gallery-thumb:hover {
opacity: 1;
}
.jzsa-gallery-slide-panel .jzsa-gallery-thumb,
.jzsa-gallery-slide-panel .jzsa-justified-row,
.jzsa-gallery-slide-panel img {
pointer-events: none;
}
/* ============================================================================
Gallery fullscreen slideshow (hidden until fullscreen is entered)
============================================================================ */
/* Gallery fullscreen slideshow: rendered off-screen at viewport size so Swiper can
measure dimensions during init. The existing .jzsa-album:fullscreen and
.jzsa-album.jzsa-pseudo-fullscreen CSS handles the rest - exactly the same
mechanism used by slideshow/carousel/gallery modes. */
.jzsa-gallery-slideshow {
position: fixed;
left: -200vw;
width: 100vw;
height: 100dvh;
}
/* ============================================================================
Video support
============================================================================ */
/* --- Video slide in Swiper (slider/carousel/fullscreen slideshow) --- */
/* Video wrapper: shared across slider and gallery modes */
.jzsa-video-wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
z-index: 11;
}
/* In slider/carousel slides, wrapper fills the slide */
.jzsa-slide-video .jzsa-video-wrapper {
overflow: hidden;
}
.jzsa-video-player {
width: 100%;
height: 100%;
object-fit: contain;
outline: none;
position: relative;
z-index: 11;
background-color: var(--gallery-bg-color, #FFFFFF);
}
/* Gallery: video wrapper fills the grid cell */
.jzsa-gallery-item-video .jzsa-video-wrapper {
overflow: hidden;
border-radius: var(--jzsa-corner-radius, 0);
}
/* Uniform layout: inherit the aspect-ratio cell size */
.jzsa-gallery-album[data-gallery-layout="grid"] .jzsa-gallery-item-video .jzsa-video-wrapper {
aspect-ratio: 4 / 3;
}
/* Justified layout: fill the explicitly-sized item */
.jzsa-gallery-album[data-gallery-layout="justified"] .jzsa-gallery-item-video {
overflow: hidden;
}
.jzsa-gallery-album[data-gallery-layout="justified"] .jzsa-gallery-item-video .jzsa-video-wrapper {
position: absolute;
inset: 0;
}
/* Gallery: video fills its wrapper, cropped to fit */
.jzsa-gallery-item-video .jzsa-video-player {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Plyr integration --- */
/* Plyr container fills the video wrapper (inside the 16px padding) */
.jzsa-video-wrapper .plyr {
width: calc(100% + 2px);
height: calc(100% + 2px);
margin: -1px;
position: relative;
/* Plyr defaults to min-width: 200px; allow narrow carousel cells. */
min-width: 0;
}
.jzsa-video-wrapper .plyr__video-wrapper {
height: 100%;
}
/* Plyr controls must sit above the video (z-index 11) */
.jzsa-video-wrapper .plyr__control--overlaid,
.jzsa-video-wrapper .plyr__controls {
z-index: 15;
}
/* Play-large button uses accent color + slow fade out on click.
Force full opacity so Plyr's default semi-transparent bg doesn't leak the
native play triangle through. Instant hide (no transition) so it
disappears in sync with the duration label. */
.jzsa-video-wrapper .plyr__control--overlaid {
--jzsa-play-scale: 1.25;
background: var(--jzsa-video-controls-color, #00b2ff) !important;
opacity: 1;
transition: none !important;
transform: translate(-50%, -50%) scale(var(--jzsa-play-scale));
}
.jzsa-video-wrapper .plyr__control--overlaid svg {
transform: scale(0.8);
}
/* Duration badge on the video wrapper - independent of the player so it
survives player destroy/re-init cycles (e.g. fullscreen toggle).
Hidden by default; shown only via jzsa-show-duration on the wrapper,
which JS sets when the big play button is in its default triangle state. */
.jzsa-video-duration {
--jzsa-play-scale: 1.25;
--jzsa-play-btn-radius: 24px;
--jzsa-duration-offset: 0.45; /* fraction of radius from center to bottom edge */
display: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, calc(var(--jzsa-play-scale) * var(--jzsa-play-btn-radius) * var(--jzsa-duration-offset)));
font-size: 10px;
line-height: 1;
color: #fff;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
white-space: nowrap;
z-index: 16;
pointer-events: none;
}
.jzsa-video-wrapper.jzsa-show-duration > .jzsa-video-duration {
display: block;
}
/* Play button loading state - override Plyr's own hide so the button stays
visible (covering the Google poster triangle) until actual playback. */
.jzsa-video-wrapper .plyr__control--overlaid.jzsa-plyr-loading {
visibility: visible !important;
opacity: 0.5 !important;
display: flex !important;
animation: jzsa-plyr-pulse 1s ease-in-out infinite;
pointer-events: auto;
cursor: pointer;
}
.jzsa-video-wrapper .plyr__control--overlaid.jzsa-plyr-loading svg {
visibility: hidden;
/* Keep left:0 so the pause icon below is centered (overrides Plyr's left:2px for the triangle) */
left: 0;
}
/* Pause icon (two vertical bars) shown during loading, matching 0.8× of Plyr's icon size */
.jzsa-video-wrapper .plyr__control--overlaid.jzsa-plyr-loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 1px), -50%);
width: 3.2px;
height: 12.8px;
border-left: 3.2px solid #fff;
border-right: 3.2px solid #fff;
box-sizing: content-box;
z-index: 1;
}
.jzsa-video-wrapper .plyr__control--overlaid.jzsa-plyr-loading::after {
content: '';
position: absolute;
inset: 0;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: jzsa-plyr-spin 0.8s linear infinite;
}
@keyframes jzsa-plyr-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(var(--jzsa-play-scale)); }
50% { transform: translate(-50%, -50%) scale(calc(var(--jzsa-play-scale) * 0.95)); }
}
@keyframes jzsa-plyr-spin {
to { transform: rotate(360deg); }
}
/* During playback, keep the big play button in the DOM at near-zero opacity
so it stays clickable (toggles pause). This prevents accidental fullscreen
exit when the user clicks the center area expecting to pause. */
.jzsa-video-wrapper .plyr--playing .plyr__control--overlaid {
display: flex !important;
visibility: visible !important;
opacity: 0.01 !important;
pointer-events: auto !important;
}
/* Loading spinner takes priority over the near-invisible playing state. */
.jzsa-video-wrapper .plyr--playing .plyr__control--overlaid.jzsa-plyr-loading {
opacity: 0.5 !important;
}
/* Error state - blue button stays, triangle turns red so user can retry */
.jzsa-video-wrapper .plyr__control--overlaid.jzsa-plyr-error {
visibility: visible !important;
opacity: 1 !important;
display: flex !important;
}
.jzsa-video-wrapper .plyr__control--overlaid.jzsa-plyr-error svg {
color: #e74c3c;
}
/* Play button + duration badge scale proportionally with container width.
--jzsa-play-scale must be set on descendants (not the container element
itself) because @container queries cannot style their own container. */
@container (min-width: 500px) {
.jzsa-video-wrapper .plyr__control--overlaid,
.jzsa-video-duration {
--jzsa-play-scale: 1.5;
}
.jzsa-video-duration {
font-size: 11px;
}
}
@container (min-width: 800px) {
.jzsa-video-wrapper .plyr__control--overlaid,
.jzsa-video-duration {
--jzsa-play-scale: 1.75;
}
.jzsa-video-duration {
font-size: 12px;
}
}
@container (min-width: 1200px) {
.jzsa-video-wrapper .plyr__control--overlaid,
.jzsa-video-duration {
--jzsa-play-scale: 2.0;
}
.jzsa-video-duration {
font-size: 13px;
}
}
/* Plyr control bar accent + compact volume */
.jzsa-video-wrapper .plyr {
--plyr-color-main: var(--jzsa-video-controls-color, #00b2ff);
--plyr-range-fill-background: var(--jzsa-video-controls-color, #00b2ff);
}
/* Responsive Plyr controls */
/* PlayMute */
/* PlayRestartMute */
/* PlayRestartProgressMute */
/* PlayRestartProgressMuteVolume */
/* PlayRestartProgressTimeMuteVolume */
.jzsa-video-wrapper {
container-type: inline-size;
}
.jzsa-video-wrapper .plyr .plyr__controls {
padding-left: 12px !important;
padding-right: 12px !important;
gap: 4px;
}
.jzsa-video-wrapper .plyr__controls .plyr__progress__container {
flex: 1 1 0;
min-width: 0;
pointer-events: none;
opacity: 0.4;
cursor: default;
}
/* Progress is intentionally non-seekable, but volume must remain interactive. */
.jzsa-video-wrapper .plyr__volume input[type="range"] {
pointer-events: auto;
cursor: pointer;
}
/* Mute button never hides - it acts as the right-side boundary
preventing the progress bar from overflowing. */
/* PlayMute default: hide restart + progress + volume slider + time */
.jzsa-video-wrapper .plyr__controls .plyr__progress__container,
.jzsa-video-wrapper .plyr__volume input[type="range"],
.jzsa-video-wrapper .plyr__time,
.jzsa-video-wrapper [data-plyr="restart"] {
display: none;
}
/* PlayRestartMute: show restart */
@container (min-width: 130px) {
.jzsa-video-wrapper [data-plyr="restart"] {
display: inline-flex;
margin-right: auto;
}
}
/* PlayRestartProgressMute: show progress */
@container (min-width: 160px) {
.jzsa-video-wrapper [data-plyr="restart"] {
margin-right: 0;
}
.jzsa-video-wrapper .plyr__controls .plyr__progress__container {
display: block;
}
}
/* PlayRestartProgressMuteVolume: show volume slider */
@container (min-width: 260px) {
.jzsa-video-wrapper .plyr__volume input[type="range"] {
display: block;
width: 70px;
min-width: 70px;
max-width: 70px;
}
}
/* PlayRestartProgressTimeMuteVolume: show time */
@container (min-width: 360px) {
.jzsa-video-wrapper .plyr__time {
display: inline-flex;
}
}
/* Context-aware control layering (Option D):
- Video slide, not playing: album controls visible, Plyr bar hidden, play button + duration shown
- Video playing: album controls fade out, Plyr bar shown */
.jzsa-album.jzsa-video-playing .swiper-pagination,
.jzsa-album.jzsa-video-playing .swiper-button-play-pause {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.3s ease;
}
/* --- Video badge on gallery thumbnails --- */
.jzsa-gallery-item-video {
position: relative;
}
.jzsa-video-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
pointer-events: none;
z-index: 2;
transition: transform 0.15s ease, background 0.15s ease;
}
.jzsa-gallery-item-video:hover .jzsa-video-badge {
transform: translate(-50%, -50%) scale(1.1);
background: rgba(0, 0, 0, 0.75);
}
.jzsa-video-badge-icon {
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 9px 0 9px 16px;
border-color: transparent transparent transparent #fff;
}
/* ============================================================================
Mosaic (thumbnail strip alongside the main gallery)
============================================================================ */
/* Wrapper: flexbox layout for gallery + mosaic strip side by side */
.jzsa-gallery-wrapper {
display: flex;
gap: 8px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.jzsa-gallery-wrapper.jzsa-mosaic-left { flex-direction: row-reverse; }
.jzsa-gallery-wrapper.jzsa-mosaic-right { flex-direction: row; }
.jzsa-gallery-wrapper.jzsa-mosaic-top { flex-direction: column-reverse; }
.jzsa-gallery-wrapper.jzsa-mosaic-bottom { flex-direction: column; }
/* Main gallery fills remaining space */
.jzsa-gallery-wrapper .jzsa-album {
flex: 1;
min-width: 0;
min-height: 0;
}
/* Side rail: left/right placement */
.jzsa-gallery-wrapper.jzsa-mosaic-left .jzsa-mosaic,
.jzsa-gallery-wrapper.jzsa-mosaic-right .jzsa-mosaic {
width: var(--mosaic-width, 250px);
height: 100%;
max-height: 100%;
flex-shrink: 0;
overflow: hidden;
position: relative;
background: transparent;
border-radius: var(--jzsa-mosaic-corner-radius, var(--jzsa-corner-radius, 0));
}
/* Horizontal strip: top/bottom placement */
.jzsa-gallery-wrapper.jzsa-mosaic-top .jzsa-mosaic,
.jzsa-gallery-wrapper.jzsa-mosaic-bottom .jzsa-mosaic {
width: 100%;
height: var(--mosaic-strip-height, 120px);
flex-shrink: 0;
overflow: hidden;
position: relative;
background: transparent;
border-radius: var(--jzsa-mosaic-corner-radius, var(--jzsa-corner-radius, 0));
}
/* Thumbnail slides */
.jzsa-mosaic .swiper-slide {
cursor: pointer;
opacity: var(--jzsa-mosaic-opacity, 0.3);
transition: all 0.3s ease;
overflow: hidden;
border-radius: var(--jzsa-mosaic-corner-radius, var(--jzsa-corner-radius, 0));
width: 100%;
}
/* Horizontal strip: height from padding-bottom trick (Swiper must not override) */
.jzsa-mosaic:not(.jzsa-mosaic-vertical) .swiper-slide {
height: auto !important;
}
/* Inner wrapper forces square thumbnails via padding-bottom trick (horizontal mode) */
.jzsa-mosaic .jzsa-mosaic-thumb-inner {
display: block;
width: 100%;
padding-bottom: 100%;
height: 0;
position: relative;
overflow: hidden;
border-radius: inherit;
}
/* Vertical mode: let Swiper control slide heights; thumb fills the slide */
.jzsa-mosaic.jzsa-mosaic-vertical .jzsa-mosaic-thumb-inner {
padding-bottom: 0;
height: 100%;
}
.jzsa-mosaic .jzsa-mosaic-thumb-inner img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.jzsa-mosaic .swiper-slide:hover {
opacity: 0.8;
transform: scale(1.02);
}
.jzsa-mosaic .swiper-slide-thumb-active {
opacity: 1;
outline: 3px solid var(--jzsa-controls-color, #0b57d0);
outline-offset: -3px;
}
/* Mosaic navigation arrows */
.jzsa-mosaic .jzsa-mosaic-arrow {
position: absolute;
z-index: 10;
opacity: 0;
transition: opacity 0.3s;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--jzsa-controls-color, #fff);
--swiper-navigation-color: var(--jzsa-controls-color, #fff);
--swiper-navigation-size: 16px;
}
.jzsa-mosaic:hover .jzsa-mosaic-arrow {
opacity: 1;
}
.jzsa-mosaic .jzsa-mosaic-arrow:after {
transition: transform 0.15s ease;
}
.jzsa-mosaic:hover .jzsa-mosaic-arrow:hover:after {
transform: scale(1.1);
}
/* Vertical rail: combine rotation with scale on hover */
.jzsa-gallery-wrapper.jzsa-mosaic-left .jzsa-mosaic-arrow-prev:hover::after,
.jzsa-gallery-wrapper.jzsa-mosaic-right .jzsa-mosaic-arrow-prev:hover::after,
.jzsa-gallery-wrapper.jzsa-mosaic-left .jzsa-mosaic-arrow-next:hover::after,
.jzsa-gallery-wrapper.jzsa-mosaic-right .jzsa-mosaic-arrow-next:hover::after {
transform: rotate(90deg) scale(1.1);
}
/* Horizontal strip (top/bottom): full-height clickable zone flush to left/right edges */
.jzsa-gallery-wrapper.jzsa-mosaic-top .jzsa-mosaic-arrow-prev,
.jzsa-gallery-wrapper.jzsa-mosaic-bottom .jzsa-mosaic-arrow-prev {
top: 0 !important; bottom: 0 !important; height: 100% !important;
left: -6px !important; right: auto !important; width: 36px !important;
margin: 0 !important;
background: transparent !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.jzsa-gallery-wrapper.jzsa-mosaic-top .jzsa-mosaic-arrow-next,
.jzsa-gallery-wrapper.jzsa-mosaic-bottom .jzsa-mosaic-arrow-next {
top: 0 !important; bottom: 0 !important; height: 100% !important;
right: -6px !important; left: auto !important; width: 36px !important;
margin: 0 !important;
background: transparent !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Vertical rail (left/right): full-width clickable zone flush to top/bottom edges */
.jzsa-gallery-wrapper.jzsa-mosaic-left .jzsa-mosaic-arrow-prev,
.jzsa-gallery-wrapper.jzsa-mosaic-right .jzsa-mosaic-arrow-prev {
left: 0 !important; right: 0 !important; width: 100% !important;
top: 0 !important; bottom: auto !important; height: 36px !important;
margin: 0 !important;
background: transparent !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.jzsa-gallery-wrapper.jzsa-mosaic-left .jzsa-mosaic-arrow-next,
.jzsa-gallery-wrapper.jzsa-mosaic-right .jzsa-mosaic-arrow-next {
left: 0 !important; right: 0 !important; width: 100% !important;
bottom: 0 !important; top: auto !important; height: 36px !important;
margin: 0 !important;
background: transparent !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Rotate SVG icon for vertical rails */
.jzsa-gallery-wrapper.jzsa-mosaic-left .jzsa-mosaic-arrow-prev::after,
.jzsa-gallery-wrapper.jzsa-mosaic-right .jzsa-mosaic-arrow-prev::after {
transform: rotate(90deg);
}
.jzsa-gallery-wrapper.jzsa-mosaic-left .jzsa-mosaic-arrow-next::after,
.jzsa-gallery-wrapper.jzsa-mosaic-right .jzsa-mosaic-arrow-next::after {
transform: rotate(90deg);
}
/* Responsive: collapse to horizontal strip on small screens */
@media (max-width: 480px) {
.jzsa-gallery-wrapper {
flex-direction: column !important;
}
.jzsa-gallery-wrapper .jzsa-mosaic {
width: 100% !important;
height: 80px !important;
}
.jzsa-mosaic .jzsa-mosaic-arrow {
display: none !important;
}
}