/* ==================================================
Simantics Services 5Player - Small
A simple embedded HTML5 media player
Copyright (c) 2022 Simantics Services
All rights reserved
================================================== */


/* == VARIABLES == */

:root {
    --lightblue: #33CCFF;
    --medblue: #0099CC;
    --meddarkblue: #007399;
    --darkblue: #005082;
}


/* == UNIVERSAL ELEMENTS == */

* {
    margin: 0;
    padding: 0;
}

.hidden {
    display: none;
}

.control-buttons .visible {
    display: block;
}


/* == SECTIONS == */

.ss5player {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: max-content;
}

.player {
    padding: 0px;
}

.media-cover{
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
}

.media-cover .cover-art {
    background-image: url("../images/multimedia.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.media-cover .cover-artist {
    font-family: 'brush script mt', cursive;    
    color: var(--darkblue);
    position: absolute;
    top: 58%;
    -webkit-text-stroke-width: .03vw;
    -webkit-text-stroke-color: white;
}

.tracker {
    display: grid;
    grid-template-columns: 2% 96% 2%;
    grid-template-rows: max-content;
    align-items: center;
    /* column-gap: 4px; */
}

.timecur,
.timedur {
    font-family: verdana;
    font-size: 1.0vw;
    color: var(--meddarkblue);
    text-align: center;
}

.trackbar {
    position: relative;
    background-color: var(--meddarkblue);
    width: 100%;
    margin-top: 2px;
}

.trackbar .ui-slider-range {
    background-color: var(--lightblue);
    height: 100%;
    position: absolute;
}

.trackbar .ui-slider-handle {
    position: absolute;
    background: white;
    opacity: 0.6;
    border-radius: 10px;
    outline-color: var(--darkblue);
    outline: auto;
}

.media-title,
.media-artist,
.media-track,
.media-date {
    font-family: verdana;
    text-align: center;
}

.media-title {
    color: var(--meddarkblue);
    font-weight: bold;
}

.media-artist {
    color: var(--medblue);
}

.media-track,
.media-date {
    color: var(--lightblue);
    font-size: 1.2vw;
}

.control-buttons {
    display: grid;
    grid-template-columns: auto 45px 50px 45px auto;
    align-items: center;
}


/* == CONTROL BUTTONS == */

.control-buttons .prev-sm,
.control-buttons .prev-sm:Active,
.control-buttons .next-sm,
.control-buttons .next-sm:Active,
.control-buttons .play,
.control-buttons .play:Active,
.control-buttons .pause,
.control-buttons .pause:Active {
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.control-buttons .prev-sm,
.control-buttons .prev-sm:Active,
.control-buttons .next-sm,
.control-buttons .next-sm:Active {
    width: 45px;
    height: 44px;
}

.prev-sm {
    background-image: url("../images/control-buttons/ctrl-btns-up-prev-sm-007399.png");
}

.prev-sm:Active {
    background-image: url("../images/control-buttons/ctrl-btns-dn-prev-sm-007399.png");
}

.next-sm {
    background-image: url("../images/control-buttons/ctrl-btns-up-next-sm-007399.png");
}

.next-sm:Active {
    background-image: url("../images/control-buttons/ctrl-btns-dn-next-sm-007399.png");
}

.control-buttons .play,
.control-buttons .play:Active,
.control-buttons .pause,
.control-buttons .pause:Active,
.control-buttons .play-pause,
.control-buttons .play-pause:Active {
    /* top: 50%; */
    /* transform: translateY(-50%); */
    width: 50px;
    height: 50px;
}

.play {
    background-image: url("../images/control-buttons/ctrl-btns-up-play-007399.png");
}


/*.play:Active {
            background-image: url("../images/control-buttons/ctrl-btns-dn-play-007399.png");
        } */

.pause {
    background-image: url("../images/control-buttons/ctrl-btns-up-pause-007399.png");
    display: none;
}


/*.pause:Active {
            background-image: url("../images/control-buttons/ctrl-btns-dn-pause-007399.png");
            display: none;
        } */

.play-pause {
    background-image: url("../images/control-buttons/ctrl-btns-up-playpause-007399.png");
}

.play-pause:Active {
    background-image: url("../images/control-buttons/ctrl-btns-dn-playpause-007399.png");
}


/* == PLAYLIST == */

.playlist {
    font-family: Verdana;
    padding-top: 20px;
    height: 630px;
    overflow-y: scroll;
}

.playlist li {
    color: var(--darkblue);
    cursor: pointer;
    margin: 0 0 5px 0px;
}

.playlist li.active {
    font-weight: bold;
}


/* == RESPONSIVE == */

@media only screen and (max-width: 599px) {
    .ss5player {
        grid-template-columns: 100%;
        justify-items: center;
    }
    .player {
        width: 300px;
    }
    .cover-art {
        height: 300px;
        width: 300px;
    }
    .media-cover .cover-artist{
        font-size: 13vw;
        line-height: 85%;
    }
    .media-title {
        font-size: 4vw;
    }
    .media-artist {
        font-size: 3.5vw;
    }
    .playlist {
        font-size: 3vw;
        text-align: center;
    }
    .trackbar {
        height: 20px;
    }
    .trackbar {
        height: 10px;
    }
    .trackbar .ui-slider-handle {
        margin: -1px 0 0 -7px;
        height: 12px;
        width: 14px;
    }
}

@media only screen and (min-width: 600px) {
    .ss5player {
        grid-template-columns: max-content auto;
        column-gap: 20px;
    }
    .player {
        width: 40vw;
        max-width: 500px;
    }
    .cover-art {
        height: 40vw;
        max-height: 500px;
        width: 40vw;
        max-width: 500px;
    }
    .media-cover .cover-artist{
        font-size: 7vw;
        line-height: 85%;
    }
    .media-title {
        font-size: 30px;
    }
    .media-artist {
        font-size: 20px;
    }
    .playlist {
        font-size: 20px;
        text-align: left;
    }
    .trackbar {
        height: 10px;
    }
    .trackbar {
        height: 14px;
    }
    .trackbar .ui-slider-handle {
        margin: -1px 0 0 -10px;    
        height: 16px;
        width: 20px;
    }    
}