feat(cssVar): add new CSS variables for font size and tooltip positioning

Refactor styles for consistency and improved theming

- Updated context menu styles to use new spacing and surface mixins.
- Adjusted control styles to utilize touch hit size for better accessibility.
- Refined info panel padding and applied panel surface mixin for uniformity.
- Standardized mini player transitions and background colors.
- Introduced new mixins for panel surfaces and flyout animations.
- Enhanced notice padding and applied consistent spacing variables.
- Updated plugin styles to use new icon sizes and panel surface mixin.
- Improved progress bar styles with consistent surface and shadow properties.
- Refactored selector styles to utilize new surface mixin and flyout animations.
- Streamlined setting panel styles with consistent spacing and hover effects.
- Added new variables for spacing, surface colors, and icon sizes.
- Updated volume panel styles to use new spacing and flyout animations.

feat(cssVar): add new CSS variables for enhanced theming and layout

Refactor styles in ArtPlayer

- Updated transition properties across various LESS files to use the new `--art-ease-standard` variable for consistency.
- Added new CSS variables for mobile padding and border radius.
- Introduced shadow variables for different elevation levels.
- Minor adjustments to ensure proper formatting and consistency in LESS files, including adding missing newlines at the end of files.

refactor: replace art-text-muted mixin with direct font-size in setting.less

Refactor styles for context menu, info panel, and settings

- Updated font sizes to use the new variable `--art-font-size-sm` for consistency across context menus, info panels, and settings.
- Introduced a new mixin `.art-menu-item-base` to standardize menu item styles, including padding and hover effects.
- Adjusted padding and positioning for tooltip elements in the progress bar.
- Added new CSS variables for tip padding and offset to enhance maintainability and readability of styles.

docs/uncompiled/artplayer/index.js

