.viewer-overlay{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.95);
z-index:10000;
opacity:0;
visibility:hidden;
transition:opacity 80ms ease,visibility 80ms ease;
}
.viewer-overlay.act{
opacity:1;
visibility:visible;
}
.viewer-container{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
display:flex;
align-items:center;
justify-content:center;
}
.viewer-img{
max-width:100vw;
max-height:100vh;
width:auto;
height:auto;
object-fit:contain;
opacity:0;
transition:opacity 80ms ease;
user-select:none;
-webkit-user-select:none;
}
.viewer-img.loaded{
opacity:1;
}
.viewer-close{
position:fixed;
top:16px;
right:16px;
width:40px;
height:40px;
background:rgba(255,255,255,0.15);
border:none;
border-radius:50%;
color:#fff;
font-size:24px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:opacity 80ms ease,background 80ms ease;
z-index:10001;
}
.viewer-overlay.act .viewer-close{
opacity:0.8;
}
.viewer-close:hover{
opacity:1;
background:rgba(255,255,255,0.25);
}
.viewer-loader{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:36px;
height:36px;
border:3px solid rgba(255,255,255,0.15);
border-top-color:#fff;
border-radius:50%;
animation:viewer-spin 0.6s linear infinite;
z-index:10001;
}
.viewer-loader.hidden{
display:none;
}
@keyframes viewer-spin{
to{transform:translate(-50%,-50%) rotate(360deg);}
}