mirror of
https://github.com/mickael-kerjean/filestash.git
synced 2025-11-04 05:27:04 +08:00
52 lines
1.4 KiB
SCSS
52 lines
1.4 KiB
SCSS
.component_mapshot{
|
|
overflow: hidden;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
.wrapper{
|
|
position: relative;
|
|
.marker{
|
|
position: absolute;
|
|
z-index: 1;
|
|
img{width: 30px; height: 30px;}
|
|
}
|
|
&:hover .bigpicture{
|
|
transition: 0.4s ease transform;
|
|
transform: scale(3);
|
|
}
|
|
.bigpicture{
|
|
transition: 0.2s ease transform;
|
|
.line{
|
|
display: flex;
|
|
width: 33.33%;
|
|
img{ filter: grayscale(10%); }
|
|
.btl{border-top-left-radius: 2px;}
|
|
.btr{border-top-right-radius: 2px;}
|
|
.bbl{border-bottom-left-radius: 2px;}
|
|
.bbr{border-bottom-right-radius: 2px;}
|
|
}
|
|
}
|
|
.mapshot_placeholder{
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
border-radius: 2px;
|
|
background: var(--color);
|
|
span{
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
.component_loader, div{
|
|
margin: auto;
|
|
color: var(--light);
|
|
svg{height: 50px;}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.loaded .mapshot_placeholder{display: none;}
|
|
&.error .mapshot_placeholder.loading{display: none;}
|
|
}
|