.rbd-gallery-main {
position: relative;
}
.rbd-gallery-open {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: zoom-in;
}
.rbd-gallery-open img {
display: block;
}
.rbd-gallery-open-label {
position: absolute;
right: 18px;
bottom: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(14, 17, 18, 0.86);
color: #ffffff;
font-size: 0.82rem;
font-weight: 800;
line-height: 1;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
transition: background-color 160ms ease, transform 160ms ease;
}
.rbd-gallery-open-label::before {
content: "⌕";
color: var(--rbd-orange);
font-size: 1.2rem;
line-height: 1;
}
.rbd-gallery-open:hover .rbd-gallery-open-label,
.rbd-gallery-open:focus-visible .rbd-gallery-open-label {
background: var(--rbd-orange);
color: var(--rbd-black);
transform: translateY(-2px);
}
.rbd-gallery-open:hover .rbd-gallery-open-label::before,
.rbd-gallery-open:focus-visible .rbd-gallery-open-label::before {
color: currentColor;
}
.rbd-gallery-open:focus-visible {
outline: 3px solid var(--rbd-orange);
outline-offset: 3px;
}
body.rbd-lightbox-open {
overflow: hidden;
}
.rbd-gallery-lightbox[hidden] {
display: none !important;
}
.rbd-gallery-lightbox {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
place-items: center;
padding: clamp(14px, 3vw, 36px);
background: rgba(5, 7, 8, 0.92);
opacity: 0;
visibility: hidden;
transition: opacity 180ms ease, visibility 180ms ease;
}
.rbd-gallery-lightbox.is-open {
opacity: 1;
visibility: visible;
}
.rbd-gallery-lightbox-dialog {
width: min(1600px, 96vw);
height: min(94vh, 1100px);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 14px;
background: #0e1112;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58);
max-width: 60% }
.rbd-gallery-lightbox-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 14px 16px 14px 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
background: #171a1b;
}
.rbd-gallery-lightbox-title {
margin: 0;
color: #ffffff;
font-size: 0.94rem;
font-weight: 900;
}
.rbd-gallery-lightbox-actions {
display: flex;
align-items: center;
gap: 10px;
}
.rbd-gallery-download,
.rbd-gallery-close {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
background: transparent;
color: #ffffff;
font: inherit;
font-size: 0.82rem;
font-weight: 800;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.rbd-gallery-download:hover,
.rbd-gallery-download:focus-visible,
.rbd-gallery-close:hover,
.rbd-gallery-close:focus-visible {
border-color: var(--rbd-orange);
background: var(--rbd-orange);
color: var(--rbd-black);
outline: none;
}
.rbd-gallery-close-symbol {
font-size: 1.35rem;
font-weight: 400;
line-height: 0.8;
}
.rbd-gallery-lightbox-zoom {
position: relative;
min-width: 0;
min-height: 0;
display: grid;
place-items: center;
overflow: hidden;
background:
linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.025) 75%),
linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.025) 75%),
#080a0b;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
background-size: 20px 20px;
cursor: zoom-in;
touch-action: pan-x pan-y;
}
.rbd-gallery-lightbox-image {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform: scale(1);
transform-origin: 50% 50%;
transition: transform 170ms ease;
user-select: none;
-webkit-user-drag: none;
}
.rbd-gallery-lightbox-zoom.is-zoomed {
cursor: zoom-out;
}
.rbd-gallery-lightbox-zoom.is-zoomed .rbd-gallery-lightbox-image {
transform: scale(2.25);
}
.rbd-gallery-lightbox-help {
margin: 0;
padding: 11px 18px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: #171a1b;
color: #aeb3b5;
font-size: 0.75rem;
text-align: center;
display: none;
}
@media (max-width: 760px) {
.rbd-gallery-open-label {
right: 12px;
bottom: 12px;
padding: 9px 11px;
font-size: 0.74rem;
}
.rbd-gallery-lightbox {
padding: 0;
}
.rbd-gallery-lightbox-dialog {
width: 100vw;
height: 100dvh;
border: 0;
border-radius: 0;
}
.rbd-gallery-lightbox-toolbar {
padding: 10px 10px 10px 14px;
}
.rbd-gallery-lightbox-title {
display: none;
}
.rbd-gallery-lightbox-actions {
width: 100%;
justify-content: flex-end;
}
.rbd-gallery-download,
.rbd-gallery-close {
min-height: 40px;
padding: 9px 11px;
}
.rbd-gallery-lightbox-help {
font-size: 0.7rem;
}
.rbd-gallery-lightbox-zoom.is-zoomed .rbd-gallery-lightbox-image {
transform: scale(2);
}
}
@media (prefers-reduced-motion: reduce) {
.rbd-gallery-lightbox,
.rbd-gallery-lightbox-image,
.rbd-gallery-open-label {
transition: none;
}
} span.rbd-gallery-open-label {
display: none;
}