@import "elements";

/** colors */

@black:#000;

@timeline-color:#77787B;
@timeline-lighten-color:#A5A5A5;
@timeline-juicy-color:#F2F2F2;

@topologies-color:#566B26;
@topologies-lighten-color:#98A572;
@topologies-juicy-color:#D3DAC2;

@lieux-color:#986C8F;
@lieux-lighten-color:#BDA3B7;
@lieux-juicy-color:#E3D9E0;

@artistes-color:#00415C;
@artistes-lighten-color:#6C9EB5;
@artistes-juicy-color:#ADC7D6;


/** jscrollpane */
.jscrollpane(@lighten-color, @juicy-color){
  .jspContainer{
    .jspPane{}
    .jspVerticalBar{ width:4px; .bgc(@juicy-color); }
    .jspHorizontalBar{ height:4px; .bgc(@juicy-color); }
    .jspTrack{
      .bgc(transparent);
      .jspDrag{
        .bgc(@lighten-color); .rounded(2px); .opacity(0.6); .transition(opacity, 0.2s, ease-out);
      }
      &:hover{
        .jspDrag {
          .opacity(1);
        }
      }
    }
  }
}
.jspScrollable{.jscrollpane(@timeline-color, @timeline-juicy-color);}