diff --git a/docs/uncompiled/artplayer-plugin-danmuku/index.js b/docs/uncompiled/artplayer-plugin-danmuku/index.js
index 499617bd0..89615752b 100644
--- a/docs/uncompiled/artplayer-plugin-danmuku/index.js
+++ b/docs/uncompiled/artplayer-plugin-danmuku/index.js
@@ -1154,7 +1154,7 @@ if (typeof document !== 'undefined') {
 }
 
 },{"bundle-text:./style.less":"g3Xz5","bundle-text:./img/danmu-on.svg":"kES2T","bundle-text:./img/danmu-off.svg":"2XSu0","bundle-text:./img/danmu-config.svg":"2XKVb","bundle-text:./img/danmu-style.svg":"lYyZn","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"g3Xz5":[function(require,module,exports) {
-module.exports = ".art-danmuku-emitter {\n  height: 32px;\n  width: 100%;\n  max-width: 100%;\n  color: #fff;\n  -webkit-tap-highlight-color: #0000;\n  touch-action: manipulation;\n  -ms-high-contrast-adjust: none;\n  background-color: #ffffff4d;\n  border-radius: 3px;\n  font-family: Roboto, Arial, Helvetica, sans-serif;\n  font-size: 12px;\n  line-height: 1;\n  display: flex;\n  position: relative;\n}\n\n.art-danmuku-emitter *, .art-danmuku-emitter :before, .art-danmuku-emitter :after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.art-danmuku-emitter .art-icon {\n  justify-content: center;\n  align-items: center;\n  line-height: 1.5;\n  display: inline-flex;\n}\n\n.art-danmuku-emitter .art-icon svg {\n  fill: #fff;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n  .art-danmuku-emitter .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-danmuku-emitter .art-danmuku-style {\n  width: 32px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel {\n  z-index: 999;\n  width: 200px;\n  padding-bottom: 10px;\n  display: none;\n  position: absolute;\n  bottom: 30px;\n  left: -85px;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner {\n  background-color: #000000e6;\n  border-radius: 3px;\n  flex-direction: column;\n  padding: 10px 10px 0;\n  display: flex;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-title {\n  margin-bottom: 10px;\n  font-size: 13px;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-modes {\n  justify-content: space-between;\n  margin-bottom: 15px;\n  display: flex;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-modes .art-danmuku-style-panel-mode {\n  width: 47%;\n  cursor: pointer;\n  color: #fff;\n  border: 1px solid #fff;\n  justify-content: center;\n  padding: 5px 0;\n  display: flex;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-modes .art-danmuku-style-panel-mode.art-current {\n  background-color: #00a1d6;\n  border: 1px solid #00a1d6;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-colors {\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: 5px;\n  margin-bottom: 10px;\n  display: flex;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-colors .art-danmuku-style-panel-color {\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  border: 1px solid #fff;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-colors .art-danmuku-style-panel-color.art-current {\n  position: relative;\n  box-shadow: 0 0 2px #fff;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-colors .art-danmuku-style-panel-color.art-current:before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  border: 2px solid #000;\n  position: absolute;\n  inset: 0;\n}\n\n.art-danmuku-emitter .art-danmuku-style:hover .art-danmuku-style-panel {\n  display: flex;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-icon {\n  opacity: .75;\n  cursor: pointer;\n}\n\n.art-danmuku-emitter .art-danmuku-style .art-icon:hover {\n  opacity: 1;\n}\n\n.art-danmuku-emitter .art-danmuku-input {\n  width: 100%;\n  color: #fff;\n  background-color: #0000;\n  border: none;\n  outline: none;\n  flex: 1;\n  padding: 0 10px 0 0;\n  display: flex;\n}\n\n.art-danmuku-emitter .art-danmuku-input::placeholder, .art-danmuku-emitter .art-danmuku-input::-webkit-input-placeholder {\n  color: #ffffff80;\n}\n\n.art-danmuku-emitter .art-danmuku-send {\n  width: 50px;\n  cursor: pointer;\n  background-color: #00a1d6;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.art-danmuku-emitter .art-danmuku-send:hover {\n  background-color: #00b5e5;\n}\n\n.art-danmuku-emitter .art-danmuku-send.art-disabled {\n  opacity: .5;\n  pointer-events: none;\n}\n\n.art-danmuku-emitter.art-danmuku-mobile .art-danmuku-style .art-danmuku-style-panel {\n  left: 0;\n}\n\n";
+module.exports = ".art-video-player .art-danmuku-emitter {\n  height: 32px;\n  width: 100%;\n  max-width: 100%;\n  color: #fff;\n  -webkit-tap-highlight-color: #0000;\n  touch-action: manipulation;\n  -ms-high-contrast-adjust: none;\n  background-color: #ffffff4d;\n  border-radius: 3px;\n  font-family: Roboto, Arial, Helvetica, sans-serif;\n  font-size: 12px;\n  line-height: 1;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player .art-danmuku-emitter *, .art-video-player .art-danmuku-emitter :before, .art-video-player .art-danmuku-emitter :after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.art-video-player .art-danmuku-emitter .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-danmuku-emitter .art-icon svg {\n  fill: #fff;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n  .art-video-player .art-danmuku-emitter .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-danmuku-emitter .art-danmuku-style {\n  width: 32px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel {\n  z-index: 999;\n  width: 200px;\n  padding-bottom: 10px;\n  display: none;\n  position: absolute;\n  bottom: 30px;\n  left: -85px;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner {\n  background-color: #000000e6;\n  border-radius: 3px;\n  flex-direction: column;\n  padding: 10px 10px 0;\n  display: flex;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-title {\n  margin-bottom: 10px;\n  font-size: 13px;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-modes {\n  justify-content: space-between;\n  margin-bottom: 15px;\n  display: flex;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-modes .art-danmuku-style-panel-mode {\n  width: 47%;\n  cursor: pointer;\n  color: #fff;\n  border: 1px solid #fff;\n  justify-content: center;\n  padding: 5px 0;\n  display: flex;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-modes .art-danmuku-style-panel-mode.art-current {\n  background-color: #00a1d6;\n  border: 1px solid #00a1d6;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-colors {\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: 5px;\n  margin-bottom: 10px;\n  display: flex;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-colors .art-danmuku-style-panel-color {\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  border: 1px solid #fff;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-colors .art-danmuku-style-panel-color.art-current {\n  position: relative;\n  box-shadow: 0 0 2px #fff;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-colors .art-danmuku-style-panel-color.art-current:before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  border: 2px solid #000;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style:hover .art-danmuku-style-panel {\n  display: flex;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-icon {\n  opacity: .75;\n  cursor: pointer;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-style .art-icon:hover {\n  opacity: 1;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-input {\n  width: 100%;\n  color: #fff;\n  background-color: #0000;\n  border: none;\n  outline: none;\n  flex: 1;\n  padding: 0 10px 0 0;\n  display: flex;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-input::placeholder, .art-video-player .art-danmuku-emitter .art-danmuku-input::-webkit-input-placeholder {\n  color: #ffffff80;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-send {\n  width: 50px;\n  cursor: pointer;\n  background-color: #00a1d6;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-send:hover {\n  background-color: #00b5e5;\n}\n\n.art-video-player .art-danmuku-emitter .art-danmuku-send.art-disabled {\n  opacity: .5;\n  pointer-events: none;\n}\n\n.art-video-player.art-mobile .art-danmuku-style .art-danmuku-style-panel {\n  left: 0;\n}\n\n";
 
 },{}],"kES2T":[function(require,module,exports) {
 module.exports = "<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n<svg viewBox=\"0 0 1152 1024\" width=\"22\" height=\"22\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill=\"#fff\" d=\"M311.466667 661.333333c0 4.266667-4.266667 8.533333-8.533334 12.8 0 4.266667 0 4.266667-4.266666 8.533334h-12.8c-4.266667 0-8.533333-4.266667-17.066667-8.533334-8.533333-8.533333-17.066667-8.533333-25.6-8.533333-8.533333 0-12.8 4.266667-17.066667 12.8-4.266667 12.8-8.533333 21.333333-4.266666 29.866667 4.266667 8.533333 12.8 17.066667 25.6 21.333333 17.066667 8.533333 34.133333 17.066667 46.933333 17.066667 12.8 0 21.333333-4.266667 34.133333-8.533334 8.533333-4.266667 17.066667-17.066667 25.6-29.866666 8.533333-12.8 12.8-34.133333 17.066667-55.466667 4.266667-21.333333 4.266667-51.2 4.266667-85.333333 0-12.8 0-21.333333-4.266667-29.866667 0-8.533333-4.266667-12.8-8.533333-17.066667-4.266667-4.266667-8.533333-8.533333-12.8-8.533333-4.266667 0-12.8-4.266667-21.333334-4.266667H273.066667s-4.266667-4.266667 0-8.533333l4.266666-38.4c0-4.266667 0-8.533333 4.266667-8.533333h46.933333c17.066667 0 25.6-4.266667 34.133334-12.8 8.533333-8.533333 12.8-21.333333 12.8-42.666667V324.266667c0-17.066667-4.266667-34.133333-8.533334-42.666667-12.8-12.8-25.6-17.066667-42.666666-17.066667H243.2c-8.533333 0-17.066667 0-21.333333 4.266667-4.266667 8.533333-4.266667 12.8-4.266667 25.6 0 8.533333 0 17.066667 4.266667 21.333333 4.266667 4.266667 12.8 8.533333 21.333333 8.533334h64c4.266667 0 8.533333 0 8.533333 4.266666v34.133334c0 8.533333 0 12.8-4.266666 12.8 0 0-4.266667 4.266667-8.533334 4.266666h-34.133333c-8.533333 0-12.8 0-21.333333 4.266667-4.266667 0-8.533333 4.266667-8.533334 4.266667-4.266667 4.266667-8.533333 12.8-8.533333 17.066666 0 8.533333-4.266667 17.066667-4.266667 25.6l-8.533333 72.533334v29.866666c0 8.533333 4.266667 12.8 8.533333 17.066667 4.266667 4.266667 8.533333 4.266667 17.066667 8.533333h68.266667c4.266667 0 8.533333 0 8.533333 4.266667s4.266667 8.533333 4.266667 17.066667c0 21.333333 0 42.666667-4.266667 55.466666 0 8.533333-4.266667 21.333333-8.533333 25.6zM896 486.4c-93.866667 0-174.933333 51.2-217.6 123.733333h-106.666667v-34.133333H640c21.333333 0 34.133333-4.266667 42.666667-12.8 8.533333-8.533333 12.8-21.333333 12.8-42.666667V358.4c0-21.333333-4.266667-34.133333-12.8-42.666667-8.533333-8.533333-21.333333-12.8-42.666667-12.8 0-4.266667 4.266667-4.266667 4.266667-8.533333-4.266667 0-4.266667-4.266667-4.266667-4.266667 4.266667-12.8 8.533333-21.333333 4.266667-25.6 0-8.533333-4.266667-12.8-12.8-21.333333-8.533333-4.266667-17.066667-4.266667-21.333334-4.266667-8.533333 4.266667-12.8 8.533333-21.333333 21.333334-4.266667 8.533333-8.533333 12.8-12.8 21.333333-4.266667 8.533333-8.533333 12.8-12.8 21.333333H512c-4.266667-8.533333-8.533333-17.066667-8.533333-21.333333-4.266667-8.533333-8.533333-12.8-12.8-21.333333-4.266667-12.8-12.8-17.066667-21.333334-17.066667s-17.066667 0-25.6 8.533333c-8.533333 8.533333-12.8 12.8-12.8 21.333334s0 17.066667 8.533334 25.6l4.266666 4.266666 4.266667 4.266667c-17.066667 0-29.866667 4.266667-38.4 12.8-8.533333 4.266667-12.8 21.333333-12.8 38.4v157.866667c0 21.333333 4.266667 34.133333 12.8 42.666666 8.533333 8.533333 21.333333 12.8 42.666667 12.8H512v34.133334H413.866667c-12.8 0-21.333333 0-25.6 4.266666-4.266667 4.266667-8.533333 8.533333-8.533334 21.333334v17.066666c0 4.266667 4.266667 8.533333 4.266667 8.533334 4.266667 0 4.266667 4.266667 8.533333 4.266666H512v55.466667c0 12.8 4.266667 21.333333 8.533333 25.6 4.266667 4.266667 12.8 8.533333 21.333334 8.533333 12.8 0 21.333333-4.266667 25.6-8.533333 4.266667-4.266667 4.266667-12.8 4.266666-25.6v-55.466667h81.066667c-8.533333 25.6-12.8 51.2-12.8 76.8 0 140.8 115.2 256 256 256s256-115.2 256-256-115.2-251.733333-256-251.733333z m-328.533333-128h55.466666c4.266667 0 4.266667 0 4.266667 4.266667v46.933333h-59.733333V358.4z m0 102.4h59.733333V512h-55.466667v-51.2zM512 516.266667h-55.466667V465.066667H512v51.2z m0-102.4h-59.733333V366.933333v-4.266666H512v51.2z m384 499.2c-93.866667 0-170.666667-76.8-170.666667-170.666667s76.8-170.666667 170.666667-170.666667 170.666667 76.8 170.666667 170.666667-76.8 170.666667-170.666667 170.666667z\"></path>\n<path fill=\"#fff\" d=\"M951.466667 669.866667l-72.533334 72.533333-29.866666-25.6c-17.066667-17.066667-42.666667-12.8-59.733334 4.266667-17.066667 17.066667-12.8 42.666667 4.266667 59.733333l59.733333 51.2c8.533333 8.533333 17.066667 8.533333 29.866667 8.533333 12.8 0 21.333333-4.266667 29.866667-12.8l102.4-102.4c17.066667-17.066667 17.066667-42.666667 0-59.733333-21.333333-12.8-46.933333-12.8-64 4.266667zM580.266667 878.933333H213.333333c-72.533333 0-128-55.466667-128-119.466666V230.4c0-64 55.466667-119.466667 128-119.466667h512c72.533333 0 128 55.466667 128 119.466667v140.8c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V230.4c0-115.2-93.866667-204.8-213.333334-204.8H213.333333C93.866667 25.6 0 119.466667 0 230.4v529.066667c0 115.2 93.866667 204.8 213.333333 204.8h366.933334c25.6 0 42.666667-17.066667 42.666666-42.666667s-21.333333-42.666667-42.666666-42.666667z\"></path>\n</svg>";
diff --git a/packages/artplayer-plugin-danmuku/src/style.less b/packages/artplayer-plugin-danmuku/src/style.less
index 6baca49a5..32d74fc1d 100644
--- a/packages/artplayer-plugin-danmuku/src/style.less
+++ b/packages/artplayer-plugin-danmuku/src/style.less
@@ -1,179 +1,182 @@
-.art-danmuku-emitter {
-    position: relative;
-    display: flex;
-    height: 32px;
-    width: 100%;
-    font-size: 12px;
-    line-height: 1;
-    border-radius: 3px;
-    max-width: 100%;
-    color: #ffffff;
-    background-color: rgb(255 255 255 / 30%);
-    font-family: Roboto, Arial, Helvetica, sans-serif;
-    -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-danmuku-style {
+.art-video-player {
+    .art-danmuku-emitter {
         position: relative;
         display: flex;
-        width: 32px;
-        align-items: center;
-        justify-content: center;
-
-        .art-danmuku-style-panel {
-            display: none;
-            position: absolute;
-            z-index: 999;
-            left: -85px;
-            bottom: 30px;
-            width: 200px;
-            padding-bottom: 10px;
-
-            .art-danmuku-style-panel-inner {
-                display: flex;
-                flex-direction: column;
-                padding: 10px 10px 0;
-                border-radius: 3px;
-                background-color: rgba(0, 0, 0, 0.9);
-
-                .art-danmuku-style-panel-title {
-                    font-size: 13px;
-                    margin-bottom: 10px;
-                }
+        height: 32px;
+        width: 100%;
+        font-size: 12px;
+        line-height: 1;
+        border-radius: 3px;
+        max-width: 100%;
+        color: #ffffff;
+        background-color: rgb(255 255 255 / 30%);
+        font-family: Roboto, Arial, Helvetica, sans-serif;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        touch-action: manipulation;
+        -ms-high-contrast-adjust: none;
     
-                .art-danmuku-style-panel-modes {
+        *, *::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-danmuku-style {
+            position: relative;
+            display: flex;
+            width: 32px;
+            align-items: center;
+            justify-content: center;
+    
+            .art-danmuku-style-panel {
+                display: none;
+                position: absolute;
+                z-index: 999;
+                left: -85px;
+                bottom: 30px;
+                width: 200px;
+                padding-bottom: 10px;
+    
+                .art-danmuku-style-panel-inner {
                     display: flex;
-                    justify-content: space-between;
-                    margin-bottom: 15px;
+                    flex-direction: column;
+                    padding: 10px 10px 0;
+                    border-radius: 3px;
+                    background-color: rgba(0, 0, 0, 0.9);
     
-                    .art-danmuku-style-panel-mode {
-                        display: flex;
-                        justify-content: center;
-                        width: 47%;
-                        padding: 5px 0;
-                        cursor: pointer;
-                        color: #fff;
-                        border: 1px solid #fff;
-    
-                        &.art-current {
-                            background-color: #00a1d6;
-                            border: 1px solid #00a1d6;
-                        }
+                    .art-danmuku-style-panel-title {
+                        font-size: 13px;
+                        margin-bottom: 10px;
                     }
-                }
-    
-                .art-danmuku-style-panel-colors {
-                    display: flex;
-                    gap: 5px;
-                    flex-wrap: wrap;
-                    margin-bottom: 10px;
-                    justify-content: space-between;
-    
-                    .art-danmuku-style-panel-color {
-                        cursor: pointer;
-                        width: 20px;
-                        height: 20px;
-                        border: 1px solid #fff;
-    
-                        &.art-current{
-                            position: relative;
-                            box-shadow: 0 0 2px #fff;
-                            &::before {
-                                content: '';
-                                position: absolute;
-                                width: 100%;
-                                height: 100%;
-                                left: 0;
-                                top: 0;
-                                right: 0;
-                                bottom: 0;
-                                border: 2px solid #000;
+        
+                    .art-danmuku-style-panel-modes {
+                        display: flex;
+                        justify-content: space-between;
+                        margin-bottom: 15px;
+        
+                        .art-danmuku-style-panel-mode {
+                            display: flex;
+                            justify-content: center;
+                            width: 47%;
+                            padding: 5px 0;
+                            cursor: pointer;
+                            color: #fff;
+                            border: 1px solid #fff;
+        
+                            &.art-current {
+                                background-color: #00a1d6;
+                                border: 1px solid #00a1d6;
                             }
                         }
                     }
+        
+                    .art-danmuku-style-panel-colors {
+                        display: flex;
+                        gap: 5px;
+                        flex-wrap: wrap;
+                        margin-bottom: 10px;
+                        justify-content: space-between;
+        
+                        .art-danmuku-style-panel-color {
+                            cursor: pointer;
+                            width: 20px;
+                            height: 20px;
+                            border: 1px solid #fff;
+        
+                            &.art-current{
+                                position: relative;
+                                box-shadow: 0 0 2px #fff;
+                                &::before {
+                                    content: '';
+                                    position: absolute;
+                                    width: 100%;
+                                    height: 100%;
+                                    left: 0;
+                                    top: 0;
+                                    right: 0;
+                                    bottom: 0;
+                                    border: 2px solid #000;
+                                }
+                            }
+                        }
+        
+                    }
+                }
+            }
     
+            &:hover .art-danmuku-style-panel{
+                display: flex;
+            }
+    
+            .art-icon {
+                opacity: 0.75;
+                cursor: pointer;
+    
+                &:hover {
+                    opacity: 1;
                 }
             }
         }
-
-        &:hover .art-danmuku-style-panel{
+    
+        .art-danmuku-input {
+            flex: 1;
             display: flex;
+            padding: 0 10px 0 0;
+            border: none;
+            outline: none;
+            width: 100%;
+            color: #ffffff;
+            background-color: transparent;
+    
+            &::placeholder, &::-webkit-input-placeholder {
+                color: rgb(255 255 255 / 50%);
+            }
         }
-
-        .art-icon {
-            opacity: 0.75;
+    
+        .art-danmuku-send {
+            display: flex;
+            width: 50px;
+            align-items: center;
+            justify-content: center;
             cursor: pointer;
-
+            background-color: #00a1d6;
+            border-top-right-radius: 3px;
+            border-bottom-right-radius: 3px;
+    
             &:hover {
-                opacity: 1;
+                background-color: #00b5e5;
+            }
+    
+            &.art-disabled {
+                opacity: 0.5;
+                pointer-events: none;
             }
         }
     }
 
-    .art-danmuku-input {
-        flex: 1;
-        display: flex;
-        padding: 0 10px 0 0;
-        border: none;
-        outline: none;
-        width: 100%;
-        color: #ffffff;
-        background-color: transparent;
-
-        &::placeholder, &::-webkit-input-placeholder {
-            color: rgb(255 255 255 / 50%);
-        }
-    }
-
-    .art-danmuku-send {
-        display: flex;
-        width: 50px;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        background-color: #00a1d6;
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-
-        &:hover {
-            background-color: #00b5e5;
-        }
-
-        &.art-disabled {
-            opacity: 0.5;
-            pointer-events: none;
-        }
-    }
-
-    &.art-danmuku-mobile {
+    &.art-mobile {
         .art-danmuku-style .art-danmuku-style-panel {
             left: 0;
         }
     }
-}
\ No newline at end of file
+}
+