You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

190 lines
5.0 KiB

@import 'src/assets/css/mixin.scss';
.clientFullScreen {
@include wh(auto !important, auto !important);
@include position(fixed !important, 0, 0, 0, 0);
z-index: 100000;
}
.JoL-controls-container {
padding: 0 5px;
box-sizing: border-box;
transition: all 0.5s;
@include wh(100%, 42px);
color: rgb(238, 238, 238);
position: relative;
// z-index: 10020;
display: flex;
align-items: center;
&:hover {
cursor: default;
}
&:after {
content: '';
@include wh(calc(100% + 26px), 100%);
@include position(absolute, auto, auto, 0, 50%);
z-index: -1;
transform: translateX(-50%);
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.play-pause-timeline {
display: flex;
align-items: center;
.time-wrap {
font-size: 13px;
vertical-align: middle;
padding: 0 10px;
}
}
.JoL-multifunction {
@include wh(100%, 100%);
@include flexContainer(flex-end);
text-align: center;
line-height: 42px;
&-multiple {
cursor: pointer;
padding: 0 10px;
position: relative;
&-container {
transition: all 0.5s;
@include position(absolute, -12px, auto, auto, 50%);
transform: translateX(-50%);
@include wh(100%, 70px);
&:hover {
.multifunction-multiple-layer {
animation: show 0.3s ease;
}
}
}
&-layer {
list-style: none;
line-height: normal;
@include position(absolute, auto, auto, 65px, 50%);
transform: translateX(-50%);
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.7);
li {
padding: 12px 15px;
cursor: pointer;
&:hover {
background: rgba(255, 255, 255, 0.2);
}
}
}
&:hover {
z-index: 1000000000;
&-layer {
z-index: 1000000000;
}
}
}
&-volume {
padding: 0 10px;
position: relative;
cursor: pointer;
&:hover {
z-index: 1000000000;
&-layer {
z-index: 1000000000;
}
}
&-container {
@include wh(100%, 70px);
@include position(absolute, -12px, auto, 0, 50%);
transform: translateX(-50%);
&:hover {
.volume-box {
animation: show 0.3s ease;
}
}
}
.volume-box {
line-height: normal;
position: absolute;
bottom: 65px;
@include wh(40px, 120px);
padding-bottom: 8px;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.7);
.current-volume {
@include wh(100%, 24px);
margin: 0;
line-height: 24px;
text-align: center;
&:hover {
cursor: default;
}
.volume-value {
font-size: 13px;
font-style: normal;
}
}
.volume-slider {
@include wh(100%, 96px);
@include flexContainer(center);
.volume-slider-bg {
@include wh(2px, 86px);
border-radius: 1px;
background-color: #fff;
position: relative;
.volume-slider-op {
@include wh(100%, 100%);
@include position(absolute, auto, auto, 0, 0);
z-index: 1;
border-radius: 1px;
.volume-slider-op-circle {
@include wh(10px, 10px);
@include position(absolute, -(10px/2), auto, auto, 50%);
margin-left: -(10px/2);
border-radius: 50%;
}
}
.volume-slider-mirror {
@include wh(32px, calc(100% + 5px));
@include position(absolute, auto, auto, 0, -15px);
z-index: 2;
}
}
}
}
}
&-set {
padding: 0 10px;
position: relative;
cursor: pointer;
&-container {
@include wh(100%, 70px);
@include position(absolute, -12px, auto, 0, 50%);
transition: all 0.5s;
transform: translateX(-50%);
}
&:hover {
z-index: 1000000000;
.hover-icon-rotateAnimate {
animation: rotateAnimate 0.5s ease;
}
.JoL-multifunction-set-layer {
animation: show 0.3s ease;
}
}
&-layer {
line-height: normal;
list-style: none;
@include position(absolute, auto, auto, 65px, 50%);
transform: translateX(-50%);
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.7);
padding: 8px 0;
li {
padding: 7px 22px;
cursor: pointer;
width: 100%;
white-space: nowrap;
}
}
}
}
.hover-icon-animate {
&:hover {
animation: scaleAnimate 0.5s ease;
}
}
}