@@ -479,7 +479,7 @@ if (_utils.isBrowser) {
 }
 
 },{"bundle-text:./style/index.less":"bFGMG","option-validator":"9hUEm","../package.json":"3r4tp","./config":"1dlGA","./contextmenu":"dx7Zz","./control":"cNVpy","./events":"dQzlM","./hotkey":"drylQ","./i18n":"3Jf1s","./icons":"avFu3","./info":"gvEup","./layer":"7Oas9","./loading":"glZdQ","./mask":"iGxU6","./notice":"jZEIz","./player":"iA4EC","./plugins":"6P64r","./scheme":"8YPbR","./setting":"7ATN8","./storage":"grHII","./subtitle":"hxr0l","./template":"5JwMQ","./utils":"gGxPm","./utils/emitter":"2qvfs","@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"bFGMG":[function(require,module,exports,__globalThis) {
-module.exports = ".art-video-player {\n  --art-theme: red;\n  --art-font-color: #fff;\n  --art-background-color: #000;\n  --art-text-shadow-color: #00000080;\n  --art-transition-duration: .2s;\n  --art-padding: 10px;\n  --art-border-radius: 3px;\n  --art-progress-height: 6px;\n  --art-progress-color: #ffffff40;\n  --art-progress-top-gap: 8px;\n  --art-hover-color: #ffffff40;\n  --art-loaded-color: #ffffff40;\n  --art-state-size: 80px;\n  --art-state-opacity: .8;\n  --art-bottom-height: 100px;\n  --art-bottom-offset: 20px;\n  --art-bottom-gap: 5px;\n  --art-highlight-width: 8px;\n  --art-highlight-color: #ffffff80;\n  --art-control-height: 46px;\n  --art-control-opacity: .75;\n  --art-control-icon-size: 36px;\n  --art-control-icon-scale: 1.1;\n  --art-volume-height: 120px;\n  --art-volume-handle-size: 14px;\n  --art-lock-size: 36px;\n  --art-indicator-scale: 0;\n  --art-indicator-size: 16px;\n  --art-fullscreen-web-index: 9999;\n  --art-settings-icon-size: 24px;\n  --art-settings-max-height: 300px;\n  --art-selector-max-height: 300px;\n  --art-contextmenus-min-width: 250px;\n  --art-subtitle-font-size: 20px;\n  --art-subtitle-gap: 5px;\n  --art-subtitle-bottom: 15px;\n  --art-subtitle-border: #000;\n  --art-widget-background: #000000d9;\n  --art-tip-background: #000000b3;\n  --art-scrollbar-size: 4px;\n  --art-scrollbar-background: #ffffff40;\n  --art-scrollbar-background-hover: #ffffff80;\n  --art-mini-progress-height: 2px;\n}\n\n.art-bg-cover {\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.art-bottom-gradient {\n  background-image: linear-gradient(to top, #000, #0006, #0000);\n  background-position: bottom;\n  background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n  backdrop-filter: saturate(180%) blur(20px);\n  background-color: #000000bf !important;\n}\n\n.art-truncate {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.art-video-player {\n  zoom: 1;\n  text-align: left;\n  user-select: none;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  color: var(--art-font-color);\n  background-color: var(--art-background-color);\n  text-shadow: 0 0 2px var(--art-text-shadow-color);\n  -webkit-tap-highlight-color: #0000;\n  -ms-touch-action: manipulation;\n  touch-action: manipulation;\n  -ms-high-contrast-adjust: none;\n  direction: ltr;\n  outline: 0;\n  margin: 0 auto;\n  padding: 0;\n  font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.3;\n  position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n  box-sizing: border-box;\n}\n\n.art-video-player ::-webkit-scrollbar {\n  width: var(--art-scrollbar-size);\n  height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n  background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n  background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n  vertical-align: top;\n  max-width: 100%;\n}\n\n.art-video-player svg {\n  fill: var(--art-font-color);\n}\n\n.art-video-player a {\n  color: var(--art-font-color);\n  text-decoration: none;\n}\n\n.art-icon {\n  justify-content: center;\n  align-items: center;\n  line-height: 1;\n  display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n  backdrop-filter: saturate(180%) blur(20px);\n  background-color: #000000bf !important;\n}\n\n.art-video {\n  z-index: 10;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  inset: 0;\n}\n\n.art-poster {\n  z-index: 11;\n  pointer-events: none;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  inset: 0;\n}\n\n.art-video-player .art-subtitle {\n  z-index: 20;\n  text-align: center;\n  pointer-events: none;\n  justify-content: center;\n  align-items: center;\n  gap: var(--art-subtitle-gap);\n  width: 100%;\n  bottom: var(--art-subtitle-bottom);\n  font-size: var(--art-subtitle-font-size);\n  transition: bottom var(--art-transition-duration) ease;\n  text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n  flex-direction: column;\n  padding: 0 5%;\n  display: none;\n  position: absolute;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n  display: flex;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n 
Line truncated
+module.exports = ".art-video-player {\n  --art-theme: red;\n  --art-font-color: #fff;\n  --art-background-color: #000;\n  --art-font-size-sm: 12px;\n  --art-text-shadow-color: #00000080;\n  --art-transition-duration: .2s;\n  --art-ease-standard: ease;\n  --art-padding: 10px;\n  --art-border-radius: 3px;\n  --art-mobile-padding: 10px;\n  --art-mobile-radius: 3px;\n  --art-radius-sm: 3px;\n  --art-space-xxs: 5px;\n  --art-space-xs: 10px;\n  --art-surface-hover-color: #ffffff1a;\n  --art-surface-border-color: #ffffff1a;\n  --art-surface-muted-color: #ffffff80;\n  --art-surface-range-color: #fff3;\n  --art-progress-height: 6px;\n  --art-progress-color: #ffffff40;\n  --art-progress-top-gap: 8px;\n  --art-hover-color: #ffffff40;\n  --art-loaded-color: #ffffff40;\n  --art-tip-padding: 3px 5px;\n  --art-tip-offset: -25px;\n  --art-state-size: 80px;\n  --art-state-opacity: .8;\n  --art-bottom-height: 100px;\n  --art-bottom-offset: 20px;\n  --art-bottom-gap: 5px;\n  --art-highlight-width: 8px;\n  --art-highlight-color: #ffffff80;\n  --art-control-height: 46px;\n  --art-control-opacity: .75;\n  --art-control-icon-size: 36px;\n  --art-control-icon-scale: 1.1;\n  --art-touch-hit-size: var(--art-control-height);\n  --art-volume-height: 120px;\n  --art-volume-handle-size: 14px;\n  --art-lock-size: 36px;\n  --art-indicator-scale: 0;\n  --art-indicator-size: 16px;\n  --art-fullscreen-web-index: 9999;\n  --art-settings-icon-size: 24px;\n  --art-settings-max-height: 300px;\n  --art-selector-max-height: 300px;\n  --art-contextmenus-min-width: 250px;\n  --art-contextmenu-padding-x: 15px;\n  --art-subtitle-font-size: 20px;\n  --art-subtitle-gap: 5px;\n  --art-subtitle-bottom: 15px;\n  --art-subtitle-border: #000;\n  --art-widget-background: #000000d9;\n  --art-tip-background: #000000b3;\n  --art-scrollbar-size: 4px;\n  --art-scrollbar-background: #ffffff40;\n  --art-scrollbar-background-hover: #ffffff80;\n  --art-mini-progress-height: 2px;\n  --art-shadow-low: 0 1px 2px 0 #0000001f;\n  --art-shadow-medium: 0 1px 3px 0 #0003, 0 1px 2px -1px #0003;\n  --art-shadow-high: 0 4px 10px 0 #00000040;\n  --art-shadow-elevated: var(--art-shadow-medium);\n  --art-icon-small-size: 15px;\n  --art-overlay-dim: #00000040;\n  --art-overlay-strong: #00000080;\n}\n\n.art-bg-cover {\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.art-bottom-gradient {\n  background-image: linear-gradient(to top, #000, #0006, #0000);\n  background-position: bottom;\n  background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n  backdrop-filter: saturate(180%) blur(20px);\n  background-color: #000000bf !important;\n}\n\n.art-truncate {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.art-panel-surface {\n  border-radius: var(--art-radius-sm);\n  background-color: var(--art-widget-background);\n}\n\n.art-video-player {\n  zoom: 1;\n  text-align: left;\n  user-select: none;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  color: var(--art-font-color);\n  background-color: var(--art-background-color);\n  text-shadow: 0 0 2px var(--art-text-shadow-color);\n  -webkit-tap-highlight-color: #0000;\n  -ms-touch-action: manipulation;\n  touch-action: manipulation;\n  -ms-high-contrast-adjust: none;\n  direction: ltr;\n  outline: 0;\n  margin: 0 auto;\n  padding: 0;\n  font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.3;\n  position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n  box-sizing: border-box;\n}\n\n.art-video-player ::-webkit-scrollbar {\n  width: var(--art-scrollbar-size);\n  height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n  background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n  background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n  vertical-align: top;\n  max-width: 100%;\n}\n\n.art-video-player svg {\n  fill: var(--art-font-color);\n}\n\n.art-video-player a {\n  color: var(--art-font-color);\n  text-decoration: none;\n}\n\n.art-icon {\n  justify-content: center;\n  align-items: center;\n  line-height: 1;\n  display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n  backdrop-filter: saturate(180%) blur(20px);\n  background-color: #000000bf !important;\n}\n\n.art-video {\n  z-index: 10;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  inset: 0;\n}\n\n.art-poster {\n  z-index: 11;\n  pointer-events: none;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  height: 100%;\n  positiLine truncated
 
 },{}],"9hUEm":[function(require,module,exports,__globalThis) {
 !function(r, t) {

packages/artplayer/src/style/artplayer.less

@@ -59,4 +59,4 @@
         color: var(--art-font-color);
         text-decoration: none;
     }
-}
+}

