add --art-border-radius

docs/uncompiled/artplayer/index.js

@@ -415,7 +415,7 @@ if (typeof window !== "undefined") window["Artplayer"] = Artplayer;
 console.log(`%c ArtPlayer %c ${Artplayer.version} %c https://artplayer.org`, "color: #fff; background: #5f5f5f", "color: #fff; background: #4bc729", "");
 
 },{"bundle-text:./style/index.less":"SvnDa","option-validator":"2tbdu","./utils/emitter":"elSLF","./utils":"jmgNb","./scheme":"gL38d","./config":"2ZnKD","./whitelist":"gd0pl","./template":"bDTDS","./i18n":"k0CtI","./player":"35XKf","./control":"faO0X","./contextmenu":"5npaZ","./info":"6vVKE","./subtitle":"4exyO","./events":"dz5ul","./hotkey":"1nFqF","./layer":"fvy8V","./loading":"h8KPY","./notice":"cr1XY","./mask":"llnR4","./icons":"gP6M7","./setting":"e5Aaq","./storage":"feFxw","./plugins":"h1hfO","./mobile":"c9n1Y","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"SvnDa":[function(require,module,exports) {
-module.exports = ".art-video-player {\n  --art-theme: red;\n  --art-font-color: #fff;\n  --art-background-color: #000;\n  --art-text-shadow-color: #00000080;\n  --art-transition-duration: .2s;\n  --art-padding: 10px;\n  --art-progress-height: 6px;\n  --art-progress-color: #fff3;\n  --art-hover-color: #ffffff80;\n  --art-loaded-color: #fff3;\n  --art-loop-color: #ffffffbf;\n  --art-state-size: 80px;\n  --art-state-opacity: .8;\n  --art-bottom-height: 100px;\n  --art-bottom-offset: -20px;\n  --art-bottom-gap: 5px;\n  --art-highlight-width: 8px;\n  --art-highlight-color: #ffffff80;\n  --art-loop-width: 2px;\n  --art-control-height: 46px;\n  --art-control-opacity: .75;\n  --art-control-icon-size: 36px;\n  --art-control-icon-scale: 1.1;\n  --art-volume-height: 120px;\n  --art-volume-handle-size: 14px;\n  --art-lock-size: 36px;\n  --art-indicator-size: 16px;\n  --art-fullscreen-web-index: 9999;\n  --art-settings-scale: 1;\n  --art-settings-icon-size: 24px;\n  --art-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: #00000080;\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  -webkit-backdrop-filter: saturate(180%) blur(20px);\n  backdrop-filter: saturate(180%) blur(20px);\n  background-color: #000000bf !important;\n}\n\n.art-truncate {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.art-video-player {\n  width: 100%;\n  height: 100%;\n  zoom: 1;\n  text-align: left;\n  direction: ltr;\n  user-select: none;\n  box-sizing: border-box;\n  color: var(--art-font-color);\n  background-color: var(--art-background-color);\n  text-shadow: 0 0 2px var(--art-text-shadow-color);\n  -webkit-tap-highlight-color: #0000;\n  -ms-touch-action: manipulation;\n  touch-action: manipulation;\n  -ms-high-contrast-adjust: none;\n  outline: 0;\n  margin: 0 auto;\n  padding: 0;\n  font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.3;\n  position: relative;\n  overflow: hidden;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n  width: var(--art-scrollbar-size);\n  height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n  background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n  background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n  max-width: 100%;\n  vertical-align: top;\n}\n\n.art-video-player svg {\n  fill: #fff;\n}\n\n.art-video-player a {\n  color: #fff;\n  text-decoration: none;\n}\n\n.art-icon {\n  justify-content: center;\n  align-items: center;\n  line-height: 1;\n  display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\n  backdrop-filter: saturate(180%) blur(20px);\n  background-color: #000000bf !important;\n}\n\n.art-video {\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  position: absolute;\n  inset: 0;\n}\n\n.art-poster {\n  z-index: 11;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-subtitle {\n  z-index: 20;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  gap: var(--art-subtitle-gap);\n  bottom: var(--art-subtitle-bottom);\n  font-size: var(--art-subtitle-font-size);\n  pointer-events: none;\n  transition: bottom var(--art-transition-duration) ease;\n  text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n  flex-direction: column;\n  padding: 0 5%;\n  display: none;\n  position: absolute;\n}\n\n.art-video-player .art-subtitle p {\nLine truncated
+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: #fff3;\n  --art-hover-color: #ffffff80;\n  --art-loaded-color: #fff3;\n  --art-loop-color: #ffffffbf;\n  --art-state-size: 80px;\n  --art-state-opacity: .8;\n  --art-bottom-height: 100px;\n  --art-bottom-offset: -20px;\n  --art-bottom-gap: 5px;\n  --art-highlight-width: 8px;\n  --art-highlight-color: #ffffff80;\n  --art-loop-width: 2px;\n  --art-control-height: 46px;\n  --art-control-opacity: .75;\n  --art-control-icon-size: 36px;\n  --art-control-icon-scale: 1.1;\n  --art-volume-height: 120px;\n  --art-volume-handle-size: 14px;\n  --art-lock-size: 36px;\n  --art-indicator-size: 16px;\n  --art-fullscreen-web-index: 9999;\n  --art-settings-scale: 1;\n  --art-settings-icon-size: 24px;\n  --art-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: #00000080;\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  -webkit-backdrop-filter: saturate(180%) blur(20px);\n  backdrop-filter: saturate(180%) blur(20px);\n  background-color: #000000bf !important;\n}\n\n.art-truncate {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.art-video-player {\n  width: 100%;\n  height: 100%;\n  zoom: 1;\n  text-align: left;\n  direction: ltr;\n  user-select: none;\n  box-sizing: border-box;\n  color: var(--art-font-color);\n  background-color: var(--art-background-color);\n  text-shadow: 0 0 2px var(--art-text-shadow-color);\n  -webkit-tap-highlight-color: #0000;\n  -ms-touch-action: manipulation;\n  touch-action: manipulation;\n  -ms-high-contrast-adjust: none;\n  outline: 0;\n  margin: 0 auto;\n  padding: 0;\n  font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.3;\n  position: relative;\n  overflow: hidden;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n  width: var(--art-scrollbar-size);\n  height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n  background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n  background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n  max-width: 100%;\n  vertical-align: top;\n}\n\n.art-video-player svg {\n  fill: #fff;\n}\n\n.art-video-player a {\n  color: #fff;\n  text-decoration: none;\n}\n\n.art-icon {\n  justify-content: center;\n  align-items: center;\n  line-height: 1;\n  display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\n  backdrop-filter: saturate(180%) blur(20px);\n  background-color: #000000bf !important;\n}\n\n.art-video {\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  position: absolute;\n  inset: 0;\n}\n\n.art-poster {\n  z-index: 11;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-subtitle {\n  z-index: 20;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  gap: var(--art-subtitle-gap);\n  bottom: var(--art-subtitle-bottom);\n  font-size: var(--art-subtitle-font-size);\n  pointer-events: none;\n  transition: bottom var(--art-transition-duration) ease;\n  text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n  flex-direction: column;\n  padding: 0 5%;\n  display: none;\n  position: absolute;\n}\n\n.art-vidLine truncated
 
 },{}],"2tbdu":[function(require,module,exports) {
 !function(r, t) {

packages/artplayer/src/style/contextmenu.less

@@ -5,7 +5,7 @@
         position: absolute;
         z-index: 120;
         padding: 5px 0;
-        border-radius: 3px;
+        border-radius: var(--art-border-radius);
         font-size: 12px;
         background-color: var(--art-widget-background);
         min-width: var(--art-contextmenus-min-width);

packages/artplayer/src/style/info.less

@@ -7,7 +7,7 @@
         z-index: 100;
         padding: 10px;
         font-size: 12px;
-        border-radius: 3px;
+        border-radius: var(--art-border-radius);
         background-color: var(--art-widget-background);
 
         .art-info-panel {

packages/artplayer/src/style/mini.less

@@ -4,7 +4,7 @@
     width: 320px;
     height: 180px;
     background: #000;
-    border-radius: 3px;
+    border-radius: var(--art-border-radius);
     cursor: move;
     user-select: none;
     overflow: hidden;

packages/artplayer/src/style/notice.less

@@ -11,7 +11,7 @@
             display: inline-flex;
             padding: 5px;
             line-height: 1;
-            border-radius: 3px;
+            border-radius: var(--art-border-radius);
             background-color: var(--art-tip-background);
         }
     }

packages/artplayer/src/style/plugins.less

@@ -24,7 +24,7 @@
         gap: 10px;
         align-items: center;
         position: absolute;
-        border-radius: 3px;
+        border-radius: var(--art-border-radius);
         padding: 10px;
         line-height: 1;
         left: var(--art-padding);

packages/artplayer/src/style/progress.less

@@ -88,7 +88,7 @@
                     padding: 3px 5px;
                     line-height: 1;
                     font-size: 12px;
-                    border-radius: 3px;
+                    border-radius: var(--art-border-radius);
                     white-space: nowrap;
                     background-color: var(--art-tip-background);
                 }
@@ -106,7 +106,7 @@
             position: absolute;
             bottom: 10px;
             left: 0;
-            border-radius: 3px;
+            border-radius: var(--art-border-radius);
             pointer-events: none;
             background-color: var(--art-widget-background);
             box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);

