view src/DML/MainVisBundle/Resources/assets/bem-blocks/player.less @ 0:493bcb69166c

added public content

@import "../config.less";

.player {
    
    @height: 90px;
    @message-top: 15px;
    @commands-top: 32px;
    @padding-h: 10px;
    
    @command-size_small: 15px;
    
    position: relative;
    height: @height;

    // ----------------------------------
    &_modifier {
        
    }
    
    // ==================================
    &__body {
        .position_absolute_everywhere();
    }

    // ==================================
    &__command {
        display: block;
        position: absolute;
        width: @player--command-size;
        height: @player--command-size;
    }
    
    &__command:focus {
        outline: none;
    }

    &__command i {
        display: block;
        position: absolute;
        width: @player--command-size;
        height: @player--command-size;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0.05;
    }
    
    &__command_state_enabled {
        display: block;
        .cursor_action();
    }
    &__command_state_enabled i {
        opacity: 0.35;
    }
    
    &__command_state_enabled:hover i {
        opacity: 1;
    }
    &__command_flashing i,
    &__command_state_enabled:active i {
        //background: mix(@config-grid--color_collection, #fff, 20%);
        top: 1px;
    }

    // ----------------------------------
    .jp-state-playing &__command_action_play {
        display: none;
    }
    &__command_action_pause {
        display: none;
    }
    .jp-state-playing &__command_action_pause {
         display: block;
    }
    &__command_action_play, &__command_action_pause {
        top: @commands-top;
        left: @padding-h - 4px;
    }
    &__command_action_download {
        top: @commands-top - 1;
        left: 35px;
        //right: @padding-h;
    }

    // ----------------------------------
    &__command_action_play i {
        background-image: url("@{bem-path}/player/command/play.svg");
    }

    // ----------------------------------
    &__command_action_pause i {
        background-image: url("@{bem-path}/player/command/pause.svg");
    }

    // ----------------------------------
    &__command_action_download i {
        background-image: url("@{bem-path}/player/command/download_cloud.svg");
    }

    // ----------------------------------
    &__command_action_volume-up i {
        background-size: 50%;
        background-image: url("@{bem-path}/player/command/volume-up.svg");
    }

    // ----------------------------------
    &__command_action_volume-down i {
        background-size: 45%;
        background-image: url("@{bem-path}/player/command/volume-down.svg");
    }

    // ----------------------------------
    &__command_action_volume-mute i {
        background-size: 35%;
        background-image: url("@{bem-path}/player/command/volume-mute.svg");
    }
    
    &__command_action_volume-down, &__command_action_volume-mute, &__command_action_volume-up {
        top: @commands-top;
    }
    &__command_action_volume-down, &__command_action_volume-mute {
        left: 90px;
    }
    &__command_action_volume-up {
        right: 5px;
    }

    // ==================================
    &__label {
        position: absolute;
        .font_small();
        left: @padding-h;
        right: @padding-h;
        white-space: nowrap;
        overflow: hidden;
        //color: @config-grid--color_panel-label;
    }

    // ----------------------------------
    &__label_row_1 {
        top: 4px;
    }
    &__label_row_2 {
        top: 15px;
    }
    &__label-fader {
        position: absolute;
        top: 0;
        right: @padding-h;
        height: 30px;
        width: @config-grid--header-fader-width;
        .text-fader-background-gradient(#eee);
    }

    // ==================================
    &__time {
        position: absolute;
        .font_small();
        color: @config-grid--color_panel-label;
        top: 70px;
    }
    &__time_type_before {
        left: 10px;
    }
    &__time_type_after {
        right: 10px;
    }

    // ==================================
    &__slider-container {
    }
    &__slider-container_type_time {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 60px;
        height: 15px;
    }
    
    &__slider-container_type_volume {
        position: absolute;
        left: 115px;
        right: 35px;
        top: 36px;
        height: 18px;
    }

    &__slider {
        .position_absolute_everywhere();
        border-top: 5px solid;
        border-bottom: 5px solid;
        color: #eee;
        background: rgba(0, 0, 0, 5%);
    }

    // ==================================
    &__slider-head {
        .position_absolute_everywhere();
        right: auto;
        background: rgba(0, 0, 0, 35%);
    }

    &__slider:hover {
        background: rgba(0, 0, 0, 15%);
    }
    
    &__slider:hover &__slider-head {
        background: #000;
    }

    // ==================================
    &__cover {
        .position_absolute_everywhere();
    }

    // ==================================
    &__message {
        .position_absolute_everywhere;
        padding-top: @message-top;
        text-align: center;
    }

    // ----------------------------------
    &__message_type_error {
        
    }

    // ----------------------------------
    &__message_type_loading {
        
    }
}