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/src/style/artplayer.less

@@ -10,7 +10,6 @@
     direction: ltr;
     font-size: 14px;
     line-height: 1.3;
-    overflow: hidden;
     user-select: none;
     box-sizing: border-box;
     color: var(--art-font-color);

packages/artplayer/src/style/bottom.less

@@ -1,24 +1,24 @@
 .art-video-player {
     .art-bottom {
         .art-full(60);
-        top: auto;
         display: flex;
         flex-direction: column;
         justify-content: end;
         opacity: 0;
+        overflow: hidden;
         pointer-events: none;
         gap: var(--art-bottom-gap);
-        bottom: var(--art-bottom-offset);
-        height: var(--art-bottom-height);
         padding: 0 var(--art-padding);
+        transform: translateY(var(--art-bottom-offset));
         transition: all var(--art-transition-duration) ease;
+        background-size: 100% var(--art-bottom-height);
         .art-bottom-gradient();
     }
 
     &.art-control-show,
     &.art-hover {
         .art-bottom {
-            bottom: 0;
+            transform: translateY(0);
             opacity: 1;
         }
     }

packages/artplayer/src/style/fullscreenWeb.less

@@ -1,4 +1,3 @@
 .art-fullscreen-web {
     .art-full(var(--art-fullscreen-web-index), fixed);
-    overflow: visible;
 }

packages/artplayer/src/style/variables.less

@@ -14,7 +14,7 @@
     --art-state-size: 80px;
     --art-state-opacity: 0.8;
     --art-bottom-height: 100px;
-    --art-bottom-offset: -20px;
+    --art-bottom-offset: 20px;
     --art-bottom-gap: 5px;
     --art-highlight-width: 8px;
     --art-highlight-color: rgba(255, 255, 255, 0.5);