Sith/core/static/com/slideshow.scss
2024-07-25 16:46:45 +02:00

150 lines
2.0 KiB
SCSS

body{
position: absolute;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
#slideshow{
position: relative;
background-color: lightgrey;
height: 100%;
*{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
&:hover{
&::before{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
content: "Click to expand";
color: white;
background-color: rgba(black, 0.5);
}
}
&.fullscreen{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: none;
&:before{
display:none;
}
#slides{
height: 100vh;
}
}
#slides{
position: relative;
height: 100%;
overflow: hidden;
.slide{
position: absolute;
width: 100%;
height: 100%;
display: inline-flex;
justify-content: center;
top: 0px;
background-color: grey;
transition: left 1s ease-out;
img{
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
.slide.left{
left: -100%;
}
.slide.center{
left: 0px;
}
.slide.right{
left: 100%;
transition: none;
}
}
#progress_bullets{
position: absolute;
bottom: 10px;
width: 100%;
height: 10px;
display: flex;
justify-content: center;
margin-bottom: 10px;
.bullet{
height: 10px;
width: 10px;
margin-left: 5px;
margin-right: 5px;
border-radius: 50%;
background-color: grey;
&.active{
background-color: #c99836;
}
}
}
#progress_bar{
position: absolute;
bottom: 0px;
height: 10px;
background-color: #304c83;
&.init{
width: 0px;
transition: none;
}
&.progress{
width: 100%;
transition: width 10s linear;
}
}
}