Sith/core/static/com/slideshow.scss
2017-11-28 15:09:05 +01:00

210 lines
2.6 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%;
}
}
.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 40s linear;
}
}
}