viplayer/dist/index.css

A video playback component adapted to Vue3

.svg-icon[data-v-2c8dbb4c]{width:1em;height:1em;vertical-align:-.15em;fill:#fff;overflow:hidden}.svg-external-icon[data-v-2c8dbb4c]{background-color:currentColor;mask-size:cover!important;display:inline-block}.d-progress[data-v-6bfbd4de]{position:relative}.d-progress .d-progress__runway[data-v-6bfbd4de]{width:var(--fa970020);transition:height .1s;height:100%;background:hsla(0,0%,100%,.4);position:relative;cursor:pointer;vertical-align:middle;border-radius:.3125rem}.d-progress .d-progress__runway .d-progress__bar[data-v-6bfbd4de],.d-progress .d-progress__runway .d-progress__cursor[data-v-6bfbd4de],.d-progress .d-progress__runway .d-progress__preload[data-v-6bfbd4de]{position:absolute;top:0;left:0;height:100%}.d-progress .d-progress__runway .d-progress__cursor[data-v-6bfbd4de]{display:none;z-index:1;width:.0625rem;background:#fff;pointer-events:none}.d-progress .d-progress__runway .d-progress__cursor .d-progress__tips[data-v-6bfbd4de]{pointer-events:none;color:#fff;position:absolute;white-space:nowrap;z-index:2;bottom:.875rem;left:50%;padding:.25rem;box-sizing:border-box;display:block;font-size:.75rem;font-weight:500;background:hsla(0,19%,52%,.6);border-radius:.1875rem;transform:translateX(-50%)}.d-progress .d-progress__runway:hover .d-progress__cursor[data-v-6bfbd4de]{display:block}.d-progress .d-progress__runway .d-progress__preload[data-v-6bfbd4de]{background:rgba(67,225,204,.5)}.d-progress .d-progress__runway .d-progress__bar[data-v-6bfbd4de]{background:linear-gradient(90deg,#52a0fd 0,#00e2fa 80%,#00e2fa);border-radius:.3125rem}.d-progress .d-progress__runway .d-progress__bar[data-v-6bfbd4de]:before{display:block;content:"";position:absolute;right:-.25rem;top:50%;width:.375rem;height:.375rem;transition:.2s;transform:translateY(-50%) scale(0);border-radius:50%;background:#fff;box-shadow:0 0 0 .1875rem #409eff}.d-switch[data-v-1a8ae9be]{position:relative;height:1.125rem;transition:background .2s;width:var(--bf61e240);background:#757575;border-radius:.625rem;display:inline-flex;align-items:center;vertical-align:middle}.d-switch .d-switch__input[data-v-1a8ae9be]{position:relative;z-index:1;margin:0;width:100%;height:100%;opacity:0}.d-switch .d-switch_action[data-v-1a8ae9be]{position:absolute;transition:.2s;left:.125rem;top:.125rem;z-index:0;height:.875rem;width:.875rem;background:#fff;border-radius:50%}.d-switch.is-checked[data-v-1a8ae9be]{background:var(--b2614cd2)}.d-switch.is-checked .d-switch_action[data-v-1a8ae9be]{left:100%;background:#fff;margin-left:-1.125rem}.rotating[data-v-066df70e]{animation:rotating-066df70e 2s linear infinite}@keyframes rotating-066df70e{to{-webkit-transform:rotate(1turn)}}@keyframes spin-066df70e{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.dplayer-bezel-transition[data-v-066df70e]{animation:bezel-hide-066df70e .5s linear}@keyframes bezel-hide-066df70e{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}.f50[data-v-066df70e]{font-size:3.125rem}.f24[data-v-066df70e]{font-size:1.5rem}.d-loading[data-v-066df70e]{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);z-index:2;color:#efefef;text-align:center;font-size:.8125rem}.d-loading .loader[data-v-066df70e]{font-size:2.625rem;animation-name:spin-066df70e;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite}.player-top[data-v-a0836fb8]{position:absolute;font-size:1rem;left:0;top:0;right:0;color:#fff;display:flex;padding:0 1.25rem;height:3.75rem;z-index:3;background-image:linear-gradient(#000,transparent);justify-content:space-between}.player-notice-list[data-v-0fe2a394]{position:absolute;bottom:3.75rem;left:1.25rem;z-index:1}.player-notice-list .player-notice[data-v-0fe2a394]{border-radius:.125rem;background:rgba(28,28,28,.7);transition:all .3s ease-in-out;overflow:hidden;color:#fff;display:table;pointer-events:none;animation:showNotice-0fe2a394 .3s ease 1 forwards;font-weight:600}.player-notice-list .remove-notice[data-v-0fe2a394]{animation:removeNotice-0fe2a394 .3s ease 1 forwards}@keyframes showNotice-0fe2a394{0%{padding:0;font-size:0;margin-top:0}to{padding:.375rem 1.25rem;font-size:.875rem;margin-top:.3125rem}}@keyframes removeNotice-0fe2a394{0%{padding:.375rem 1.25rem;font-size:.875rem;margin-top:.3125rem}20%{font-size:.75rem}21%{font-size:0;padding:.375rem .625rem}to{padding:0;margin-top:0;font-size:0}}a[data-v-29e54bea],abbr[data-v-29e54bea],acronym[data-v-29e54bea],address[data-v-29e54bea],applet[data-v-29e54bea],article[data-v-29e54bea],aside[data-v-29e54bea],audio[data-v-29e54bea],b[data-v-29e54bea],big[data-v-29e54bea],blockquote[data-v-29e54bea],body[data-v-29e54bea],canvas[data-v-29e54bea],caption[data-v-29e54bea],center[data-v-29e54bea],cite[data-v-29e54bea],code[data-v-29e54bea],dd[data-v-29e54bea],del[data-v-29e54bea],details[data-v-29e54bea],dfn[data-v-29e54bea],div[data-v-29e54bea],dl[data-v-29e54bea],dt[data-v-29e54bea],em[data-v-29e54bea],embed[data-v-29e54bea],fieldset[data-v-29e54bea],figcaption[data-v-29e54bea],figure[data-v-29e54bea],footer[data-v-29e54bea],form[data-v-29e54bea],h1[data-v-29e54bea],h2[data-v-29e54bea],h3[data-v-29e54bea],h4[data-v-29e54bea],h5[data-v-29e54bea],h6[data-v-29e54bea],header[data-v-29e54bea],hgroup[data-v-29e54bea],html[data-v-29e54bea],i[data-v-29e54bea],iframe[data-v-29e54bea],img[data-v-29e54bea],ins[data-v-29e54bea],kbd[data-v-29e54bea],label[data-v-29e54bea],legend[data-v-29e54bea],li[data-v-29e54bea],mark[data-v-29e54bea],menu[data-v-29e54bea],nav[data-v-29e54bea],object[data-v-29e54bea],ol[data-v-29e54bea],output[data-v-29e54bea],p[data-v-29e54bea],pre[data-v-29e54bea],q[data-v-29e54bea],ruby[data-v-29e54bea],s[data-v-29e54bea],samp[data-v-29e54bea],section[data-v-29e54bea],small[data-v-29e54bea],span[data-v-29e54bea],strike[data-v-29e54bea],strong[data-v-29e54bea],sub[data-v-29e54bea],summary[data-v-29e54bea],sup[data-v-29e54bea],table[data-v-29e54bea],tbody[data-v-29e54bea],td[data-v-29e54bea],tfoot[data-v-29e54bea],th[data-v-29e54bea],thead[data-v-29e54bea],time[data-v-29e54bea],tr[data-v-29e54bea],tt[data-v-29e54bea],u[data-v-29e54bea],ul[data-v-29e54bea],var[data-v-29e54bea],video[data-v-29e54bea]{margin:0;padding:0;border:0;font-size:100%;font:inherit;font-weight:400;vertical-align:baseline}article[data-v-29e54bea],aside[data-v-29e54bea],details[data-v-29e54bea],figcaption[data-v-29e54bea],figure[data-v-29e54bea],footer[data-v-29e54bea],header[data-v-29e54bea],hgroup[data-v-29e54bea],menu[data-v-29e54bea],nav[data-v-29e54bea],section[data-v-29e54bea]{display:block}li[data-v-29e54bea],ol[data-v-29e54bea],ul[data-v-29e54bea]{list-style:none}blockquote[data-v-29e54bea],q[data-v-29e54bea]{quotes:none}blockquote[data-v-29e54bea]:after,blockquote[data-v-29e54bea]:before,q[data-v-29e54bea]:after,q[data-v-29e54bea]:before{content:"";content:none}table[data-v-29e54bea]{border-collapse:collapse;border-spacing:0}a[data-v-29e54bea]{color:#7e8c8d;text-decoration:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}[data-v-29e54bea]::-webkit-scrollbar{width:.3125rem;height:.3125rem}[data-v-29e54bea]::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,.2);border-radius:.375rem;-webkit-border-radius:.375rem}[data-v-29e54bea]::-webkit-scrollbar-thumb:vertical{height:.3125rem;background-color:hsla(0,0%,49%,.7);border-radius:.375rem;-webkit-border-radius:.375rem}[data-v-29e54bea]::-webkit-scrollbar-thumb:horizontal{width:.3125rem;background-color:hsla(0,0%,49%,.7);border-radius:.375rem;-webkit-border-radius:.375rem}body[data-v-29e54bea],html[data-v-29e54bea]{width:100%;font-family:Arial,Microsoft YaHei,黑体,宋体,微软雅黑,sans-serif}body[data-v-29e54bea]{line-height:1;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html[data-v-29e54bea]{overflow-y:scroll}textarea[data-v-29e54bea]{font-family:inherit}.clearfix[data-v-29e54bea]:after,.clearfix[data-v-29e54bea]:before{content:" ";display:inline-block;height:0;clear:both;visibility:hidden}.clearfix[data-v-29e54bea]{*zoom:1}.dn[data-v-29e54bea]{display:none}.iconfont[data-v-29e54bea]{display:inline-block}.d-flex-center[data-v-29e54bea],.d-flex-x[data-v-29e54bea],.d-flex-y[data-v-29e54bea]{display:flex}.d-flex-x[data-v-29e54bea]{align-items:center}.d-flex-y[data-v-29e54bea]{justify-content:center}.d-flex-center[data-v-29e54bea]{justify-content:center;align-items:center}.mr5[data-v-29e54bea]{margin-right:.3125rem}.mr10[data-v-29e54bea]{margin-right:.625rem}.ml5[data-v-29e54bea]{margin-left:.3125rem}.ml10[data-v-29e54bea]{margin-left:.625rem}.d-pointer[data-v-29e54bea]{cursor:pointer}[data-v-29e54bea]:export{fontColor:#409eff;playerWidth:43.75rem;playerHeight:28.125rem;controlBarHeight:2.5625rem;progressBarHeighthover:.3125rem;progressBarHeight:.1875rem;timeDisplayColor:#fff}.player-wrap[data-v-29e54bea]{position:relative;overflow:hidden;background-color:#000}.player-wrap.web-full-screen[data-v-29e54bea]{z-index:9999999;position:fixed;left:0;top:0;width:100vw!important;height:100vh!important}.player-wrap .player-video[data-v-29e54bea]{position:relative;z-index:1;width:100%;height:100%;font-size:0}.player-wrap .player-video .player-video-main[data-v-29e54bea]{width:100%;height:100%;transition:.2s;object-fit:cover}.player-wrap .player-video .player-video-main.video-mirror[data-v-29e54bea]{transform:rotateY(180deg)}.player-wrap .player-controller[data-v-29e54bea]{position:absolute;bottom:0;left:0;height:2.5625rem;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .3s ease;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5));z-index:2;transform:translateY(2.8125rem);padding:0 .9375rem;box-sizing:border-box}.player-wrap .player-controller .control-progress[data-v-29e54bea]{width:100%;position:relative;height:.3125rem;cursor:pointer}.player-wrap .player-controller .control-progress .progress-bar[data-v-29e54bea]{position:absolute;left:0;bottom:0;width:100%;transition:height .1s;height:.1875rem;z-index:1}.player-wrap .player-controller .control-progress:hover .progress-bar[data-v-29e54bea]{height:100%}.player-wrap .player-controller .control-progress:hover .progress-bar[data-v-29e54bea] .d-progress__bar:before{transform:translateY(-50%) scale(1)!important}.player-wrap .player-controller .control-tool[data-v-29e54bea]{position:absolute;padding:0 .625rem;display:flex;justify-content:space-between;align-items:center;top:.25rem;left:0;bottom:0;width:100%;box-sizing:border-box}.player-wrap .player-controller .control-tool .tool-bar[data-v-29e54bea]{display:flex;height:100%;align-items:center}.player-wrap .player-controller .control-tool .tool-bar .tool-item[data-v-29e54bea]{position:relative;cursor:pointer;text-align:center;padding:0 .5rem;display:flex;align-items:center;font-size:.75rem;font-weight:600;color:hsla(0,0%,100%,.8)}.player-wrap .player-controller .control-tool .tool-bar .tool-item .play[data-v-29e54bea],.player-wrap .player-controller .control-tool .tool-bar .tool-item .sound[data-v-29e54bea]{font-size:1.625rem}.player-wrap .player-controller .control-tool .tool-bar .tool-item .rotateHover[data-v-29e54bea]{font-size:1.25rem}.player-wrap .player-controller .control-tool .tool-bar .tool-item .screenshot[data-v-29e54bea]{font-size:1rem}.player-wrap .player-controller .control-tool .tool-bar .tool-item .tool-item-main[data-v-29e54bea]{position:absolute;white-space:nowrap;z-index:2;bottom:98%;left:50%;box-sizing:border-box;display:none;background:rgba(0,0,0,.7);border-radius:.3125rem;transform:translateX(-50%);font-weight:600;color:hsla(0,0%,100%,.8)}.player-wrap .player-controller .control-tool .tool-bar .tool-item .tool-item-main li[data-v-29e54bea]{font-weight:600}.player-wrap .player-controller .control-tool .tool-bar .tool-item .padding[data-v-29e54bea]{padding:.375rem .5rem}.player-wrap .player-controller .control-tool .tool-bar .tool-item:hover .tool-item-main[data-v-29e54bea]{display:flex}.player-wrap .player-controller .control-tool .tool-bar .tool-sound[data-v-29e54bea]:hover .d-progress__runway,.player-wrap .player-controller .control-tool .tool-bar .tool-sound[data-v-29e54bea]:hover .d-progress__runway .d-progress__bar,.player-wrap .player-controller .control-tool .tool-bar .tool-sound[data-v-29e54bea]:hover .d-progress__runway .d-progress__bar:before{width:0!important;height:0!important}.player-wrap .player-controller .control-tool .tool-bar .volume-box[data-v-29e54bea]{width:2rem;margin-left:-.25rem;height:.1875rem}.player-wrap .player-controller .control-tool .tool-bar .volume-box .progress-bar[data-v-29e54bea]{position:absolute;left:0;bottom:0;width:100%;transition:height .1s;height:.1875rem;z-index:1}.player-wrap .player-controller .control-tool .tool-bar .volume-box:hover .progress-bar[data-v-29e54bea] .d-progress__bar:before{transform:translateY(-50%) scale(1)!important}.player-wrap .player-controller .control-tool .tool-bar .is-muted[data-v-29e54bea] .d-progress__runway .d-progress__bar{width:0!important}.player-wrap .player-controller .control-tool .tool-time span[data-v-29e54bea]{cursor:default;text-shadow:0 0 .125rem rgba(0,0,0,.5);vertical-align:middle;font-size:.875rem;color:hsla(0,0%,100%,.8);font-weight:600}.player-wrap .player-controller .control-tool .speed-main li[data-v-29e54bea]{cursor:pointer;line-height:2.125rem;font-size:.75rem;color:#fff;padding:0 .5rem}.player-wrap .player-controller .control-tool .speed-main li[data-v-29e54bea]:hover{opacity:.8;background-color:hsla(0,0%,100%,.1)}.player-wrap .player-controller .control-tool .speed-main li.speed-active[data-v-29e54bea]{color:#409eff;font-weight:700}.player-wrap .player-controller[data-v-29e54bea]:hover,.player-wrap.player-wrap-hover .player-controller[data-v-29e54bea]{transform:translateY(0)}.player-input[data-v-29e54bea],.player-state[data-v-29e54bea]{position:absolute;left:0;top:0;right:0;bottom:2.5rem;display:flex;justify-content:center;align-items:center;overflow:hidden;z-index:1}.player-input[data-v-29e54bea]{width:100%;border:none;opacity:0;cursor:default;padding:0}.play-btn[data-v-29e54bea]{width:3.75rem;height:3.75rem;color:#fff;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.4);border-radius:50%;font-size:2.5rem;opacity:0;pointer-events:none}.player-lightsOff[data-v-29e54bea]{position:fixed;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.9)}.is-lightsOff[data-v-29e54bea]{z-index:999998}.dplayer-icons-right svg[data-v-29e54bea]{font-size:1.1875rem}.bfullscreen[data-v-29e54bea]{font-size:1.0625rem}.d-fade-in-enter-active[data-v-29e54bea],.d-fade-in-leave-active[data-v-29e54bea]{transition:.5s}.d-fade-in-enter-from[data-v-29e54bea],.d-fade-in-leave-to[data-v-29e54bea]{opacity:0}.rotateHover[data-v-29e54bea]{transition:.2s}.rotateHover[data-v-29e54bea]:hover{transform:rotate(90deg)}.rotating[data-v-29e54bea]{animation:rotating-29e54bea 2s linear infinite}@keyframes rotating-29e54bea{to{-webkit-transform:rotate(1turn)}}@keyframes spin-29e54bea{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.dplayer-bezel-transition[data-v-29e54bea]{animation:bezel-hide-29e54bea .5s linear}@keyframes bezel-hide-29e54bea{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}.player-wrap[data-v-29e54bea]{width:var(--647a78ef);height:var(--1105ab1e)}