packages/artplayer/src/style/aspectRatio.less

@@ -1,9 +1,10 @@
 .art-video-player {
     &[data-aspect-ratio] {
         overflow: hidden;
+
         .art-video {
             object-fit: fill;
             box-sizing: content-box;
         }
     }
-}
+}

packages/artplayer/src/style/backdrop.less

@@ -1,4 +1,5 @@
 .art-video-player.art-backdrop {
+
     .art-contextmenus,
     .art-info,
     .art-settings,
@@ -7,4 +8,4 @@
     .art-volume-inner {
         .art-backdrop-filter();
     }
-}
+}

packages/artplayer/src/style/bottom.less

@@ -8,14 +8,14 @@
         overflow: hidden;
         pointer-events: none;
         padding: 0 var(--art-padding);
-        transition: all var(--art-transition-duration) ease;
+        transition: all var(--art-transition-duration) var(--art-ease-standard);
         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;
+            transition: transform var(--art-transition-duration) var(--art-ease-standard);
         }
     }
 
@@ -23,10 +23,11 @@
     &.art-hover {
         .art-bottom {
             opacity: 1;
+
             .art-controls,
             .art-progress {
                 transform: translateY(0);
             }
         }
     }
-}
+}

packages/artplayer/src/style/contextmenu.less

@@ -4,17 +4,14 @@
         flex-direction: column;
         position: absolute;
         z-index: 120;
-        padding: 5px 0;
-        border-radius: var(--art-border-radius);
-        font-size: 12px;
-        background-color: var(--art-widget-background);
+        padding: var(--art-space-xxs) 0;
+        font-size: var(--art-font-size-sm);
         min-width: var(--art-contextmenus-min-width);
