Daniel@0: @import "../config.less";
Daniel@0: 
Daniel@0: .player {
Daniel@0:     
Daniel@0:     @height: 90px;
Daniel@0:     @message-top: 15px;
Daniel@0:     @commands-top: 32px;
Daniel@0:     @padding-h: 10px;
Daniel@0:     
Daniel@0:     @command-size_small: 15px;
Daniel@0:     
Daniel@0:     position: relative;
Daniel@0:     height: @height;
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &_modifier {
Daniel@0:         
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     &__body {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__command {
Daniel@0:         display: block;
Daniel@0:         position: absolute;
Daniel@0:         width: @player--command-size;
Daniel@0:         height: @player--command-size;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__command:focus {
Daniel@0:         outline: none;
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__command i {
Daniel@0:         display: block;
Daniel@0:         position: absolute;
Daniel@0:         width: @player--command-size;
Daniel@0:         height: @player--command-size;
Daniel@0:         background-repeat: no-repeat;
Daniel@0:         background-position: center center;
Daniel@0:         opacity: 0.05;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__command_state_enabled {
Daniel@0:         display: block;
Daniel@0:         .cursor_action();
Daniel@0:     }
Daniel@0:     &__command_state_enabled i {
Daniel@0:         opacity: 0.35;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__command_state_enabled:hover i {
Daniel@0:         opacity: 1;
Daniel@0:     }
Daniel@0:     &__command_flashing i,
Daniel@0:     &__command_state_enabled:active i {
Daniel@0:         //background: mix(@config-grid--color_collection, #fff, 20%);
Daniel@0:         top: 1px;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     .jp-state-playing &__command_action_play {
Daniel@0:         display: none;
Daniel@0:     }
Daniel@0:     &__command_action_pause {
Daniel@0:         display: none;
Daniel@0:     }
Daniel@0:     .jp-state-playing &__command_action_pause {
Daniel@0:          display: block;
Daniel@0:     }
Daniel@0:     &__command_action_play, &__command_action_pause {
Daniel@0:         top: @commands-top;
Daniel@0:         left: @padding-h - 4px;
Daniel@0:     }
Daniel@0:     &__command_action_download {
Daniel@0:         top: @commands-top - 1;
Daniel@0:         left: 35px;
Daniel@0:         //right: @padding-h;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__command_action_play i {
Daniel@0:         background-image: url("@{bem-path}/player/command/play.svg");
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__command_action_pause i {
Daniel@0:         background-image: url("@{bem-path}/player/command/pause.svg");
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__command_action_download i {
Daniel@0:         background-image: url("@{bem-path}/player/command/download_cloud.svg");
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__command_action_volume-up i {
Daniel@0:         background-size: 50%;
Daniel@0:         background-image: url("@{bem-path}/player/command/volume-up.svg");
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__command_action_volume-down i {
Daniel@0:         background-size: 45%;
Daniel@0:         background-image: url("@{bem-path}/player/command/volume-down.svg");
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__command_action_volume-mute i {
Daniel@0:         background-size: 35%;
Daniel@0:         background-image: url("@{bem-path}/player/command/volume-mute.svg");
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__command_action_volume-down, &__command_action_volume-mute, &__command_action_volume-up {
Daniel@0:         top: @commands-top;
Daniel@0:     }
Daniel@0:     &__command_action_volume-down, &__command_action_volume-mute {
Daniel@0:         left: 90px;
Daniel@0:     }
Daniel@0:     &__command_action_volume-up {
Daniel@0:         right: 5px;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__label {
Daniel@0:         position: absolute;
Daniel@0:         .font_small();
Daniel@0:         left: @padding-h;
Daniel@0:         right: @padding-h;
Daniel@0:         white-space: nowrap;
Daniel@0:         overflow: hidden;
Daniel@0:         //color: @config-grid--color_panel-label;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__label_row_1 {
Daniel@0:         top: 4px;
Daniel@0:     }
Daniel@0:     &__label_row_2 {
Daniel@0:         top: 15px;
Daniel@0:     }
Daniel@0:     &__label-fader {
Daniel@0:         position: absolute;
Daniel@0:         top: 0;
Daniel@0:         right: @padding-h;
Daniel@0:         height: 30px;
Daniel@0:         width: @config-grid--header-fader-width;
Daniel@0:         .text-fader-background-gradient(#eee);
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__time {
Daniel@0:         position: absolute;
Daniel@0:         .font_small();
Daniel@0:         color: @config-grid--color_panel-label;
Daniel@0:         top: 70px;
Daniel@0:     }
Daniel@0:     &__time_type_before {
Daniel@0:         left: 10px;
Daniel@0:     }
Daniel@0:     &__time_type_after {
Daniel@0:         right: 10px;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__slider-container {
Daniel@0:     }
Daniel@0:     &__slider-container_type_time {
Daniel@0:         position: absolute;
Daniel@0:         left: 10px;
Daniel@0:         right: 10px;
Daniel@0:         top: 60px;
Daniel@0:         height: 15px;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__slider-container_type_volume {
Daniel@0:         position: absolute;
Daniel@0:         left: 115px;
Daniel@0:         right: 35px;
Daniel@0:         top: 36px;
Daniel@0:         height: 18px;
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__slider {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:         border-top: 5px solid;
Daniel@0:         border-bottom: 5px solid;
Daniel@0:         color: #eee;
Daniel@0:         background: rgba(0, 0, 0, 5%);
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__slider-head {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:         right: auto;
Daniel@0:         background: rgba(0, 0, 0, 35%);
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__slider:hover {
Daniel@0:         background: rgba(0, 0, 0, 15%);
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__slider:hover &__slider-head {
Daniel@0:         background: #000;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__cover {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__message {
Daniel@0:         .position_absolute_everywhere;
Daniel@0:         padding-top: @message-top;
Daniel@0:         text-align: center;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__message_type_error {
Daniel@0:         
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__message_type_loading {
Daniel@0:         
Daniel@0:     }
Daniel@0: }