2020-11-16 19:04:24 +08:00
|
|
|
.image-viewer-container {
|
2022-09-30 10:51:42 +08:00
|
|
|
position fixed
|
|
|
|
top 0
|
|
|
|
left 0
|
|
|
|
z-index $z-index-8
|
|
|
|
display flex
|
|
|
|
align-items center
|
|
|
|
justify-content center
|
|
|
|
box-sizing border-box
|
|
|
|
width 100%
|
|
|
|
height 100%
|
|
|
|
padding 6%
|
|
|
|
background rgba(0, 0, 0, 0)
|
|
|
|
visibility hidden
|
|
|
|
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
|
2020-11-16 19:04:24 +08:00
|
|
|
|
2020-12-31 16:28:39 +08:00
|
|
|
&.active {
|
2022-09-30 10:51:42 +08:00
|
|
|
background rgba(0, 0, 0, 0.5)
|
|
|
|
visibility visible
|
2020-11-16 19:04:24 +08:00
|
|
|
|
|
|
|
img {
|
2022-09-30 11:36:38 +08:00
|
|
|
padding 0.2rem
|
2022-09-30 10:51:42 +08:00
|
|
|
background var(--background-color)
|
|
|
|
transform scale(1)
|
|
|
|
cursor zoom-out
|
2020-11-16 19:04:24 +08:00
|
|
|
}
|
|
|
|
}
|
2020-12-31 16:28:39 +08:00
|
|
|
|
|
|
|
img {
|
2022-09-30 10:51:42 +08:00
|
|
|
max-width 100%
|
|
|
|
max-height 100%
|
|
|
|
transform scale(0)
|
|
|
|
transition-t("transform", "0", "0.3", "ease")
|
2020-12-31 16:28:39 +08:00
|
|
|
}
|
2020-11-16 19:04:24 +08:00
|
|
|
}
|
2020-12-31 16:28:39 +08:00
|
|
|
|
|
|
|
|