+        .art-panel-surface();
 
         .art-contextmenu {
-            cursor: pointer;
-            display: flex;
-            padding: 10px 15px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            .art-menu-item-base(var(--art-space-xs), var(--art-contextmenu-padding-x), false);
+            border-bottom: 1px solid var(--art-surface-border-color);
 
             span {
                 padding: 0 8px;
@@ -26,7 +23,7 @@
             }
 
             &:hover {
-                background-color: rgba(255, 255, 255, 0.1);
+                background-color: var(--art-surface-hover-color);
             }
 
             &:last-child {

packages/artplayer/src/style/controls.less

@@ -30,15 +30,15 @@
         cursor: pointer;
         white-space: nowrap;
         opacity: var(--art-control-opacity);
-        min-height: var(--art-control-height);
-        min-width: var(--art-control-height);
-        transition: opacity var(--art-transition-duration) ease;
+        min-height: var(--art-touch-hit-size);
+        min-width: var(--art-touch-hit-size);
+        transition: opacity var(--art-transition-duration) var(--art-ease-standard);
 
         .art-icon {
             height: var(--art-control-icon-size);
             width: var(--art-control-icon-size);
             transform: scale(var(--art-control-icon-scale));
-            transition: transform var(--art-transition-duration) ease;
+            transition: transform var(--art-transition-duration) var(--art-ease-standard);
 
             &:active {
                 transform: scale(calc(var(--art-control-icon-scale) * 0.8));
@@ -49,4 +49,4 @@
             opacity: 1;
         }
     }
-}
+}

packages/artplayer/src/style/danmuku.less

@@ -2,4 +2,4 @@
     .art-full(30);
     pointer-events: none;
     overflow: hidden;
-}
+}

packages/artplayer/src/style/flip.less

@@ -6,4 +6,4 @@
     &[data-flip='vertical'] .art-video {
         transform: scaleY(-1);
     }
-}
+}

packages/artplayer/src/style/fullscreen.less

@@ -3,4 +3,4 @@
     --art-indicator-size: 20px;
     --art-control-height: 60px;
     --art-control-icon-scale: 1.3;
-}
+}

packages/artplayer/src/style/fullscreenWeb.less

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

packages/artplayer/src/style/hideCursor.less

@@ -1,3 +1,3 @@
 .art-hide-cursor * {
     cursor: none !important;
-}
+}

packages/artplayer/src/style/hint.less

@@ -34,6 +34,7 @@
        * tooltip body
        */
 }
+
 [class*='hint--']:before,
 [class*='hint--']:after {
     position: absolute;
@@ -51,17 +52,20 @@
     -moz-transition-delay: 0ms;
     transition-delay: 0ms;
 }
+
 [class*='hint--']:hover:before,
 [class*='hint--']:hover:after {
     visibility: visible;
     opacity: 1;
 }
+
 [class*='hint--']:hover:before,
 [class*='hint--']:hover:after {
     -webkit-transition-delay: 100ms;
     -moz-transition-delay: 100ms;
     transition-delay: 100ms;
 }
+
 [class*='hint--']:before {
     content: '';
     position: absolute;
@@ -69,6 +73,7 @@
     border: 6px solid transparent;
     z-index: 1000001;
 }
+
 [class*='hint--']:after {
     background: #000000;
     color: white;
@@ -78,9 +83,11 @@
     line-height: 12px;
     white-space: nowrap;
 }
+
 [class*='hint--'][aria-label]:after {
     content: attr(aria-label);
 }
+
 [class*='hint--'][data-hint]:after {
     content: attr(data-hint);
 }
@@ -467,6 +474,7 @@
        * tooltip body
        */
 }
+
 [class*='hint--']:after {
     text-shadow: 0 -1px 0px black;
     box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
@@ -809,4 +817,4 @@
 
 .hint--no-arrow:before {
     display: none;
-}
+}

packages/artplayer/src/style/icon.less

@@ -1,4 +1,4 @@
 .art-icon {
     line-height: 1;
     .art-center();
-}
+}

packages/artplayer/src/style/index.less

@@ -27,4 +27,4 @@
 @import './plugins';
 @import './selector';
 @import './hint';
-@import './mobile';
+@import './mobile';

packages/artplayer/src/style/info.less

@@ -5,10 +5,9 @@
         left: var(--art-padding);
         top: var(--art-padding);
         z-index: 100;
-        padding: 10px;
-        font-size: 12px;
-        border-radius: var(--art-border-radius);
-        background-color: var(--art-widget-background);
+        padding: var(--art-space-xs);
+        font-size: var(--art-font-size-sm);
+        .art-panel-surface();
 
         .art-info-panel {
             display: flex;

packages/artplayer/src/style/layers.less

@@ -14,4 +14,4 @@
             display: flex;
         }
     }
-}
+}

packages/artplayer/src/style/loading.less

@@ -9,8 +9,9 @@
         .art-loading {
             display: flex;
         }
+
         .art-mask {
             display: none;
         }
     }
-}
+}

packages/artplayer/src/style/mask.less

@@ -10,7 +10,7 @@
             transform: scale(2);
             width: var(--art-state-size);
             height: var(--art-state-size);
-            transition: all var(--art-transition-duration) ease;
+            transition: all var(--art-transition-duration) var(--art-ease-standard);
         }
     }
 
