.fancybox__container {
--fancybox-bg: rgba(0, 0, 0, 0.95);
overflow: hidden !important;
width: 100vw;
height: 100vh;
}
.fancybox__viewport {
padding: 0 !important;
}
.fancybox__carousel {
overflow: visible !important;
}
.fancybox__slide {
padding: 0 !important;
width: 100vw !important;
height: auto;
display: flex !important;
align-items: center !important;
justify-content: center !important;
} .fancybox__content {
position: relative !important;
width: 100% !important;
height: 100% !important;
max-width: 100vw !important;
max-height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
} .fancybox__content>iframe {
position: relative !important;
max-width: 100vw !important;
max-height: 100vh !important;
object-fit: contain !important;
display: block !important;
margin: auto !important;
} .fancybox-shorts-wrapper .fancybox__slide {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 80vh !important;
}
.fancybox-shorts-wrapper .fancybox__content {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.fancybox-shorts-wrapper .fancybox__content>iframe {
max-width: 100vw !important;
max-height: 100vh !important;
margin: auto !important;
} .fancybox__toolbar {
position: fixed !important;
top: 0;
right: 0;
z-index: 99999;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
padding: 15px;
}
.fancybox__button {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
} .fancybox__nav.fancybox__nav--prev {
left: 10px;
}
.fancybox__nav.fancybox__nav--next {
right: 10px;
}
.fancybox__nav button {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
background: rgba(0, 0, 0, 0.5) !important;
border-radius: 50%;
}
.fancybox__nav button:hover {
background: rgba(0, 0, 0, 0.7) !important;
} .fancybox__caption {
position: fixed !important;
bottom: 0;
left: 0;
right: 0;
padding: 15px 20px;
font-size: 14px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
z-index: 99998;
max-height: 20vh;
overflow-y: auto;
} .fancybox__infobar {
position: fixed !important;
top: 15px;
left: 15px;
z-index: 99999;
font-size: 13px;
padding: 5px 12px;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: rgba(255, 255, 255, 0.8);
} .fancybox__thumbs {
position: fixed !important;
bottom: 0;
left: 0;
right: 0;
z-index: 99997;
background: rgba(0, 0, 0, 0.7);
}
@media (max-width: 1024px) {
.fancybox__thumbs {
display: none !important;
}
} .fancybox__spinner {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99996;
} @media (max-width: 1024px) {
.fancybox__toolbar {
padding: 10px;
}
.fancybox__button {
width: 44px;
height: 44px;
}
.fancybox__nav button {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
}
.fancybox__nav.fancybox__nav--prev {
left: 5px;
}
.fancybox__nav.fancybox__nav--next {
right: 5px;
}
.fancybox__caption {
padding: 10px 15px;
font-size: 13px;
}
.fancybox__infobar {
font-size: 11px;
padding: 4px 8px;
top: 10px;
left: 10px;
}
} @media (hover: none) and (pointer: coarse) {
.fancybox__nav button {
opacity: 0.8;
}
.fancybox__nav button:active {
opacity: 1;
transform: scale(0.95);
}
.fancybox__button:active {
transform: scale(0.95);
}
} @supports (-webkit-touch-callout: none) {
.fancybox__slide {
height: -webkit-fill-available !important;
}
.fancybox__content>iframe {
max-height: -webkit-fill-available !important;
}
} @supports (padding: max(0px)) {
.fancybox__toolbar {
padding-top: max(15px, env(safe-area-inset-top));
padding-right: max(15px, env(safe-area-inset-right));
}
.fancybox__caption {
padding-bottom: max(15px, env(safe-area-inset-bottom));
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
.fancybox__nav.fancybox__nav--prev {
left: max(10px, env(safe-area-inset-left));
}
.fancybox__nav.fancybox__nav--next {
right: max(10px, env(safe-area-inset-right));
}
} .fancybox__content {
transition: none !important;
}
.fancybox__slide {
transition: none !important;
} .fancybox__carousel.is-dragging .fancybox__slide {
transition: opacity 0.15s ease !important;
} .fancybox__track {
display: flex !important;
align-items: center !important;
}
.has-iframe {
display: flex !important;
align-items: center !important;
justify-content: center !important;
} @media (orientation: portrait) { .fancybox-shorts-wrapper .fancybox__content>iframe {
max-height: 95vh !important;
}
}
@media (orientation: landscape) { .fancybox__content>iframe {
max-width: 95vw !important;
}
}