.sw-lightbox-trigger {
cursor: zoom-in;
}
.sw-lightbox-open {
overflow: hidden;
}
.sw-lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
place-items: center;
padding: 64px 72px;
background: var(--t-lightbox-pozadi, rgba(0, 0, 0, 0.92));
color: var(--t-lightbox-barva, #ffffff);
backdrop-filter: var(--t-lightbox-rozmazani, none);
-webkit-backdrop-filter: var(--t-lightbox-rozmazani, none);
}
.sw-lightbox.is-open {
display: grid;
}
.sw-lightbox__figure {
display: grid;
gap: 10px;
justify-items: center;
position: relative;
max-width: 100%;
max-height: 100%;
margin: 0;
}
.sw-lightbox__img {
display: block;
max-width: 100%;
max-height: calc(100vh - 170px);
object-fit: contain;
border-radius: var(--t-lightbox-zaobleni, 0px);
box-shadow: var(--t-lightbox-stin, none);
opacity: 0;
transition: opacity 0.15s ease;
}
.sw-lightbox__img.is-visible {
opacity: 1;
}
.sw-lightbox__caption {
color: var(--t-lightbox-barva, #ffffff);
font-size: 0.9375rem;
text-align: center;
}
.sw-lightbox__spinner {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 28px;
margin: -14px 0 0 -14px;
border: 2px solid color-mix(in srgb, var(--t-lightbox-barva, #ffffff) 30%, transparent);
border-top-color: var(--t-lightbox-barva, #ffffff);
border-radius: 50%;
animation: sw-lightbox-otoc 0.8s linear infinite;
}
.sw-lightbox__figure:not(.is-loading) .sw-lightbox__spinner {
display: none;
}
@keyframes sw-lightbox-otoc {
to { transform: rotate(360deg); }
}
.sw-lightbox__icon-btn,
.sw-lightbox__nav,
.sw-lightbox__download {
display: grid;
min-width: 44px;
min-height: 44px;
padding: 0 12px;
place-items: center;
border: var(--t-lightbox-tlacitko-ramecek, 1px solid var(--t-lightbox-barva, #ffffff));
border-radius: var(--t-lightbox-tlacitko-zaobleni, 0px);
background: var(--t-lightbox-tlacitko-pozadi, transparent);
color: var(--t-lightbox-barva, #ffffff);
}
.sw-lightbox__icon-btn:hover,
.sw-lightbox__nav:hover,
.sw-lightbox__download:hover {
background: var(--t-lightbox-barva, #ffffff);
color: var(--t-lightbox-barva-opacna, #111111);
}
.sw-lightbox :focus-visible {
outline-color: var(--t-lightbox-barva, #ffffff);
}
.sw-lightbox__close {
position: absolute;
top: 12px;
right: 12px;
}
.sw-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.sw-lightbox__nav--prev { left: 12px; }
.sw-lightbox__nav--next { right: 12px; }
.sw-lightbox__download {
position: absolute;
bottom: 12px;
left: 50%;
display: inline-flex;
gap: 8px;
align-items: center;
font-weight: 700;
transform: translateX(-50%);
}
@media (max-width: 620px) {
.sw-lightbox {
padding: 64px 12px;
}
}