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
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; |
|
} |
|
} |
|
}
|
|
|