hexo-theme-keep/source/css/layout/_partial/image-viewer.styl

38 lines
704 B
Stylus

.image-viewer-container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0);
visibility: hidden;
z-index: $z-index-8;
padding: 6%;
box-sizing: border-box;
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease");
&.active {
background: rgba(0, 0, 0, 0.5);
visibility: visible;
img {
cursor: zoom-out;
transform: scale(1);
padding: 2px;
background: var(--background-color);
}
}
img {
max-width: 100%;
max-height: 100%;
transform: scale(0);
transition-t("transform", "0", "0.3", "ease");
}
}