Bilibili-Evolved/style/style-image-viewer.scss

85 lines
1.5 KiB
SCSS

html.image-viewer-opened, body.image-viewer-opened
{
overflow: hidden !important;
}
.image-viewer-container
{
background: rgba(0,0,0,0.85);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100000;
display: none;
justify-content: center;
align-items: center;
}
/*
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))
{
.image-viewer-container
{
background: rgba(0,0,0,0.618);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
}
*/
.image-viewer-container.opened
{
display: flex;
}
.image-viewer
{
width: 90%;
height: 90%;
display: grid;
grid-template-columns: auto 48px;
grid-template-rows: 48px auto 48px;
grid-template-areas: "image close" "image ." "image download";
grid-column-gap: 12px;
justify-items: center;
justify-content: stretch;
align-items: center;
align-content: stretch;
}
.image-viewer .image
{
grid-area: image;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.image-viewer .close
{
grid-area: close;
}
.image-viewer .download
{
grid-area: download;
}
.image-viewer-icon
{
cursor: pointer;
width: 100%;
height: 100%;
}
.image-viewer-icon svg
{
max-width: 48px;
max-height: 48px;
}
.image-viewer-icon path
{
fill: #eee;
transition: all 0.2s;
transform-origin: center;
}
.image-viewer-icon:hover path
{
fill: $customStyleColor;
transform: scale(1.2);
}