Daniel@0: @import "../config.less";
Daniel@0: 
Daniel@0: .config-grid-cells {
Daniel@0:     position: absolute;
Daniel@0:     bottom: 0;
Daniel@0:     right: 0;
Daniel@0:     z-index: @z-index_main-region + 9;
Daniel@0:     overflow: hidden;
Daniel@0:     left: @config-grid_collection--panel_view--width;
Daniel@0:     top: @config-grid_collection--panel_entity--height;
Daniel@0: 
Daniel@0:     .config-grid_type_collection & {
Daniel@0:     }
Daniel@0:     .config-grid_type_recording & {
Daniel@0:         left: @config-grid_recording--panel_view--width;
Daniel@0:         top: @config-grid_recording--panel_entity--height;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__container_position_scrollable {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:         overflow: scroll;
Daniel@0:         z-index: @z-index_main-region + 50;
Daniel@0:         background: rgba(0,0,0,0.0);
Daniel@0:     }
Daniel@0:     
Daniel@0:     &__container_position_fixed {
Daniel@0:         //.position_absolute_everywhere();
Daniel@0:         position: absolute;
Daniel@0:         pointer-events: none !important;
Daniel@0:         top: 0px;
Daniel@0:         left: 0px;
Daniel@0:         overflow: hidden;
Daniel@0:         z-index: @z-index_main-region + 20;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__space {
Daniel@0:         position: absolute;
Daniel@0:         z-index: @z-index_main-region + 51;
Daniel@0:         overflow: hidden;
Daniel@0:         padding-left: @config-grid--cells--margin-left;
Daniel@0:         padding-right: @config-grid--cells--margin-right;
Daniel@0:         padding-bottom: @config-grid--cells--margin-bottom;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__space {
Daniel@0:         padding-top: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__space {
Daniel@0:         padding-top: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     // ==================================
Daniel@0:     &__entity-headers-container {
Daniel@0:         position: absolute;
Daniel@0:         //position: fixed;
Daniel@0:         top: 0;
Daniel@0:         left: @config-grid--cells--margin-left;
Daniel@0:         right: 0;
Daniel@0:         height: 10px;
Daniel@0:         overflow: visible;
Daniel@0:         z-index: @z-index_main-region-cells + 5;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__entity-headers-container {
Daniel@0:         height: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__entity-headers-container {
Daniel@0:         height: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     &__entity-headers-blind {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:         z-index: @z-index_main-region-cells + 6;
Daniel@0:         background: @--background-color;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__entity-header {
Daniel@0:         .cursor_action();
Daniel@0:         position: absolute;
Daniel@0:         top: @config-grid--entity-header-margin-top;
Daniel@0:         // left: 0; // defined by JS
Daniel@0:         height: @config-grid_collection--entity-header-height;
Daniel@0:         overflow: visible;
Daniel@0:         z-index: @z-index_main-region-cells + 7;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__entity-header {
Daniel@0:         height: @config-grid_collection--entity-header-height;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__entity-header {
Daniel@0:         height:  @config-grid_recording--entity-header-height;
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ----------------------------------
Daniel@0:     &__entity-header_kind_adder {
Daniel@0:         width: 109px;
Daniel@0:         height: @config-grid_collection--entity-header-height_adder !important;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__entity-header_kind_pair &__entity-header-background {
Daniel@0:         background: @--background-color !important;
Daniel@0:     }
Daniel@0:     &__entity-header_kind_pair&__entity-header_selected &__entity-header-label {
Daniel@0:         color: @config-grid--color_panel-label !important;
Daniel@0:     }
Daniel@0: 
Daniel@0:     
Daniel@0:     // ----------------------------------
Daniel@0:     &__entity-header_selected {
Daniel@0:         .cursor_std();
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     &__entity-header-background {
Daniel@0:         .position_absolute_everywhere();
Daniel@0:         border-radius: @--border-radius;
Daniel@0:         border: @config-grid--header-border-size solid;
Daniel@0:         background-color: @config-grid--color_panel-background;
Daniel@0:         border-color: @config-grid--color_panel-background;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__entity-header_selected &__entity-header-background {
Daniel@0:         background-color: @config-grid_collection--color_panel-background;
Daniel@0:         border-color: @config-grid_collection--color_panel-background;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__entity-header_selected &__entity-header-background {
Daniel@0:         background-color: @config-grid_recording--color_panel-background;
Daniel@0:         border-color: @config-grid_recording--color_panel-background;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__entity-header_selected &__entity-header-background {
Daniel@0:         border-top-left-radius: 0px;
Daniel@0:         border-top-right-radius: 0px;
Daniel@0:         top: -@config-grid--entity-header-margin-top - @config-grid--header-border-size;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__entity-header-label {
Daniel@0:         position: absolute;
Daniel@0:         overflow: hidden;
Daniel@0:         white-space: nowrap;
Daniel@0:         top: -4px;
Daniel@0:         bottom: 0;
Daniel@0:         left:  @config-grid--cells--header-padding-left;
Daniel@0:         right: @config-grid--header-border-size;
Daniel@0:         padding-top:   @config-grid--cells--header-padding-top_entity;
Daniel@0:         color: @config-grid--color_panel-label;
Daniel@0:     }
Daniel@0:     &__entity-header:hover &__entity-header-label {
Daniel@0:         color: @config-grid--color_panel-label-hovered;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__entity-header_selected:hover &__entity-header-label,
Daniel@0:     .config-grid_type_collection &__entity-header_selected &__entity-header-label
Daniel@0:      {
Daniel@0:         color: @config-grid_collection--color_panel-label;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__entity-header_selected:hover &__entity-header-label,
Daniel@0:     .config-grid_type_recording &__entity-header_selected &__entity-header-label {
Daniel@0:         color: @config-grid_recording--color_panel-label;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__entity-header-label_row2 {
Daniel@0:         top: 14px;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__entity-header-label_row2 {
Daniel@0:         .font_small();
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ----------------------------------
Daniel@0:     &__entity-header_kind_adder &__entity-header-label {
Daniel@0:         position: relative;
Daniel@0:         text-align: center;
Daniel@0:         left: 0;
Daniel@0:         right: 0;
Daniel@0:         padding-left: 0;
Daniel@0:         padding-right: 0;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__entity-header-label-fader {
Daniel@0:         position: absolute;
Daniel@0:         top:   @config-grid--header-border-size;
Daniel@0:         bottom:@config-grid--header-border-size;
Daniel@0:         right: @config-grid--header-border-size;
Daniel@0:         width: @config-grid--header-fader-width;
Daniel@0:         .text-fader-background-gradient(@config-grid--color_panel-background);
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__entity-header_selected &__entity-header-label-fader {
Daniel@0:         .text-fader-background-gradient(@config-grid_collection--color_panel-background);
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__entity-header_selected &__entity-header-label-fader {
Daniel@0:         .text-fader-background-gradient(@config-grid_recording--color_panel-background);
Daniel@0:     }
Daniel@0:     &__entity-header_kind_pair &__entity-header-label-fader,
Daniel@0:     &__entity-header_kind_pair&__entity-header_selected &__entity-header-label-fader {
Daniel@0:         .text-fader-background-gradient(@--background-color);
Daniel@0:     }
Daniel@0: 
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     // ==================================
Daniel@0:     &__view-headers-container {
Daniel@0:         position: absolute;
Daniel@0:         //position: fixed;
Daniel@0:         left: 0;
Daniel@0:         top: 0;
Daniel@0:         right: 0;
Daniel@0:         padding-right: @config-grid--cells--margin-left;
Daniel@0:         overflow: visible;
Daniel@0:         z-index: @z-index_main-region-cells + 2;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__view-headers-container {
Daniel@0:         top:    @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__view-headers-container {
Daniel@0:         top:    @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     &__view-headers-blind {
Daniel@0:         position: absolute;
Daniel@0:         top: 0;
Daniel@0:         left: 0;
Daniel@0:         bottom: 0;
Daniel@0:         width: @config-grid--cells--margin-left;
Daniel@0:         z-index: @z-index_main-region-cells + 3;
Daniel@0:         background: @--background-color;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__view-header {
Daniel@0:         .cursor_action();
Daniel@0:         position: absolute;
Daniel@0:         top: 0; // defined by JS
Daniel@0:         left: @config-grid--cells--margin-left;
Daniel@0:         right: 0;
Daniel@0:         height: @config-grid--view-header-height;
Daniel@0:         overflow: visible;
Daniel@0:         z-index: @z-index_main-region-cells + 4;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__view-header_kind_adder {
Daniel@0:         right: auto;
Daniel@0:         width: auto;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__view-header_selected {
Daniel@0:         .cursor_std();
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__view-header-background {
Daniel@0:         position: absolute;
Daniel@0:         top: 0;
Daniel@0:         left: 0;
Daniel@0:         right: 0;
Daniel@0:         bottom: 0;
Daniel@0:         border-top-left-radius: @--border-radius;
Daniel@0:         border-bottom-left-radius: @--border-radius;
Daniel@0:         background-color: @config-grid--color_panel-background;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__view-header_selected &__view-header-background {
Daniel@0:         background-color: @config-grid_collection--color_panel-background;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__view-header_selected &__view-header-background {
Daniel@0:         background-color: @config-grid_recording--color_panel-background;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__view-header_kind_adder &__view-header-background {
Daniel@0:         border-top-right-radius: @--border-radius;
Daniel@0:         border-bottom-right-radius: @--border-radius;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__view-header_selected &__view-header-background {
Daniel@0:         border-top-left-radius: 0px;
Daniel@0:         border-bottom-left-radius: 0px;
Daniel@0:         left: -@config-grid--cells--margin-left;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__view-header-label {
Daniel@0:         position: absolute;
Daniel@0:         overflow: hidden;
Daniel@0:         white-space: nowrap;
Daniel@0:         top: 0;
Daniel@0:         left: 0;
Daniel@0:         right: 0;
Daniel@0:         bottom: 0;
Daniel@0:         padding-left:  @config-grid--cells--header-padding-left;
Daniel@0:         padding-right: @config-grid--cells--header-padding-left;
Daniel@0:         padding-top:   @config-grid--cells--header-padding-top_view;
Daniel@0:         color: @config-grid--color_panel-label;
Daniel@0:     }
Daniel@0:     &__view-header:hover &__view-header-label {
Daniel@0:         color: @config-grid--color_panel-label-hovered;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__view-header_selected:hover &__view-header-label,
Daniel@0:     .config-grid_type_collection &__view-header_selected &__view-header-label {
Daniel@0:         color: @config-grid_collection--color_panel-label;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__view-header_selected:hover &__view-header-label,
Daniel@0:     .config-grid_type_recording &__view-header_selected &__view-header-label {
Daniel@0:         color: @config-grid_recording--color_panel-label;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ----------------------------------
Daniel@0:     &__view-header_kind_adder &__view-header-label {
Daniel@0:         position: relative;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__view-header-label-part_modified {
Daniel@0:         text-decoration: line-through;
Daniel@0:     }
Daniel@0:     
Daniel@0:     // ==================================
Daniel@0:     // ==================================
Daniel@0:     &__corner-blind {
Daniel@0:         display: block;
Daniel@0:         position: absolute;
Daniel@0:         top: 0;
Daniel@0:         left: 0;
Daniel@0:         width: @config-grid--cells--margin-left;
Daniel@0:         z-index: @z-index_main-region-cells + 9;
Daniel@0:         background: @--background-color;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__corner-blind {
Daniel@0:         height: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__corner-blind {
Daniel@0:         height: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
Daniel@0:     }
Daniel@0: 
Daniel@0:     // ==================================
Daniel@0:     &__vis-instances-container {
Daniel@0:         position: absolute;
Daniel@0:         left: @config-grid--cells--margin-left;
Daniel@0:         top: 0;
Daniel@0:         width: 0;
Daniel@0:         height: 0;
Daniel@0:         overflow: visible;
Daniel@0:         z-index: @z-index_main-region-cells + 1;
Daniel@0:     }
Daniel@0:     .config-grid_type_collection &__vis-instances-container {
Daniel@0:         top: @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
Daniel@0:     }
Daniel@0:     .config-grid_type_recording &__vis-instances-container {
Daniel@0:         top: @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;
Daniel@0:     }
Daniel@0: 
Daniel@0:     &__vis-instance {
Daniel@0:         background: @--background-color;
Daniel@0:         position: absolute;
Daniel@0:         left: 0;
Daniel@0:         top: 0;
Daniel@0:         overflow: hidden;
Daniel@0:     }
Daniel@0: }