126 lines
2.9 KiB
Plaintext
126 lines
2.9 KiB
Plaintext
// MediaSlider.module.less
|
|
//
|
|
@import "~@enact/sandstone/styles/variables.less";
|
|
@import "~@enact/sandstone/styles/skin.less";
|
|
|
|
@sand-mediaplayer-slider-tap-area: 70px;
|
|
@sand-mediaplayer-slider-height: 6px;
|
|
@sand-mediaplayer-slider-knob-size: 24px;
|
|
@sand-video-player-padding-side: 42px;
|
|
|
|
.sliderFrame {
|
|
@knob-transform-active: @sand-translate-center scale(1);
|
|
@knob-transform-resting: @sand-translate-center scale(@sand-mediaplayer-slider-knob-resting-state-scale);
|
|
@slider-padding-v: ((@sand-mediaplayer-slider-tap-area - @sand-mediaplayer-slider-height) / 2);
|
|
@slider-padding-h: @sand-mediaplayer-slider-knob-size;
|
|
margin-left: 130px;
|
|
margin-right: 130px;
|
|
flex: 1 0 auto;
|
|
|
|
&.hidden {
|
|
will-change: opacity;
|
|
opacity: 0;
|
|
}
|
|
|
|
.mediaSlider {
|
|
margin: 0 @slider-padding-h;
|
|
padding: @slider-padding-v 0;
|
|
height: @sand-mediaplayer-slider-height;
|
|
// Add a tap area that extends to the edges of the screen, to make the slider more accessible
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
.position(0, -(@sand-video-player-padding-side));
|
|
}
|
|
|
|
// Grow the knob when the Slider gets spotted
|
|
.focus({
|
|
&.active,
|
|
&.pressed {
|
|
.knob::before {
|
|
transform: @knob-transform-active;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
});
|
|
|
|
.spottable({
|
|
&.pressed {
|
|
.knob::before {
|
|
transform: @knob-transform-active;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Knob
|
|
.knob {
|
|
@activate-transition-function: cubic-bezier(0.15, 0.85, 0.6, 1.65);
|
|
//@slide-transition-function: cubic-bezier(0.15, 0.85, 0.53, 1.09);
|
|
|
|
//-webkit-transition: -webkit-transform @slide-transition-function 0.2s;
|
|
//transition: transform @slide-transition-function 0.2s;
|
|
|
|
&::before {
|
|
width: @sand-mediaplayer-slider-knob-size;
|
|
height: @sand-mediaplayer-slider-knob-size;
|
|
border-width: 0;
|
|
border-radius: @sand-mediaplayer-slider-knob-size;
|
|
transform: @knob-transform-resting;
|
|
opacity: 0;
|
|
will-change: transform, opacity;
|
|
-webkit-transition: -webkit-transform @activate-transition-function 0.2s, opacity ease 0.2s;
|
|
transition: transform @activate-transition-function 0.2s, opacity ease 0.2s;
|
|
}
|
|
}
|
|
|
|
&.scrubbing {
|
|
.knob {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.applySkins({
|
|
.sliderFrame {
|
|
.slider {
|
|
.bar {
|
|
background-color: @sand-mediaslider-bar-bg-color;
|
|
}
|
|
|
|
.fill {
|
|
background-color: @sand-mediaslider-fill-bg-color;
|
|
}
|
|
|
|
.knob {
|
|
&::before {
|
|
background-color: @sand-mediaplayer-slider-knob-color;
|
|
}
|
|
}
|
|
|
|
.focus({
|
|
.bar {
|
|
background-color: @sand-mediaslider-bar-bg-color;
|
|
}
|
|
|
|
.fill {
|
|
background-color: @sand-mediaslider-fill-bg-color;
|
|
}
|
|
|
|
.disabled({
|
|
.bar {
|
|
opacity: @sand-mediaslider-disabled-bar-opacity;
|
|
}
|
|
});
|
|
});
|
|
|
|
.disabled({
|
|
.bar {
|
|
opacity: @sand-mediaslider-disabled-bar-opacity;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|