@@ -28,4 +28,4 @@
             display: none;
         }
     }
-}
+}

packages/artplayer/src/style/mini.less

@@ -8,8 +8,8 @@
     cursor: move;
     user-select: none;
     overflow: hidden;
-    transition: opacity 0.2s ease;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+    transition: opacity var(--art-transition-duration) var(--art-ease-standard);
+    box-shadow: 0 0 5px var(--art-overlay-strong);
 
     svg {
         fill: #fff;
@@ -26,7 +26,7 @@
         top: 10px;
         cursor: pointer;
         opacity: 0;
-        transition: opacity 0.2s ease;
+        transition: opacity var(--art-transition-duration) var(--art-ease-standard);
     }
 
     .art-mini-state {
@@ -34,15 +34,15 @@
         .art-center();
         pointer-events: none;
         opacity: 0;
-        transition: opacity 0.2s ease;
-        background-color: rgba(0, 0, 0, 0.25);
+        transition: opacity var(--art-transition-duration) var(--art-ease-standard);
+        background-color: var(--art-overlay-dim);
 
         .art-icon {
             opacity: 0.75;
             cursor: pointer;
             transform: scale(3);
             pointer-events: auto;
-            transition: transform 0.2s ease;
+            transition: transform var(--art-transition-duration) var(--art-ease-standard);
 
             &:active {
                 transform: scale(2.5);
@@ -55,9 +55,10 @@
     }
 
     &:hover {
+
         .art-mini-close,
         .art-mini-state {
             opacity: 1;
         }
     }
-}
+}

packages/artplayer/src/style/mixins.less

@@ -35,3 +35,66 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+.art-panel-surface {
+    border-radius: var(--art-radius-sm);
+    background-color: var(--art-widget-background);
+}
+
+.art-flyout-hidden(@distance: 10px, @axis: y) {
+    opacity: 0;
+    pointer-events: none;
+    transition: all var(--art-transition-duration) var(--art-ease-standard);
+
+    & when (@axis =y) {
+        transform: translateY(@distance);
+    }
+
+    & when (@axis =x) {
+        transform: translateX(@distance);
+    }
+}
+
+.art-flyout-visible(@axis: y) {
+    opacity: 1;
+    pointer-events: auto;
+
+    & when (@axis =y) {
+        transform: translateY(0);
+    }
+
+    & when (@axis =x) {
+        transform: translateX(0);
+    }
+}
+
+.art-elevation(@level: medium) when (@level =low) {
+    box-shadow: var(--art-shadow-low);
+}
+
+.art-elevation(@level: medium) when (@level =medium) {
+    box-shadow: var(--art-shadow-medium);
+}
+
+.art-elevation(@level: medium) when (@level =high) {
+    box-shadow: var(--art-shadow-high);
+}
+
+.art-text-muted(@size: 12px) {
+    font-size: @size;
+    color: var(--art-surface-muted-color);
+}
+
+.art-menu-item-base(@padding-y, @padding-x, @animated: true) {
+    display: flex;
+    cursor: pointer;
+    padding: @padding-y @padding-x;
+
+    & when (@animated = true) {
+        transition: background-color var(--art-transition-duration) var(--art-ease-standard);
+    }
+
+    &:hover {
+        background-color: var(--art-surface-hover-color);
+    }
+}

packages/artplayer/src/style/mobile.less

@@ -7,6 +7,8 @@
     --art-selector-max-height: 180px;
     --art-indicator-scale: 1;
     --art-control-opacity: 1;
+    --art-padding: var(--art-mobile-padding);
+    --art-border-radius: var(--art-mobile-radius);
 
     .art-controls-left {
         margin-left: calc(var(--art-padding) / -1);
@@ -15,4 +17,4 @@
     .art-controls-right {
         margin-right: calc(var(--art-padding) / -1);
     }
-}
+}

packages/artplayer/src/style/notice.less

@@ -9,7 +9,7 @@
 
         .art-notice-inner {
             display: inline-flex;
-            padding: 5px;
+            padding: var(--art-space-xxs);
             line-height: 1;
             border-radius: var(--art-border-radius);
             background-color: var(--art-tip-background);
@@ -21,4 +21,4 @@
             display: flex;
         }
     }
-}
+}

packages/artplayer/src/style/plugins.less

@@ -16,20 +16,19 @@
         gap: 10px;
         align-items: center;
         position: absolute;
-        border-radius: var(--art-border-radius);
-        padding: 10px;
+        padding: var(--art-space-xs);
         line-height: 1;
         left: var(--art-padding);
         bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);
-        background-color: var(--art-widget-background);
+        .art-panel-surface();
 
         .art-auto-playback-close {
             .art-center();
             cursor: pointer;
 
             svg {
-                width: 15px;
-                height: 15px;
+                width: var(--art-icon-small-size);
+                height: var(--art-icon-small-size);
                 fill: var(--art-theme);
             }
         }
