V5 (#509)

* update artplayer.d.ts

* update variables.less

* update artplayerPluginControl

* build:all

* update docs

* update docs

* update docs

* Update layers.md

* update index.js

* update docs

* update docs

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

@@ -1,64 +1,40 @@
 .artplayer-plugin-control {
-    .art-bottom {
+    .apa-control-current,
+    .apa-control-duration {
         display: flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: space-between;
-        position: absolute;
-        height: 68px;
+    }
+
+    .art-control-time,
+    .art-controls-center {
+        display: none;
+    }
+
+    .art-settings {
+        bottom: 85px;
+    }
+
+    .art-bottom {
+        height: 70px;
         width: 400px;
-        user-select: none;
+        margin-left: -200px;
+        inset: auto;
+        overflow: visible;
+        align-items: center;
         border-radius: 10px;
         left: 50%;
-        transform: translateX(-50%);
-        bottom: 10px !important;
-        font-size: 13px;
+        bottom: 10px;
         -webkit-backdrop-filter: saturate(180%) blur(20px);
         backdrop-filter: saturate(180%) blur(20px);
         background-color: rgba(0, 0, 0, 0.7);
         box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2);
         background-image: none;
-        pointer-events: auto;
-        padding: 13px 0 0;
 
         .art-progress {
-            width: 65%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 10px;
-
-            .art-control-thumbnails {
-                bottom: 25px;
-            }
-
-            .art-control-progress {
-                width: 100%;
-
-                .art-control-progress-inner,
-                .art-progress-loaded,
-                .art-progress-played {
-                    border-radius: 5px;
-                }
-            }
-
-            .art-progress-tip {
-                top: -40px !important;
-            }
+            width: 70%;
         }
 
         .art-controls {
             width: 100%;
-            flex: 1;
-
-            .art-control-time,
-            .art-controls-center {
-                display: none;
-            }
-        }
-
-        .art-selector-list {
-            background-color: rgba(0, 0, 0, 0.8) !important;
         }
 
         .apa-control-current,
@@ -66,7 +42,8 @@
             display: flex;
             justify-content: center;
             line-height: 1;
-            width: 17.5%;
+            width: 15%;
+            font-size: 12px;
             position: absolute;
             top: 10px;
         }
@@ -79,20 +56,6 @@
             right: 0;
         }
     }
-
-    .art-settings {
-        bottom: 85px;
-    }
-
-    .art-layer-auto-playback {
-        bottom: 90px;
-    }
-
-    &.art-control-show {
-        .art-subtitle {
-            bottom: 80px;
-        }
-    }
 }
 
 .apa-control-current,