.modernist-lightbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease-in-out;
backdrop-filter: blur(5px);
}
.modernist-lightbox-overlay.is-active {
opacity: 1;
} .modernist-lightbox-container {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
box-sizing: border-box;
} .modernist-lightbox-image {
max-width: 100%;
max-height: 90vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
} .modernist-lightbox-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 2rem;
height: 2rem;
background-color: transparent;
border: none;
font-size: 2rem;
line-height: 1;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000000;
transition: all 0.2s ease-in-out;
padding: 0;
margin: 0;
}
.modernist-lightbox-close:hover,
.modernist-lightbox-close:focus {
color: #fff;
transform: scale(1.15);
outline: none;
}
.modernist-lightbox-close:active {
transform: scale(0.95);
} .modernist-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 3rem;
height: 3rem;
background-color: transparent;
border: none;
font-size: 2.5rem;
line-height: 1;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000000;
transition: all 0.2s ease-in-out;
padding: 0;
margin: 0;
user-select: none;
}
.modernist-lightbox-nav:hover,
.modernist-lightbox-nav:focus {
color: #fff;
transform: translateY(-50%) scale(1.2);
outline: none;
}
.modernist-lightbox-nav:active {
transform: translateY(-50%) scale(0.95);
}
.modernist-lightbox-prev {
left: 1.5rem;
}
.modernist-lightbox-next {
right: 1.5rem;
} .modernist-lightbox-prev[style*="display: none"] {
display: none !important;
}
.modernist-lightbox-next[style*="display: none"] {
display: none !important;
} .modernist-lightbox-enabled {
transition: opacity 0.2s ease-in-out;
}
.modernist-lightbox-enabled:hover {
opacity: 0.9;
} @media (max-width: 768px) {
.modernist-lightbox-container {
padding: 1rem;
max-width: 95vw;
}
.modernist-lightbox-close {
width: 2rem;
height: 2rem;
font-size: 1.75rem;
top: 1rem;
right: 1rem;
}
.modernist-lightbox-image {
max-height: 85vh;
}
.modernist-lightbox-nav {
width: 2.5rem;
height: 2.5rem;
font-size: 2rem;
}
.modernist-lightbox-prev {
left: 0.5rem;
}
.modernist-lightbox-next {
right: 0.5rem;
}
}