@@ -55,9 +54,7 @@
 
             .art-controls,
             .art-progress {
-                transform: translateY(
-                    calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4)
-                );
+                transform: translateY(calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4));
             }
 
             .art-progress-indicator {
@@ -71,4 +68,4 @@
             display: flex;
         }
     }
-}
+}

packages/artplayer/src/style/poster.less

@@ -2,4 +2,4 @@
     .art-full(11);
     .art-bg-cover();
     pointer-events: none;
-}
+}

packages/artplayer/src/style/progress.less

@@ -18,7 +18,7 @@
                 position: relative;
                 height: 50%;
                 width: 100%;
-                transition: height var(--art-transition-duration) ease;
+                transition: height var(--art-transition-duration) var(--art-ease-standard);
                 background-color: var(--art-progress-color);
 
                 .art-progress-hover {
@@ -63,7 +63,7 @@
                     height: var(--art-indicator-size);
                     transform: scale(var(--art-indicator-scale));
                     margin-left: calc(var(--art-indicator-size) / -2);
-                    transition: transform var(--art-transition-duration) ease;
+                    transition: transform var(--art-transition-duration) var(--art-ease-standard);
 
                     .art-icon {
                         width: 100%;
@@ -86,15 +86,16 @@
                     opacity: 0;
                     position: absolute;
                     z-index: 50;
-                    top: -25px;
+                    top: var(--art-tip-offset);
                     left: 0;
-                    padding: 3px 5px;
+                    padding: var(--art-tip-padding);
                     line-height: 1;
-                    font-size: 12px;
+                    font-size: var(--art-font-size-sm);
                     border-radius: var(--art-border-radius);
                     white-space: nowrap;
                     background-color: var(--art-tip-background);
-                    transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
+                    transition: transform var(--art-transition-duration) var(--art-ease-standard),
+                        opacity var(--art-transition-duration) var(--art-ease-standard);
                 }
             }
 
@@ -112,13 +113,11 @@
             position: absolute;
             bottom: calc(var(--art-bottom-gap) + 10px);
             left: 0;
-            border-radius: var(--art-border-radius);
             pointer-events: none;
-            background-color: var(--art-widget-background);
-            transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
-            box-shadow:
-                0 1px 3px 0 rgb(0 0 0 / 0.2),
-                0 1px 2px -1px rgb(0 0 0 / 0.2);
+            .art-panel-surface();
+            transition: transform var(--art-transition-duration) var(--art-ease-standard),
+                opacity var(--art-transition-duration) var(--art-ease-standard);
+            .art-elevation(medium);
         }
     }
 
@@ -131,9 +130,11 @@
 
 .art-progress-hover {
     .art-bottom .art-progress {
-        .art-control-progress .art-control-progress-inner .art-progress-tip, .art-control-thumbnails {
+
+        .art-control-progress .art-control-progress-inner .art-progress-tip,
+        .art-control-thumbnails {
             transform: scale(1);
             opacity: 1;
         }
     }
-}
+}

packages/artplayer/src/style/selector.less

@@ -9,16 +9,12 @@
         align-items: center;
         text-align: center;
         position: absolute;
-        border-radius: var(--art-border-radius);
         overflow-y: auto;
         overflow-x: hidden;
-        opacity: 0;
-        transform: translateY(10px);
-        pointer-events: none;
         bottom: var(--art-control-height);
         max-height: var(--art-selector-max-height);
-        background-color: var(--art-widget-background);
-        transition: all var(--art-transition-duration) ease;
+        .art-panel-surface();
+        .art-flyout-hidden();
 
         .art-selector-item {
             .art-center();
@@ -28,7 +24,7 @@
             line-height: 1;
 
             &:hover {
-                background-color: rgba(255, 255, 255, 0.1);
+                background-color: var(--art-surface-hover-color);
             }
 
             &:hover,
@@ -40,9 +36,7 @@
 
     &:hover {
         .art-selector-list {
-            opacity: 1;
-            transform: translateY(0);
-            pointer-events: auto;
+            .art-flyout-visible();
         }
     }
-}
+}

packages/artplayer/src/style/setting.less

@@ -7,12 +7,11 @@
         left: auto;
         overflow-y: auto;
         overflow-x: hidden;
-        border-radius: var(--art-border-radius);
         max-height: var(--art-settings-max-height);
         right: var(--art-padding);
         bottom: var(--art-control-height);
