metro4/source/components/media-player/media-player.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/default-icons";
@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.media-player {
    display: block;
    position: relative;
    width: 100%;
    background: #000;
    height: auto;
    overflow: hidden;
    z-index: 1;

    video {
        width: 100%;
        height: 100%;
        z-index: 1;
    }
}

.media-player {
    .logo {
        display: block;
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        z-index: 3;
        height: 32px;

        img {
            height: 32px;
        }
    }

    .preloader {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        .translateX(-50%);
        .translateY(-50%);

        &.show {
            display: block;
        }
    }
}

.media-player {
    .controls {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        z-index: 2147483647;
        background-color: @playerControlsBackground;

        &.outside {
            position: relative;
        }
    }

    .stream {
        display: block;
        padding: .625rem;
        order: 5;
        width: 100%;
        position: relative;

        .slider {
            height: .875rem;
        }
    }

    .load-audio {
        padding: 0;
        display: block;
        position: absolute;
        bottom: 4px;
        left: .625rem;
        width: ~"calc(100% - 1.25rem)";
    }

    button {
        &:focus {
            box-shadow: none!important;
        }
    }

    .controls > button, .info-box, .volume {
        background-color: inherit;
        color: @playerInactiveColor;
        flex-shrink: 0;
        height: 36px;
        text-align: center;

        &:hover {
            color: @playerHoverColor;
        }

        &.active {
            background-color: lighten(@playerControlsBackground, 30%);
        }
    }

    .loop {
        order: 1;
        display: none;
    }

    .play {
        order: 2;
    }

    .stop {
        order: 3;
        display: none;
    }

    .info-box {
        position: relative;
        width: auto;
        display: block;
        order: 4;
        background: @playerControlsBackground;
        color: @playerHoverColor;
        padding: 0.625rem;
        font-size: .6875rem;
        text-align: center;
        height: 36px;
        flex-shrink: 1;
        white-space: nowrap;
        border: none;
    }

    .mute {
        order: 6;
    }

    .volume {
        order: 7;
        width: 96px;
        padding: 0 .625rem;
        background: @playerControlsBackground;
        display: none;
    }

    .full {
        order: 8;
    }
}

:-webkit-full-screen {
    width: 100%;
    height: 100%;
    z-index: @zindex-fullscreen;
}

:-ms-fullscreen {
    width: 100%;
}

.media-player {
    &.full-screen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: @zindex-fullscreen;
        max-height: 100%!important;
        height: 100%!important;
    }
}

.media-player {
    &.light {

        background-color: @light;

        .controls {
            background-color: inherit;

            .info-box, .volume {
                background-color: inherit;
                color: @dark;
            }
        }

        .slider {
            .buffer {
                height: 2px!important;
                background-color: @darkGrayBlue;
            }
        }

        .controls > button {
            &.active {
                background-color: darken(@light, 10%);
            }
        }
    }
}

.media-player:not(.light), .media-player.dark {
    .default-icon-loop {background-image: url(@loopIconLight);}
    .default-icon-play {background-image: url(@playIconLight);}
    .default-icon-pause {background-image: url(@pauseIconLight);}
    .default-icon-stop {background-image: url(@stopIconLight);}
    .default-icon-mute {background-image: url(@muteIconLight);}
    .default-icon-low-volume {background-image: url(@volumeLowIconLight);}
    .default-icon-medium-volume {background-image: url(@volumeMediumIconLight);}
    .default-icon-high-volume {background-image: url(@volumeHighIconLight);}
    .default-icon-enlarge {background-image: url(@enlargeIconLight);}
    .default-icon-shrink {background-image: url(@shrinkIconLight);}
    .default-icon-playlist {background-image: url(@playlistIconLight);}
    .default-icon-next {background-image: url(@nextIconLight);}
    .default-icon-prev {background-image: url(@prevIconLight);}
    .default-icon-first {background-image: url(@firstIconLight);}
    .default-icon-last {background-image: url(@lastIconLight);}
    .default-icon-forward {background-image: url(@forwardIconLight);}
    .default-icon-backward {background-image: url(@backwardIconLight);}
    .default-icon-share {background-image: url(@shareIconLight);}
    .default-icon-equalizer {background-image: url(@equalizerIconLight);}
    .default-icon-eject {background-image: url(@ejectIconLight);}
    .default-icon-shuffle {background-image: url(@shuffleIconLight);}
    .default-icon-random {background-image: url(@randomIconLight);}
}

.audio-player {
    overflow: visible;
    .controls {
        position: relative;
    }
}

@media screen and (min-width: @sm){
    .media-player {
        .volume, .loop, .stop {
            display: block;
        }
    }
}