Daniel@0: @import "../../config.less";
Daniel@0: 
Daniel@0: .vic-list {
Daniel@0:     .font_small();
Daniel@0:     padding-top: 5px;
Daniel@0:     
Daniel@0:     @item-height: 15px;
Daniel@0:     @command-size: 15px;
Daniel@0:     @command-top: 0px;
Daniel@0: 
Daniel@0:     @action-right_audio: 35px;
Daniel@0:     @action-right_analyze: 50px;
Daniel@0:     
Daniel@0:     // ----------------------------------
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     &__item {
Daniel@0:         position: relative;
Daniel@0:         height: @item-height;
Daniel@0:         line-height: @item-height;
Daniel@0: //        color: @config-grid--color_panel-label;
Daniel@0:         color: @config-grid--color_panel-label-hovered;
Daniel@0:         cursor: pointer;
Daniel@0:         .border-radius(@--border-radius);
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__item:hover {
Daniel@0:         //color: @config-grid--color_panel-label-hovered;
Daniel@0:         background: mix(@config-grid--color_panel-background, #fff, 50%);
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__item_status_selected {
Daniel@0:         .cursor_std();
Daniel@0:         background: @config-grid--color_panel-background !important;
Daniel@0:     }
Daniel@0:     
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__item-label {
Daniel@0:         position: absolute;
Daniel@0:         left: @config-grid--cells--header-padding-left;
Daniel@0:         right: 70px;
Daniel@0:         height: 15px;
Daniel@0:         overflow: hidden;
Daniel@0:         white-space: nowrap;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__item-year {
Daniel@0:         position: absolute;
Daniel@0:         top: 0;
Daniel@0:         right: @config-grid--cells--header-padding-left;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__item-audio {
Daniel@0:         
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__item-command {
Daniel@0:         pointer-events: none;
Daniel@0:         display: block;
Daniel@0:         position: absolute;
Daniel@0:         height: @command-size;
Daniel@0:         width: @command-size;
Daniel@0:         top: @command-top;
Daniel@0:     }
Daniel@0:     &__item-command i {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__item_status_selected &__item-command {
Daniel@0:         .cursor_action();
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__item_status_selected &__item-command:active {
Daniel@0:         top: 1px;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__item-command_action_audio {
Daniel@0:         right: @action-right_audio;
Daniel@0:         opacity: .2;
Daniel@0:     }
Daniel@0:     &__item_status_selected &__item-command_action_audio {
Daniel@0:         opacity: .5;
Daniel@0:         pointer-events: all; 
Daniel@0:     }
Daniel@0:     &__item_status_selected &__item-command_action_audio:hover {
Daniel@0:         opacity: 1;
Daniel@0:         
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__item-command_action_audio i {
Daniel@0:         background-size: @command-size;
Daniel@0:         background-position: center center;
Daniel@0:         background-image: url("@{bem-path}/vis-instance-content/vic-list/item-command_action_play_note_2.svg");
Daniel@0:     }
Daniel@0: 
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__item-command_action_analyze {
Daniel@0:         right: @action-right_analyze;
Daniel@0:     }
Daniel@0:     
Daniel@0: 
Daniel@0:     &__item-command_action_analyze {
Daniel@0:         display: none;
Daniel@0:     }
Daniel@0: 
Daniel@0:     @circle-size: 7px;
Daniel@0:     @circle-offset: 3px;
Daniel@0:     @smaller-by: 6px;
Daniel@0:     &__item-command_action_analyze i{
Daniel@0:         border: 1px solid @config-grid_recording--color_main;
Daniel@0:         height: @circle-size;
Daniel@0:         width: @circle-size;
Daniel@0:         .border-radius(@circle-size);
Daniel@0:     }
Daniel@0:         //right: @action-right_analyze + @smaller-by / 2 + 1;
Daniel@0: 
Daniel@0:     &__item-command_action_analyze&__item-command_status_toggled {
Daniel@0:         display: block;
Daniel@0:         //opacity: 0.5;
Daniel@0:     }
Daniel@0:     &__item-command_action_analyze&__item-command_status_toggled i {
Daniel@0:         background: @config-grid_recording--color_main;
Daniel@0:         border: 1px solid @config-grid_recording--color_main;
Daniel@0:         height: @circle-size - @smaller-by;
Daniel@0:         width: @circle-size - @smaller-by;
Daniel@0:         top:  @circle-offset + @smaller-by / 2;
Daniel@0:         left: @circle-offset + @smaller-by / 2;
Daniel@0:     }
Daniel@0:     &__item_status_selected &__item-command_action_analyze {
Daniel@0:         pointer-events: all; 
Daniel@0:         display: block;
Daniel@0:         opacity: 1;
Daniel@0:     }
Daniel@0:     &__item_status_selected &__item-command_action_analyze i {
Daniel@0:         border: 1px solid @config-grid_recording--color_main;
Daniel@0:         height: @circle-size;
Daniel@0:         width: @circle-size;
Daniel@0:         top:  @circle-offset;
Daniel@0:         left: @circle-offset;
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__item-command_action_status_toggled {
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__item_status_selected &__item-command_action_analyze:hover i {
Daniel@0:         background: rgba(red(@config-grid_recording--color_main), green(@config-grid_recording--color_main), blue(@config-grid_recording--color_main), 0.3);
Daniel@0:     }
Daniel@0:     &__item_status_selected &__item-command_status_toggled&__item-command_action_analyze:hover i {
Daniel@0:         background: rgba(red(@config-grid_recording--color_main), green(@config-grid_recording--color_main), blue(@config-grid_recording--color_main), 0.7);
Daniel@0:     }
Daniel@0: 
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__flying-circle {
Daniel@0:         position: fixed;
Daniel@0:         height: @circle-size;
Daniel@0:         width: @circle-size;
Daniel@0:         border: 1px solid @config-grid_recording--color_main;
Daniel@0:         background: rgba(red(@config-grid_recording--color_main), green(@config-grid_recording--color_main), blue(@config-grid_recording--color_main), 0.5);
Daniel@0:         z-index: @z-index_flying-circle;
Daniel@0:         .border-radius(@circle-size);
Daniel@0:         pointer-events: none;
Daniel@0:     }
Daniel@0:     &__flying-circle_type_adding {}
Daniel@0:     &__flying-circle_type_removing {}
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     // used in help material
Daniel@0:     &__circle-within-text {
Daniel@0:         display: inline-block;
Daniel@0:         height: @circle-size;
Daniel@0:         width: @circle-size;
Daniel@0:         border: 1px solid @config-grid_recording--color_main;
Daniel@0:         .border-radius(@circle-size);
Daniel@0:     }
Daniel@0: }