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.

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();
         }
     }
-}
+}