-        transition: all var(--art-transition-duration) ease;
-        background-color: var(--art-widget-background);
+        transition: all var(--art-transition-duration) var(--art-ease-standard);
+        .art-panel-surface();
 
         .art-setting-panel {
             display: none;
@@ -23,17 +22,10 @@
             }
 
             .art-setting-item {
-                display: flex;
+                .art-menu-item-base(0, var(--art-space-xxs));
                 justify-content: space-between;
                 align-items: center;
-                padding: 0 5px;
-                cursor: pointer;
                 overflow: hidden;
-                transition: background-color var(--art-transition-duration) ease;
-
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.1);
-                }
 
                 &.art-current {
                     color: var(--art-theme);
@@ -41,7 +33,7 @@
 
                 .art-icon-check {
                     visibility: hidden;
-                    height: 15px;
+                    height: var(--art-icon-small-size);
                 }
 
                 &.art-current .art-icon-check {
@@ -51,7 +43,7 @@
                 .art-setting-item-left {
                     .art-center();
                     flex-shrink: 0;
-                    gap: 5px;
+                    gap: var(--art-space-xxs);
 
                     .art-setting-item-left-icon {
                         .art-center();
@@ -62,12 +54,12 @@
 
                 .art-setting-item-right {
                     .art-center();
-                    gap: 5px;
-                    font-size: 12px;
+                    gap: var(--art-space-xxs);
+                    font-size: var(--art-font-size-sm);
 
                     .art-setting-item-right-tooltip {
                         white-space: nowrap;
-                        color: rgba(255, 255, 255, 0.5);
+                        color: var(--art-surface-muted-color);
                     }
 
                     .art-setting-item-right-icon {
@@ -81,13 +73,13 @@
                         width: 80px;
                         outline: none;
                         appearance: none;
-                        background-color: rgba(255, 255, 255, 0.2);
+                        background-color: var(--art-surface-range-color);
                     }
                 }
             }
 
             .art-setting-item-back {
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                border-bottom: 1px solid var(--art-surface-border-color);
             }
         }
     }

packages/artplayer/src/style/subtitle.less

@@ -11,7 +11,7 @@
         gap: var(--art-subtitle-gap);
         bottom: var(--art-subtitle-bottom);
         font-size: var(--art-subtitle-font-size);
-        transition: bottom var(--art-transition-duration) ease;
+        transition: bottom var(--art-transition-duration) var(--art-ease-standard);
         text-shadow:
             var(--art-subtitle-border) 1px 0 1px,
             var(--art-subtitle-border) 0 1px 1px,
@@ -34,4 +34,4 @@
             bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
         }
     }
-}
+}

packages/artplayer/src/style/variables.less

@@ -2,15 +2,28 @@
     --art-theme: #f00;
     --art-font-color: #fff;
     --art-background-color: #000;
+    --art-font-size-sm: 12px;
     --art-text-shadow-color: rgba(0, 0, 0, 0.5);
     --art-transition-duration: 0.2s;
+    --art-ease-standard: ease;
     --art-padding: 10px;
     --art-border-radius: 3px;
+    --art-mobile-padding: 10px;
+    --art-mobile-radius: 3px;
+    --art-radius-sm: 3px;
+    --art-space-xxs: 5px;
+    --art-space-xs: 10px;
+    --art-surface-hover-color: rgba(255, 255, 255, 0.1);
+    --art-surface-border-color: rgba(255, 255, 255, 0.1);
+    --art-surface-muted-color: rgba(255, 255, 255, 0.5);
+    --art-surface-range-color: rgba(255, 255, 255, 0.2);
     --art-progress-height: 6px;
     --art-progress-color: rgba(255, 255, 255, 0.25);
     --art-progress-top-gap: 8px;
     --art-hover-color: rgba(255, 255, 255, 0.25);
     --art-loaded-color: rgba(255, 255, 255, 0.25);
+    --art-tip-padding: 3px 5px;
+    --art-tip-offset: -25px;
     --art-state-size: 80px;
     --art-state-opacity: 0.8;
     --art-bottom-height: 100px;
@@ -22,6 +35,7 @@
     --art-control-opacity: 0.75;
     --art-control-icon-size: 36px;
     --art-control-icon-scale: 1.1;
+    --art-touch-hit-size: var(--art-control-height);
     --art-volume-height: 120px;
     --art-volume-handle-size: 14px;
     --art-lock-size: 36px;
@@ -32,6 +46,7 @@
     --art-settings-max-height: 300px;
     --art-selector-max-height: 300px;
     --art-contextmenus-min-width: 250px;
+    --art-contextmenu-padding-x: 15px;
     --art-subtitle-font-size: 20px;
     --art-subtitle-gap: 5px;
     --art-subtitle-bottom: 15px;
