Server : Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.20 System : Linux st2.domain.com 3.10.0-1127.10.1.el7.x86_64 #1 SMP Wed Jun 3 14:28:03 UTC 2020 x86_64 User : apache ( 48) PHP Version : 7.4.20 Disable Function : NONE Directory : /var/www/html/video/layout/js/node_modules/artplayer/src/style/ |
.art-bottom {
.art-progress {
position: relative;
z-index: 0;
pointer-events: auto;
padding-bottom: var(--art-bottom-gap);
.art-control-progress {
position: relative;
.art-center();
cursor: pointer;
height: var(--art-progress-height);
.art-control-progress-inner {
display: flex;
align-items: center;
position: relative;
height: 50%;
width: 100%;
transition: height var(--art-transition-duration) ease;
background-color: var(--art-progress-color);
.art-progress-hover {
display: none;
.art-full(0);
width: 0%;
background-color: var(--art-hover-color);
}
.art-progress-loaded {
.art-full(10);
width: 0%;
background-color: var(--art-loaded-color);
}
.art-progress-played {
.art-full(20);
width: 0%;
background-color: var(--art-theme);
}
.art-progress-highlight {
.art-full(30);
pointer-events: none;
span {
.art-full();
right: auto;
pointer-events: auto;
width: var(--art-highlight-width) !important;
transform: translateX(calc(var(--art-highlight-width) / -2));
background-color: var(--art-highlight-color);
}
}
.art-progress-indicator {
.art-center();
position: absolute;
z-index: 40;
left: 0;
border-radius: 50%;
width: var(--art-indicator-size);
height: var(--art-indicator-size);
transform: scale(var(--art-indicator-scale));
margin-left: calc(var(--art-indicator-size) / -2);
transition: transform var(--art-transition-duration) ease;
.art-icon {
width: 100%;
height: 100%;
pointer-events: none;
}
&:hover {
transform: scale(1.2) !important;
}
&:active {
transform: scale(1) !important;
}
}
.art-progress-tip {
display: none;
position: absolute;
z-index: 50;
top: -25px;
left: 0;
padding: 3px 5px;
line-height: 1;
font-size: 12px;
border-radius: var(--art-border-radius);
white-space: nowrap;
background-color: var(--art-tip-background);
}
}
&:hover {
.art-control-progress-inner {
height: 100%;
}
}
}
.art-control-thumbnails {
display: none;
position: absolute;
bottom: calc(var(--art-bottom-gap) + 10px);
left: 0;
border-radius: var(--art-border-radius);
pointer-events: none;
background-color: var(--art-widget-background);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
}
}
&:hover {
.art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {
transform: scale(1);
}
}
}