From 6d1f8e1c7f6c97ea944bbcff537d4aeda7acde7c Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Thu, 30 May 2024 08:11:13 +0800 Subject: [PATCH] chore: Update danmuku plugin configuration handling and improve performance --- docs/uncompiled/artplayer-plugin-danmuku/index.js | 2 +- packages/artplayer-plugin-danmuku/src/style.less | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/uncompiled/artplayer-plugin-danmuku/index.js b/docs/uncompiled/artplayer-plugin-danmuku/index.js index 8bca17ae0..636923ed3 100644 --- a/docs/uncompiled/artplayer-plugin-danmuku/index.js +++ b/docs/uncompiled/artplayer-plugin-danmuku/index.js @@ -1444,7 +1444,7 @@ if (typeof document !== "undefined") { } },{"bundle-text:./style.less":"uaCsY","bundle-text:./img/on.svg":"a9r0e","bundle-text:./img/off.svg":"luia6","bundle-text:./img/config.svg":"lo6sV","bundle-text:./img/style.svg":"1Aemm","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6","bundle-text:./img/mode_0_off.svg":"jKvDJ","bundle-text:./img/mode_0_on.svg":"7eesQ","bundle-text:./img/mode_1_off.svg":"DalV6","bundle-text:./img/mode_1_on.svg":"i0F2W","bundle-text:./img/mode_2_off.svg":"1phDW","bundle-text:./img/mode_2_on.svg":"iHUBM","bundle-text:./img/check_on.svg":"fQ6fo","bundle-text:./img/check_off.svg":"dz3tU"}],"uaCsY":[function(require,module,exports) { -module.exports = ".artplayer-plugin-danmuku {\n z-index: 99;\n color: #fff;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 32px;\n font-size: 12px;\n font-weight: 300;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-icon {\n cursor: pointer;\n opacity: .75;\n fill: #fff;\n transition: all .2s;\n}\n\n.artplayer-plugin-danmuku .apd-icon:hover {\n opacity: 1;\n}\n\n.artplayer-plugin-danmuku .apd-config {\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-config .apd-config-panel {\n width: 320px;\n padding: 10px;\n display: none;\n position: absolute;\n bottom: 24px;\n left: -148px;\n}\n\n.artplayer-plugin-danmuku .apd-config .apd-config-panel .apd-config-panel-inner {\n background-color: #000000d9;\n border-radius: 3px;\n width: 100%;\n padding: 10px;\n}\n\n.artplayer-plugin-danmuku .apd-config:hover .apd-config-panel {\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-mode, .artplayer-plugin-danmuku .apd-config-slider, .artplayer-plugin-danmuku .apd-config-other, .artplayer-plugin-danmuku .apd-style-mode {\n margin-bottom: 15px;\n}\n\n.artplayer-plugin-danmuku .apd-modes {\n align-items: center;\n gap: 20px;\n margin-top: 5px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-modes .apd-mode {\n cursor: pointer;\n text-align: center;\n}\n\n.artplayer-plugin-danmuku .apd-modes .apd-mode:hover {\n color: #00a1d6;\n}\n\n.artplayer-plugin-danmuku .apd-config-slider {\n align-items: center;\n gap: 12px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-slider .apd-value {\n text-align: right;\n width: 32px;\n}\n\n.artplayer-plugin-danmuku .apd-slider {\n cursor: pointer;\n flex: 1;\n justify-content: center;\n align-items: center;\n height: 20px;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-line {\n background-color: #ffffff40;\n border-radius: 3px;\n width: 100%;\n height: 2px;\n position: relative;\n overflow: hidden;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-points {\n justify-content: space-between;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-points .apd-slider-point {\n background-color: #ffffff80;\n border-radius: 50%;\n width: 2px;\n height: 2px;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-progress {\n background-color: #00a1d6;\n width: 0%;\n height: 100%;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-dot {\n background-color: #00a1d6;\n border-radius: 50%;\n width: 12px;\n height: 12px;\n position: absolute;\n left: 0%;\n transform: translateX(-6px);\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-steps {\n color: #777;\n justify-content: space-between;\n align-items: center;\n width: calc(100% + 32px);\n display: flex;\n position: absolute;\n bottom: -12px;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-steps .apd-slider-step {\n text-align: center;\n flex-shrink: 0;\n width: 36px;\n scale: .95;\n}\n\n.artplayer-plugin-danmuku .apd-config-other {\n align-items: center;\n gap: 20px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-check-off, .artplayer-plugin-danmuku .apd-config-other .apd-check-on {\n width: 16px;\n height: 16px;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-other {\n cursor: pointer;\n align-items: center;\n gap: 2px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-other:hover {\n color: #00a1d6;\n}\n\n.artplayer-plugin-danmuku .apd-emitter {\n background-color: #ffffff40;\n border-radius: 5px;\n flex: 1;\n align-items: center;\n height: 100%;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-style {\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-style .apd-style-panel {\n width: 200px;\n padding: 10px;\n display: none;\n position: absolute;\n bottom: 24px;\n left: -88px;\n}\n\n.artplayer-plugin-danmuku .apd-style .apd-style-panel .apd-style-panel-inner {\n background-color: #000000d9;\n border-radius: 3px;\n width: 100%;\n padding: 10px;\n}\n\n.artplayer-plugin-danmuku .apd-style:hover .apd-style-panel {\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-colors {\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 5px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-colors .apd-color {\n cursor: pointer;\n border-radius: 2px;\n width: 16px;\n height: 16px;\n}\n\n.artplayer-plugin-danmuku .apd-colors .apd-color.apd-active {\n border: 1px solid #000;\n box-shadow: 0 0 0 1px #fff;\n}\n\n.artplayer-plugin-danmuku .apd-input {\n color: #fff;\n background-color: #0000;\n border: none;\n outline: none;\n flex: 1;\n width: auto;\n min-width: 0;\n height: 100%;\n line-height: 1;\n}\n\n.artplayer-plugin-danmuku .apd-input::placeholder {\n color: #ffffff80;\n}\n\n.artplayer-plugin-danmuku .apd-send {\n cursor: pointer;\n text-shadow: none;\n background-color: #00a1d6;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n width: 60px;\n height: 100%;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-send.apd-lock {\n cursor: not-allowed;\n color: #666;\n background-color: #e7e7e7;\n}\n\n.art-controls-center .apd-emitter {\n flex: none;\n width: 260px;\n}\n\n.art-fullscreen .artplayer-plugin-danmuku, .art-fullscreen-web .artplayer-plugin-danmuku {\n gap: 16px;\n height: 38px;\n}\n\n.art-fullscreen .artplayer-plugin-danmuku .apd-config-icon, .art-fullscreen-web .artplayer-plugin-danmuku .apd-config-icon, .art-fullscreen .artplayer-plugin-danmuku .apd-toggle-off, .art-fullscreen-web .artplayer-plugin-danmuku .apd-toggle-off, .art-fullscreen .artplayer-plugin-danmuku .apd-toggle-on, .art-fullscreen-web .artplayer-plugin-danmuku .apd-toggle-on {\n width: 28px;\n height: 28px;\n}\n\n.art-fullscreen .artplayer-plugin-danmuku .apd-emitter, .art-fullscreen-web .artplayer-plugin-danmuku .apd-emitter {\n flex: none;\n width: 400px;\n}\n\n[data-danmuku-emitter=\"false\"] .apd-emitter {\n display: none !important;\n}\n\n[data-danmuku-emitter=\"false\"] .art-controls-center .artplayer-plugin-danmuku {\n justify-content: flex-end;\n gap: 20px;\n}\n\n[data-danmuku-theme=\"light\"] > .artplayer-plugin-danmuku .apd-icon {\n fill: #333;\n}\n\n[data-danmuku-theme=\"light\"] > .artplayer-plugin-danmuku .apd-emitter {\n background-color: #f1f2f3;\n}\n\n[data-danmuku-theme=\"light\"] > .artplayer-plugin-danmuku .apd-input {\n color: #000;\n}\n\n[data-danmuku-theme=\"light\"] > .artplayer-plugin-danmuku .apd-input::placeholder {\n color: #0000004d;\n}\n\n[data-danmuku-visible=\"false\"] .apd-toggle-off {\n display: block;\n}\n\n[data-danmuku-visible=\"false\"] .apd-toggle-on, [data-danmuku-visible=\"true\"] .apd-toggle-off {\n display: none;\n}\n\n[data-danmuku-visible=\"true\"] .apd-toggle-on {\n display: block;\n}\n\n[data-danmuku-anti-overlap=\"false\"] .apd-anti-overlap .apd-check-on {\n display: none;\n}\n\n[data-danmuku-anti-overlap=\"false\"] .apd-anti-overlap .apd-check-off, [data-danmuku-anti-overlap=\"true\"] .apd-anti-overlap .apd-check-on {\n display: block;\n}\n\n[data-danmuku-anti-overlap=\"true\"] .apd-anti-overlap .apd-check-off, [data-danmuku-sync-video=\"false\"] .apd-sync-video .apd-check-on {\n display: none;\n}\n\n[data-danmuku-sync-video=\"false\"] .apd-sync-video .apd-check-off, [data-danmuku-sync-video=\"true\"] .apd-sync-video .apd-check-on {\n display: block;\n}\n\n[data-danmuku-sync-video=\"true\"] .apd-sync-video .apd-check-off {\n display: none;\n}\n\n[data-danmuku-mode0=\"false\"] .apd-config-mode .apd-mode-0-off {\n display: block;\n}\n\n[data-danmuku-mode0=\"false\"] .apd-config-mode .apd-mode-0-on {\n display: none;\n}\n\n[data-danmuku-mode0=\"false\"] .art-danmuku [data-mode=\"0\"] {\n opacity: 0 !important;\n}\n\n[data-danmuku-mode0=\"true\"] .apd-config-mode .apd-mode-0-off {\n display: none;\n}\n\n[data-danmuku-mode0=\"true\"] .apd-config-mode .apd-mode-0-on {\n display: block;\n}\n\n[data-danmuku-mode=\"0\"] .apd-style-mode [data-mode=\"0\"] {\n color: #00a1d6;\n}\n\n[data-danmuku-mode=\"0\"] .apd-style-mode [data-mode=\"0\"] path {\n fill: #00a1d6;\n}\n\n[data-danmuku-mode1=\"false\"] .apd-config-mode .apd-mode-1-off {\n display: block;\n}\n\n[data-danmuku-mode1=\"false\"] .apd-config-mode .apd-mode-1-on {\n display: none;\n}\n\n[data-danmuku-mode1=\"false\"] .art-danmuku [data-mode=\"1\"] {\n opacity: 0 !important;\n}\n\n[data-danmuku-mode1=\"true\"] .apd-config-mode .apd-mode-1-off {\n display: none;\n}\n\n[data-danmuku-mode1=\"true\"] .apd-config-mode .apd-mode-1-on {\n display: block;\n}\n\n[data-danmuku-mode=\"1\"] .apd-style-mode [data-mode=\"1\"] {\n color: #00a1d6;\n}\n\n[data-danmuku-mode=\"1\"] .apd-style-mode [data-mode=\"1\"] path {\n fill: #00a1d6;\n}\n\n[data-danmuku-mode2=\"false\"] .apd-config-mode .apd-mode-2-off {\n display: block;\n}\n\n[data-danmuku-mode2=\"false\"] .apd-config-mode .apd-mode-2-on {\n display: none;\n}\n\n[data-danmuku-mode2=\"false\"] .art-danmuku [data-mode=\"2\"] {\n opacity: 0 !important;\n}\n\n[data-danmuku-mode2=\"true\"] .apd-config-mode .apd-mode-2-off {\n display: none;\n}\n\n[data-danmuku-mode2=\"true\"] .apd-config-mode .apd-mode-2-on {\n display: block;\n}\n\n[data-danmuku-mode=\"2\"] .apd-style-mode [data-mode=\"2\"] {\n color: #00a1d6;\n}\n\n[data-danmuku-mode=\"2\"] .apd-style-mode [data-mode=\"2\"] path {\n fill: #00a1d6;\n}\n"; +module.exports = ".artplayer-plugin-danmuku {\n z-index: 99;\n color: #fff;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 32px;\n font-size: 12px;\n font-weight: 300;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-icon {\n cursor: pointer;\n opacity: .75;\n fill: #fff;\n transition: all .2s;\n}\n\n.artplayer-plugin-danmuku .apd-icon:hover {\n opacity: 1;\n}\n\n.artplayer-plugin-danmuku .apd-config {\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-config .apd-config-panel {\n width: 320px;\n padding: 10px;\n display: none;\n position: absolute;\n bottom: 24px;\n left: -148px;\n}\n\n.artplayer-plugin-danmuku .apd-config .apd-config-panel .apd-config-panel-inner {\n background-color: #000000d9;\n border-radius: 3px;\n width: 100%;\n padding: 10px;\n}\n\n.artplayer-plugin-danmuku .apd-config:hover .apd-config-panel {\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-mode, .artplayer-plugin-danmuku .apd-config-slider, .artplayer-plugin-danmuku .apd-config-other, .artplayer-plugin-danmuku .apd-style-mode {\n margin-bottom: 15px;\n}\n\n.artplayer-plugin-danmuku .apd-modes {\n align-items: center;\n gap: 20px;\n margin-top: 5px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-modes .apd-mode {\n cursor: pointer;\n text-align: center;\n}\n\n.artplayer-plugin-danmuku .apd-modes .apd-mode:hover {\n color: #00a1d6;\n}\n\n.artplayer-plugin-danmuku .apd-config-slider {\n align-items: center;\n gap: 12px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-slider .apd-value {\n text-align: right;\n width: 32px;\n}\n\n.artplayer-plugin-danmuku .apd-slider {\n cursor: pointer;\n flex: 1;\n justify-content: center;\n align-items: center;\n height: 20px;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-line {\n background-color: #ffffff40;\n border-radius: 3px;\n width: 100%;\n height: 2px;\n position: relative;\n overflow: hidden;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-points {\n justify-content: space-between;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-points .apd-slider-point {\n background-color: #ffffff80;\n border-radius: 50%;\n width: 2px;\n height: 2px;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-progress {\n background-color: #00a1d6;\n width: 0%;\n height: 100%;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-dot {\n background-color: #00a1d6;\n border-radius: 50%;\n width: 12px;\n height: 12px;\n position: absolute;\n left: 0%;\n transform: translateX(-6px);\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-steps {\n color: #777;\n justify-content: space-between;\n align-items: center;\n width: calc(100% + 32px);\n display: flex;\n position: absolute;\n bottom: -12px;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-steps .apd-slider-step {\n text-align: center;\n flex-shrink: 0;\n width: 36px;\n scale: .95;\n}\n\n.artplayer-plugin-danmuku .apd-config-other {\n align-items: center;\n gap: 20px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-check-off, .artplayer-plugin-danmuku .apd-config-other .apd-check-on {\n width: 16px;\n height: 16px;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-other {\n cursor: pointer;\n align-items: center;\n gap: 2px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-other:hover {\n color: #00a1d6;\n}\n\n.artplayer-plugin-danmuku .apd-emitter {\n background-color: #ffffff40;\n border-radius: 5px;\n flex: 1;\n align-items: center;\n height: 100%;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-style {\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-style .apd-style-panel {\n width: 200px;\n padding: 10px;\n display: none;\n position: absolute;\n bottom: 24px;\n left: -88px;\n}\n\n.artplayer-plugin-danmuku .apd-style .apd-style-panel .apd-style-panel-inner {\n background-color: #000000d9;\n border-radius: 3px;\n width: 100%;\n padding: 10px;\n}\n\n.artplayer-plugin-danmuku .apd-style:hover .apd-style-panel {\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-colors {\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 5px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-colors .apd-color {\n cursor: pointer;\n border-radius: 2px;\n width: 16px;\n height: 16px;\n}\n\n.artplayer-plugin-danmuku .apd-colors .apd-color.apd-active {\n border: 1px solid #000;\n box-shadow: 0 0 0 1px #fff;\n}\n\n.artplayer-plugin-danmuku .apd-input {\n color: #fff;\n background-color: #0000;\n border: none;\n outline: none;\n flex: 1;\n width: auto;\n min-width: 0;\n height: 100%;\n line-height: 1;\n}\n\n.artplayer-plugin-danmuku .apd-input::placeholder {\n color: #ffffff80;\n}\n\n.artplayer-plugin-danmuku .apd-send {\n cursor: pointer;\n text-shadow: none;\n background-color: #00a1d6;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n width: 60px;\n height: 100%;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-send.apd-lock {\n cursor: not-allowed;\n color: #666;\n background-color: #e7e7e7;\n}\n\n.art-controls-center .apd-emitter {\n flex: none;\n width: 260px;\n}\n\n.art-fullscreen .artplayer-plugin-danmuku, .art-fullscreen-web .artplayer-plugin-danmuku {\n gap: 16px;\n height: 38px;\n}\n\n.art-fullscreen .artplayer-plugin-danmuku .apd-config-icon, .art-fullscreen-web .artplayer-plugin-danmuku .apd-config-icon, .art-fullscreen .artplayer-plugin-danmuku .apd-toggle-off, .art-fullscreen-web .artplayer-plugin-danmuku .apd-toggle-off, .art-fullscreen .artplayer-plugin-danmuku .apd-toggle-on, .art-fullscreen-web .artplayer-plugin-danmuku .apd-toggle-on {\n width: 28px;\n height: 28px;\n}\n\n.art-fullscreen .artplayer-plugin-danmuku .apd-emitter, .art-fullscreen-web .artplayer-plugin-danmuku .apd-emitter {\n flex: none;\n width: 400px;\n}\n\n[data-danmuku-emitter=\"false\"] .apd-emitter {\n display: none !important;\n}\n\n[data-danmuku-emitter=\"false\"] .art-controls-center .artplayer-plugin-danmuku {\n justify-content: flex-end;\n gap: 18px;\n}\n\n[data-danmuku-emitter=\"false\"].art-fullscreen .art-controls-center .artplayer-plugin-danmuku, [data-danmuku-emitter=\"false\"].art-fullscreen-web .art-controls-center .artplayer-plugin-danmuku {\n gap: 24px;\n}\n\n[data-danmuku-theme=\"light\"] > .artplayer-plugin-danmuku .apd-icon {\n fill: #333;\n}\n\n[data-danmuku-theme=\"light\"] > .artplayer-plugin-danmuku .apd-emitter {\n background-color: #f1f2f3;\n}\n\n[data-danmuku-theme=\"light\"] > .artplayer-plugin-danmuku .apd-input {\n color: #000;\n}\n\n[data-danmuku-theme=\"light\"] > .artplayer-plugin-danmuku .apd-input::placeholder {\n color: #0000004d;\n}\n\n[data-danmuku-visible=\"false\"] .apd-toggle-off {\n display: block;\n}\n\n[data-danmuku-visible=\"false\"] .apd-toggle-on, [data-danmuku-visible=\"true\"] .apd-toggle-off {\n display: none;\n}\n\n[data-danmuku-visible=\"true\"] .apd-toggle-on {\n display: block;\n}\n\n[data-danmuku-anti-overlap=\"false\"] .apd-anti-overlap .apd-check-on {\n display: none;\n}\n\n[data-danmuku-anti-overlap=\"false\"] .apd-anti-overlap .apd-check-off, [data-danmuku-anti-overlap=\"true\"] .apd-anti-overlap .apd-check-on {\n display: block;\n}\n\n[data-danmuku-anti-overlap=\"true\"] .apd-anti-overlap .apd-check-off, [data-danmuku-sync-video=\"false\"] .apd-sync-video .apd-check-on {\n display: none;\n}\n\n[data-danmuku-sync-video=\"false\"] .apd-sync-video .apd-check-off, [data-danmuku-sync-video=\"true\"] .apd-sync-video .apd-check-on {\n display: block;\n}\n\n[data-danmuku-sync-video=\"true\"] .apd-sync-video .apd-check-off {\n display: none;\n}\n\n[data-danmuku-mode0=\"false\"] .apd-config-mode .apd-mode-0-off {\n display: block;\n}\n\n[data-danmuku-mode0=\"false\"] .apd-config-mode .apd-mode-0-on {\n display: none;\n}\n\n[data-danmuku-mode0=\"false\"] .art-danmuku [data-mode=\"0\"] {\n opacity: 0 !important;\n}\n\n[data-danmuku-mode0=\"true\"] .apd-config-mode .apd-mode-0-off {\n display: none;\n}\n\n[data-danmuku-mode0=\"true\"] .apd-config-mode .apd-mode-0-on {\n display: block;\n}\n\n[data-danmuku-mode=\"0\"] .apd-style-mode [data-mode=\"0\"] {\n color: #00a1d6;\n}\n\n[data-danmuku-mode=\"0\"] .apd-style-mode [data-mode=\"0\"] path {\n fill: #00a1d6;\n}\n\n[data-danmuku-mode1=\"false\"] .apd-config-mode .apd-mode-1-off {\n display: block;\n}\n\n[data-danmuku-mode1=\"false\"] .apd-config-mode .apd-mode-1-on {\n display: none;\n}\n\n[data-danmuku-mode1=\"false\"] .art-danmuku [data-mode=\"1\"] {\n opacity: 0 !important;\n}\n\n[data-danmuku-mode1=\"true\"] .apd-config-mode .apd-mode-1-off {\n display: none;\n}\n\n[data-danmuku-mode1=\"true\"] .apd-config-mode .apd-mode-1-on {\n display: block;\n}\n\n[data-danmuku-mode=\"1\"] .apd-style-mode [data-mode=\"1\"] {\n color: #00a1d6;\n}\n\n[data-danmuku-mode=\"1\"] .apd-style-mode [data-mode=\"1\"] path {\n fill: #00a1d6;\n}\n\n[data-danmuku-mode2=\"false\"] .apd-config-mode .apd-mode-2-off {\n display: block;\n}\n\n[data-danmuku-mode2=\"false\"] .apd-config-mode .apd-mode-2-on {\n display: none;\n}\n\n[data-danmuku-mode2=\"false\"] .art-danmuku [data-mode=\"2\"] {\n opacity: 0 !important;\n}\n\n[data-danmuku-mode2=\"true\"] .apd-config-mode .apd-mode-2-off {\n display: none;\n}\n\n[data-danmuku-mode2=\"true\"] .apd-config-mode .apd-mode-2-on {\n display: block;\n}\n\n[data-danmuku-mode=\"2\"] .apd-style-mode [data-mode=\"2\"] {\n color: #00a1d6;\n}\n\n[data-danmuku-mode=\"2\"] .apd-style-mode [data-mode=\"2\"] path {\n fill: #00a1d6;\n}\n"; },{}],"a9r0e":[function(require,module,exports) { module.exports = ""; diff --git a/packages/artplayer-plugin-danmuku/src/style.less b/packages/artplayer-plugin-danmuku/src/style.less index ec7652cda..cdf860944 100644 --- a/packages/artplayer-plugin-danmuku/src/style.less +++ b/packages/artplayer-plugin-danmuku/src/style.less @@ -305,7 +305,16 @@ .art-controls-center { .artplayer-plugin-danmuku { justify-content: flex-end; - gap: 20px; + gap: 18px; + } + } + + &.art-fullscreen, + &.art-fullscreen-web { + .art-controls-center { + .artplayer-plugin-danmuku { + gap: 24px; + } } } }