@@ -42,4 +57,11 @@
     --art-scrollbar-background: rgba(255, 255, 255, 0.25);
     --art-scrollbar-background-hover: rgba(255, 255, 255, 0.5);
     --art-mini-progress-height: 2px;
+    --art-shadow-low: 0 1px 2px 0 rgb(0 0 0 / 0.12);
+    --art-shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
+    --art-shadow-high: 0 4px 10px 0 rgb(0 0 0 / 0.25);
+    --art-shadow-elevated: var(--art-shadow-medium);
+    --art-icon-small-size: 15px;
+    --art-overlay-dim: rgba(0, 0, 0, 0.25);
+    --art-overlay-strong: rgba(0, 0, 0, 0.5);
 }

packages/artplayer/src/style/video.less

@@ -1,4 +1,4 @@
 .art-video {
     .art-full(10);
     cursor: pointer;
-}
+}

packages/artplayer/src/style/volume.less

@@ -7,27 +7,23 @@
         left: 0;
         right: 0;
         padding: 0 5px;
-        font-size: 12px;
+        .art-text-muted(12px);
         text-align: center;
         cursor: default;
-        opacity: 0;
-        transform: translateY(10px);
-        pointer-events: none;
         bottom: var(--art-control-height);
         width: var(--art-control-height);
         height: var(--art-volume-height);
-        transition: all var(--art-transition-duration) ease;
+        .art-flyout-hidden();
 
         .art-volume-inner {
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 10px;
+            gap: var(--art-space-xs);
             height: 100%;
             width: 100%;
-            padding: 10px 0 12px;
-            border-radius: var(--art-border-radius);
-            background-color: var(--art-widget-background);
+            padding: var(--art-space-xs) 0 12px;
+            .art-panel-surface();
 
             .art-volume-slider {
                 flex: 1;
@@ -44,7 +40,7 @@
                     width: 2px;
                     border-radius: var(--art-border-radius);
                     overflow: hidden;
-                    background-color: rgba(255, 255, 255, 0.25);
+                    background-color: var(--art-hover-color);
 
                     .art-volume-loaded {
                         .art-full(0);
@@ -61,7 +57,7 @@
                     transform: scale(1);
                     border-radius: 100%;
                     background-color: var(--art-theme);
-                    transition: transform var(--art-transition-duration) ease;
+                    transition: transform var(--art-transition-duration) var(--art-ease-standard);
                 }
 
                 &:active {
@@ -75,9 +71,7 @@
 
     &:hover {
         .art-volume-panel {
-            opacity: 1;
-            transform: translateY(0);
-            pointer-events: auto;
+            .art-flyout-visible();
         }
     }
-}
+}

packages/artplayer/types/cssVar.d.ts

@@ -2,15 +2,28 @@ export interface CssVar {
   '--art-theme': string
   '--art-font-color': string
   '--art-background-color': string
+  '--art-font-size-sm': string
   '--art-text-shadow-color': string
   '--art-transition-duration': string
+  '--art-ease-standard': string
   '--art-padding': string
   '--art-border-radius': string
+  '--art-mobile-padding': string
+  '--art-mobile-radius': string
+  '--art-radius-sm': string
+  '--art-space-xxs': string
+  '--art-space-xs': string
+  '--art-surface-hover-color': string
+  '--art-surface-border-color': string
+  '--art-surface-muted-color': string
+  '--art-surface-range-color': string
   '--art-progress-height': string
   '--art-progress-color': string
   '--art-progress-top-gap': string
   '--art-hover-color': string
   '--art-loaded-color': string
+  '--art-tip-padding': string
+  '--art-tip-offset': string
   '--art-state-size': string
   '--art-state-opacity': number
   '--art-bottom-height': string
@@ -22,6 +35,7 @@ export interface CssVar {
   '--art-control-opacity': number
   '--art-control-icon-size': string
   '--art-control-icon-scale': number
+  '--art-touch-hit-size': string
   '--art-volume-height': string
   '--art-volume-handle-size': string
   '--art-lock-size': string
@@ -32,6 +46,7 @@ export interface CssVar {
   '--art-settings-max-height': string
   '--art-selector-max-height': string
   '--art-contextmenus-min-width': string
+  '--art-contextmenu-padding-x': string
   '--art-subtitle-font-size': string
   '--art-subtitle-gap': string
   '--art-subtitle-bottom': string
@@ -42,4 +57,11 @@ export interface CssVar {
   '--art-scrollbar-background': string
   '--art-scrollbar-background-hover': string
   '--art-mini-progress-height': string
+  '--art-shadow-low': string
+  '--art-shadow-medium': string
+  '--art-shadow-high': string
+  '--art-shadow-elevated': string
+  '--art-icon-small-size': string
+  '--art-overlay-dim': string
+  '--art-overlay-strong': string
 }