style.scss

@import url("https://use.typekit.net/dho1oij.css");

$dark-grey: #000D0C;
$grey-one: #2F403E;
$grey-two: #485958;
$grey: #888C8C;
$light: #F2F1E9;
$white: #fff;
$black: #000;


html {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: url("https://meilune.github.io/video-player/background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: komet,sans-serif;
    font-weight: 500;
    font-style: normal;
    color: $light;
    &:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        background: rgba(72, 89, 88, 0.7);
    }
}

h1, h2 {
    font-family: komet,sans-serif;
    font-weight: 700;
    font-style: normal;
}

.fa-solid {
    font-size: 28px;
    padding: 0.5rem;
    transition: 0.3s;
    cursor: pointer;
    &:hover {
        color: $grey-one;
    }
}

section {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin: auto;
    height: 100vh;
        .player {
            min-width: 800px;
            border: $dark-grey 5px solid;
            background: $dark-grey;
            border-radius: 20px;
            position: relative;
            video {
                border-radius: 20px;
                width: 100%;
                height: auto;
            }
        }

}
// Controls
.show-controls {
    width: 100%;
    height: 40%;
    z-index: 99;
    position: absolute;
    bottom:0;
    cursor: default;
}

.controls-container {
    position: absolute;
    max-width: 100%;
    height: 95px;
    margin-top: -95px;
    background-color: rgba(242, 241, 233, 0.5);
    border-radius: 0 0 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.2s ease-out 1.5s;
    .progress-range {
        height: 7px;
        width: 100%;
        background-color: $light;
        cursor: pointer;
        transition: 0.3s;
        .progress-bar {
            height: 100%;
            width: 60%;
            background-color: $grey-two;
        }
        &:hover{
            background-color: $grey;
            .progress-bar {
                background-color: $grey-one;
            }
        }
    }
    .control-group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem 2rem;
        .controls-left {
            display: flex;
            flex-direction: row;
            .volume {
                display: flex;
                flex-direction: row;
                align-items: center;
                .volume-range {
                    height: 5px;
                    width: 75px;
                    border-radius: 10px;
                    background-color: $light;
                    cursor: pointer;
                    transition: 0.3s;
                    .volume-bar {
                        position: relative;
                        background-color: $grey-two;
                        width: 100%;
                        height: 100%;
                        border-radius: 10px;
                        transition: width 0.2s ease-in;
                    }
                    &:hover{
                        background-color: $grey;
                        .volume-bar {
                            background-color: $grey-one;
                        }
                    }
                }
            }
        }
        .controls-right {
            display: flex;
            flex-direction: row;
            align-items: center;
            .speed {
                select {
                    background-color: transparent;
                    border: none;
                    font-size: 16px;
                    box-shadow: none;
                    option {
                        background-color: $grey-one !important;
                    }
                }
                select, option {
                    cursor: pointer;
                    color: $light;
                    &:focus {
                        outline: none;
                    }
                }
            }
            .time {
                padding: 0 1rem;
            }
        }
    }
    &:hover {
        opacity: 1;
        transition: all 0.2s ease-in;
    }
}

// Fullscreen
.video-fullscreen {
    position:relative;
    display: flex;
    justify-content: center;
    align-content: center;
}


@media screen and (max-width: 800px) {
    section {
        .player {
            min-width: unset;
            max-width: 95vw;
        }
    }
}

@media screen and (max-width: 600px) {
    section {
        .player {
            min-width: unset;
            max-width: 95vw;
        }

        .controls-container {
            .control-group {
                display: flex;
                flex-direction: column;
                justify-content: center;
                .controls-left {
                    justify-content: center;
                }
                .controls-right {
                    justify-content: center;
                }
            }
        }
    }
}