diff --git a/docs/uncompiled/artplayer/index.js b/docs/uncompiled/artplayer/index.js index 2cf4f6caa..3076edac0 100644 --- a/docs/uncompiled/artplayer/index.js +++ b/docs/uncompiled/artplayer/index.js @@ -244,7 +244,7 @@ class Artplayer extends _emitterDefault.default { return "development"; } static get build() { - return "1652921858729"; + return "1652922839996"; } static get config() { return _configDefault.default; @@ -382,7 +382,7 @@ if (typeof window !== 'undefined') window['Artplayer'] = Artplayer; console.log(`%c ArtPlayer %c ${Artplayer.version} %c https://artplayer.org`, 'color: #fff; background: #5f5f5f', 'color: #fff; background: #4bc729', ''); },{"bundle-text:./style/index.less":"SvnDa","option-validator":"i7tUx","./utils/emitter":"elSLF","./utils":"jmgNb","./scheme":"gL38d","./config":"2ZnKD","./whitelist":"gd0pl","./template":"bDTDS","./i18n":"k0CtI","./player":"35XKf","./control":"faO0X","./contextmenu":"5npaZ","./info":"6vVKE","./subtitle":"4exyO","./events":"dz5ul","./hotkey":"1nFqF","./layer":"fvy8V","./loading":"h8KPY","./notice":"cr1XY","./mask":"llnR4","./icons":"gP6M7","./setting":"e5Aaq","./storage":"feFxw","./plugins":"h1hfO","./ads":"gqroK","./mobile":"c9n1Y","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"SvnDa":[function(require,module,exports) { -module.exports = ".art-video-player {\n z-index: 20;\n width: 100%;\n height: 100%;\n zoom: 1;\n color: #eee;\n text-align: left;\n direction: ltr;\n user-select: none;\n -webkit-tap-highlight-color: #0000;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n background-color: #000;\n outline: none;\n margin: 0 auto;\n font-family: Roboto, Arial, Helvetica, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n display: flex;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: #666;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: #ccc;\n}\n\n.art-video-player .art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1.5;\n display: inline-flex;\n}\n\n.art-video-player .art-icon svg {\n fill: #fff;\n}\n\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n .art-video-player .art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000b3 !important;\n }\n}\n\n.art-video-player .art-video {\n z-index: 10;\n width: 100%;\n height: 100%;\n cursor: pointer;\n background-color: #000;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-poster {\n z-index: 11;\n width: 100%;\n height: 100%;\n user-select: none;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n width: 100%;\n text-align: center;\n color: #fff;\n pointer-events: none;\n text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;\n padding: 0 20px;\n font-size: 20px;\n display: none;\n position: absolute;\n bottom: 10px;\n}\n\n.art-video-player .art-subtitle p {\n word-break: break-all;\n height: fit-content;\n margin: 5px 0 0;\n line-height: 1.2;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: block;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: 50px;\n}\n\n.art-video-player .art-danmuku {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers {\n z-index: 40;\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers .art-layer {\n pointer-events: auto;\n}\n\n.art-video-player.art-layer-show .art-layers {\n display: block;\n}\n\n.art-video-player .art-mask {\n z-index: 50;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-mask .art-state {\n width: 60px;\n height: 60px;\n opacity: .85;\n cursor: pointer;\n pointer-events: all;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n bottom: 65px;\n right: 30px;\n}\n\n.art-video-player.art-mask-show .art-mask {\n display: flex;\n}\n\n.art-video-player.art-mobile .art-state {\n position: static;\n}\n\n.art-video-player .art-loading {\n z-index: 70;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player.art-loading-show .art-loading {\n display: flex;\n}\n\n.art-video-player .art-bottom {\n z-index: 60;\n height: 100px;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n flex-direction: column;\n justify-content: space-between;\n padding: 50px 10px 0;\n transition: all .2s ease-in-out;\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.art-video-player .art-bottom .art-progress {\n z-index: 0;\n pointer-events: auto;\n flex: 1;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress {\n height: 4px;\n cursor: pointer;\n flex-direction: row;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n height: 50%;\n width: 100%;\n background: #fff3;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded {\n z-index: 10;\n height: 100%;\n width: 0;\n background: #fff6;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-played {\n z-index: 20;\n height: 100%;\n width: 0;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight {\n z-index: 30;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span {\n width: 7px;\n height: 100%;\n pointer-events: auto;\n background: #fff;\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {\n visibility: hidden;\n z-index: 40;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n transition: transform .1s ease-in-out;\n position: absolute;\n transform: scale(.1);\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator .art-icon {\n width: 100%;\n height: 100%;\n pointer-events: none;\n user-select: none;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-tip {\n z-index: 50;\n height: 20px;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n background: #000000b3;\n border-radius: 3px;\n padding: 0 5px;\n font-size: 12px;\n font-weight: bold;\n line-height: 20px;\n display: none;\n position: absolute;\n top: -25px;\n left: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-thumbnails {\n pointer-events: none;\n background-color: #000000b3;\n display: none;\n position: absolute;\n bottom: 8px;\n left: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-loop {\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-loop .art-loop-point {\n width: 2px;\n height: 8px;\n background: #ffffffbf;\n position: absolute;\n top: -2px;\n left: 0;\n}\n\n.art-video-player .art-bottom .art-controls {\n z-index: 1;\n pointer-events: auto;\n height: 45px;\n justify-content: space-between;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-controls .art-controls-left, .art-video-player .art-bottom .art-controls .art-controls-right {\n display: flex;\n}\n\n.art-video-player .art-bottom .art-controls .art-controls-center {\n height: 100%;\n flex: 1;\n justify-content: center;\n align-items: center;\n padding: 0 10px;\n display: flex;\n}\n\n.art-video-player .art-bottom .art-controls .art-controls-right {\n justify-content: flex-end;\n}\n\n.art-video-player .art-bottom .art-controls .art-control {\n opacity: .9;\n min-height: 36px;\n min-width: 36px;\n text-align: center;\n cursor: pointer;\n white-space: nowrap;\n justify-content: center;\n align-items: center;\n font-size: 12px;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player .art-bottom .art-controls .art-control .art-icon {\n float: left;\n height: 36px;\n width: 36px;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-bottom .art-controls .art-control:hover {\n opacity: 1;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-onlyText {\n padding: 0 10px;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel {\n float: left;\n width: 0;\n height: 100%;\n transition: margin .2s cubic-bezier(.4, 0, 1, 1), width .2s cubic-bezier(.4, 0, 1, 1);\n position: relative;\n overflow: hidden;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle {\n width: 12px;\n height: 12px;\n background: #fff;\n border-radius: 12px;\n margin-top: -6px;\n position: absolute;\n top: 50%;\n left: 0;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before {\n background: #fff;\n left: -54px;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after {\n background: #fff3;\n left: 6px;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before, .art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after {\n content: \"\";\n height: 3px;\n width: 60px;\n margin-top: -2px;\n display: block;\n position: absolute;\n top: 50%;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume:hover .art-volume-panel {\n width: 60px;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-quality {\n z-index: 30;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-quality .art-qualitys {\n width: 100px;\n text-align: center;\n color: #fff;\n background: #000c;\n border-radius: 3px;\n padding: 5px 0;\n display: none;\n position: absolute;\n bottom: 35px;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-quality .art-qualitys .art-quality-item {\n height: 30px;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-shadow: 0 0 2px #00000080;\n line-height: 30px;\n overflow: hidden;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-quality .art-qualitys .art-quality-item:hover {\n background-color: #ffffff1a;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-quality:hover .art-qualitys {\n display: block;\n}\n\n.art-video-player .art-bottom:hover .art-progress .art-control-progress .art-control-progress-inner {\n height: 100%;\n}\n\n.art-video-player .art-bottom:hover .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {\n visibility: visible;\n transform: scale(1);\n}\n\n.art-video-player.art-control-show .art-bottom, .art-video-player.art-hover .art-bottom {\n opacity: 1;\n visibility: visible;\n}\n\n.art-video-player.art-error .art-progress-indicator, .art-video-player.art-destroy .art-progress-indicator, .art-video-player.art-error .art-progress-tip, .art-video-player.art-destroy .art-progress-tip {\n display: none !important;\n}\n\n.art-video-player.art-mobile .art-bottom {\n padding: 50px 7px 0;\n}\n\n.art-video-player.art-mobile .art-bottom .art-controls {\n height: 40px;\n}\n\n.art-video-player.art-mobile .art-bottom .art-progress-indicator {\n visibility: visible !important;\n transform: scale(1) !important;\n}\n\n.art-video-player .art-notice {\n z-index: 80;\n width: 100%;\n pointer-events: none;\n padding: 10px;\n font-size: 14px;\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.art-video-player .art-notice .art-notice-inner {\n color: #fff;\n background-color: #0009;\n border-radius: 3px;\n padding: 5px 10px;\n display: inline-block;\n}\n\n.art-video-player.art-notice-show .art-notice {\n display: flex;\n}\n\n.art-video-player .art-contextmenus {\n z-index: 120;\n min-width: 200px;\n background-color: #000000e6;\n border-radius: 3px;\n flex-direction: column;\n padding: 5px 0;\n display: none;\n position: absolute;\n top: 10px;\n left: 10px;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu {\n cursor: pointer;\n color: #fff;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-shadow: 0 0 2px #00000080;\n border-bottom: 1px solid #ffffff1a;\n padding: 10px 15px;\n font-size: 12px;\n display: block;\n overflow: hidden;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu a {\n color: #fff;\n text-decoration: none;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu span {\n padding: 0 7px;\n display: inline-block;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu span:hover, .art-video-player .art-contextmenus .art-contextmenu span.art-current {\n color: #00c9ff;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu:hover {\n background-color: #ffffff1a;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu:last-child {\n border-bottom: none;\n}\n\n.art-video-player.art-contextmenu-show .art-contextmenus {\n display: flex;\n}\n\n.art-video-player .art-settings {\n z-index: 90;\n height: auto;\n max-height: 300px;\n background-color: #000000e6;\n border-radius: 3px;\n font-size: 13px;\n transition: all .2s;\n display: none;\n position: absolute;\n bottom: 50px;\n right: 10px;\n overflow: auto;\n}\n\n.art-video-player .art-settings .art-setting-panel {\n display: none;\n}\n\n.art-video-player .art-settings .art-setting-panel.art-current {\n display: block;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item {\n height: 35px;\n cursor: pointer;\n color: #fffc;\n justify-content: space-between;\n align-items: center;\n padding: 0 5px;\n line-height: 1;\n display: flex;\n overflow: hidden;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item:hover, .art-video-player .art-settings .art-setting-panel .art-setting-item.art-current {\n color: #fff;\n background-color: #ffffff1a;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-icon {\n width: 30px;\n height: 30px;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-icon-check {\n visibility: hidden;\n height: 15px;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item.art-current .art-icon-check {\n visibility: visible;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-left {\n white-space: nowrap;\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-left .art-setting-item-left-icon {\n height: 24px;\n width: 24px;\n justify-content: center;\n align-items: center;\n margin-right: 10px;\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right {\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right .art-setting-item-right-tooltip {\n white-space: nowrap;\n color: #ffffff80;\n margin-right: 5px;\n font-size: 12px;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right .art-setting-item-right-icon {\n height: 24px;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right .art-setting-range {\n height: 3px;\n width: 80px;\n appearance: none;\n background-color: #fff3;\n outline: none;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item-back {\n border-bottom: 1px solid #ffffff1a;\n}\n\n.art-video-player.art-setting-show .art-settings {\n display: block;\n}\n\n.art-video-player.art-mobile .art-settings {\n max-height: 200px;\n}\n\n.art-video-player .art-info {\n z-index: 100;\n width: 350px;\n color: #fff;\n -webkit-font-smoothing: antialiased;\n background-color: #000000e6;\n flex-direction: column;\n padding: 10px;\n font-family: Noto Sans CJK SC DemiLight, Roboto, Segoe UI, Tahoma, Arial, Helvetica, sans-serif;\n font-size: 12px;\n display: none;\n position: absolute;\n top: 10px;\n left: 10px;\n}\n\n.art-video-player .art-info .art-info-item {\n margin-bottom: 5px;\n display: flex;\n}\n\n.art-video-player .art-info .art-info-item .art-info-title {\n width: 100px;\n text-align: right;\n}\n\n.art-video-player .art-info .art-info-item .art-info-content {\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n padding-left: 5px;\n overflow: hidden;\n}\n\n.art-video-player .art-info .art-info-item:last-child {\n margin-bottom: 0;\n}\n\n.art-video-player .art-info .art-info-close {\n cursor: pointer;\n position: absolute;\n top: 5px;\n right: 5px;\n}\n\n.art-video-player.art-info-show .art-info {\n display: flex;\n}\n\n.art-video-player.art-hide-cursor * {\n cursor: none !important;\n}\n\n.art-video-player[data-aspect-ratio] video {\n box-sizing: content-box;\n object-fit: fill;\n}\n\n.art-video-player.art-fullscreen-web {\n z-index: 9999;\n width: 100%;\n height: 100%;\n position: fixed;\n inset: 0;\n}\n\n.art-video-player .art-mini-header {\n z-index: 110;\n height: 35px;\n color: #fff;\n opacity: 0;\n visibility: hidden;\n background-color: #00000080;\n justify-content: space-between;\n align-items: center;\n line-height: 35px;\n transition: all .2s ease-in-out;\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n}\n\n.art-video-player .art-mini-header .art-mini-title {\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: move;\n flex: 1;\n padding: 0 10px;\n overflow: hidden;\n}\n\n.art-video-player .art-mini-header .art-mini-close {\n width: 35px;\n text-align: center;\n cursor: pointer;\n font-size: 22px;\n}\n\n.art-video-player.art-is-dragging {\n opacity: .7;\n}\n\n.art-video-player.art-mini {\n z-index: 9999;\n width: 400px;\n height: 225px;\n position: fixed;\n box-shadow: 0 2px 5px #00000029, 0 3px 6px #0003;\n}\n\n.art-video-player.art-mini .art-mini-header {\n user-select: none;\n display: flex;\n}\n\n.art-video-player.art-mini.art-hover .art-mini-header {\n opacity: 1;\n visibility: visible;\n}\n\n.art-video-player.art-mini .art-mask .art-state {\n position: static;\n}\n\n.art-video-player.art-mini .art-contextmenu, .art-video-player.art-mini .art-bottom, .art-video-player.art-mini .art-danmu, .art-video-player.art-mini .art-info, .art-video-player.art-mini .art-layers, .art-video-player.art-mini .art-notice, .art-video-player.art-mini .art-settings, .art-video-player.art-mini .art-subtitle {\n display: none !important;\n}\n\n.art-auto-size {\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-video-player[data-flip=\"horizontal\"] .art-video {\n transform: scaleX(-1);\n}\n\n.art-video-player[data-flip=\"vertical\"] .art-video {\n transform: scaleY(-1);\n}\n\n.art-video-player .art-layer-miniProgressBar {\n height: 2px;\n background-color: var(--theme);\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.art-video-player .art-layer-lock {\n height: 34px;\n width: 34px;\n color: #fff;\n background-color: #00000080;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n top: calc(50% - 17px);\n left: 15px;\n}\n\n.art-video-player.art-lock .art-bottom {\n display: none !important;\n}\n\n.art-video-player.art-lock .art-subtitle {\n bottom: 10px !important;\n}\n\n.art-video-player.art-lock .art-layer-miniProgressBar {\n display: block !important;\n}\n\n.art-video-player.art-control-show .art-layer-miniProgressBar {\n display: none;\n}\n\n.art-video-player.art-control-show .art-layer-lock {\n display: flex;\n}\n\n.art-video-player .art-control-selector {\n position: relative;\n}\n\n.art-video-player .art-control-selector .art-selector-list {\n min-width: 100px;\n max-width: 200px;\n max-height: 200px;\n text-align: center;\n color: #fff;\n background-color: #000c;\n border-radius: 3px;\n padding: 5px 0;\n display: none;\n position: absolute;\n bottom: 35px;\n overflow: auto;\n}\n\n.art-video-player .art-control-selector .art-selector-list .art-selector-item {\n height: 30px;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-shadow: 0 0 2px #00000080;\n padding: 0 5px;\n line-height: 30px;\n overflow: hidden;\n}\n\n.art-video-player .art-control-selector .art-selector-list .art-selector-item:hover {\n background-color: #ffffff1a;\n}\n\n.art-video-player .art-control-selector .art-selector-list .art-selector-item:hover, .art-video-player .art-control-selector .art-selector-list .art-selector-item.art-current {\n color: #00c9ff;\n}\n\n.art-video-player .art-control-selector:hover .art-selector-list {\n display: block;\n}\n\n[class*=\"hint--\"] {\n font-style: normal;\n display: inline-block;\n position: relative;\n}\n\n[class*=\"hint--\"]:before, [class*=\"hint--\"]:after {\n visibility: hidden;\n opacity: 0;\n z-index: 1000000;\n pointer-events: none;\n transition: all .3s;\n transition-delay: 0s;\n position: absolute;\n transform: translate3d(0, 0, 0);\n}\n\n[class*=\"hint--\"]:hover:before, [class*=\"hint--\"]:hover:after {\n visibility: visible;\n opacity: 1;\n transition-delay: .1s;\n}\n\n[class*=\"hint--\"]:before {\n content: \"\";\n z-index: 1000000;\n background: none;\n border: 6px solid #0000;\n position: absolute;\n}\n\n[class*=\"hint--\"]:after {\n color: #fff;\n white-space: nowrap;\n background: #000;\n padding: 8px 10px;\n font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n font-size: 12px;\n line-height: 12px;\n}\n\n[class*=\"hint--\"][aria-label]:after {\n content: attr(aria-label);\n}\n\n[class*=\"hint--\"][data-hint]:after {\n content: attr(data-hint);\n}\n\n[aria-label=\"\"]:before, [aria-label=\"\"]:after, [data-hint=\"\"]:before, [data-hint=\"\"]:after {\n display: none !important;\n}\n\n.hint--top-left:before, .hint--top-right:before, .hint--top:before {\n border-top-color: #000;\n}\n\n.hint--bottom-left:before, .hint--bottom-right:before, .hint--bottom:before {\n border-bottom-color: #000;\n}\n\n.hint--left:before {\n border-left-color: #000;\n}\n\n.hint--right:before {\n border-right-color: #000;\n}\n\n.hint--top:before {\n margin-bottom: -11px;\n}\n\n.hint--top:before, .hint--top:after {\n bottom: 100%;\n left: 50%;\n}\n\n.hint--top:before {\n left: calc(50% - 6px);\n}\n\n.hint--top:after {\n transform: translateX(-50%);\n}\n\n.hint--top:hover:before {\n transform: translateY(-8px);\n}\n\n.hint--top:hover:after {\n transform: translateX(-50%)translateY(-8px);\n}\n\n.hint--bottom:before {\n margin-top: -11px;\n}\n\n.hint--bottom:before, .hint--bottom:after {\n top: 100%;\n left: 50%;\n}\n\n.hint--bottom:before {\n left: calc(50% - 6px);\n}\n\n.hint--bottom:after {\n transform: translateX(-50%);\n}\n\n.hint--bottom:hover:before {\n transform: translateY(8px);\n}\n\n.hint--bottom:hover:after {\n transform: translateX(-50%)translateY(8px);\n}\n\n.hint--right:before {\n margin-bottom: -6px;\n margin-left: -11px;\n}\n\n.hint--right:after {\n margin-bottom: -14px;\n}\n\n.hint--right:before, .hint--right:after {\n bottom: 50%;\n left: 100%;\n}\n\n.hint--right:hover:before, .hint--right:hover:after {\n transform: translateX(8px);\n}\n\n.hint--left:before {\n margin-bottom: -6px;\n margin-right: -11px;\n}\n\n.hint--left:after {\n margin-bottom: -14px;\n}\n\n.hint--left:before, .hint--left:after {\n bottom: 50%;\n right: 100%;\n}\n\n.hint--left:hover:before, .hint--left:hover:after {\n transform: translateX(-8px);\n}\n\n.hint--top-left:before {\n margin-bottom: -11px;\n}\n\n.hint--top-left:before, .hint--top-left:after {\n bottom: 100%;\n left: 50%;\n}\n\n.hint--top-left:before {\n left: calc(50% - 6px);\n}\n\n.hint--top-left:after {\n margin-left: 12px;\n transform: translateX(-100%);\n}\n\n.hint--top-left:hover:before {\n transform: translateY(-8px);\n}\n\n.hint--top-left:hover:after {\n transform: translateX(-100%)translateY(-8px);\n}\n\n.hint--top-right:before {\n margin-bottom: -11px;\n}\n\n.hint--top-right:before, .hint--top-right:after {\n bottom: 100%;\n left: 50%;\n}\n\n.hint--top-right:before {\n left: calc(50% - 6px);\n}\n\n.hint--top-right:after {\n margin-left: -12px;\n transform: translateX(0);\n}\n\n.hint--top-right:hover:before, .hint--top-right:hover:after {\n transform: translateY(-8px);\n}\n\n.hint--bottom-left:before {\n margin-top: -11px;\n}\n\n.hint--bottom-left:before, .hint--bottom-left:after {\n top: 100%;\n left: 50%;\n}\n\n.hint--bottom-left:before {\n left: calc(50% - 6px);\n}\n\n.hint--bottom-left:after {\n margin-left: 12px;\n transform: translateX(-100%);\n}\n\n.hint--bottom-left:hover:before {\n transform: translateY(8px);\n}\n\n.hint--bottom-left:hover:after {\n transform: translateX(-100%)translateY(8px);\n}\n\n.hint--bottom-right:before {\n margin-top: -11px;\n}\n\n.hint--bottom-right:before, .hint--bottom-right:after {\n top: 100%;\n left: 50%;\n}\n\n.hint--bottom-right:before {\n left: calc(50% - 6px);\n}\n\n.hint--bottom-right:after {\n margin-left: -12px;\n transform: translateX(0);\n}\n\n.hint--bottom-right:hover:before, .hint--bottom-right:hover:after {\n transform: translateY(8px);\n}\n\n.hint--small:after, .hint--medium:after, .hint--large:after {\n white-space: normal;\n word-wrap: break-word;\n line-height: 1.4em;\n}\n\n.hint--small:after {\n width: 80px;\n}\n\n.hint--medium:after {\n width: 150px;\n}\n\n.hint--large:after {\n width: 300px;\n}\n\n[class*=\"hint--\"]:after {\n text-shadow: 0 -1px #000;\n box-shadow: 4px 4px 8px #0000004d;\n}\n\n.hint--error:after {\n text-shadow: 0 -1px #592726;\n background-color: #b34e4d;\n}\n\n.hint--error.hint--top-left:before, .hint--error.hint--top-right:before, .hint--error.hint--top:before {\n border-top-color: #b34e4d;\n}\n\n.hint--error.hint--bottom-left:before, .hint--error.hint--bottom-right:before, .hint--error.hint--bottom:before {\n border-bottom-color: #b34e4d;\n}\n\n.hint--error.hint--left:before {\n border-left-color: #b34e4d;\n}\n\n.hint--error.hint--right:before {\n border-right-color: #b34e4d;\n}\n\n.hint--warning:after {\n text-shadow: 0 -1px #6c5328;\n background-color: #c09854;\n}\n\n.hint--warning.hint--top-left:before, .hint--warning.hint--top-right:before, .hint--warning.hint--top:before {\n border-top-color: #c09854;\n}\n\n.hint--warning.hint--bottom-left:before, .hint--warning.hint--bottom-right:before, .hint--warning.hint--bottom:before {\n border-bottom-color: #c09854;\n}\n\n.hint--warning.hint--left:before {\n border-left-color: #c09854;\n}\n\n.hint--warning.hint--right:before {\n border-right-color: #c09854;\n}\n\n.hint--info:after {\n text-shadow: 0 -1px #1a3c4d;\n background-color: #3986ac;\n}\n\n.hint--info.hint--top-left:before, .hint--info.hint--top-right:before, .hint--info.hint--top:before {\n border-top-color: #3986ac;\n}\n\n.hint--info.hint--bottom-left:before, .hint--info.hint--bottom-right:before, .hint--info.hint--bottom:before {\n border-bottom-color: #3986ac;\n}\n\n.hint--info.hint--left:before {\n border-left-color: #3986ac;\n}\n\n.hint--info.hint--right:before {\n border-right-color: #3986ac;\n}\n\n.hint--success:after {\n text-shadow: 0 -1px #1a321a;\n background-color: #458746;\n}\n\n.hint--success.hint--top-left:before, .hint--success.hint--top-right:before, .hint--success.hint--top:before {\n border-top-color: #458746;\n}\n\n.hint--success.hint--bottom-left:before, .hint--success.hint--bottom-right:before, .hint--success.hint--bottom:before {\n border-bottom-color: #458746;\n}\n\n.hint--success.hint--left:before {\n border-left-color: #458746;\n}\n\n.hint--success.hint--right:before {\n border-right-color: #458746;\n}\n\n.hint--always:after, .hint--always:before {\n opacity: 1;\n visibility: visible;\n}\n\n.hint--always.hint--top:before {\n transform: translateY(-8px);\n}\n\n.hint--always.hint--top:after {\n transform: translateX(-50%)translateY(-8px);\n}\n\n.hint--always.hint--top-left:before {\n transform: translateY(-8px);\n}\n\n.hint--always.hint--top-left:after {\n transform: translateX(-100%)translateY(-8px);\n}\n\n.hint--always.hint--top-right:before, .hint--always.hint--top-right:after {\n transform: translateY(-8px);\n}\n\n.hint--always.hint--bottom:before {\n transform: translateY(8px);\n}\n\n.hint--always.hint--bottom:after {\n transform: translateX(-50%)translateY(8px);\n}\n\n.hint--always.hint--bottom-left:before {\n transform: translateY(8px);\n}\n\n.hint--always.hint--bottom-left:after {\n transform: translateX(-100%)translateY(8px);\n}\n\n.hint--always.hint--bottom-right:before, .hint--always.hint--bottom-right:after {\n transform: translateY(8px);\n}\n\n.hint--always.hint--left:before, .hint--always.hint--left:after {\n transform: translateX(-8px);\n}\n\n.hint--always.hint--right:before, .hint--always.hint--right:after {\n transform: translateX(8px);\n}\n\n.hint--rounded:after {\n border-radius: 4px;\n}\n\n.hint--no-animate:before, .hint--no-animate:after {\n transition-duration: 0s;\n}\n\n.hint--bounce:before, .hint--bounce:after {\n -webkit-transition: opacity .3s, visibility .3s, -webkit-transform .3s cubic-bezier(.71, 1.7, .77, 1.24);\n -moz-transition: opacity .3s, visibility .3s, -moz-transform .3s cubic-bezier(.71, 1.7, .77, 1.24);\n transition: opacity .3s, visibility .3s, transform .3s cubic-bezier(.71, 1.7, .77, 1.24);\n}\n\n.hint--no-shadow:before, .hint--no-shadow:after {\n text-shadow: initial;\n box-shadow: initial;\n}\n\n.hint--no-arrow:before {\n display: none;\n}\n\n"; +module.exports = ".art-video-player {\n z-index: 20;\n width: 100%;\n height: 100%;\n zoom: 1;\n color: #eee;\n text-align: left;\n direction: ltr;\n user-select: none;\n -webkit-tap-highlight-color: #0000;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n background-color: #000;\n outline: none;\n margin: 0 auto;\n font-family: Roboto, Arial, Helvetica, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n display: flex;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: #666;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: #ccc;\n}\n\n.art-video-player .art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1.5;\n display: inline-flex;\n}\n\n.art-video-player .art-icon svg {\n fill: #fff;\n}\n\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n .art-video-player .art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000b3 !important;\n }\n}\n\n.art-video-player .art-video {\n z-index: 10;\n width: 100%;\n height: 100%;\n cursor: pointer;\n background-color: #000;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-poster {\n z-index: 11;\n width: 100%;\n height: 100%;\n user-select: none;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n width: 100%;\n text-align: center;\n color: #fff;\n pointer-events: none;\n text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;\n padding: 0 20px;\n font-size: 20px;\n display: none;\n position: absolute;\n bottom: 10px;\n}\n\n.art-video-player .art-subtitle p {\n word-break: break-all;\n height: fit-content;\n margin: 5px 0 0;\n line-height: 1.2;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: block;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: 50px;\n}\n\n.art-video-player .art-danmuku {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers {\n z-index: 40;\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers .art-layer {\n pointer-events: auto;\n}\n\n.art-video-player.art-layer-show .art-layers {\n display: block;\n}\n\n.art-video-player .art-mask {\n z-index: 50;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-mask .art-state {\n width: 60px;\n height: 60px;\n opacity: .85;\n cursor: pointer;\n pointer-events: all;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n bottom: 65px;\n right: 30px;\n}\n\n.art-video-player.art-mask-show .art-mask {\n display: flex;\n}\n\n.art-video-player.art-mobile .art-state {\n position: static;\n}\n\n.art-video-player .art-loading {\n z-index: 70;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player.art-loading-show .art-loading {\n display: flex;\n}\n\n.art-video-player .art-bottom {\n z-index: 60;\n height: 100px;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n flex-direction: column;\n justify-content: space-between;\n padding: 50px 10px 0;\n transition: all .2s ease-in-out;\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.art-video-player .art-bottom .art-progress {\n z-index: 0;\n pointer-events: auto;\n flex: 1;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress {\n height: 4px;\n cursor: pointer;\n flex-direction: row;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n height: 50%;\n width: 100%;\n background: #fff3;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded {\n z-index: 10;\n height: 100%;\n width: 0;\n background: #fff6;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-played {\n z-index: 20;\n height: 100%;\n width: 0;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight {\n z-index: 30;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span {\n width: 7px;\n height: 100%;\n pointer-events: auto;\n background: #fff;\n display: inline-block;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {\n visibility: hidden;\n z-index: 40;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n transition: transform .1s ease-in-out;\n position: absolute;\n transform: scale(.1);\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator .art-icon {\n width: 100%;\n height: 100%;\n pointer-events: none;\n user-select: none;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-tip {\n z-index: 50;\n height: 20px;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n background: #000000b3;\n border-radius: 3px;\n padding: 0 5px;\n font-size: 12px;\n font-weight: bold;\n line-height: 20px;\n display: none;\n position: absolute;\n top: -25px;\n left: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-thumbnails {\n pointer-events: none;\n background-color: #000000b3;\n display: none;\n position: absolute;\n bottom: 8px;\n left: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-loop {\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-loop .art-loop-point {\n width: 2px;\n height: 8px;\n background: #ffffffbf;\n position: absolute;\n top: -2px;\n left: 0;\n}\n\n.art-video-player .art-bottom .art-controls {\n z-index: 1;\n pointer-events: auto;\n height: 45px;\n justify-content: space-between;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-controls .art-controls-left, .art-video-player .art-bottom .art-controls .art-controls-right {\n display: flex;\n}\n\n.art-video-player .art-bottom .art-controls .art-controls-center {\n height: 100%;\n flex: 1;\n justify-content: center;\n align-items: center;\n padding: 0 10px;\n display: flex;\n}\n\n.art-video-player .art-bottom .art-controls .art-controls-right {\n justify-content: flex-end;\n}\n\n.art-video-player .art-bottom .art-controls .art-control {\n opacity: .9;\n min-height: 36px;\n min-width: 36px;\n text-align: center;\n cursor: pointer;\n white-space: nowrap;\n justify-content: center;\n align-items: center;\n font-size: 12px;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player .art-bottom .art-controls .art-control .art-icon {\n float: left;\n height: 36px;\n width: 36px;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-bottom .art-controls .art-control:hover {\n opacity: 1;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-onlyText {\n padding: 0 10px;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel {\n float: left;\n width: 0;\n height: 100%;\n transition: margin .2s cubic-bezier(.4, 0, 1, 1), width .2s cubic-bezier(.4, 0, 1, 1);\n position: relative;\n overflow: hidden;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle {\n width: 12px;\n height: 12px;\n background: #fff;\n border-radius: 12px;\n margin-top: -6px;\n position: absolute;\n top: 50%;\n left: 0;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before {\n background: #fff;\n left: -54px;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after {\n background: #fff3;\n left: 6px;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before, .art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after {\n content: \"\";\n height: 3px;\n width: 60px;\n margin-top: -2px;\n display: block;\n position: absolute;\n top: 50%;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-volume:hover .art-volume-panel {\n width: 60px;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-quality {\n z-index: 30;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-quality .art-qualitys {\n width: 100px;\n text-align: center;\n color: #fff;\n background: #000c;\n border-radius: 3px;\n padding: 5px 0;\n display: none;\n position: absolute;\n bottom: 35px;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-quality .art-qualitys .art-quality-item {\n height: 30px;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-shadow: 0 0 2px #00000080;\n line-height: 30px;\n overflow: hidden;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-quality .art-qualitys .art-quality-item:hover {\n background-color: #ffffff1a;\n}\n\n.art-video-player .art-bottom .art-controls .art-control-quality:hover .art-qualitys {\n display: block;\n}\n\n.art-video-player .art-bottom:hover .art-progress .art-control-progress .art-control-progress-inner {\n height: 100%;\n}\n\n.art-video-player .art-bottom:hover .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {\n visibility: visible;\n transform: scale(1);\n}\n\n.art-video-player.art-control-show .art-bottom, .art-video-player.art-hover .art-bottom {\n opacity: 1;\n visibility: visible;\n}\n\n.art-video-player.art-error .art-progress-indicator, .art-video-player.art-destroy .art-progress-indicator, .art-video-player.art-error .art-progress-tip, .art-video-player.art-destroy .art-progress-tip {\n display: none !important;\n}\n\n.art-video-player.art-mobile .art-bottom {\n padding: 50px 7px 0;\n}\n\n.art-video-player.art-mobile .art-bottom .art-controls {\n height: 40px;\n}\n\n.art-video-player.art-mobile .art-bottom .art-progress-indicator {\n visibility: visible !important;\n transform: scale(1) !important;\n}\n\n.art-video-player .art-notice {\n z-index: 80;\n width: 100%;\n pointer-events: none;\n padding: 10px;\n font-size: 14px;\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.art-video-player .art-notice .art-notice-inner {\n color: #fff;\n background-color: #0009;\n border-radius: 3px;\n padding: 5px 10px;\n display: inline-block;\n}\n\n.art-video-player.art-notice-show .art-notice {\n display: flex;\n}\n\n.art-video-player .art-contextmenus {\n z-index: 120;\n min-width: 200px;\n background-color: #000000e6;\n border-radius: 3px;\n flex-direction: column;\n padding: 5px 0;\n display: none;\n position: absolute;\n top: 10px;\n left: 10px;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu {\n cursor: pointer;\n color: #fff;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-shadow: 0 0 2px #00000080;\n border-bottom: 1px solid #ffffff1a;\n padding: 10px 15px;\n font-size: 12px;\n display: block;\n overflow: hidden;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu a {\n color: #fff;\n text-decoration: none;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu span {\n padding: 0 7px;\n display: inline-block;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu span:hover, .art-video-player .art-contextmenus .art-contextmenu span.art-current {\n color: #00c9ff;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu:hover {\n background-color: #ffffff1a;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu:last-child {\n border-bottom: none;\n}\n\n.art-video-player.art-contextmenu-show .art-contextmenus {\n display: flex;\n}\n\n.art-video-player .art-settings {\n z-index: 90;\n height: auto;\n max-height: 300px;\n background-color: #000000e6;\n border-radius: 3px;\n font-size: 13px;\n transition: all .2s;\n display: none;\n position: absolute;\n bottom: 50px;\n right: 10px;\n overflow: auto;\n}\n\n.art-video-player .art-settings .art-setting-panel {\n display: none;\n}\n\n.art-video-player .art-settings .art-setting-panel.art-current {\n display: block;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item {\n height: 35px;\n cursor: pointer;\n color: #fffc;\n justify-content: space-between;\n align-items: center;\n padding: 0 5px;\n line-height: 1;\n display: flex;\n overflow: hidden;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item:hover, .art-video-player .art-settings .art-setting-panel .art-setting-item.art-current {\n color: #fff;\n background-color: #ffffff1a;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-icon {\n width: 30px;\n height: 30px;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-icon-check {\n visibility: hidden;\n height: 15px;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item.art-current .art-icon-check {\n visibility: visible;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-left {\n white-space: nowrap;\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-left .art-setting-item-left-icon {\n height: 24px;\n width: 24px;\n justify-content: center;\n align-items: center;\n margin-right: 10px;\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right {\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right .art-setting-item-right-tooltip {\n white-space: nowrap;\n color: #ffffff80;\n margin-right: 5px;\n font-size: 12px;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right .art-setting-item-right-icon {\n height: 24px;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right .art-setting-range {\n height: 3px;\n width: 80px;\n appearance: none;\n background-color: #fff3;\n outline: none;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item-back {\n border-bottom: 1px solid #ffffff1a;\n}\n\n.art-video-player.art-setting-show .art-settings {\n display: block;\n}\n\n.art-video-player.art-mobile .art-settings {\n max-height: 200px;\n}\n\n.art-video-player .art-info {\n z-index: 100;\n width: 350px;\n color: #fff;\n -webkit-font-smoothing: antialiased;\n background-color: #000000e6;\n flex-direction: column;\n padding: 10px;\n font-family: Noto Sans CJK SC DemiLight, Roboto, Segoe UI, Tahoma, Arial, Helvetica, sans-serif;\n font-size: 12px;\n display: none;\n position: absolute;\n top: 10px;\n left: 10px;\n}\n\n.art-video-player .art-info .art-info-item {\n margin-bottom: 5px;\n display: flex;\n}\n\n.art-video-player .art-info .art-info-item .art-info-title {\n width: 100px;\n text-align: right;\n}\n\n.art-video-player .art-info .art-info-item .art-info-content {\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n padding-left: 5px;\n overflow: hidden;\n}\n\n.art-video-player .art-info .art-info-item:last-child {\n margin-bottom: 0;\n}\n\n.art-video-player .art-info .art-info-close {\n cursor: pointer;\n position: absolute;\n top: 5px;\n right: 5px;\n}\n\n.art-video-player.art-info-show .art-info {\n display: flex;\n}\n\n.art-video-player.art-hide-cursor * {\n cursor: none !important;\n}\n\n.art-video-player[data-aspect-ratio] video {\n box-sizing: content-box;\n object-fit: fill;\n}\n\n.art-video-player.art-fullscreen-web {\n z-index: 9999;\n width: 100%;\n height: 100%;\n position: fixed;\n inset: 0;\n}\n\n.art-video-player .art-mini-header {\n z-index: 110;\n height: 35px;\n color: #fff;\n opacity: 0;\n visibility: hidden;\n background-color: #00000080;\n justify-content: space-between;\n align-items: center;\n line-height: 35px;\n transition: all .2s ease-in-out;\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n}\n\n.art-video-player .art-mini-header .art-mini-title {\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: move;\n flex: 1;\n padding: 0 10px;\n overflow: hidden;\n}\n\n.art-video-player .art-mini-header .art-mini-close {\n width: 35px;\n text-align: center;\n cursor: pointer;\n font-size: 22px;\n}\n\n.art-video-player.art-is-dragging {\n opacity: .7;\n}\n\n.art-video-player.art-mini {\n z-index: 9999;\n width: 400px;\n height: 225px;\n position: fixed;\n box-shadow: 0 2px 5px #00000029, 0 3px 6px #0003;\n}\n\n.art-video-player.art-mini .art-mini-header {\n user-select: none;\n display: flex;\n}\n\n.art-video-player.art-mini.art-hover .art-mini-header {\n opacity: 1;\n visibility: visible;\n}\n\n.art-video-player.art-mini .art-mask .art-state {\n position: static;\n}\n\n.art-video-player.art-mini .art-contextmenu, .art-video-player.art-mini .art-bottom, .art-video-player.art-mini .art-danmu, .art-video-player.art-mini .art-info, .art-video-player.art-mini .art-layers, .art-video-player.art-mini .art-notice, .art-video-player.art-mini .art-settings, .art-video-player.art-mini .art-subtitle {\n display: none !important;\n}\n\n.art-auto-size {\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-auto-size .art-video-player {\n transition: all .2s;\n}\n\n.art-video-player[data-flip=\"horizontal\"] .art-video {\n transform: scaleX(-1);\n}\n\n.art-video-player[data-flip=\"vertical\"] .art-video {\n transform: scaleY(-1);\n}\n\n.art-video-player .art-layer-miniProgressBar {\n height: 2px;\n background-color: var(--theme);\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.art-video-player .art-layer-lock {\n height: 34px;\n width: 34px;\n color: #fff;\n background-color: #00000080;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n top: calc(50% - 17px);\n left: 15px;\n}\n\n.art-video-player.art-lock .art-bottom {\n display: none !important;\n}\n\n.art-video-player.art-lock .art-subtitle {\n bottom: 10px !important;\n}\n\n.art-video-player.art-lock .art-layer-miniProgressBar {\n display: block !important;\n}\n\n.art-video-player.art-control-show .art-layer-miniProgressBar {\n display: none;\n}\n\n.art-video-player.art-control-show .art-layer-lock {\n display: flex;\n}\n\n.art-video-player .art-control-selector {\n position: relative;\n}\n\n.art-video-player .art-control-selector .art-selector-list {\n min-width: 100px;\n max-width: 200px;\n max-height: 200px;\n text-align: center;\n color: #fff;\n background-color: #000c;\n border-radius: 3px;\n padding: 5px 0;\n display: none;\n position: absolute;\n bottom: 35px;\n overflow: auto;\n}\n\n.art-video-player .art-control-selector .art-selector-list .art-selector-item {\n height: 30px;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-shadow: 0 0 2px #00000080;\n padding: 0 5px;\n line-height: 30px;\n overflow: hidden;\n}\n\n.art-video-player .art-control-selector .art-selector-list .art-selector-item:hover {\n background-color: #ffffff1a;\n}\n\n.art-video-player .art-control-selector .art-selector-list .art-selector-item:hover, .art-video-player .art-control-selector .art-selector-list .art-selector-item.art-current {\n color: #00c9ff;\n}\n\n.art-video-player .art-control-selector:hover .art-selector-list {\n display: block;\n}\n\n[class*=\"hint--\"] {\n font-style: normal;\n display: inline-block;\n position: relative;\n}\n\n[class*=\"hint--\"]:before, [class*=\"hint--\"]:after {\n visibility: hidden;\n opacity: 0;\n z-index: 1000000;\n pointer-events: none;\n transition: all .3s;\n transition-delay: 0s;\n position: absolute;\n transform: translate3d(0, 0, 0);\n}\n\n[class*=\"hint--\"]:hover:before, [class*=\"hint--\"]:hover:after {\n visibility: visible;\n opacity: 1;\n transition-delay: .1s;\n}\n\n[class*=\"hint--\"]:before {\n content: \"\";\n z-index: 1000000;\n background: none;\n border: 6px solid #0000;\n position: absolute;\n}\n\n[class*=\"hint--\"]:after {\n color: #fff;\n white-space: nowrap;\n background: #000;\n padding: 8px 10px;\n font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n font-size: 12px;\n line-height: 12px;\n}\n\n[class*=\"hint--\"][aria-label]:after {\n content: attr(aria-label);\n}\n\n[class*=\"hint--\"][data-hint]:after {\n content: attr(data-hint);\n}\n\n[aria-label=\"\"]:before, [aria-label=\"\"]:after, [data-hint=\"\"]:before, [data-hint=\"\"]:after {\n display: none !important;\n}\n\n.hint--top-left:before, .hint--top-right:before, .hint--top:before {\n border-top-color: #000;\n}\n\n.hint--bottom-left:before, .hint--bottom-right:before, .hint--bottom:before {\n border-bottom-color: #000;\n}\n\n.hint--left:before {\n border-left-color: #000;\n}\n\n.hint--right:before {\n border-right-color: #000;\n}\n\n.hint--top:before {\n margin-bottom: -11px;\n}\n\n.hint--top:before, .hint--top:after {\n bottom: 100%;\n left: 50%;\n}\n\n.hint--top:before {\n left: calc(50% - 6px);\n}\n\n.hint--top:after {\n transform: translateX(-50%);\n}\n\n.hint--top:hover:before {\n transform: translateY(-8px);\n}\n\n.hint--top:hover:after {\n transform: translateX(-50%)translateY(-8px);\n}\n\n.hint--bottom:before {\n margin-top: -11px;\n}\n\n.hint--bottom:before, .hint--bottom:after {\n top: 100%;\n left: 50%;\n}\n\n.hint--bottom:before {\n left: calc(50% - 6px);\n}\n\n.hint--bottom:after {\n transform: translateX(-50%);\n}\n\n.hint--bottom:hover:before {\n transform: translateY(8px);\n}\n\n.hint--bottom:hover:after {\n transform: translateX(-50%)translateY(8px);\n}\n\n.hint--right:before {\n margin-bottom: -6px;\n margin-left: -11px;\n}\n\n.hint--right:after {\n margin-bottom: -14px;\n}\n\n.hint--right:before, .hint--right:after {\n bottom: 50%;\n left: 100%;\n}\n\n.hint--right:hover:before, .hint--right:hover:after {\n transform: translateX(8px);\n}\n\n.hint--left:before {\n margin-bottom: -6px;\n margin-right: -11px;\n}\n\n.hint--left:after {\n margin-bottom: -14px;\n}\n\n.hint--left:before, .hint--left:after {\n bottom: 50%;\n right: 100%;\n}\n\n.hint--left:hover:before, .hint--left:hover:after {\n transform: translateX(-8px);\n}\n\n.hint--top-left:before {\n margin-bottom: -11px;\n}\n\n.hint--top-left:before, .hint--top-left:after {\n bottom: 100%;\n left: 50%;\n}\n\n.hint--top-left:before {\n left: calc(50% - 6px);\n}\n\n.hint--top-left:after {\n margin-left: 12px;\n transform: translateX(-100%);\n}\n\n.hint--top-left:hover:before {\n transform: translateY(-8px);\n}\n\n.hint--top-left:hover:after {\n transform: translateX(-100%)translateY(-8px);\n}\n\n.hint--top-right:before {\n margin-bottom: -11px;\n}\n\n.hint--top-right:before, .hint--top-right:after {\n bottom: 100%;\n left: 50%;\n}\n\n.hint--top-right:before {\n left: calc(50% - 6px);\n}\n\n.hint--top-right:after {\n margin-left: -12px;\n transform: translateX(0);\n}\n\n.hint--top-right:hover:before, .hint--top-right:hover:after {\n transform: translateY(-8px);\n}\n\n.hint--bottom-left:before {\n margin-top: -11px;\n}\n\n.hint--bottom-left:before, .hint--bottom-left:after {\n top: 100%;\n left: 50%;\n}\n\n.hint--bottom-left:before {\n left: calc(50% - 6px);\n}\n\n.hint--bottom-left:after {\n margin-left: 12px;\n transform: translateX(-100%);\n}\n\n.hint--bottom-left:hover:before {\n transform: translateY(8px);\n}\n\n.hint--bottom-left:hover:after {\n transform: translateX(-100%)translateY(8px);\n}\n\n.hint--bottom-right:before {\n margin-top: -11px;\n}\n\n.hint--bottom-right:before, .hint--bottom-right:after {\n top: 100%;\n left: 50%;\n}\n\n.hint--bottom-right:before {\n left: calc(50% - 6px);\n}\n\n.hint--bottom-right:after {\n margin-left: -12px;\n transform: translateX(0);\n}\n\n.hint--bottom-right:hover:before, .hint--bottom-right:hover:after {\n transform: translateY(8px);\n}\n\n.hint--small:after, .hint--medium:after, .hint--large:after {\n white-space: normal;\n word-wrap: break-word;\n line-height: 1.4em;\n}\n\n.hint--small:after {\n width: 80px;\n}\n\n.hint--medium:after {\n width: 150px;\n}\n\n.hint--large:after {\n width: 300px;\n}\n\n[class*=\"hint--\"]:after {\n text-shadow: 0 -1px #000;\n box-shadow: 4px 4px 8px #0000004d;\n}\n\n.hint--error:after {\n text-shadow: 0 -1px #592726;\n background-color: #b34e4d;\n}\n\n.hint--error.hint--top-left:before, .hint--error.hint--top-right:before, .hint--error.hint--top:before {\n border-top-color: #b34e4d;\n}\n\n.hint--error.hint--bottom-left:before, .hint--error.hint--bottom-right:before, .hint--error.hint--bottom:before {\n border-bottom-color: #b34e4d;\n}\n\n.hint--error.hint--left:before {\n border-left-color: #b34e4d;\n}\n\n.hint--error.hint--right:before {\n border-right-color: #b34e4d;\n}\n\n.hint--warning:after {\n text-shadow: 0 -1px #6c5328;\n background-color: #c09854;\n}\n\n.hint--warning.hint--top-left:before, .hint--warning.hint--top-right:before, .hint--warning.hint--top:before {\n border-top-color: #c09854;\n}\n\n.hint--warning.hint--bottom-left:before, .hint--warning.hint--bottom-right:before, .hint--warning.hint--bottom:before {\n border-bottom-color: #c09854;\n}\n\n.hint--warning.hint--left:before {\n border-left-color: #c09854;\n}\n\n.hint--warning.hint--right:before {\n border-right-color: #c09854;\n}\n\n.hint--info:after {\n text-shadow: 0 -1px #1a3c4d;\n background-color: #3986ac;\n}\n\n.hint--info.hint--top-left:before, .hint--info.hint--top-right:before, .hint--info.hint--top:before {\n border-top-color: #3986ac;\n}\n\n.hint--info.hint--bottom-left:before, .hint--info.hint--bottom-right:before, .hint--info.hint--bottom:before {\n border-bottom-color: #3986ac;\n}\n\n.hint--info.hint--left:before {\n border-left-color: #3986ac;\n}\n\n.hint--info.hint--right:before {\n border-right-color: #3986ac;\n}\n\n.hint--success:after {\n text-shadow: 0 -1px #1a321a;\n background-color: #458746;\n}\n\n.hint--success.hint--top-left:before, .hint--success.hint--top-right:before, .hint--success.hint--top:before {\n border-top-color: #458746;\n}\n\n.hint--success.hint--bottom-left:before, .hint--success.hint--bottom-right:before, .hint--success.hint--bottom:before {\n border-bottom-color: #458746;\n}\n\n.hint--success.hint--left:before {\n border-left-color: #458746;\n}\n\n.hint--success.hint--right:before {\n border-right-color: #458746;\n}\n\n.hint--always:after, .hint--always:before {\n opacity: 1;\n visibility: visible;\n}\n\n.hint--always.hint--top:before {\n transform: translateY(-8px);\n}\n\n.hint--always.hint--top:after {\n transform: translateX(-50%)translateY(-8px);\n}\n\n.hint--always.hint--top-left:before {\n transform: translateY(-8px);\n}\n\n.hint--always.hint--top-left:after {\n transform: translateX(-100%)translateY(-8px);\n}\n\n.hint--always.hint--top-right:before, .hint--always.hint--top-right:after {\n transform: translateY(-8px);\n}\n\n.hint--always.hint--bottom:before {\n transform: translateY(8px);\n}\n\n.hint--always.hint--bottom:after {\n transform: translateX(-50%)translateY(8px);\n}\n\n.hint--always.hint--bottom-left:before {\n transform: translateY(8px);\n}\n\n.hint--always.hint--bottom-left:after {\n transform: translateX(-100%)translateY(8px);\n}\n\n.hint--always.hint--bottom-right:before, .hint--always.hint--bottom-right:after {\n transform: translateY(8px);\n}\n\n.hint--always.hint--left:before, .hint--always.hint--left:after {\n transform: translateX(-8px);\n}\n\n.hint--always.hint--right:before, .hint--always.hint--right:after {\n transform: translateX(8px);\n}\n\n.hint--rounded:after {\n border-radius: 4px;\n}\n\n.hint--no-animate:before, .hint--no-animate:after {\n transition-duration: 0s;\n}\n\n.hint--bounce:before, .hint--bounce:after {\n -webkit-transition: opacity .3s, visibility .3s, -webkit-transform .3s cubic-bezier(.71, 1.7, .77, 1.24);\n -moz-transition: opacity .3s, visibility .3s, -moz-transform .3s cubic-bezier(.71, 1.7, .77, 1.24);\n transition: opacity .3s, visibility .3s, transform .3s cubic-bezier(.71, 1.7, .77, 1.24);\n}\n\n.hint--no-shadow:before, .hint--no-shadow:after {\n text-shadow: initial;\n box-shadow: initial;\n}\n\n.hint--no-arrow:before {\n display: none;\n}\n\n"; },{}],"i7tUx":[function(require,module,exports) { !function(r, t) { diff --git a/packages/artplayer/src/style/autoSize.less b/packages/artplayer/src/style/autoSize.less index 0e1e2dd90..a2300d600 100644 --- a/packages/artplayer/src/style/autoSize.less +++ b/packages/artplayer/src/style/autoSize.less @@ -2,4 +2,8 @@ display: flex; align-items: center; justify-content: center; + + .art-video-player { + transition: all 0.2s ease; + } } \ No newline at end of file