diff --git a/docs/uncompiled/artplayer/index.js b/docs/uncompiled/artplayer/index.js index 1ce6cf847..370cc1b5a 100644 --- a/docs/uncompiled/artplayer/index.js +++ b/docs/uncompiled/artplayer/index.js @@ -479,7 +479,7 @@ if (_utils.isBrowser) { } },{"bundle-text:./style/index.less":"bFGMG","option-validator":"9hUEm","../package.json":"3r4tp","./config":"1dlGA","./contextmenu":"dx7Zz","./control":"cNVpy","./events":"dQzlM","./hotkey":"drylQ","./i18n":"3Jf1s","./icons":"avFu3","./info":"gvEup","./layer":"7Oas9","./loading":"glZdQ","./mask":"iGxU6","./notice":"jZEIz","./player":"iA4EC","./plugins":"6P64r","./scheme":"8YPbR","./setting":"7ATN8","./storage":"grHII","./subtitle":"hxr0l","./template":"5JwMQ","./utils":"gGxPm","./utils/emitter":"2qvfs","@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"bFGMG":[function(require,module,exports,__globalThis) { -module.exports = ".art-video-player {\n --art-theme: red;\n --art-font-color: #fff;\n --art-background-color: #000;\n --art-font-size-sm: 12px;\n --art-text-shadow-color: #00000080;\n --art-transition-duration: .2s;\n --art-ease-standard: ease;\n --art-padding: 10px;\n --art-border-radius: 3px;\n --art-mobile-padding: 10px;\n --art-mobile-radius: 3px;\n --art-radius-sm: 3px;\n --art-space-xxs: 5px;\n --art-space-xs: 10px;\n --art-surface-hover-color: #ffffff1a;\n --art-surface-border-color: #ffffff1a;\n --art-surface-muted-color: #ffffff80;\n --art-surface-range-color: #fff3;\n --art-progress-height: 6px;\n --art-progress-color: #ffffff40;\n --art-progress-top-gap: 8px;\n --art-hover-color: #ffffff40;\n --art-loaded-color: #ffffff40;\n --art-tip-padding: 3px 5px;\n --art-tip-offset: -25px;\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-control-height: 46px;\n --art-control-opacity: .75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-touch-hit-size: var(--art-control-height);\n --art-volume-height: 120px;\n --art-volume-handle-size: 14px;\n --art-lock-size: 36px;\n --art-indicator-scale: 0;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-settings-icon-size: 24px;\n --art-settings-max-height: 300px;\n --art-selector-max-height: 300px;\n --art-contextmenus-min-width: 250px;\n --art-contextmenu-padding-x: 15px;\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: #000000b3;\n --art-scrollbar-size: 4px;\n --art-scrollbar-background: #ffffff40;\n --art-scrollbar-background-hover: #ffffff80;\n --art-mini-progress-height: 2px;\n --art-shadow-low: 0 1px 2px 0 #0000001f;\n --art-shadow-medium: 0 1px 3px 0 #0003, 0 1px 2px -1px #0003;\n --art-shadow-high: 0 4px 10px 0 #00000040;\n --art-shadow-elevated: var(--art-shadow-medium);\n --art-icon-small-size: 15px;\n --art-overlay-dim: #00000040;\n --art-overlay-strong: #00000080;\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 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-panel-surface {\n border-radius: var(--art-radius-sm);\n background-color: var(--art-widget-background);\n}\n\n.art-video-player {\n zoom: 1;\n text-align: left;\n user-select: none;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\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 direction: ltr;\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}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\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 vertical-align: top;\n max-width: 100%;\n}\n\n.art-video-player svg {\n fill: var(--art-font-color);\n}\n\n.art-video-player a {\n color: var(--art-font-color);\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 backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n cursor: pointer;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n text-align: center;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n gap: var(--art-subtitle-gap);\n width: 100%;\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n transition: bottom var(--art-transition-duration) var(--art-ease-standard);\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-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 pointer-events: none;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers {\n z-index: 40;\n pointer-events: none;\n width: 100%;\n height: 100%;\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 pointer-events: none;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\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) var(--art-ease-standard);\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 pointer-events: none;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\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-loading-show .art-mask {\n display: none;\n}\n\n.art-video-player .art-bottom {\n z-index: 60;\n opacity: 0;\n pointer-events: none;\n width: 100%;\n height: 100%;\n padding: 0 var(--art-padding);\n transition: all var(--art-transition-duration) var(--art-ease-standard);\n background-size: 100% var(--art-bottom-height);\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: flex-end;\n display: flex;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-bottom .art-controls, .art-video-player .art-bottom .art-progress {\n transform: translateY(var(--art-bottom-offset));\n transition: transform var(--art-transition-duration) var(--art-ease-standard);\n}\n\n.art-video-player.art-control-show .art-bottom, .art-video-player.art-hover .art-bottom {\n opacity: 1;\n}\n\n.art-video-player.art-control-show .art-bottom .art-controls, .art-video-player.art-hover .art-bottom .art-controls, .art-video-player.art-control-show .art-bottom .art-progress, .art-video-player.art-hover .art-bottom .art-progress {\n transform: translateY(0);\n}\n\n.art-bottom .art-progress {\n z-index: 0;\n pointer-events: auto;\n padding-top: var(--art-progress-top-gap);\n padding-bottom: var(--art-bottom-gap);\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 width: 100%;\n height: 50%;\n transition: height var(--art-transition-duration) var(--art-ease-standard);\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 background-color: var(--art-hover-color);\n width: 0%;\n height: 100%;\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 background-color: var(--art-loaded-color);\n width: 0%;\n height: 100%;\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 background-color: var(--art-theme);\n width: 0%;\n height: 100%;\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 pointer-events: none;\n width: 100%;\n height: 100%;\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 pointer-events: auto;\n width: 100%;\n height: 100%;\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 width: var(--art-highlight-width) !important;\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 transform: scale(var(--art-indicator-scale));\n margin-left: calc(var(--art-indicator-size) / -2);\n transition: transform var(--art-transition-duration) var(--art-ease-standard);\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n left: 0;\n}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator .art-icon {\n pointer-events: none;\n width: 100%;\n height: 100%;\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 transform-origin: bottom;\n opacity: 0;\n z-index: 50;\n top: var(--art-tip-offset);\n padding: var(--art-tip-padding);\n line-height: 1;\n font-size: var(--art-font-size-sm);\n border-radius: var(--art-border-radius);\n white-space: nowrap;\n background-color: var(--art-tip-background);\n transition: transform var(--art-transition-duration) var(--art-ease-standard), opacity var(--art-transition-duration) var(--art-ease-standard);\n position: absolute;\n left: 0;\n transform: scale(.5);\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 transform-origin: bottom;\n opacity: 0;\n bottom: calc(var(--art-bottom-gap) + 10px);\n pointer-events: none;\n border-radius: var(--art-radius-sm);\n background-color: var(--art-widget-background);\n transition: transform var(--art-transition-duration) var(--art-ease-standard), opacity var(--art-transition-duration) var(--art-ease-standard);\n box-shadow: var(--art-shadow-medium);\n position: absolute;\n left: 0;\n transform: scale(.5);\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-progress-hover .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-tip, .art-progress-hover .art-bottom .art-progress .art-control-thumbnails {\n opacity: 1;\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 flex: 1;\n justify-content: center;\n align-items: center;\n height: 100%;\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-touch-hit-size);\n min-width: var(--art-touch-hit-size);\n transition: opacity var(--art-transition-duration) var(--art-ease-standard);\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) var(--art-ease-standard);\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 color: var(--art-surface-muted-color);\n text-align: center;\n cursor: default;\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 opacity: 0;\n pointer-events: none;\n transition: all var(--art-transition-duration) var(--art-ease-standard);\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 align-items: center;\n gap: var(--art-space-xs);\n width: 100%;\n height: 100%;\n padding: var(--art-space-xs) 0 12px;\n border-radius: var(--art-radius-sm);\n background-color: var(--art-widget-background);\n flex-direction: column;\n display: flex;\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider {\n cursor: pointer;\n flex: 1;\n justify-content: center;\n width: 100%;\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 border-radius: var(--art-border-radius);\n background-color: var(--art-hover-color);\n justify-content: center;\n width: 2px;\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 background-color: var(--art-theme);\n width: 100%;\n height: 100%;\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) var(--art-ease-standard);\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: 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 padding: var(--art-space-xxs);\n border-radius: var(--art-border-radius);\n background-color: var(--art-tip-background);\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 padding: var(--art-space-xxs) 0;\n font-size: var(--art-font-size-sm);\n min-width: var(--art-contextmenus-min-width);\n border-radius: var(--art-radius-sm);\n background-color: var(--art-widget-background);\n flex-direction: column;\n display: none;\n position: absolute;\n}\n\n.art-video-player .art-contextmenus .art-contextmenu {\n cursor: pointer;\n padding: var(--art-space-xs) var(--art-contextmenu-padding-x);\n border-bottom: 1px solid var(--art-surface-border-color);\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: var(--art-surface-hover-color);\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 max-height: var(--art-settings-max-height);\n left: auto;\n right: var(--art-padding);\n bottom: var(--art-control-height);\n transition: all var(--art-transition-duration) var(--art-ease-standard);\n border-radius: var(--art-radius-sm);\n background-color: var(--art-widget-background);\n flex-direction: column;\n display: none;\n position: absolute;\n overflow: hidden auto;\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 cursor: pointer;\n padding: 0 var(--art-space-xxs);\n transition: background-color var(--art-transition-duration) var(--art-ease-standard);\n justify-content: space-between;\n align-items: center;\n display: flex;\n overflow: hidden;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item:hover {\n background-color: var(--art-surface-hover-color);\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: var(--art-icon-small-size);\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: var(--art-space-xxs);\n flex-shrink: 0;\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: var(--art-space-xxs);\n font-size: var(--art-font-size-sm);\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: var(--art-surface-muted-color);\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item .art-setting-item-right .art-setting-item-right-icon {\n justify-content: center;\n align-items: center;\n min-width: 32px;\n height: 24px;\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 appearance: none;\n background-color: var(--art-surface-range-color);\n outline: none;\n width: 80px;\n height: 3px;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item-back {\n border-bottom: 1px solid var(--art-surface-border-color);\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 padding: var(--art-space-xs);\n font-size: var(--art-font-size-sm);\n border-radius: var(--art-radius-sm);\n background-color: var(--art-widget-background);\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 text-align: right;\n width: 100px;\n}\n\n.art-video-player .art-info .art-info-panel .art-info-item .art-info-content {\n text-overflow: ellipsis;\n white-space: nowrap;\n user-select: all;\n width: 250px;\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] {\n overflow: hidden;\n}\n\n.art-video-player[data-aspect-ratio] .art-video {\n object-fit: fill;\n box-sizing: content-box;\n}\n\n.art-fullscreen {\n --art-progress-height: 8px;\n --art-indicator-size: 20px;\n --art-control-height: 60px;\n --art-control-icon-scale: 1.3;\n}\n\n.art-fullscreen-web {\n --art-progress-height: 8px;\n --art-indicator-size: 20px;\n --art-control-height: 60px;\n --art-control-icon-scale: 1.3;\n z-index: var(--art-fullscreen-web-index);\n width: 100%;\n height: 100%;\n position: fixed;\n inset: 0;\n}\n\n.art-mini-popup {\n z-index: 9999;\n border-radius: var(--art-border-radius);\n cursor: move;\n user-select: none;\n width: 320px;\n height: 180px;\n transition: opacity var(--art-transition-duration) var(--art-ease-standard);\n box-shadow: 0 0 5px var(--art-overlay-strong);\n background: #000;\n position: fixed;\n overflow: hidden;\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 var(--art-transition-duration) var(--art-ease-standard);\n position: absolute;\n top: 10px;\n right: 10px;\n}\n\n.art-mini-popup .art-mini-state {\n z-index: 30;\n pointer-events: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n transition: opacity var(--art-transition-duration) var(--art-ease-standard);\n background-color: var(--art-overlay-dim);\n justify-content: center;\n align-items: center;\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 var(--art-transition-duration) var(--art-ease-standard);\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-dragging {\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-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-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 padding: var(--art-space-xs);\n left: var(--art-padding);\n bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);\n border-radius: var(--art-radius-sm);\n background-color: var(--art-widget-background);\n align-items: center;\n gap: 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: var(--art-icon-small-size);\n height: var(--art-icon-small-size);\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-subtitle {\n bottom: var(--art-subtitle-bottom) !important;\n}\n\n.art-video-player.art-mini-progress-bar .art-bottom, .art-video-player.art-lock .art-bottom {\n opacity: 1;\n background-image: none;\n padding: 0;\n}\n\n.art-video-player.art-mini-progress-bar .art-bottom .art-controls, .art-video-player.art-lock .art-bottom .art-controls, .art-video-player.art-mini-progress-bar .art-bottom .art-progress, .art-video-player.art-lock .art-bottom .art-progress {\n transform: translateY(calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4));\n}\n\n.art-video-player.art-mini-progress-bar .art-bottom .art-progress-indicator, .art-video-player.art-lock .art-bottom .art-progress-indicator {\n display: none !important;\n}\n\n.art-video-player.art-control-show .art-layer-lock {\n display: flex;\n}\n\n.art-control-selector {\n justify-content: center;\n display: flex;\n position: relative;\n}\n\n.art-control-selector .art-selector-list {\n text-align: center;\n bottom: var(--art-control-height);\n max-height: var(--art-selector-max-height);\n border-radius: var(--art-radius-sm);\n background-color: var(--art-widget-background);\n opacity: 0;\n pointer-events: none;\n transition: all var(--art-transition-duration) var(--art-ease-standard);\n flex-direction: column;\n align-items: center;\n display: flex;\n position: absolute;\n overflow: hidden auto;\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 width: 100%;\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: var(--art-surface-hover-color);\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 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-video-player.art-mobile {\n --art-bottom-gap: 10px;\n --art-control-height: 38px;\n --art-control-icon-scale: 1;\n --art-state-size: 60px;\n --art-settings-max-height: 180px;\n --art-selector-max-height: 180px;\n --art-indicator-scale: 1;\n --art-control-opacity: 1;\n --art-padding: var(--art-mobile-padding);\n --art-border-radius: var(--art-mobile-radius);\n}\n\n.art-video-player.art-mobile .art-controls-left {\n margin-left: calc(var(--art-padding) / -1);\n}\n\n.art-video-player.art-mobile .art-controls-right {\n margin-right: calc(var(--art-padding) / -1);\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-border-radius: 3px;\n --art-progress-height: 6px;\n --art-progress-color: #ffffff40;\n --art-progress-top-gap: 8px;\n --art-hover-color: #ffffff40;\n --art-loaded-color: #ffffff40;\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-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-scale: 0;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-settings-icon-size: 24px;\n --art-settings-max-height: 300px;\n --art-selector-max-height: 300px;\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: #000000b3;\n --art-scrollbar-size: 4px;\n --art-scrollbar-background: #ffffff40;\n --art-scrollbar-background-hover: #ffffff80;\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 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 zoom: 1;\n text-align: left;\n user-select: none;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\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 direction: ltr;\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}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\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 vertical-align: top;\n max-width: 100%;\n}\n\n.art-video-player svg {\n fill: var(--art-font-color);\n}\n\n.art-video-player a {\n color: var(--art-font-color);\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 backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n cursor: pointer;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n text-align: center;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n gap: var(--art-subtitle-gap);\n width: 100%;\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\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-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 pointer-events: none;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers {\n z-index: 40;\n pointer-events: none;\n width: 100%;\n height: 100%;\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 pointer-events: none;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\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 pointer-events: none;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\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-loading-show .art-mask {\n display: none;\n}\n\n.art-video-player .art-bottom {\n z-index: 60;\n opacity: 0;\n pointer-events: none;\n width: 100%;\n height: 100%;\n padding: 0 var(--art-padding);\n transition: all var(--art-transition-duration) ease;\n background-size: 100% var(--art-bottom-height);\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: flex-end;\n display: flex;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-bottom .art-controls, .art-video-player .art-bottom .art-progress {\n transform: translateY(var(--art-bottom-offset));\n transition: transform var(--art-transition-duration) ease;\n}\n\n.art-video-player.art-control-show .art-bottom, .art-video-player.art-hover .art-bottom {\n opacity: 1;\n}\n\n.art-video-player.art-control-show .art-bottom .art-controls, .art-video-player.art-hover .art-bottom .art-controls, .art-video-player.art-control-show .art-bottom .art-progress, .art-video-player.art-hover .art-bottom .art-progress {\n transform: translateY(0);\n}\n\n.art-bottom .art-progress {\n z-index: 0;\n pointer-events: auto;\n padding-top: var(--art-progress-top-gap);\n padding-bottom: var(--art-bottom-gap);\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 width: 100%;\n height: 50%;\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 background-color: var(--art-hover-color);\n width: 0%;\n height: 100%;\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 background-color: var(--art-loaded-color);\n width: 0%;\n height: 100%;\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 background-color: var(--art-theme);\n width: 0%;\n height: 100%;\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 pointer-events: none;\n width: 100%;\n height: 100%;\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 pointer-events: auto;\n width: 100%;\n height: 100%;\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 width: var(--art-highlight-width) !important;\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 transform: scale(var(--art-indicator-scale));\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}\n\n.art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator .art-icon {\n pointer-events: none;\n width: 100%;\n height: 100%;\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 transform-origin: bottom;\n opacity: 0;\n z-index: 50;\n border-radius: var(--art-border-radius);\n white-space: nowrap;\n background-color: var(--art-tip-background);\n transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;\n padding: 3px 5px;\n font-size: 12px;\n line-height: 1;\n position: absolute;\n top: -25px;\n left: 0;\n transform: scale(.5);\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 transform-origin: bottom;\n opacity: 0;\n bottom: calc(var(--art-bottom-gap) + 10px);\n border-radius: var(--art-border-radius);\n pointer-events: none;\n background-color: var(--art-widget-background);\n transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;\n position: absolute;\n left: 0;\n transform: scale(.5);\n box-shadow: 0 1px 3px #0003, 0 1px 2px -1px #0003;\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-progress-hover .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-tip, .art-progress-hover .art-bottom .art-progress .art-control-thumbnails {\n opacity: 1;\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 flex: 1;\n justify-content: center;\n align-items: center;\n height: 100%;\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 border-radius: var(--art-border-radius);\n background-color: var(--art-widget-background);\n flex-direction: column;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 100%;\n padding: 10px 0 12px;\n display: flex;\n}\n\n.art-control-volume .art-volume-panel .art-volume-inner .art-volume-slider {\n cursor: pointer;\n flex: 1;\n justify-content: center;\n width: 100%;\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 border-radius: var(--art-border-radius);\n background-color: #ffffff40;\n justify-content: center;\n width: 2px;\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 background-color: var(--art-theme);\n width: 100%;\n height: 100%;\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: 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 border-radius: var(--art-border-radius);\n background-color: var(--art-tip-background);\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 border-radius: var(--art-border-radius);\n background-color: var(--art-widget-background);\n min-width: var(--art-contextmenus-min-width);\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 border-radius: var(--art-border-radius);\n max-height: var(--art-settings-max-height);\n left: auto;\n right: var(--art-padding);\n bottom: var(--art-control-height);\n transition: all var(--art-transition-duration) ease;\n background-color: var(--art-widget-background);\n flex-direction: column;\n display: none;\n position: absolute;\n overflow: hidden auto;\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 cursor: pointer;\n transition: background-color var(--art-transition-duration) ease;\n justify-content: space-between;\n align-items: center;\n padding: 0 5px;\n display: flex;\n overflow: hidden;\n}\n\n.art-video-player .art-settings .art-setting-panel .art-setting-item:hover {\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 flex-shrink: 0;\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 justify-content: center;\n align-items: center;\n min-width: 32px;\n height: 24px;\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 appearance: none;\n background-color: #fff3;\n outline: none;\n width: 80px;\n height: 3px;\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 border-radius: var(--art-border-radius);\n background-color: var(--art-widget-background);\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 text-align: right;\n width: 100px;\n}\n\n.art-video-player .art-info .art-info-panel .art-info-item .art-info-content {\n text-overflow: ellipsis;\n white-space: nowrap;\n user-select: all;\n width: 250px;\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] {\n overflow: hidden;\n}\n\n.art-video-player[data-aspect-ratio] .art-video {\n object-fit: fill;\n box-sizing: content-box;\n}\n\n.art-fullscreen {\n --art-progress-height: 8px;\n --art-indicator-size: 20px;\n --art-control-height: 60px;\n --art-control-icon-scale: 1.3;\n}\n\n.art-fullscreen-web {\n --art-progress-height: 8px;\n --art-indicator-size: 20px;\n --art-control-height: 60px;\n --art-control-icon-scale: 1.3;\n z-index: var(--art-fullscreen-web-index);\n width: 100%;\n height: 100%;\n position: fixed;\n inset: 0;\n}\n\n.art-mini-popup {\n z-index: 9999;\n border-radius: var(--art-border-radius);\n cursor: move;\n user-select: none;\n background: #000;\n width: 320px;\n height: 180px;\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 pointer-events: none;\n opacity: 0;\n background-color: #00000040;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\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-dragging {\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-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-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 border-radius: var(--art-border-radius);\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 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-subtitle {\n bottom: var(--art-subtitle-bottom) !important;\n}\n\n.art-video-player.art-mini-progress-bar .art-bottom, .art-video-player.art-lock .art-bottom {\n opacity: 1;\n background-image: none;\n padding: 0;\n}\n\n.art-video-player.art-mini-progress-bar .art-bottom .art-controls, .art-video-player.art-lock .art-bottom .art-controls, .art-video-player.art-mini-progress-bar .art-bottom .art-progress, .art-video-player.art-lock .art-bottom .art-progress {\n transform: translateY(calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4));\n}\n\n.art-video-player.art-mini-progress-bar .art-bottom .art-progress-indicator, .art-video-player.art-lock .art-bottom .art-progress-indicator {\n display: none !important;\n}\n\n.art-video-player.art-control-show .art-layer-lock {\n display: flex;\n}\n\n.art-control-selector {\n justify-content: center;\n display: flex;\n position: relative;\n}\n\n.art-control-selector .art-selector-list {\n text-align: center;\n border-radius: var(--art-border-radius);\n opacity: 0;\n pointer-events: none;\n bottom: var(--art-control-height);\n max-height: var(--art-selector-max-height);\n background-color: var(--art-widget-background);\n transition: all var(--art-transition-duration) ease;\n flex-direction: column;\n align-items: center;\n display: flex;\n position: absolute;\n overflow: hidden auto;\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 width: 100%;\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 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-video-player.art-mobile {\n --art-bottom-gap: 10px;\n --art-control-height: 38px;\n --art-control-icon-scale: 1;\n --art-state-size: 60px;\n --art-settings-max-height: 180px;\n --art-selector-max-height: 180px;\n --art-indicator-scale: 1;\n --art-control-opacity: 1;\n}\n\n.art-video-player.art-mobile .art-controls-left {\n margin-left: calc(var(--art-padding) / -1);\n}\n\n.art-video-player.art-mobile .art-controls-right {\n margin-right: calc(var(--art-padding) / -1);\n}\n"; },{}],"9hUEm":[function(require,module,exports,__globalThis) { !function(r, t) { diff --git a/packages/artplayer/src/style/artplayer.less b/packages/artplayer/src/style/artplayer.less index b47b10f40..92f459814 100644 --- a/packages/artplayer/src/style/artplayer.less +++ b/packages/artplayer/src/style/artplayer.less @@ -59,4 +59,4 @@ color: var(--art-font-color); text-decoration: none; } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/aspectRatio.less b/packages/artplayer/src/style/aspectRatio.less index 28a00515d..846b5f681 100644 --- a/packages/artplayer/src/style/aspectRatio.less +++ b/packages/artplayer/src/style/aspectRatio.less @@ -1,10 +1,9 @@ .art-video-player { &[data-aspect-ratio] { overflow: hidden; - .art-video { object-fit: fill; box-sizing: content-box; } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/backdrop.less b/packages/artplayer/src/style/backdrop.less index 40fee252d..b532c3ece 100644 --- a/packages/artplayer/src/style/backdrop.less +++ b/packages/artplayer/src/style/backdrop.less @@ -1,5 +1,4 @@ .art-video-player.art-backdrop { - .art-contextmenus, .art-info, .art-settings, @@ -8,4 +7,4 @@ .art-volume-inner { .art-backdrop-filter(); } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/bottom.less b/packages/artplayer/src/style/bottom.less index 93429e399..e5f437b36 100644 --- a/packages/artplayer/src/style/bottom.less +++ b/packages/artplayer/src/style/bottom.less @@ -8,14 +8,14 @@ overflow: hidden; pointer-events: none; padding: 0 var(--art-padding); - transition: all var(--art-transition-duration) var(--art-ease-standard); + transition: all var(--art-transition-duration) ease; background-size: 100% var(--art-bottom-height); .art-bottom-gradient(); .art-controls, .art-progress { transform: translateY(var(--art-bottom-offset)); - transition: transform var(--art-transition-duration) var(--art-ease-standard); + transition: transform var(--art-transition-duration) ease; } } @@ -23,11 +23,10 @@ &.art-hover { .art-bottom { opacity: 1; - .art-controls, .art-progress { transform: translateY(0); } } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/contextmenu.less b/packages/artplayer/src/style/contextmenu.less index 07b1bc1a0..c7ab3cd7c 100644 --- a/packages/artplayer/src/style/contextmenu.less +++ b/packages/artplayer/src/style/contextmenu.less @@ -4,14 +4,17 @@ flex-direction: column; position: absolute; z-index: 120; - padding: var(--art-space-xxs) 0; - font-size: var(--art-font-size-sm); + padding: 5px 0; + border-radius: var(--art-border-radius); + font-size: 12px; + background-color: var(--art-widget-background); min-width: var(--art-contextmenus-min-width); - .art-panel-surface(); .art-contextmenu { - .art-menu-item-base(var(--art-space-xs), var(--art-contextmenu-padding-x), false); - border-bottom: 1px solid var(--art-surface-border-color); + cursor: pointer; + display: flex; + padding: 10px 15px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); span { padding: 0 8px; @@ -23,7 +26,7 @@ } &:hover { - background-color: var(--art-surface-hover-color); + background-color: rgba(255, 255, 255, 0.1); } &:last-child { diff --git a/packages/artplayer/src/style/controls.less b/packages/artplayer/src/style/controls.less index a040e14b4..36c366027 100644 --- a/packages/artplayer/src/style/controls.less +++ b/packages/artplayer/src/style/controls.less @@ -30,15 +30,15 @@ cursor: pointer; white-space: nowrap; opacity: var(--art-control-opacity); - min-height: var(--art-touch-hit-size); - min-width: var(--art-touch-hit-size); - transition: opacity var(--art-transition-duration) var(--art-ease-standard); + min-height: var(--art-control-height); + min-width: var(--art-control-height); + transition: opacity var(--art-transition-duration) ease; .art-icon { height: var(--art-control-icon-size); width: var(--art-control-icon-size); transform: scale(var(--art-control-icon-scale)); - transition: transform var(--art-transition-duration) var(--art-ease-standard); + transition: transform var(--art-transition-duration) ease; &:active { transform: scale(calc(var(--art-control-icon-scale) * 0.8)); @@ -49,4 +49,4 @@ opacity: 1; } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/danmuku.less b/packages/artplayer/src/style/danmuku.less index bf21cb761..a5b63a6b5 100644 --- a/packages/artplayer/src/style/danmuku.less +++ b/packages/artplayer/src/style/danmuku.less @@ -2,4 +2,4 @@ .art-full(30); pointer-events: none; overflow: hidden; -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/flip.less b/packages/artplayer/src/style/flip.less index 941652d00..1c9e395ae 100644 --- a/packages/artplayer/src/style/flip.less +++ b/packages/artplayer/src/style/flip.less @@ -6,4 +6,4 @@ &[data-flip='vertical'] .art-video { transform: scaleY(-1); } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/fullscreen.less b/packages/artplayer/src/style/fullscreen.less index 24d5c2a38..66fe5d85a 100644 --- a/packages/artplayer/src/style/fullscreen.less +++ b/packages/artplayer/src/style/fullscreen.less @@ -3,4 +3,4 @@ --art-indicator-size: 20px; --art-control-height: 60px; --art-control-icon-scale: 1.3; -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/fullscreenWeb.less b/packages/artplayer/src/style/fullscreenWeb.less index 9f97e1dea..562fd8e26 100644 --- a/packages/artplayer/src/style/fullscreenWeb.less +++ b/packages/artplayer/src/style/fullscreenWeb.less @@ -1,4 +1,4 @@ .art-fullscreen-web { .art-fullscreen(); .art-full(var(--art-fullscreen-web-index), fixed); -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/hideCursor.less b/packages/artplayer/src/style/hideCursor.less index b2967d341..dd696775a 100644 --- a/packages/artplayer/src/style/hideCursor.less +++ b/packages/artplayer/src/style/hideCursor.less @@ -1,3 +1,3 @@ .art-hide-cursor * { cursor: none !important; -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/hint.less b/packages/artplayer/src/style/hint.less index b8b37edcb..f6a77460b 100644 --- a/packages/artplayer/src/style/hint.less +++ b/packages/artplayer/src/style/hint.less @@ -34,7 +34,6 @@ * tooltip body */ } - [class*='hint--']:before, [class*='hint--']:after { position: absolute; @@ -52,20 +51,17 @@ -moz-transition-delay: 0ms; transition-delay: 0ms; } - [class*='hint--']:hover:before, [class*='hint--']:hover:after { visibility: visible; opacity: 1; } - [class*='hint--']:hover:before, [class*='hint--']:hover:after { -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; transition-delay: 100ms; } - [class*='hint--']:before { content: ''; position: absolute; @@ -73,7 +69,6 @@ border: 6px solid transparent; z-index: 1000001; } - [class*='hint--']:after { background: #000000; color: white; @@ -83,11 +78,9 @@ line-height: 12px; white-space: nowrap; } - [class*='hint--'][aria-label]:after { content: attr(aria-label); } - [class*='hint--'][data-hint]:after { content: attr(data-hint); } @@ -474,7 +467,6 @@ * tooltip body */ } - [class*='hint--']:after { text-shadow: 0 -1px 0px black; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); @@ -817,4 +809,4 @@ .hint--no-arrow:before { display: none; -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/icon.less b/packages/artplayer/src/style/icon.less index 2ef2c8546..816870ffc 100644 --- a/packages/artplayer/src/style/icon.less +++ b/packages/artplayer/src/style/icon.less @@ -1,4 +1,4 @@ .art-icon { line-height: 1; .art-center(); -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/index.less b/packages/artplayer/src/style/index.less index fb94f948a..06e970a79 100644 --- a/packages/artplayer/src/style/index.less +++ b/packages/artplayer/src/style/index.less @@ -27,4 +27,4 @@ @import './plugins'; @import './selector'; @import './hint'; -@import './mobile'; \ No newline at end of file +@import './mobile'; diff --git a/packages/artplayer/src/style/info.less b/packages/artplayer/src/style/info.less index 4b512347b..c6b70c730 100644 --- a/packages/artplayer/src/style/info.less +++ b/packages/artplayer/src/style/info.less @@ -5,9 +5,10 @@ left: var(--art-padding); top: var(--art-padding); z-index: 100; - padding: var(--art-space-xs); - font-size: var(--art-font-size-sm); - .art-panel-surface(); + padding: 10px; + font-size: 12px; + border-radius: var(--art-border-radius); + background-color: var(--art-widget-background); .art-info-panel { display: flex; diff --git a/packages/artplayer/src/style/layers.less b/packages/artplayer/src/style/layers.less index 7997b5110..ae3aaba6a 100644 --- a/packages/artplayer/src/style/layers.less +++ b/packages/artplayer/src/style/layers.less @@ -14,4 +14,4 @@ display: flex; } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/loading.less b/packages/artplayer/src/style/loading.less index 671293914..36f29e643 100644 --- a/packages/artplayer/src/style/loading.less +++ b/packages/artplayer/src/style/loading.less @@ -9,9 +9,8 @@ .art-loading { display: flex; } - .art-mask { display: none; } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/mask.less b/packages/artplayer/src/style/mask.less index 65945135a..284b3b4f0 100644 --- a/packages/artplayer/src/style/mask.less +++ b/packages/artplayer/src/style/mask.less @@ -10,7 +10,7 @@ transform: scale(2); width: var(--art-state-size); height: var(--art-state-size); - transition: all var(--art-transition-duration) var(--art-ease-standard); + transition: all var(--art-transition-duration) ease; } } @@ -28,4 +28,4 @@ display: none; } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/mini.less b/packages/artplayer/src/style/mini.less index 2d7d59b8f..08d9f28f7 100644 --- a/packages/artplayer/src/style/mini.less +++ b/packages/artplayer/src/style/mini.less @@ -8,8 +8,8 @@ cursor: move; user-select: none; overflow: hidden; - transition: opacity var(--art-transition-duration) var(--art-ease-standard); - box-shadow: 0 0 5px var(--art-overlay-strong); + transition: opacity 0.2s ease; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); svg { fill: #fff; @@ -26,7 +26,7 @@ top: 10px; cursor: pointer; opacity: 0; - transition: opacity var(--art-transition-duration) var(--art-ease-standard); + transition: opacity 0.2s ease; } .art-mini-state { @@ -34,15 +34,15 @@ .art-center(); pointer-events: none; opacity: 0; - transition: opacity var(--art-transition-duration) var(--art-ease-standard); - background-color: var(--art-overlay-dim); + transition: opacity 0.2s ease; + background-color: rgba(0, 0, 0, 0.25); .art-icon { opacity: 0.75; cursor: pointer; transform: scale(3); pointer-events: auto; - transition: transform var(--art-transition-duration) var(--art-ease-standard); + transition: transform 0.2s ease; &:active { transform: scale(2.5); @@ -55,10 +55,9 @@ } &:hover { - .art-mini-close, .art-mini-state { opacity: 1; } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/mixins.less b/packages/artplayer/src/style/mixins.less index d452f9905..74a2b7ff4 100644 --- a/packages/artplayer/src/style/mixins.less +++ b/packages/artplayer/src/style/mixins.less @@ -35,66 +35,3 @@ text-overflow: ellipsis; white-space: nowrap; } - -.art-panel-surface { - border-radius: var(--art-radius-sm); - background-color: var(--art-widget-background); -} - -.art-flyout-hidden(@distance: 10px, @axis: y) { - opacity: 0; - pointer-events: none; - transition: all var(--art-transition-duration) var(--art-ease-standard); - - & when (@axis =y) { - transform: translateY(@distance); - } - - & when (@axis =x) { - transform: translateX(@distance); - } -} - -.art-flyout-visible(@axis: y) { - opacity: 1; - pointer-events: auto; - - & when (@axis =y) { - transform: translateY(0); - } - - & when (@axis =x) { - transform: translateX(0); - } -} - -.art-elevation(@level: medium) when (@level =low) { - box-shadow: var(--art-shadow-low); -} - -.art-elevation(@level: medium) when (@level =medium) { - box-shadow: var(--art-shadow-medium); -} - -.art-elevation(@level: medium) when (@level =high) { - box-shadow: var(--art-shadow-high); -} - -.art-text-muted(@size: 12px) { - font-size: @size; - color: var(--art-surface-muted-color); -} - -.art-menu-item-base(@padding-y, @padding-x, @animated: true) { - display: flex; - cursor: pointer; - padding: @padding-y @padding-x; - - & when (@animated = true) { - transition: background-color var(--art-transition-duration) var(--art-ease-standard); - } - - &:hover { - background-color: var(--art-surface-hover-color); - } -} diff --git a/packages/artplayer/src/style/mobile.less b/packages/artplayer/src/style/mobile.less index a4e9dabbf..1cf56b0cb 100644 --- a/packages/artplayer/src/style/mobile.less +++ b/packages/artplayer/src/style/mobile.less @@ -7,8 +7,6 @@ --art-selector-max-height: 180px; --art-indicator-scale: 1; --art-control-opacity: 1; - --art-padding: var(--art-mobile-padding); - --art-border-radius: var(--art-mobile-radius); .art-controls-left { margin-left: calc(var(--art-padding) / -1); @@ -17,4 +15,4 @@ .art-controls-right { margin-right: calc(var(--art-padding) / -1); } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/notice.less b/packages/artplayer/src/style/notice.less index 15e5e527d..3d41925ad 100644 --- a/packages/artplayer/src/style/notice.less +++ b/packages/artplayer/src/style/notice.less @@ -9,7 +9,7 @@ .art-notice-inner { display: inline-flex; - padding: var(--art-space-xxs); + padding: 5px; line-height: 1; border-radius: var(--art-border-radius); background-color: var(--art-tip-background); @@ -21,4 +21,4 @@ display: flex; } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/plugins.less b/packages/artplayer/src/style/plugins.less index 3c449d3c4..27fca6086 100644 --- a/packages/artplayer/src/style/plugins.less +++ b/packages/artplayer/src/style/plugins.less @@ -16,19 +16,20 @@ gap: 10px; align-items: center; position: absolute; - padding: var(--art-space-xs); + border-radius: var(--art-border-radius); + padding: 10px; line-height: 1; left: var(--art-padding); bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px); - .art-panel-surface(); + background-color: var(--art-widget-background); .art-auto-playback-close { .art-center(); cursor: pointer; svg { - width: var(--art-icon-small-size); - height: var(--art-icon-small-size); + width: 15px; + height: 15px; fill: var(--art-theme); } } @@ -54,7 +55,9 @@ .art-controls, .art-progress { - transform: translateY(calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4)); + transform: translateY( + calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4) + ); } .art-progress-indicator { @@ -68,4 +71,4 @@ display: flex; } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/poster.less b/packages/artplayer/src/style/poster.less index e44c90e76..7554fb2b2 100644 --- a/packages/artplayer/src/style/poster.less +++ b/packages/artplayer/src/style/poster.less @@ -2,4 +2,4 @@ .art-full(11); .art-bg-cover(); pointer-events: none; -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/progress.less b/packages/artplayer/src/style/progress.less index c05cecfb0..384443d75 100644 --- a/packages/artplayer/src/style/progress.less +++ b/packages/artplayer/src/style/progress.less @@ -18,7 +18,7 @@ position: relative; height: 50%; width: 100%; - transition: height var(--art-transition-duration) var(--art-ease-standard); + transition: height var(--art-transition-duration) ease; background-color: var(--art-progress-color); .art-progress-hover { @@ -63,7 +63,7 @@ height: var(--art-indicator-size); transform: scale(var(--art-indicator-scale)); margin-left: calc(var(--art-indicator-size) / -2); - transition: transform var(--art-transition-duration) var(--art-ease-standard); + transition: transform var(--art-transition-duration) ease; .art-icon { width: 100%; @@ -86,16 +86,15 @@ opacity: 0; position: absolute; z-index: 50; - top: var(--art-tip-offset); + top: -25px; left: 0; - padding: var(--art-tip-padding); + padding: 3px 5px; line-height: 1; - font-size: var(--art-font-size-sm); + font-size: 12px; border-radius: var(--art-border-radius); white-space: nowrap; background-color: var(--art-tip-background); - transition: transform var(--art-transition-duration) var(--art-ease-standard), - opacity var(--art-transition-duration) var(--art-ease-standard); + transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease; } } @@ -113,11 +112,13 @@ position: absolute; bottom: calc(var(--art-bottom-gap) + 10px); left: 0; + border-radius: var(--art-border-radius); pointer-events: none; - .art-panel-surface(); - transition: transform var(--art-transition-duration) var(--art-ease-standard), - opacity var(--art-transition-duration) var(--art-ease-standard); - .art-elevation(medium); + background-color: var(--art-widget-background); + transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease; + box-shadow: + 0 1px 3px 0 rgb(0 0 0 / 0.2), + 0 1px 2px -1px rgb(0 0 0 / 0.2); } } @@ -130,11 +131,9 @@ .art-progress-hover { .art-bottom .art-progress { - - .art-control-progress .art-control-progress-inner .art-progress-tip, - .art-control-thumbnails { + .art-control-progress .art-control-progress-inner .art-progress-tip, .art-control-thumbnails { transform: scale(1); opacity: 1; } } -} +} \ No newline at end of file diff --git a/packages/artplayer/src/style/selector.less b/packages/artplayer/src/style/selector.less index 4f9302f36..f91d08041 100644 --- a/packages/artplayer/src/style/selector.less +++ b/packages/artplayer/src/style/selector.less @@ -9,12 +9,16 @@ align-items: center; text-align: center; position: absolute; + border-radius: var(--art-border-radius); overflow-y: auto; overflow-x: hidden; + opacity: 0; + transform: translateY(10px); + pointer-events: none; bottom: var(--art-control-height); max-height: var(--art-selector-max-height); - .art-panel-surface(); - .art-flyout-hidden(); + background-color: var(--art-widget-background); + transition: all var(--art-transition-duration) ease; .art-selector-item { .art-center(); @@ -24,7 +28,7 @@ line-height: 1; &:hover { - background-color: var(--art-surface-hover-color); + background-color: rgba(255, 255, 255, 0.1); } &:hover, @@ -36,7 +40,9 @@ &:hover { .art-selector-list { - .art-flyout-visible(); + opacity: 1; + transform: translateY(0); + pointer-events: auto; } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/setting.less b/packages/artplayer/src/style/setting.less index fd14f31e4..eb818dd9c 100644 --- a/packages/artplayer/src/style/setting.less +++ b/packages/artplayer/src/style/setting.less @@ -7,11 +7,12 @@ left: auto; overflow-y: auto; overflow-x: hidden; + border-radius: var(--art-border-radius); max-height: var(--art-settings-max-height); right: var(--art-padding); bottom: var(--art-control-height); - transition: all var(--art-transition-duration) var(--art-ease-standard); - .art-panel-surface(); + transition: all var(--art-transition-duration) ease; + background-color: var(--art-widget-background); .art-setting-panel { display: none; @@ -22,10 +23,17 @@ } .art-setting-item { - .art-menu-item-base(0, var(--art-space-xxs)); + display: flex; justify-content: space-between; align-items: center; + padding: 0 5px; + cursor: pointer; overflow: hidden; + transition: background-color var(--art-transition-duration) ease; + + &:hover { + background-color: rgba(255, 255, 255, 0.1); + } &.art-current { color: var(--art-theme); @@ -33,7 +41,7 @@ .art-icon-check { visibility: hidden; - height: var(--art-icon-small-size); + height: 15px; } &.art-current .art-icon-check { @@ -43,7 +51,7 @@ .art-setting-item-left { .art-center(); flex-shrink: 0; - gap: var(--art-space-xxs); + gap: 5px; .art-setting-item-left-icon { .art-center(); @@ -54,12 +62,12 @@ .art-setting-item-right { .art-center(); - gap: var(--art-space-xxs); - font-size: var(--art-font-size-sm); + gap: 5px; + font-size: 12px; .art-setting-item-right-tooltip { white-space: nowrap; - color: var(--art-surface-muted-color); + color: rgba(255, 255, 255, 0.5); } .art-setting-item-right-icon { @@ -73,13 +81,13 @@ width: 80px; outline: none; appearance: none; - background-color: var(--art-surface-range-color); + background-color: rgba(255, 255, 255, 0.2); } } } .art-setting-item-back { - border-bottom: 1px solid var(--art-surface-border-color); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } } } diff --git a/packages/artplayer/src/style/subtitle.less b/packages/artplayer/src/style/subtitle.less index 2f5671216..1641241c9 100644 --- a/packages/artplayer/src/style/subtitle.less +++ b/packages/artplayer/src/style/subtitle.less @@ -11,7 +11,7 @@ gap: var(--art-subtitle-gap); bottom: var(--art-subtitle-bottom); font-size: var(--art-subtitle-font-size); - transition: bottom var(--art-transition-duration) var(--art-ease-standard); + transition: bottom var(--art-transition-duration) ease; text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, @@ -34,4 +34,4 @@ bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom)); } } -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/variables.less b/packages/artplayer/src/style/variables.less index 4ff2e6917..74ccf20f2 100644 --- a/packages/artplayer/src/style/variables.less +++ b/packages/artplayer/src/style/variables.less @@ -2,28 +2,15 @@ --art-theme: #f00; --art-font-color: #fff; --art-background-color: #000; - --art-font-size-sm: 12px; --art-text-shadow-color: rgba(0, 0, 0, 0.5); --art-transition-duration: 0.2s; - --art-ease-standard: ease; --art-padding: 10px; --art-border-radius: 3px; - --art-mobile-padding: 10px; - --art-mobile-radius: 3px; - --art-radius-sm: 3px; - --art-space-xxs: 5px; - --art-space-xs: 10px; - --art-surface-hover-color: rgba(255, 255, 255, 0.1); - --art-surface-border-color: rgba(255, 255, 255, 0.1); - --art-surface-muted-color: rgba(255, 255, 255, 0.5); - --art-surface-range-color: rgba(255, 255, 255, 0.2); --art-progress-height: 6px; --art-progress-color: rgba(255, 255, 255, 0.25); --art-progress-top-gap: 8px; --art-hover-color: rgba(255, 255, 255, 0.25); --art-loaded-color: rgba(255, 255, 255, 0.25); - --art-tip-padding: 3px 5px; - --art-tip-offset: -25px; --art-state-size: 80px; --art-state-opacity: 0.8; --art-bottom-height: 100px; @@ -35,7 +22,6 @@ --art-control-opacity: 0.75; --art-control-icon-size: 36px; --art-control-icon-scale: 1.1; - --art-touch-hit-size: var(--art-control-height); --art-volume-height: 120px; --art-volume-handle-size: 14px; --art-lock-size: 36px; @@ -46,7 +32,6 @@ --art-settings-max-height: 300px; --art-selector-max-height: 300px; --art-contextmenus-min-width: 250px; - --art-contextmenu-padding-x: 15px; --art-subtitle-font-size: 20px; --art-subtitle-gap: 5px; --art-subtitle-bottom: 15px; @@ -57,11 +42,4 @@ --art-scrollbar-background: rgba(255, 255, 255, 0.25); --art-scrollbar-background-hover: rgba(255, 255, 255, 0.5); --art-mini-progress-height: 2px; - --art-shadow-low: 0 1px 2px 0 rgb(0 0 0 / 0.12); - --art-shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2); - --art-shadow-high: 0 4px 10px 0 rgb(0 0 0 / 0.25); - --art-shadow-elevated: var(--art-shadow-medium); - --art-icon-small-size: 15px; - --art-overlay-dim: rgba(0, 0, 0, 0.25); - --art-overlay-strong: rgba(0, 0, 0, 0.5); } diff --git a/packages/artplayer/src/style/video.less b/packages/artplayer/src/style/video.less index 82bbe4e3a..8b9f4abee 100644 --- a/packages/artplayer/src/style/video.less +++ b/packages/artplayer/src/style/video.less @@ -1,4 +1,4 @@ .art-video { .art-full(10); cursor: pointer; -} \ No newline at end of file +} diff --git a/packages/artplayer/src/style/volume.less b/packages/artplayer/src/style/volume.less index 779b660cc..f3cc7b865 100644 --- a/packages/artplayer/src/style/volume.less +++ b/packages/artplayer/src/style/volume.less @@ -7,23 +7,27 @@ left: 0; right: 0; padding: 0 5px; - .art-text-muted(12px); + font-size: 12px; text-align: center; cursor: default; + opacity: 0; + transform: translateY(10px); + pointer-events: none; bottom: var(--art-control-height); width: var(--art-control-height); height: var(--art-volume-height); - .art-flyout-hidden(); + transition: all var(--art-transition-duration) ease; .art-volume-inner { display: flex; flex-direction: column; align-items: center; - gap: var(--art-space-xs); + gap: 10px; height: 100%; width: 100%; - padding: var(--art-space-xs) 0 12px; - .art-panel-surface(); + padding: 10px 0 12px; + border-radius: var(--art-border-radius); + background-color: var(--art-widget-background); .art-volume-slider { flex: 1; @@ -40,7 +44,7 @@ width: 2px; border-radius: var(--art-border-radius); overflow: hidden; - background-color: var(--art-hover-color); + background-color: rgba(255, 255, 255, 0.25); .art-volume-loaded { .art-full(0); @@ -57,7 +61,7 @@ transform: scale(1); border-radius: 100%; background-color: var(--art-theme); - transition: transform var(--art-transition-duration) var(--art-ease-standard); + transition: transform var(--art-transition-duration) ease; } &:active { @@ -71,7 +75,9 @@ &:hover { .art-volume-panel { - .art-flyout-visible(); + opacity: 1; + transform: translateY(0); + pointer-events: auto; } } -} \ No newline at end of file +} diff --git a/packages/artplayer/types/cssVar.d.ts b/packages/artplayer/types/cssVar.d.ts index 97449811f..e9384c07f 100644 --- a/packages/artplayer/types/cssVar.d.ts +++ b/packages/artplayer/types/cssVar.d.ts @@ -2,28 +2,15 @@ export interface CssVar { '--art-theme': string '--art-font-color': string '--art-background-color': string - '--art-font-size-sm': string '--art-text-shadow-color': string '--art-transition-duration': string - '--art-ease-standard': string '--art-padding': string '--art-border-radius': string - '--art-mobile-padding': string - '--art-mobile-radius': string - '--art-radius-sm': string - '--art-space-xxs': string - '--art-space-xs': string - '--art-surface-hover-color': string - '--art-surface-border-color': string - '--art-surface-muted-color': string - '--art-surface-range-color': string '--art-progress-height': string '--art-progress-color': string '--art-progress-top-gap': string '--art-hover-color': string '--art-loaded-color': string - '--art-tip-padding': string - '--art-tip-offset': string '--art-state-size': string '--art-state-opacity': number '--art-bottom-height': string @@ -35,7 +22,6 @@ export interface CssVar { '--art-control-opacity': number '--art-control-icon-size': string '--art-control-icon-scale': number - '--art-touch-hit-size': string '--art-volume-height': string '--art-volume-handle-size': string '--art-lock-size': string @@ -46,7 +32,6 @@ export interface CssVar { '--art-settings-max-height': string '--art-selector-max-height': string '--art-contextmenus-min-width': string - '--art-contextmenu-padding-x': string '--art-subtitle-font-size': string '--art-subtitle-gap': string '--art-subtitle-bottom': string @@ -57,11 +42,4 @@ export interface CssVar { '--art-scrollbar-background': string '--art-scrollbar-background-hover': string '--art-mini-progress-height': string - '--art-shadow-low': string - '--art-shadow-medium': string - '--art-shadow-high': string - '--art-shadow-elevated': string - '--art-icon-small-size': string - '--art-overlay-dim': string - '--art-overlay-strong': string }