From 48268ef091ff1de88c92fcdd4b3dce671eb47b1e Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Wed, 19 Apr 2023 09:39:52 +0800 Subject: [PATCH] update style --- docs/uncompiled/artplayer/index.js | 2 +- packages/artplayer/src/style/bottom.less | 2 +- packages/artplayer/src/style/info.less | 4 +- packages/artplayer/src/style/notice.less | 2 +- packages/artplayer/src/style/plugins.less | 6 +-- packages/artplayer/src/style/setting.less | 2 +- packages/artplayer/src/style/variables.less | 29 +++++++------- packages/artplayer/types/cssVar.d.ts | 42 ++++++++++++++++++++- 8 files changed, 65 insertions(+), 24 deletions(-) diff --git a/docs/uncompiled/artplayer/index.js b/docs/uncompiled/artplayer/index.js index b137eb25d..51b328bea 100644 --- a/docs/uncompiled/artplayer/index.js +++ b/docs/uncompiled/artplayer/index.js @@ -415,7 +415,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":"2tbdu","./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","./mobile":"c9n1Y","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"SvnDa":[function(require,module,exports) { -module.exports = ".art-video-player {\n --art-theme: red;\n --art-font-color: #fff;\n --art-background-color: #000;\n --art-text-shadow-color: #00000080;\n --art-transition-duration: .2s;\n --art-player-padding: 10px;\n --art-state-size: 80px;\n --art-state-opacity: .8;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-control-height: 46px;\n --art-bottom-height: 100px;\n --art-bottom-offset: -20px;\n --art-bottom-gap: 5px;\n --art-progress-height: 6px;\n --art-highlight-width: 8px;\n --art-loop-width: 2px;\n --art-control-opacity: .75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-settings-scale: 1;\n --art-volume-height: 120px;\n --art-volume-handle-size: 14px;\n --art-lock-size: 36px;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-subtitle-border: #000;\n --art-widget-background: #000000d9;\n --art-tip-background: #00000080;\n --art-settings-icon-size: 24px;\n --art-progress-color: #fff3;\n --art-hover-color: #ffffff80;\n --art-loaded-color: #fff3;\n --art-highlight-color: #ffffff80;\n --art-loop-color: #ffffffbf;\n --art-scrollbar-size: 5px;\n --art-scrollbar-background: #666;\n --art-scrollbar-background-hover: #ccc;\n --art-contextmenus-min-width: 250px;\n}\n\n.art-bg-cover {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.art-video-player {\n width: 100%;\n height: 100%;\n zoom: 1;\n text-align: left;\n direction: ltr;\n user-select: none;\n box-sizing: border-box;\n color: var(--art-font-color);\n background-color: var(--art-background-color);\n text-shadow: 0 0 2px var(--art-text-shadow-color);\n -webkit-tap-highlight-color: #0000;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n outline: 0;\n margin: 0 auto;\n padding: 0;\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n position: relative;\n overflow: hidden;\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: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n\n.art-video-player svg {\n fill: #fff;\n}\n\n.art-video-player a {\n color: #fff;\n text-decoration: none;\n}\n\n.art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n width: 100%;\n height: 100%;\n cursor: pointer;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n width: 100%;\n height: 100%;\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 justify-content: center;\n align-items: center;\n gap: var(--art-subtitle-gap);\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n pointer-events: none;\n transition: bottom var(--art-transition-duration) ease;\n text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n flex-direction: column;\n padding: 0 5%;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-subtitle p {\n word-break: break-all;\n height: fit-content;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: flex;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));\n}\n\n.art-danmuku {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\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}\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: flex;\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: flex;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-mask .art-state {\n opacity: 0;\n width: var(--art-state-size);\n height: var(--art-state-size);\n transition: all var(--art-transition-duration) ease;\n justify-content: center;\n align-items: center;\n display: flex;\n transform: scale(2);\n}\n\n.art-video-player.art-mask-show .art-state {\n cursor: pointer;\n pointer-events: auto;\n opacity: var(--art-state-opacity);\n transform: scale(1);\n}\n\n.art-video-player.art-loading-show .art-state {\n display: none;\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 width: 100%;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n justify-content: end;\n gap: var(--art-bottom-gap);\n inset: auto 0 0;\n bottom: var(--art-bottom-offset);\n height: var(--art-bottom-height);\n padding: 0 var(--art-player-padding);\n transition: all var(--art-transition-duration) ease;\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n flex-direction: column;\n display: flex;\n position: absolute;\n}\n\n.art-video-player.art-control-show .art-bottom, .art-video-player.art-hover .art-bottom {\n opacity: 1;\n bottom: 0;\n}\n\n.art-bottom .art-progress {\n z-index: 0;\n pointer-events: auto;\n position: relative;\n}\n\n.art-bottom .art-progress .art-control-progress {\n cursor: pointer;\n height: var(--art-progress-height);\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n height: 50%;\n width: 100%;\n transition: height var(--art-transition-duration) ease;\n background-color: var(--art-progress-color);\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-hover {\n z-index: 0;\n width: 100%;\n height: 100%;\n width: 0%;\n background-color: var(--art-hover-color);\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded {\n z-index: 10;\n width: 100%;\n height: 100%;\n width: 0%;\n background-color: var(--art-loaded-color);\n position: absolute;\n inset: 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-played {\n z-index: 20;\n width: 100%;\n height: 100%;\n width: 0%;\n background-color: var(--art-theme);\n position: absolute;\n inset: 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span {\n z-index: 0;\n width: 100%;\n height: 100%;\n pointer-events: auto;\n width: var(--art-highlight-width);\n transform: translateX(calc(var(--art-highlight-width) / -2));\n background-color: var(--art-highlight-color);\n position: absolute;\n inset: 0 auto 0 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {\n z-index: 40;\n width: var(--art-indicator-size);\n height: var(--art-indicator-size);\n margin-left: calc(var(--art-indicator-size) / -2);\n transition: transform var(--art-transition-duration) ease;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n left: 0;\n transform: scale(0);\n}\n\n.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}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator:hover {\n transform: scale(1.2) !important;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator:active {\n transform: scale(1) !important;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-tip {\n z-index: 50;\n white-space: nowrap;\n background-color: var(--art-tip-background);\n border-radius: 3px;\n padding: 3px 5px;\n font-size: 12px;\n line-height: 1;\n display: none;\n position: absolute;\n top: -25px;\n left: 0;\n}\n\n.art-bottom .art-progress .art-control-progress:hover .art-control-progress-inner {\n height: 100%;\n}\n\n.art-bottom .art-progress .art-control-thumbnails {\n pointer-events: none;\n background-color: var(--art-widget-background);\n border-radius: 3px;\n display: none;\n position: absolute;\n bottom: 10px;\n left: 0;\n box-shadow: 0 1px 3px #0003, 0 1px 2px -1px #0003;\n}\n\n.art-bottom .art-progress .art-control-loop {\n z-index: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-bottom .art-progress .art-control-loop .art-loop-point {\n z-index: 0;\n width: 100%;\n height: 100%;\n width: var(--art-loop-width);\n background-color: var(--art-loop-color);\n transform: translateX(calc(var(--art-loop-width) / -2)) scaleY(1.5);\n position: absolute;\n inset: 0 0 0 0%;\n}\n\n.art-bottom:hover .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {\n transform: scale(1);\n}\n\n.art-controls {\n z-index: 10;\n pointer-events: auto;\n height: var(--art-control-height);\n justify-content: space-between;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-controls .art-controls-left, .art-controls .art-controls-right {\n height: 100%;\n display: flex;\n}\n\n.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: none;\n}\n\n.art-controls .art-controls-right {\n justify-content: flex-end;\n}\n\n.art-controls .art-control {\n cursor: pointer;\n white-space: nowrap;\n opacity: var(--art-control-opacity);\n min-height: var(--art-control-height);\n min-width: var(--art-control-height);\n transition: opacity var(--art-transition-duration) ease;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-controls .art-control .art-icon {\n height: var(--art-control-icon-size);\n width: var(--art-control-icon-size);\n transform: scale(var(--art-control-icon-scale));\n transition: transform var(--art-transition-duration) ease;\n}\n\n.art-controls .art-control .art-icon:active {\n transform: scale(calc(var(--art-control-icon-scale) * .8));\n}\n\n.art-controls .art-control:hover {\n opacity: 1;\n}\n\n.art-control-volume {\n position: relative;\n}\n\n.art-control-volume .art-volume-panel {\n text-align: center;\n cursor: default;\n opacity: 0;\n pointer-events: none;\n left: 0;\n right: 0;\n bottom: var(--art-control-height);\n width: var(--art-control-height);\n height: var(--art-volume-height);\n transition: all var(--art-transition-duration) ease;\n justify-content: center;\n align-items: center;\n padding: 0 5px;\n font-size: 12px;\n display: flex;\n position: absolute;\n transform: translateY(10px);\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner {\n height: 100%;\n width: 100%;\n background-color: var(--art-widget-background);\n border-radius: 3px;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 10px 0 12px;\n display: flex;\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider {\n width: 100%;\n cursor: pointer;\n flex: 1;\n justify-content: center;\n display: flex;\n position: relative;\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider .art-volume-handle {\n width: 2px;\n background-color: #ffffff40;\n border-radius: 3px;\n justify-content: center;\n display: flex;\n position: relative;\n overflow: hidden;\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider .art-volume-handle .art-volume-loaded {\n z-index: 0;\n width: 100%;\n height: 100%;\n background-color: var(--art-theme);\n position: absolute;\n inset: 0;\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider .art-volume-indicator {\n width: var(--art-volume-handle-size);\n height: var(--art-volume-handle-size);\n margin-top: calc(var(--art-volume-handle-size) / -2);\n background-color: var(--art-theme);\n transition: transform var(--art-transition-duration) ease;\n border-radius: 100%;\n flex-shrink: 0;\n position: absolute;\n transform: scale(1);\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider:active .art-volume-indicator {\n transform: scale(.9);\n}\n\n.art-control-volume:hover .art-volume-panel {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n}\n\n.art-video-player .art-notice {\n z-index: 80;\n width: 100%;\n height: 100%;\n height: auto;\n padding: var(--art-player-padding);\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0 0 auto;\n}\n\n.art-video-player .art-notice .art-notice-inner {\n background-color: var(--art-tip-background);\n border-radius: 3px;\n padding: 5px;\n line-height: 1;\n display: inline-flex;\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 background-color: var(--art-widget-background);\n min-width: var(--art-contextmenus-min-width);\n border-radius: 3px;\n flex-direction: column;\n padding: 5px 0;\n font-size: 12px;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu {\n cursor: pointer;\n border-bottom: 1px solid #ffffff1a;\n padding: 10px 15px;\n display: flex;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu span {\n padding: 0 8px;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu span:hover, .art-video-player .art-contextmenus .art-contextmenu span.art-current {\n color: var(--art-theme);\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 transform-origin: 100% 100%;\n left: auto;\n right: var(--art-player-padding);\n bottom: var(--art-control-height);\n transform: scale(var(--art-settings-scale));\n transition: all var(--art-transition-duration) ease;\n background-color: var(--art-widget-background);\n border-radius: 3px;\n flex-direction: column;\n display: none;\n position: absolute;\n overflow: hidden;\n}\n\n.art-video-player .art-settings .art-setting-panel {\n flex-direction: column;\n display: none;\n}\n\n.art-video-player .art-settings .art-setting-panel.art-current {\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item {\n height: 35px;\n cursor: pointer;\n color: #ffffffbf;\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 {\n color: #fff;\n background-color: #ffffff1a;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item.art-current {\n color: var(--art-theme);\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 justify-content: center;\n align-items: center;\n gap: 5px;\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: var(--art-settings-icon-size);\n width: var(--art-settings-icon-size);\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 {\n justify-content: center;\n align-items: center;\n gap: 5px;\n font-size: 12px;\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}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right .art-setting-item-right-icon {\n min-width: 32px;\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: flex;\n}\n\n.art-video-player .art-info {\n left: var(--art-player-padding);\n top: var(--art-player-padding);\n z-index: 100;\n background-color: var(--art-widget-background);\n border-radius: 3px;\n padding: 10px;\n font-size: 12px;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-info .art-info-panel {\n flex-direction: column;\n gap: 5px;\n display: flex;\n}\n\n.art-video-player .art-info .art-info-panel .art-info-item {\n align-items: center;\n gap: 5px;\n display: flex;\n}\n\n.art-video-player .art-info .art-info-panel .art-info-item .art-info-title {\n width: 100px;\n text-align: right;\n}\n\n.art-video-player .art-info .art-info-panel .art-info-item .art-info-content {\n width: 250px;\n text-overflow: ellipsis;\n white-space: nowrap;\n user-select: all;\n overflow: hidden;\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-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-fullscreen-web {\n z-index: var(--art-fullscreen-web-index);\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-mini-popup {\n z-index: 9999;\n width: 320px;\n height: 180px;\n cursor: move;\n user-select: none;\n background: #000;\n border-radius: 3px;\n transition: opacity .2s;\n position: fixed;\n overflow: hidden;\n box-shadow: 0 0 5px #00000080;\n}\n\n.art-mini-popup svg {\n fill: #fff;\n}\n\n.art-mini-popup .art-video {\n pointer-events: none;\n}\n\n.art-mini-popup .art-mini-close {\n z-index: 20;\n cursor: pointer;\n opacity: 0;\n transition: opacity .2s;\n position: absolute;\n top: 10px;\n right: 10px;\n}\n\n.art-mini-popup .art-mini-state {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n opacity: 0;\n background-color: #00000040;\n justify-content: center;\n align-items: center;\n transition: opacity .2s;\n display: flex;\n position: absolute;\n inset: 0;\n}\n\n.art-mini-popup .art-mini-state .art-icon {\n opacity: .75;\n cursor: pointer;\n pointer-events: auto;\n transition: transform .2s;\n transform: scale(3);\n}\n\n.art-mini-popup .art-mini-state .art-icon:active {\n transform: scale(2.5);\n}\n\n.art-mini-popup.art-mini-droging {\n opacity: .9;\n}\n\n.art-mini-popup:hover .art-mini-close, .art-mini-popup:hover .art-mini-state {\n opacity: 1;\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: width, height var(--art-transition-duration) ease;\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-mini-progress-bar {\n z-index: 0;\n width: 100%;\n height: 100%;\n height: 2px;\n background-color: var(--art-theme);\n display: flex;\n position: absolute;\n inset: auto 0 0;\n}\n\n.art-video-player .art-layer-lock {\n height: var(--art-lock-size);\n width: var(--art-lock-size);\n top: 50%;\n left: var(--art-player-padding);\n background-color: var(--art-tip-background);\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n transform: translateY(-50%);\n}\n\n.art-video-player .art-layer-auto-playback {\n left: var(--art-player-padding);\n bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);\n background-color: var(--art-widget-background);\n border-radius: 3px;\n align-items: center;\n gap: 10px;\n padding: 10px;\n line-height: 1;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-layer-auto-playback .art-auto-playback-close {\n cursor: pointer;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-layer-auto-playback .art-auto-playback-close svg {\n width: 15px;\n height: 15px;\n fill: var(--art-theme);\n}\n\n.art-video-player .art-layer-auto-playback .art-auto-playback-jump {\n color: var(--art-theme);\n cursor: pointer;\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: var(--art-subtitle-bottom) !important;\n}\n\n.art-video-player.art-lock .art-layer-mini-progress-bar {\n display: flex !important;\n}\n\n.art-video-player.art-control-show .art-layer-mini-progress-bar {\n display: none;\n}\n\n.art-video-player.art-control-show .art-layer-lock {\n display: flex;\n}\n\n.art-control-selector {\n position: relative;\n}\n\n.art-control-selector .art-selector-list {\n text-align: center;\n bottom: var(--art-control-height);\n background-color: var(--art-widget-background);\n opacity: 0;\n pointer-events: none;\n transition: all var(--art-transition-duration) ease;\n border-radius: 3px;\n flex-direction: column;\n justify-content: center;\n display: flex;\n position: absolute;\n transform: translateY(10px);\n}\n\n.art-control-selector .art-selector-list .art-selector-item {\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n padding: 10px 15px;\n line-height: 1;\n display: flex;\n}\n\n.art-control-selector .art-selector-list .art-selector-item:hover {\n background-color: #ffffff1a;\n}\n\n.art-control-selector .art-selector-list .art-selector-item:hover, .art-control-selector .art-selector-list .art-selector-item.art-current {\n color: var(--art-theme);\n}\n\n.art-control-selector:hover .art-selector-list {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\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: 1000001;\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.art-mobile {\n --art-control-height: 38px;\n --art-control-icon-scale: 1;\n --art-state-size: 60px;\n --art-settings-scale: .75;\n}\n\n"; +module.exports = ".art-video-player {\n --art-theme: red;\n --art-font-color: #fff;\n --art-background-color: #000;\n --art-text-shadow-color: #00000080;\n --art-transition-duration: .2s;\n --art-padding: 10px;\n --art-progress-height: 6px;\n --art-progress-color: #fff3;\n --art-hover-color: #ffffff80;\n --art-loaded-color: #fff3;\n --art-loop-color: #ffffffbf;\n --art-state-size: 80px;\n --art-state-opacity: .8;\n --art-bottom-height: 100px;\n --art-bottom-offset: -20px;\n --art-bottom-gap: 5px;\n --art-highlight-width: 8px;\n --art-highlight-color: #ffffff80;\n --art-loop-width: 2px;\n --art-control-height: 46px;\n --art-control-opacity: .75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-volume-height: 120px;\n --art-volume-handle-size: 14px;\n --art-lock-size: 36px;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-settings-scale: 1;\n --art-settings-icon-size: 24px;\n --art-contextmenus-min-width: 250px;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-subtitle-border: #000;\n --art-widget-background: #000000d9;\n --art-tip-background: #00000080;\n --art-scrollbar-size: 5px;\n --art-scrollbar-background: #666;\n --art-scrollbar-background-hover: #ccc;\n --art-mini-progress-height: 2px;\n}\n\n.art-bg-cover {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.art-video-player {\n width: 100%;\n height: 100%;\n zoom: 1;\n text-align: left;\n direction: ltr;\n user-select: none;\n box-sizing: border-box;\n color: var(--art-font-color);\n background-color: var(--art-background-color);\n text-shadow: 0 0 2px var(--art-text-shadow-color);\n -webkit-tap-highlight-color: #0000;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n outline: 0;\n margin: 0 auto;\n padding: 0;\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n position: relative;\n overflow: hidden;\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: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n\n.art-video-player svg {\n fill: #fff;\n}\n\n.art-video-player a {\n color: #fff;\n text-decoration: none;\n}\n\n.art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n width: 100%;\n height: 100%;\n cursor: pointer;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n width: 100%;\n height: 100%;\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 justify-content: center;\n align-items: center;\n gap: var(--art-subtitle-gap);\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n pointer-events: none;\n transition: bottom var(--art-transition-duration) ease;\n text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n flex-direction: column;\n padding: 0 5%;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-subtitle p {\n word-break: break-all;\n height: fit-content;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: flex;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));\n}\n\n.art-danmuku {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\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}\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: flex;\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: flex;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-mask .art-state {\n opacity: 0;\n width: var(--art-state-size);\n height: var(--art-state-size);\n transition: all var(--art-transition-duration) ease;\n justify-content: center;\n align-items: center;\n display: flex;\n transform: scale(2);\n}\n\n.art-video-player.art-mask-show .art-state {\n cursor: pointer;\n pointer-events: auto;\n opacity: var(--art-state-opacity);\n transform: scale(1);\n}\n\n.art-video-player.art-loading-show .art-state {\n display: none;\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 width: 100%;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n justify-content: end;\n gap: var(--art-bottom-gap);\n inset: auto 0 0;\n bottom: var(--art-bottom-offset);\n height: var(--art-bottom-height);\n padding: 0 var(--art-padding);\n transition: all var(--art-transition-duration) ease;\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n flex-direction: column;\n display: flex;\n position: absolute;\n}\n\n.art-video-player.art-control-show .art-bottom, .art-video-player.art-hover .art-bottom {\n opacity: 1;\n bottom: 0;\n}\n\n.art-bottom .art-progress {\n z-index: 0;\n pointer-events: auto;\n position: relative;\n}\n\n.art-bottom .art-progress .art-control-progress {\n cursor: pointer;\n height: var(--art-progress-height);\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n height: 50%;\n width: 100%;\n transition: height var(--art-transition-duration) ease;\n background-color: var(--art-progress-color);\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-hover {\n z-index: 0;\n width: 100%;\n height: 100%;\n width: 0%;\n background-color: var(--art-hover-color);\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded {\n z-index: 10;\n width: 100%;\n height: 100%;\n width: 0%;\n background-color: var(--art-loaded-color);\n position: absolute;\n inset: 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-played {\n z-index: 20;\n width: 100%;\n height: 100%;\n width: 0%;\n background-color: var(--art-theme);\n position: absolute;\n inset: 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span {\n z-index: 0;\n width: 100%;\n height: 100%;\n pointer-events: auto;\n width: var(--art-highlight-width);\n transform: translateX(calc(var(--art-highlight-width) / -2));\n background-color: var(--art-highlight-color);\n position: absolute;\n inset: 0 auto 0 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {\n z-index: 40;\n width: var(--art-indicator-size);\n height: var(--art-indicator-size);\n margin-left: calc(var(--art-indicator-size) / -2);\n transition: transform var(--art-transition-duration) ease;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n left: 0;\n transform: scale(0);\n}\n\n.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}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator:hover {\n transform: scale(1.2) !important;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator:active {\n transform: scale(1) !important;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-tip {\n z-index: 50;\n white-space: nowrap;\n background-color: var(--art-tip-background);\n border-radius: 3px;\n padding: 3px 5px;\n font-size: 12px;\n line-height: 1;\n display: none;\n position: absolute;\n top: -25px;\n left: 0;\n}\n\n.art-bottom .art-progress .art-control-progress:hover .art-control-progress-inner {\n height: 100%;\n}\n\n.art-bottom .art-progress .art-control-thumbnails {\n pointer-events: none;\n background-color: var(--art-widget-background);\n border-radius: 3px;\n display: none;\n position: absolute;\n bottom: 10px;\n left: 0;\n box-shadow: 0 1px 3px #0003, 0 1px 2px -1px #0003;\n}\n\n.art-bottom .art-progress .art-control-loop {\n z-index: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-bottom .art-progress .art-control-loop .art-loop-point {\n z-index: 0;\n width: 100%;\n height: 100%;\n width: var(--art-loop-width);\n background-color: var(--art-loop-color);\n transform: translateX(calc(var(--art-loop-width) / -2)) scaleY(1.5);\n position: absolute;\n inset: 0 0 0 0%;\n}\n\n.art-bottom:hover .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {\n transform: scale(1);\n}\n\n.art-controls {\n z-index: 10;\n pointer-events: auto;\n height: var(--art-control-height);\n justify-content: space-between;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-controls .art-controls-left, .art-controls .art-controls-right {\n height: 100%;\n display: flex;\n}\n\n.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: none;\n}\n\n.art-controls .art-controls-right {\n justify-content: flex-end;\n}\n\n.art-controls .art-control {\n cursor: pointer;\n white-space: nowrap;\n opacity: var(--art-control-opacity);\n min-height: var(--art-control-height);\n min-width: var(--art-control-height);\n transition: opacity var(--art-transition-duration) ease;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-controls .art-control .art-icon {\n height: var(--art-control-icon-size);\n width: var(--art-control-icon-size);\n transform: scale(var(--art-control-icon-scale));\n transition: transform var(--art-transition-duration) ease;\n}\n\n.art-controls .art-control .art-icon:active {\n transform: scale(calc(var(--art-control-icon-scale) * .8));\n}\n\n.art-controls .art-control:hover {\n opacity: 1;\n}\n\n.art-control-volume {\n position: relative;\n}\n\n.art-control-volume .art-volume-panel {\n text-align: center;\n cursor: default;\n opacity: 0;\n pointer-events: none;\n left: 0;\n right: 0;\n bottom: var(--art-control-height);\n width: var(--art-control-height);\n height: var(--art-volume-height);\n transition: all var(--art-transition-duration) ease;\n justify-content: center;\n align-items: center;\n padding: 0 5px;\n font-size: 12px;\n display: flex;\n position: absolute;\n transform: translateY(10px);\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner {\n height: 100%;\n width: 100%;\n background-color: var(--art-widget-background);\n border-radius: 3px;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 10px 0 12px;\n display: flex;\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider {\n width: 100%;\n cursor: pointer;\n flex: 1;\n justify-content: center;\n display: flex;\n position: relative;\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider .art-volume-handle {\n width: 2px;\n background-color: #ffffff40;\n border-radius: 3px;\n justify-content: center;\n display: flex;\n position: relative;\n overflow: hidden;\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider .art-volume-handle .art-volume-loaded {\n z-index: 0;\n width: 100%;\n height: 100%;\n background-color: var(--art-theme);\n position: absolute;\n inset: 0;\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider .art-volume-indicator {\n width: var(--art-volume-handle-size);\n height: var(--art-volume-handle-size);\n margin-top: calc(var(--art-volume-handle-size) / -2);\n background-color: var(--art-theme);\n transition: transform var(--art-transition-duration) ease;\n border-radius: 100%;\n flex-shrink: 0;\n position: absolute;\n transform: scale(1);\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider:active .art-volume-indicator {\n transform: scale(.9);\n}\n\n.art-control-volume:hover .art-volume-panel {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n}\n\n.art-video-player .art-notice {\n z-index: 80;\n width: 100%;\n height: 100%;\n height: auto;\n padding: var(--art-padding);\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0 0 auto;\n}\n\n.art-video-player .art-notice .art-notice-inner {\n background-color: var(--art-tip-background);\n border-radius: 3px;\n padding: 5px;\n line-height: 1;\n display: inline-flex;\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 background-color: var(--art-widget-background);\n min-width: var(--art-contextmenus-min-width);\n border-radius: 3px;\n flex-direction: column;\n padding: 5px 0;\n font-size: 12px;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu {\n cursor: pointer;\n border-bottom: 1px solid #ffffff1a;\n padding: 10px 15px;\n display: flex;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu span {\n padding: 0 8px;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu span:hover, .art-video-player .art-contextmenus .art-contextmenu span.art-current {\n color: var(--art-theme);\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 transform-origin: 100% 100%;\n left: auto;\n right: var(--art-padding);\n bottom: var(--art-control-height);\n transform: scale(var(--art-settings-scale));\n transition: all var(--art-transition-duration) ease;\n background-color: var(--art-widget-background);\n border-radius: 3px;\n flex-direction: column;\n display: none;\n position: absolute;\n overflow: hidden;\n}\n\n.art-video-player .art-settings .art-setting-panel {\n flex-direction: column;\n display: none;\n}\n\n.art-video-player .art-settings .art-setting-panel.art-current {\n display: flex;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item {\n height: 35px;\n cursor: pointer;\n color: #ffffffbf;\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 {\n color: #fff;\n background-color: #ffffff1a;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item.art-current {\n color: var(--art-theme);\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 justify-content: center;\n align-items: center;\n gap: 5px;\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: var(--art-settings-icon-size);\n width: var(--art-settings-icon-size);\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 {\n justify-content: center;\n align-items: center;\n gap: 5px;\n font-size: 12px;\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}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right .art-setting-item-right-icon {\n min-width: 32px;\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: flex;\n}\n\n.art-video-player .art-info {\n left: var(--art-padding);\n top: var(--art-padding);\n z-index: 100;\n background-color: var(--art-widget-background);\n border-radius: 3px;\n padding: 10px;\n font-size: 12px;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-info .art-info-panel {\n flex-direction: column;\n gap: 5px;\n display: flex;\n}\n\n.art-video-player .art-info .art-info-panel .art-info-item {\n align-items: center;\n gap: 5px;\n display: flex;\n}\n\n.art-video-player .art-info .art-info-panel .art-info-item .art-info-title {\n width: 100px;\n text-align: right;\n}\n\n.art-video-player .art-info .art-info-panel .art-info-item .art-info-content {\n width: 250px;\n text-overflow: ellipsis;\n white-space: nowrap;\n user-select: all;\n overflow: hidden;\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-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-fullscreen-web {\n z-index: var(--art-fullscreen-web-index);\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-mini-popup {\n z-index: 9999;\n width: 320px;\n height: 180px;\n cursor: move;\n user-select: none;\n background: #000;\n border-radius: 3px;\n transition: opacity .2s;\n position: fixed;\n overflow: hidden;\n box-shadow: 0 0 5px #00000080;\n}\n\n.art-mini-popup svg {\n fill: #fff;\n}\n\n.art-mini-popup .art-video {\n pointer-events: none;\n}\n\n.art-mini-popup .art-mini-close {\n z-index: 20;\n cursor: pointer;\n opacity: 0;\n transition: opacity .2s;\n position: absolute;\n top: 10px;\n right: 10px;\n}\n\n.art-mini-popup .art-mini-state {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n opacity: 0;\n background-color: #00000040;\n justify-content: center;\n align-items: center;\n transition: opacity .2s;\n display: flex;\n position: absolute;\n inset: 0;\n}\n\n.art-mini-popup .art-mini-state .art-icon {\n opacity: .75;\n cursor: pointer;\n pointer-events: auto;\n transition: transform .2s;\n transform: scale(3);\n}\n\n.art-mini-popup .art-mini-state .art-icon:active {\n transform: scale(2.5);\n}\n\n.art-mini-popup.art-mini-droging {\n opacity: .9;\n}\n\n.art-mini-popup:hover .art-mini-close, .art-mini-popup:hover .art-mini-state {\n opacity: 1;\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: width, height var(--art-transition-duration) ease;\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-mini-progress-bar {\n z-index: 0;\n width: 100%;\n height: 100%;\n height: var(--art-mini-progress-height);\n background-color: var(--art-theme);\n display: flex;\n position: absolute;\n inset: auto 0 0;\n}\n\n.art-video-player .art-layer-lock {\n height: var(--art-lock-size);\n width: var(--art-lock-size);\n top: 50%;\n left: var(--art-padding);\n background-color: var(--art-tip-background);\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n transform: translateY(-50%);\n}\n\n.art-video-player .art-layer-auto-playback {\n left: var(--art-padding);\n bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);\n background-color: var(--art-widget-background);\n border-radius: 3px;\n align-items: center;\n gap: 10px;\n padding: 10px;\n line-height: 1;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-layer-auto-playback .art-auto-playback-close {\n cursor: pointer;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.art-video-player .art-layer-auto-playback .art-auto-playback-close svg {\n width: 15px;\n height: 15px;\n fill: var(--art-theme);\n}\n\n.art-video-player .art-layer-auto-playback .art-auto-playback-jump {\n color: var(--art-theme);\n cursor: pointer;\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: var(--art-subtitle-bottom) !important;\n}\n\n.art-video-player.art-lock .art-layer-mini-progress-bar {\n display: flex !important;\n}\n\n.art-video-player.art-control-show .art-layer-mini-progress-bar {\n display: none;\n}\n\n.art-video-player.art-control-show .art-layer-lock {\n display: flex;\n}\n\n.art-control-selector {\n position: relative;\n}\n\n.art-control-selector .art-selector-list {\n text-align: center;\n bottom: var(--art-control-height);\n background-color: var(--art-widget-background);\n opacity: 0;\n pointer-events: none;\n transition: all var(--art-transition-duration) ease;\n border-radius: 3px;\n flex-direction: column;\n justify-content: center;\n display: flex;\n position: absolute;\n transform: translateY(10px);\n}\n\n.art-control-selector .art-selector-list .art-selector-item {\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n padding: 10px 15px;\n line-height: 1;\n display: flex;\n}\n\n.art-control-selector .art-selector-list .art-selector-item:hover {\n background-color: #ffffff1a;\n}\n\n.art-control-selector .art-selector-list .art-selector-item:hover, .art-control-selector .art-selector-list .art-selector-item.art-current {\n color: var(--art-theme);\n}\n\n.art-control-selector:hover .art-selector-list {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\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: 1000001;\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.art-mobile {\n --art-control-height: 38px;\n --art-control-icon-scale: 1;\n --art-state-size: 60px;\n --art-settings-scale: .75;\n}\n\n"; },{}],"2tbdu":[function(require,module,exports) { !function(r, t) { diff --git a/packages/artplayer/src/style/bottom.less b/packages/artplayer/src/style/bottom.less index 83043cc1a..dcc6fb269 100644 --- a/packages/artplayer/src/style/bottom.less +++ b/packages/artplayer/src/style/bottom.less @@ -10,7 +10,7 @@ gap: var(--art-bottom-gap); bottom: var(--art-bottom-offset); height: var(--art-bottom-height); - padding: 0 var(--art-player-padding); + padding: 0 var(--art-padding); transition: all var(--art-transition-duration) ease; .art-bottom-gradient(); } diff --git a/packages/artplayer/src/style/info.less b/packages/artplayer/src/style/info.less index 2811e2527..c3b91879a 100644 --- a/packages/artplayer/src/style/info.less +++ b/packages/artplayer/src/style/info.less @@ -2,8 +2,8 @@ .art-info { display: none; position: absolute; - left: var(--art-player-padding); - top: var(--art-player-padding); + left: var(--art-padding); + top: var(--art-padding); z-index: 100; padding: 10px; font-size: 12px; diff --git a/packages/artplayer/src/style/notice.less b/packages/artplayer/src/style/notice.less index 3cf1ade40..a252fbf9d 100644 --- a/packages/artplayer/src/style/notice.less +++ b/packages/artplayer/src/style/notice.less @@ -4,7 +4,7 @@ .art-full(80); height: auto; bottom: auto; - padding: var(--art-player-padding); + padding: var(--art-padding); pointer-events: none; .art-notice-inner { diff --git a/packages/artplayer/src/style/plugins.less b/packages/artplayer/src/style/plugins.less index eee9430eb..18649192e 100644 --- a/packages/artplayer/src/style/plugins.less +++ b/packages/artplayer/src/style/plugins.less @@ -3,7 +3,7 @@ display: flex; .art-full(); top: auto; - height: 2px; + height: var(--art-mini-progress-height); background-color: var(--art-theme); } @@ -15,7 +15,7 @@ transform: translateY(-50%); height: var(--art-lock-size); width: var(--art-lock-size); - left: var(--art-player-padding); + left: var(--art-padding); background-color: var(--art-tip-background); } @@ -27,7 +27,7 @@ border-radius: 3px; padding: 10px; line-height: 1; - left: var(--art-player-padding); + left: var(--art-padding); bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px); background-color: var(--art-widget-background); diff --git a/packages/artplayer/src/style/setting.less b/packages/artplayer/src/style/setting.less index e9beb9ad8..99258fcea 100644 --- a/packages/artplayer/src/style/setting.less +++ b/packages/artplayer/src/style/setting.less @@ -8,7 +8,7 @@ overflow: hidden; border-radius: 3px; transform-origin: bottom right; - right: var(--art-player-padding); + right: var(--art-padding); bottom: var(--art-control-height); transform: scale(var(--art-settings-scale)); transition: all var(--art-transition-duration) ease; diff --git a/packages/artplayer/src/style/variables.less b/packages/artplayer/src/style/variables.less index 072b615c0..d247a63e5 100644 --- a/packages/artplayer/src/style/variables.less +++ b/packages/artplayer/src/style/variables.less @@ -4,39 +4,40 @@ --art-background-color: #000; --art-text-shadow-color: rgba(0, 0, 0, 0.5); --art-transition-duration: 0.2s; - --art-player-padding: 10px; + --art-padding: 10px; + --art-progress-height: 6px; + --art-progress-color: rgba(255, 255, 255, 0.2); + --art-hover-color: rgba(255, 255, 255, 0.5); + --art-loaded-color: rgba(255, 255, 255, 0.2); + --art-loop-color: rgba(255, 255, 255, 0.75); --art-state-size: 80px; --art-state-opacity: 0.8; - --art-subtitle-font-size: 20px; - --art-subtitle-gap: 5px; - --art-subtitle-bottom: 15px; - --art-control-height: 46px; --art-bottom-height: 100px; --art-bottom-offset: -20px; --art-bottom-gap: 5px; - --art-progress-height: 6px; --art-highlight-width: 8px; + --art-highlight-color: rgba(255, 255, 255, 0.5); --art-loop-width: 2px; + --art-control-height: 46px; --art-control-opacity: 0.75; --art-control-icon-size: 36px; --art-control-icon-scale: 1.1; - --art-settings-scale: 1; --art-volume-height: 120px; --art-volume-handle-size: 14px; --art-lock-size: 36px; --art-indicator-size: 16px; --art-fullscreen-web-index: 9999; + --art-settings-scale: 1; + --art-settings-icon-size: 24px; + --art-contextmenus-min-width: 250px; + --art-subtitle-font-size: 20px; + --art-subtitle-gap: 5px; + --art-subtitle-bottom: 15px; --art-subtitle-border: #000; --art-widget-background: rgba(0, 0, 0, 0.85); --art-tip-background: rgba(0, 0, 0, 0.5); - --art-settings-icon-size: 24px; - --art-progress-color: rgba(255, 255, 255, 0.2); - --art-hover-color: rgba(255, 255, 255, 0.5); - --art-loaded-color: rgba(255, 255, 255, 0.2); - --art-highlight-color: rgba(255, 255, 255, 0.5); - --art-loop-color: rgba(255, 255, 255, 0.75); --art-scrollbar-size: 5px; --art-scrollbar-background: #666; --art-scrollbar-background-hover: #ccc; - --art-contextmenus-min-width: 250px; + --art-mini-progress-height: 2px; } diff --git a/packages/artplayer/types/cssVar.d.ts b/packages/artplayer/types/cssVar.d.ts index 1be22d082..4a5454fcc 100644 --- a/packages/artplayer/types/cssVar.d.ts +++ b/packages/artplayer/types/cssVar.d.ts @@ -1,3 +1,43 @@ export type CssVar = { - // + '--art-theme': string; + '--art-font-color': string; + '--art-background-color': string; + '--art-text-shadow-color': string; + '--art-transition-duration': string; + '--art-padding': string; + '--art-progress-height': string; + '--art-progress-color': string; + '--art-hover-color': string; + '--art-loaded-color': string; + '--art-loop-color': string; + '--art-state-size': string; + '--art-state-opacity': number; + '--art-bottom-height': string; + '--art-bottom-offset': string; + '--art-bottom-gap': string; + '--art-highlight-width': string; + '--art-highlight-color': string; + '--art-loop-width': string; + '--art-control-height': string; + '--art-control-opacity': number; + '--art-control-icon-size': string; + '--art-control-icon-scale': number; + '--art-volume-height': string; + '--art-volume-handle-size': string; + '--art-lock-size': string; + '--art-indicator-size': string; + '--art-fullscreen-web-index': 9999; + '--art-settings-scale': number; + '--art-settings-icon-size': string; + '--art-contextmenus-min-width': string; + '--art-subtitle-font-size': string; + '--art-subtitle-gap': string; + '--art-subtitle-bottom': string; + '--art-subtitle-border': string; + '--art-widget-background': string; + '--art-tip-background': string; + '--art-scrollbar-size': string; + '--art-scrollbar-background': string; + '--art-scrollbar-background-hover': string; + '--art-mini-progress-height': string; };