V5 (#500)

* update dep

* Update package.json

* update contextmenu

* update d.ts

* update onVttLoad

* build artplayer

* update style

* --art-theme

* update style

* update style

* update user-select

* add getIcon

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* add progress-hover

* update mini

* update style

* update style

* update style

* update style

* update style

* update volume

* update style

* add art-backdrop

* update style

* update style

* update style

* update currentLevel

* update artplayerPluginControl

* update artplayerPluginDanmuku

* Update package.json

packages/artplayer/src/style/artplayer.less

@@ -1,21 +1,22 @@
 .art-video-player {
-    display: flex;
     position: relative;
     margin: 0 auto;
-    z-index: 20;
     width: 100%;
     height: 100%;
     outline: 0;
     zoom: 1;
-    font-family: Roboto, Arial, Helvetica, sans-serif;
-    color: #eee;
-    background-color: #000;
+    color: #fff;
     text-align: left;
     direction: ltr;
     font-size: 14px;
     line-height: 1.3;
+    overflow: hidden;
     user-select: none;
+    background-color: #000;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -ms-touch-action: manipulation;
     touch-action: manipulation;
     -ms-high-contrast-adjust: none;
 
@@ -28,27 +29,17 @@
     }
 
     ::-webkit-scrollbar {
-        width: 5px;
-        height: 5px;
+        width: var(--art-scrollbar-size);
+        height: var(--art-scrollbar-size);
+        border-radius: 3px;
     }
 
     ::-webkit-scrollbar-thumb {
-        background-color: #666;
+        background-color: var(--art-scrollbar-background);
     }
 
     ::-webkit-scrollbar-thumb:hover {
-        background-color: #ccc;
-    }
-
-    .art-icon {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        line-height: 1.5;
-
-        svg {
-            fill: #fff;
-        }
+        background-color: var(--art-scrollbar-background-hover);
     }
 
     img {
@@ -56,11 +47,12 @@
         vertical-align: top;
     }
 
-    @supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
-        .art-backdrop-filter {
-            -webkit-backdrop-filter: saturate(180%) blur(20px);
-            backdrop-filter: saturate(180%) blur(20px);
-            background-color: rgba(0, 0, 0, 0.7) !important;
-        }
+    svg {
+        fill: #fff;
+    }
+
+    a {
+        color: #fff;
+        text-decoration: none;
     }
 }