update style

packages/artplayer-plugin-danmuku/src/setting.js

@@ -9,23 +9,16 @@ export default function setting(art, danmuku) {
     const {
         template: { $controlsCenter, $player },
         constructor: {
-            utils: { removeClass, addClass, append, setStyle, tooltip, query, inverseClass },
+            utils: { removeClass, addClass, append, setStyle, tooltip, query, inverseClass, getIcon },
         },
     } = art;
 
-    function getIcon(svg, key) {
-        const icon = document.createElement('i');
-        append(icon, svg);
-        addClass(icon, 'art-icon');
-        addClass(icon, `art-icon-${key}`);
-        return icon;
-    }
-
     setStyle($controlsCenter, 'display', 'flex');
-    const $danmuOn = getIcon(danmuOn, 'danmu-on');
-    const $danmuOff = getIcon(danmuOff, 'danmu-off');
-    const $danmuConfig = getIcon(danmuConfig, 'danmu-config');
-    const $danmuStyle = getIcon(danmuStyle, 'danmu-style');
+
+    const $danmuOn = getIcon('danmu-on', danmuOn);
+    const $danmuOff = getIcon('danmu-off', danmuOff);
+    const $danmuConfig = getIcon('danmu-config', danmuConfig);
+    const $danmuStyle = getIcon('danmu-style', danmuStyle);
 
     function addEmitter() {
         const colors = [

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

@@ -1,44 +1,18 @@
 .art-danmuku-emitter {
     position: relative;
     display: flex;
-    height: 32px;
+    height: var(--art-control-icon-size, 32px);
     width: 100%;
     font-size: 12px;
     line-height: 1;
     border-radius: 3px;
     max-width: 100%;
-    color: #ffffff;
-    font-family: Roboto, Arial, Helvetica, sans-serif;
     background-color: rgb(255 255 255 / 30%);
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    touch-action: manipulation;
-    -ms-high-contrast-adjust: none;
 
-    *,
-    *::before,
-    *::after {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
-
-    .art-icon {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        line-height: 1.5;
-
-        svg {
-            fill: #fff;
-        }
-    }
-
-    @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;
-        }
+    .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;
     }
 
     .art-danmuku-left {
@@ -180,7 +154,6 @@
 
     &.art-danmuku-mount {
         max-width: 100% !important;
-        height: 34px;
 
         .art-danmuku-left {
             .art-danmuku-style {

packages/artplayer/src/style/bottom.less

@@ -9,17 +9,23 @@
         pointer-events: none;
         gap: var(--art-bottom-gap);
         padding: 0 var(--art-padding);
-        transform: translateY(var(--art-bottom-offset));
-        transition: all var(--art-transition-duration) ease;
+        transition: opacity var(--art-transition-duration) ease;
         background-size: 100% var(--art-bottom-height);
         .art-bottom-gradient();
+
+        .art-controls, .art-progress {
+            transform: translateY(var(--art-bottom-offset));
+            transition: transform var(--art-transition-duration) ease;
+        }
     }
 
     &.art-control-show,
     &.art-hover {
         .art-bottom {
-            transform: translateY(0);
             opacity: 1;
+            .art-controls, .art-progress {
+                transform: translateY(0);
+            }
         }
     }
 }

packages/artplayer/src/style/fullscreen.less

@@ -0,0 +1,4 @@
+.art-fullscreen {
+    --art-control-height: 60px;
+    --art-control-icon-scale: 1.3;
+}

packages/artplayer/src/style/fullscreenWeb.less

@@ -1,3 +1,5 @@
 .art-fullscreen-web {
+    --art-control-height: 60px;
+    --art-control-icon-scale: 1.3;
     .art-full(var(--art-fullscreen-web-index), fixed);
 }

packages/artplayer/src/style/index.less

@@ -20,6 +20,7 @@
 @import './info.less';
 @import './hideCursor.less';
 @import './aspectRatio.less';
+@import './fullscreen.less';
 @import './fullscreenWeb.less';
 @import './mini.less';
 @import './autoSize.less';

packages/artplayer/src/style/mobile.less

@@ -1,4 +1,4 @@
-.art-mobile {
+.art-video-player.art-mobile {
     --art-bottom-gap: 10px;
     --art-control-height: 38px;
     --art-control-icon-scale: 1;