comparison 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 {
+        
+    }
+}