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