.mll-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); display: flex;
justify-content: center;
align-items: center;
z-index: 99998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; cursor: pointer; }
.mll-overlay.mll-visible {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0s linear 0s;
} .mll-content {
position: relative;
max-width: 90%;
max-height: 90%;
display: flex; justify-content: center;
align-items: center;
cursor: default; } .mll-image {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain; user-select: none; opacity: 0; transform: scale(0.9); transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s; }
.mll-overlay.mll-visible .mll-image {
opacity: 1;
transform: scale(1);
} .mll-close {
position: absolute;
top: -30px; right: -20px;
width: 30px;
height: 30px;
background: none;
border: none;
color: #fff;
font-size: 28px;
line-height: 30px;
text-align: center;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s ease;
z-index: 99999; }
.mll-close:hover {
opacity: 1;
} .mll-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
border: none;
color: #fff;
font-size: 24px;
line-height: 50px; text-align: center;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease;
z-index: 99999;
display: none; user-select: none; }
.mll-nav:hover {
opacity: 1;
}
.mll-prev {
left: 10px;
}
.mll-next {
right: 10px;
} .mll-loading .mll-image {
opacity: 0; } .mll-loading::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: mll-spin 1s linear infinite;
z-index: 99999; }
@keyframes mll-spin {
to { transform: rotate(360deg); }
} @media (max-width: 600px) {
.mll-close {
top: 5px;
right: 5px;
background-color: rgba(0,0,0,0.4);
border-radius: 3px;
}
.mll-nav {
width: 35px;
height: 40px;
line-height: 40px;
font-size: 20px;
}
.mll-prev { left: 5px; }
.mll-next { right: 5px; }
}