.ui-video-seek-slider {
position: relative
}
.ui-video-seek-slider:focus {
outline: none
}
.ui-video-seek-slider .track {
padding: 10px 0;
cursor: pointer;
outline: none
}
.ui-video-seek-slider .track:focus {
border: 0;
outline: none
}
.ui-video-seek-slider .track .main {
width: 100%;
height: 8px;
background-color: rgba(41, 46, 58, 0.6);
border-radius: 30px;
position: absolute;
border: 1px solid #464E60;
left: 0 top 8.5px;
overflow: hidden;
-webkit-transition: -webkit-transform .4s;
transition: -webkit-transform .4s;
transition: transform .4s;
transition: transform .4s, -webkit-transform .4s;
outline: none
}
.ui-video-seek-slider .track .main:focus {
border: 0;
outline: none
}
.ui-video-seek-slider .track .main .buffered {
position: absolute;
background-color: rgba(255, 255, 255, .3);
width: 100%;
height: 100%;
/* -webkit-transform: scaleX(0.8); */
/* transform: scaleX(0.8); */
z-index: 2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: .5s transform;
transition: .5s transform
}
.ui-video-seek-slider .track .main .seek-hover {
position: absolute;
background-color: rgba(255, 255, 255, .5);
width: 100%;
height: 100%;
z-index: 1;
/* -webkit-transform: scaleX(0.2); */
/* transform: scaleX(0.2); */
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
opacity: 0;
-webkit-transition: opacity .4s;
transition: opacity .4s
}
.ui-video-seek-slider .track .main .connect {
position: absolute;
background-color: var(--color-blue-200);
width: 100%;
height: 100%;
z-index: 3;
left: 0;
/* -webkit-transform: scaleX(0.13); */
/* transform: scaleX(0.13); */
-webkit-transform-origin: 0 0;
transform-origin: 0 0
}
.ui-video-seek-slider .track.active .main {
/* -webkit-transform: scaleY(2); */
/* transform: scaleY(2) */
}
.ui-video-seek-slider .thumb {
pointer-events: none;
position: absolute;
width: 16px;
height: 16px;
left: -5px;
top: 5px;
z-index: 4;
-webkit-transform: translateX(100px);
transform: translateX(100px)
}
.ui-video-seek-slider .thumb .handler {
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s;
border-radius: 100%;
border: 2px solid #464E60;
width: 100%;
height: 100%;
background-color: var(--color-blue-200);
opacity: 0;
/* -webkit-transform: scale(0.4); */
/* transform: scale(0.4) */
}
.ui-video-seek-slider .thumb.active .handler {
opacity: 1;
/* -webkit-transform: scale(1); */
/* transform: scale(1) */
}
.ui-video-seek-slider .hover-time {
position: absolute;
background-color: rgba(0, 0, 0, .3);
line-height: 18px;
font-size: 16px;
color: #ddd;
top: -25px;
left: 0;
padding: 5px 10px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
opacity: 0;
-webkit-transform: translateX(150px);
transform: translateX(150px);
pointer-events: none
}
.ui-video-seek-slider .hover-time.active {
opacity: 1
}
.ui-video-seek-slider:hover .track .main .seek-hover {
opacity: 1vw
}