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%;

            }

        }

        .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;

        }

    }

}