packages/artplayer/src/style/selector.less

@@ -7,7 +7,7 @@
         justify-content: center;
         text-align: center;
         position: absolute;
-        border-radius: 3px;
+        border-radius: var(--art-border-radius);
         overflow-y: auto;
         overflow-x: hidden;
         opacity: 0;

packages/artplayer/src/style/setting.less

@@ -7,7 +7,7 @@
         left: auto;
         overflow-y: auto;
         overflow-x: hidden;
-        border-radius: 3px;
+        border-radius: var(--art-border-radius);
         transform-origin: bottom right;
         max-height: var(--art-settings-max-height);
         right: var(--art-padding);

packages/artplayer/src/style/variables.less

@@ -5,6 +5,7 @@
     --art-text-shadow-color: rgba(0, 0, 0, 0.5);
     --art-transition-duration: 0.2s;
     --art-padding: 10px;
+    --art-border-radius: 3px;
     --art-progress-height: 6px;
     --art-progress-color: rgba(255, 255, 255, 0.2);
     --art-hover-color: rgba(255, 255, 255, 0.5);

packages/artplayer/src/style/volume.less

@@ -26,7 +26,7 @@
             height: 100%;
             width: 100%;
             padding: 10px 0 12px;
-            border-radius: 3px;
+            border-radius: var(--art-border-radius);
             background-color: var(--art-widget-background);
 
             .art-volume-slider {
@@ -42,7 +42,7 @@
                     display: flex;
                     justify-content: center;
                     width: 2px;
-                    border-radius: 3px;
+                    border-radius: var(--art-border-radius);
                     overflow: hidden;
                     background-color: rgba(255, 255, 255, 0.25);
 

packages/artplayer/types/cssVar.d.ts

@@ -5,6 +5,7 @@ export type CssVar = {
     '--art-text-shadow-color': string;
     '--art-transition-duration': string;
     '--art-padding': string;
+    '--art-border-radius': string;
     '--art-progress-height': string;
     '--art-progress-color': string;
     '--art-hover-color': string;