Sith/core/static/com/slideshow.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;
        }
    }
}