update style

docs/uncompiled/artplayer-plugin-control/index.js

@@ -186,7 +186,7 @@ function artplayerPluginControl() {
 exports.default = artplayerPluginControl;
 artplayerPluginControl.env = "development";
 artplayerPluginControl.version = "1.0.0";
-artplayerPluginControl.build = "2022-12-31 22:28:14";
+artplayerPluginControl.build = "2022-12-31 23:35:00";
 if (typeof document !== "undefined") {
     if (!document.getElementById("artplayer-plugin-control")) {
         const $style = document.createElement("style");
@@ -198,7 +198,7 @@ if (typeof document !== "undefined") {
 if (typeof window !== "undefined") window["artplayerPluginControl"] = artplayerPluginControl;
 
 },{"bundle-text:./style.less":"cLvfB","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"cLvfB":[function(require,module,exports) {
-module.exports = ".artplayer-plugin-control .art-bottom {\n  height: 68px;\n  min-width: 400px;\n  max-width: 600px;\n  user-select: none;\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\n  backdrop-filter: saturate(180%) blur(20px);\n  pointer-events: auto;\n  background-color: #000000b3;\n  background-image: none;\n  border-radius: 10px;\n  flex-direction: column;\n  align-items: center;\n  padding: 0;\n  font-size: 13px;\n  transition: opacity .3s;\n  display: flex;\n  position: absolute;\n  bottom: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n  box-shadow: 0 10px 15px -3px #0003, 0 4px 6px -4px #0003;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress {\n  width: 65%;\n  justify-content: space-between;\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-thumbnails {\n  bottom: 35px;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-progress {\n  width: 100%;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-progress-tip {\n  top: -40px !important;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls {\n  width: 100%;\n  height: auto;\n  flex: 1;\n  padding: 0 5px;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls .art-control-time {\n  display: none;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls .art-volume-panel {\n  width: 60px !important;\n}\n\n.artplayer-plugin-control .art-bottom .art-selector-list {\n  background-color: #000c !important;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-current, .artplayer-plugin-control .art-bottom .apa-control-duration {\n  width: 17.5%;\n  justify-content: center;\n  line-height: 1;\n  display: flex;\n  position: absolute;\n  top: 10px;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-current {\n  left: 0;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-duration {\n  right: 0;\n}\n\n.artplayer-plugin-control .art-settings {\n  bottom: 85px;\n}\n\n.artplayer-plugin-control.art-control-show .art-subtitle {\n  bottom: 80px;\n}\n\n.apa-control-current, .apa-control-duration {\n  display: none;\n}\n\n";
+module.exports = ".artplayer-plugin-control .art-bottom {\n  height: 68px;\n  min-width: 400px;\n  max-width: 600px;\n  user-select: none;\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\n  backdrop-filter: saturate(180%) blur(20px);\n  pointer-events: auto;\n  background-color: #000000b3;\n  background-image: none;\n  border-radius: 10px;\n  flex-direction: column;\n  align-items: center;\n  padding: 0;\n  font-size: 13px;\n  transition: opacity .3s;\n  display: flex;\n  position: absolute;\n  bottom: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n  box-shadow: 0 10px 15px -3px #0003, 0 4px 6px -4px #0003;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress {\n  width: 65%;\n  justify-content: space-between;\n  align-items: center;\n  gap: 10px;\n  display: flex;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-thumbnails {\n  bottom: 35px;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-progress {\n  width: 100%;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-control-progress-inner, .artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-loaded, .artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-played {\n  border-radius: 5px;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-progress-tip {\n  top: -40px !important;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls {\n  width: 100%;\n  height: auto;\n  flex: 1;\n  padding: 0 5px;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls .art-control-time {\n  display: none;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls .art-volume-panel {\n  width: 60px !important;\n}\n\n.artplayer-plugin-control .art-bottom .art-selector-list {\n  background-color: #000c !important;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-current, .artplayer-plugin-control .art-bottom .apa-control-duration {\n  width: 17.5%;\n  justify-content: center;\n  line-height: 1;\n  display: flex;\n  position: absolute;\n  top: 10px;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-current {\n  left: 0;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-duration {\n  right: 0;\n}\n\n.artplayer-plugin-control .art-settings {\n  bottom: 85px;\n}\n\n.artplayer-plugin-control.art-control-show .art-subtitle {\n  bottom: 80px;\n}\n\n.apa-control-current, .apa-control-duration {\n  display: none;\n}\n\n";
 
 },{}],"5dUr6":[function(require,module,exports) {
 exports.interopDefault = function(a) {

docs/uncompiled/artplayer/index.js

@@ -248,7 +248,7 @@ class Artplayer extends (0, _emitterDefault.default) {
         return "development";
     }
     static get build() {
-        return "2022-12-31 22:57:03";
+        return "2022-12-31 23:37:20";
     }
     static get config() {
         return 0, _configDefault.default;
@@ -417,7 +417,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":"doPnH","option-validator":"1vNkK","./utils/emitter":"8uSwy","./utils":"euhMG","./scheme":"jVxq1","./config":"1hSww","./whitelist":"eCrHi","./template":"eG0JW","./i18n":"6Q0In","./player":"kmRM5","./control":"nK2ZQ","./contextmenu":"iygWX","./info":"6tuCt","./subtitle":"1kFyE","./events":"akAUN","./hotkey":"f1oWx","./layer":"bKuSu","./loading":"4AfId","./notice":"aKncc","./mask":"1R5LH","./icons":"bPpva","./setting":"i2oRN","./storage":"9ruid","./plugins":"7Fd4c","./mobile":"hMVZh","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"doPnH":[function(require,module,exports) {
-module.exports = ".art-video-player {\n  z-index: 20;\n  width: 100%;\n  height: 100%;\n  zoom: 1;\n  color: #eee;\n  text-align: left;\n  direction: ltr;\n  user-select: none;\n  -webkit-tap-highlight-color: #0000;\n  touch-action: manipulation;\n  -ms-high-contrast-adjust: none;\n  background-color: #000;\n  outline: 0;\n  margin: 0 auto;\n  font-family: Roboto, Arial, Helvetica, sans-serif;\n  font-size: 14px;\n  line-height: 1.3;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n  background-color: #666;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n  background-color: #ccc;\n}\n\n.art-video-player .art-icon {\n  justify-content: center;\n  align-items: center;\n  line-height: 1.5;\n  display: inline-flex;\n}\n\n.art-video-player .art-icon svg {\n  fill: #fff;\n}\n\n.art-video-player img {\n  max-width: 100%;\n  vertical-align: top;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n  .art-video-player .art-backdrop-filter {\n    -webkit-backdrop-filter: saturate(180%) blur(20px);\n    backdrop-filter: saturate(180%) blur(20px);\n    background-color: #000000b3 !important;\n  }\n}\n\n.art-video-player .art-video {\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  background-color: #000;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-poster {\n  z-index: 11;\n  width: 100%;\n  height: 100%;\n  user-select: none;\n  pointer-events: none;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-subtitle {\n  z-index: 20;\n  width: 100%;\n  text-align: center;\n  color: #fff;\n  pointer-events: none;\n  text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;\n  padding: 0 20px;\n  font-size: 20px;\n  transition: bottom .2s;\n  display: none;\n  position: absolute;\n  bottom: 10px;\n}\n\n.art-video-player .art-subtitle p {\n  word-break: break-all;\n  height: fit-content;\n  margin: 5px 0 0;\n  line-height: 1.2;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n  display: block;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n  bottom: 50px;\n}\n\n.art-video-player .art-danmuku {\n  z-index: 30;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-layers {\n  z-index: 40;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  display: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-layers .art-layer {\n  pointer-events: auto;\n}\n\n.art-video-player.art-layer-show .art-layers {\n  display: block;\n}\n\n.art-video-player .art-mask {\n  z-index: 50;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  justify-content: center;\n  align-items: center;\n  display: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-mask .art-state {\n  width: 60px;\n  height: 60px;\n  opacity: .85;\n  cursor: pointer;\n  pointer-events: auto;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  bottom: 65px;\n  right: 30px;\n}\n\n.art-video-player.art-mask-show .art-mask {\n  display: flex;\n}\n\n.art-video-player.art-mobile .art-state {\n  position: static;\n}\n\n.art-video-player .art-loading {\n  z-index: 70;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  justify-content: center;\n  align-items: center;\n  display: none;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player.art-loading-show .art-loading {\n  display: flex;\n}\n\n.art-video-player .art-bottom {\n  z-index: 60;\n  height: 100px;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  background-image: linear-gradient(to top, #000, #0006, #0000);\n  background-position: bottom;\n  background-repeat: repeat-x;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 50px 10px 0;\n  transition: all .2s ease-in-out;\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.art-video-player .art-bottom .art-progress {\n  z-index: 0;\n  pointer-events: auto;\n  flex: 1;\n  position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress {\n  height: 4px;\n  cursor: pointer;\n  flex-direction: row;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n  height: 100%;\n  width: 100%;\n  background: #fff3;\n  border-radius: 5px;\n  align-items: center;\n  transition: all .2s;\Line truncated
+module.exports = ".art-video-player {\n  z-index: 20;\n  width: 100%;\n  height: 100%;\n  zoom: 1;\n  color: #eee;\n  text-align: left;\n  direction: ltr;\n  user-select: none;\n  -webkit-tap-highlight-color: #0000;\n  touch-action: manipulation;\n  -ms-high-contrast-adjust: none;\n  background-color: #000;\n  outline: 0;\n  margin: 0 auto;\n  font-family: Roboto, Arial, Helvetica, sans-serif;\n  font-size: 14px;\n  line-height: 1.3;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n  background-color: #666;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n  background-color: #ccc;\n}\n\n.art-video-player .art-icon {\n  justify-content: center;\n  align-items: center;\n  line-height: 1.5;\n  display: inline-flex;\n}\n\n.art-video-player .art-icon svg {\n  fill: #fff;\n}\n\n.art-video-player img {\n  max-width: 100%;\n  vertical-align: top;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n  .art-video-player .art-backdrop-filter {\n    -webkit-backdrop-filter: saturate(180%) blur(20px);\n    backdrop-filter: saturate(180%) blur(20px);\n    background-color: #000000b3 !important;\n  }\n}\n\n.art-video-player .art-video {\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  background-color: #000;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-poster {\n  z-index: 11;\n  width: 100%;\n  height: 100%;\n  user-select: none;\n  pointer-events: none;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-subtitle {\n  z-index: 20;\n  width: 100%;\n  text-align: center;\n  color: #fff;\n  pointer-events: none;\n  text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;\n  padding: 0 20px;\n  font-size: 20px;\n  transition: bottom .2s;\n  display: none;\n  position: absolute;\n  bottom: 10px;\n}\n\n.art-video-player .art-subtitle p {\n  word-break: break-all;\n  height: fit-content;\n  margin: 5px 0 0;\n  line-height: 1.2;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n  display: block;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n  bottom: 50px;\n}\n\n.art-video-player .art-danmuku {\n  z-index: 30;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-layers {\n  z-index: 40;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  display: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-layers .art-layer {\n  pointer-events: auto;\n}\n\n.art-video-player.art-layer-show .art-layers {\n  display: block;\n}\n\n.art-video-player .art-mask {\n  z-index: 50;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  justify-content: center;\n  align-items: center;\n  display: none;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.art-video-player .art-mask .art-state {\n  width: 60px;\n  height: 60px;\n  opacity: .85;\n  cursor: pointer;\n  pointer-events: auto;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  bottom: 65px;\n  right: 30px;\n}\n\n.art-video-player.art-mask-show .art-mask {\n  display: flex;\n}\n\n.art-video-player.art-mobile .art-state {\n  position: static;\n}\n\n.art-video-player .art-loading {\n  z-index: 70;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  justify-content: center;\n  align-items: center;\n  display: none;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player.art-loading-show .art-loading {\n  display: flex;\n}\n\n.art-video-player .art-bottom {\n  z-index: 60;\n  height: 100px;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  background-image: linear-gradient(to top, #000, #0006, #0000);\n  background-position: bottom;\n  background-repeat: repeat-x;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 50px 10px 0;\n  transition: all .2s ease-in-out;\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.art-video-player .art-bottom .art-progress {\n  z-index: 0;\n  pointer-events: auto;\n  flex: 1;\n  position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress {\n  height: 4px;\n  cursor: pointer;\n  flex-direction: row;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n  height: 100%;\n  width: 100%;\n  background: #fff3;\n  align-items: center;\n  transition: all .2s;\n  display: flex;\n  poLine truncated
 
 },{}],"1vNkK":[function(require,module,exports) {
 !function(r, t) {

packages/artplayer-plugin-control/src/style.less

@@ -35,6 +35,10 @@
 
             .art-control-progress {
                 width: 100%;
+
+                .art-control-progress-inner, .art-progress-loaded, .art-progress-played {
+                    border-radius: 5px;
+                }
             }
 
             .art-progress-tip {

packages/artplayer/src/style/bottom.less

@@ -38,7 +38,6 @@
                     position: relative;
                     height: 100%;
                     width: 100%;
-                    border-radius: 5px;
                     transition: all 0.2s ease;
                     background: rgba(255, 255, 255, 0.2);
 
@@ -51,7 +50,6 @@
                         bottom: 0;
                         height: 100%;
                         width: 0;
-                        border-radius: 3px;
                         background: rgba(255, 255, 255, 0.4);
                     }
 
@@ -64,7 +62,6 @@
                         bottom: 0;
                         height: 100%;
                         width: 0;
-                        border-radius: 3px;
                     }
 
                     .art-progress-highlight {
@@ -84,7 +81,7 @@
                             top: 0;
                             width: 7px;
                             height: 100%;
-                            background: rgba(255, 255, 255, 0.75);
+                            background: rgba(255, 255, 255, 0.50);
                             pointer-events: auto;
                         }
                     }