oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-voice-player/index.scss

@@ -0,0 +1,937 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+/* voice-player component variables */
+$-voice-player-bg: var(--oxy-voice-player-bg, resultColor(135deg, $-color-theme, 'dark' 'light', #4d80f0 #764ba2, 0% 100%)) !default;
+$-voice-player-bg-dark: var(--oxy-voice-player-bg-dark, linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)) !default;
+$-voice-player-radius: var(--oxy-voice-player-radius, 24rpx) !default;
+$-voice-player-shadow: var(--oxy-voice-player-shadow, 0 20rpx 60rpx rgba(0, 0, 0, 0.15)) !default;
+$-voice-player-playing-shadow: var(--oxy-voice-player-playing-shadow, 0 20rpx 60rpx rgba(102, 126, 234, 0.3)) !default;
+
+$-voice-player-cover-size: var(--oxy-voice-player-cover-size, 500rpx) !default;
+$-voice-player-cover-shadow: var(--oxy-voice-player-cover-shadow, 0 8rpx 32rpx rgba(0, 0, 0, 0.3), 0 0 0 8rpx rgba(255, 255, 255, 0.1), inset 0 0 40rpx rgba(0, 0, 0, 0.2)) !default;
+$-voice-player-cover-rotating-shadow: var(--oxy-voice-player-cover-rotating-shadow, 0 12rpx 48rpx rgba(0, 0, 0, 0.4), 0 0 0 8rpx rgba(255, 255, 255, 0.15), inset 0 0 40rpx rgba(0, 0, 0, 0.2), 0 0 60rpx rgba(102, 126, 234, 0.3)) !default;
+$-voice-player-cover-center-size: var(--oxy-voice-player-cover-center-size, 80rpx) !default;
+$-voice-player-cover-center-dot-size: var(--oxy-voice-player-cover-center-dot-size, 24rpx) !default;
+$-voice-player-cover-center-dot-bg: var(--oxy-voice-player-cover-center-dot-bg, rgba(102, 126, 234, 0.8)) !default;
+$-voice-player-cover-center-bg: var(--oxy-voice-player-cover-center-bg, linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%)) !default;
+$-voice-player-cover-center-shadow: var(--oxy-voice-player-cover-center-shadow, inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2), 0 2rpx 8rpx rgba(0, 0, 0, 0.15)) !default;
+$-voice-player-cover-center-dot-shadow: var(--oxy-voice-player-cover-center-dot-shadow, inset 0 1rpx 3rpx rgba(0, 0, 0, 0.3)) !default;
+
+$-voice-player-title-fs: var(--oxy-voice-player-title-fs, 40rpx) !default;
+$-voice-player-title-color: var(--oxy-voice-player-title-color, #fff) !default;
+$-voice-player-title-shadow: var(--oxy-voice-player-title-shadow, 0 2rpx 8rpx rgba(0, 0, 0, 0.2)) !default;
+$-voice-player-artist-fs: var(--oxy-voice-player-artist-fs, 30rpx) !default;
+$-voice-player-artist-color: var(--oxy-voice-player-artist-color, rgba(255, 255, 255, 0.9)) !default;
+$-voice-player-artist-shadow: var(--oxy-voice-player-artist-shadow, 0 1rpx 4rpx rgba(0, 0, 0, 0.15)) !default;
+$-voice-player-album-fs: var(--oxy-voice-player-album-fs, 26rpx) !default;
+$-voice-player-album-color: var(--oxy-voice-player-album-color, rgba(255, 255, 255, 0.7)) !default;
+
+$-voice-player-lyric-height: var(--oxy-voice-player-lyric-height, 300rpx) !default;
+$-voice-player-lyric-expanded-height: var(--oxy-voice-player-lyric-expanded-height, 600rpx) !default;
+$-voice-player-lyric-fs: var(--oxy-voice-player-lyric-fs, 32rpx) !default;
+$-voice-player-lyric-color: var(--oxy-voice-player-lyric-color, rgba(255, 255, 255, 0.7)) !default;
+$-voice-player-lyric-active-fs: var(--oxy-voice-player-lyric-active-fs, 36rpx) !default;
+$-voice-player-lyric-active-color: var(--oxy-voice-player-lyric-active-color, #fff) !default;
+$-voice-player-lyric-active-shadow: var(--oxy-voice-player-lyric-active-shadow, 0 2rpx 8rpx rgba(0, 0, 0, 0.3)) !default;
+$-voice-player-lyric-translation-fs: var(--oxy-voice-player-lyric-translation-fs, 26rpx) !default;
+$-voice-player-lyric-translation-color: var(--oxy-voice-player-lyric-translation-color, rgba(255, 255, 255, 0.5)) !default;
+$-voice-player-lyric-translation-active-color: var(--oxy-voice-player-lyric-translation-active-color, rgba(255, 255, 255, 0.9)) !default;
+
+$-voice-player-time-fs: var(--oxy-voice-player-time-fs, 26rpx) !default;
+$-voice-player-time-color: var(--oxy-voice-player-time-color, rgba(255, 255, 255, 0.9)) !default;
+$-voice-player-time-shadow: var(--oxy-voice-player-time-shadow, 0 1rpx 2rpx rgba(0, 0, 0, 0.1)) !default;
+
+$-voice-player-progress-height: var(--oxy-voice-player-progress-height, 4rpx) !default;
+$-voice-player-progress-radius: var(--oxy-voice-player-progress-radius, 2rpx) !default;
+$-voice-player-progress-bg: var(--oxy-voice-player-progress-bg, rgba(255, 255, 255, 0.15)) !default;
+$-voice-player-progress-buffered-bg: var(--oxy-voice-player-progress-buffered-bg, rgba(255, 255, 255, 0.25)) !default;
+$-voice-player-progress-filled-bg: var(--oxy-voice-player-progress-filled-bg, linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%)) !default;
+$-voice-player-progress-shadow: var(--oxy-voice-player-progress-shadow, 0 0 8rpx rgba(255, 255, 255, 0.3)) !default;
+$-voice-player-progress-dot-size: var(--oxy-voice-player-progress-dot-size, 24rpx) !default;
+$-voice-player-progress-dot-bg: var(--oxy-voice-player-progress-dot-bg, #fff) !default;
+$-voice-player-progress-dot-shadow: var(--oxy-voice-player-progress-dot-shadow, 0 2rpx 8rpx rgba(0, 0, 0, 0.2), 0 0 0 4rpx rgba(255, 255, 255, 0.2)) !default;
+$-voice-player-progress-dot-active-shadow: var(--oxy-voice-player-progress-dot-active-shadow, 0 4rpx 16rpx rgba(0, 0, 0, 0.3), 0 0 0 6rpx rgba(255, 255, 255, 0.15)) !default;
+
+$-voice-player-control-btn-size: var(--oxy-voice-player-control-btn-size, 80rpx) !default;
+$-voice-player-control-btn-bg: var(--oxy-voice-player-control-btn-bg, rgba(255, 255, 255, 0.2)) !default;
+$-voice-player-control-btn-shadow: var(--oxy-voice-player-control-btn-shadow, 0 4rpx 16rpx rgba(0, 0, 0, 0.1)) !default;
+$-voice-player-control-btn-active-shadow: var(--oxy-voice-player-control-btn-active-shadow, 0 2rpx 8rpx rgba(0, 0, 0, 0.15)) !default;
+$-voice-player-control-btn-play-size: var(--oxy-voice-player-control-btn-play-size, 100rpx) !default;
+$-voice-player-control-btn-play-bg: var(--oxy-voice-player-control-btn-play-bg, resultColor(135deg, $-color-theme, 'dark' 'light', #667eea #764ba2, 0% 100%)) !default;
+$-voice-player-control-icon-fs: var(--oxy-voice-player-control-icon-fs, 60rpx) !default;
+$-voice-player-control-icon-color: var(--oxy-voice-player-control-icon-color, #fff) !default;
+$-voice-player-control-icon-shadow: var(--oxy-voice-player-control-icon-shadow, 0 2rpx 4rpx rgba(0, 0, 0, 0.2)) !default;
+$-voice-player-control-btn-icon-fs: var(--oxy-voice-player-control-btn-icon-fs, 80rpx) !default;
+$-voice-player-control-btn-icon-color: var(--oxy-voice-player-control-btn-icon-color, #fff) !default;
+$-voice-player-control-btn-icon-shadow: var(--oxy-voice-player-control-btn-icon-shadow, 0 2rpx 4rpx rgba(0, 0, 0, 0.2)) !default;
+
+$-voice-player-extra-btn-size: var(--oxy-voice-player-extra-btn-size, 72rpx) !default;
+$-voice-player-extra-btn-bg: var(--oxy-voice-player-extra-btn-bg, rgba(255, 255, 255, 0.2)) !default;
+$-voice-player-extra-btn-shadow: var(--oxy-voice-player-extra-btn-shadow, 0 2rpx 8rpx rgba(0, 0, 0, 0.1)) !default;
+$-voice-player-extra-btn-active-shadow: var(--oxy-voice-player-extra-btn-active-shadow, 0 1rpx 4rpx rgba(0, 0, 0, 0.15)) !default;
+$-voice-player-extra-btn-icon-fs: var(--oxy-voice-player-extra-btn-icon-fs, 40rpx) !default;
+$-voice-player-extra-btn-icon-color: var(--oxy-voice-player-extra-btn-icon-color, #fff) !default;
+$-voice-player-extra-btn-icon-shadow: var(--oxy-voice-player-extra-btn-icon-shadow, 0 1rpx 2rpx rgba(0, 0, 0, 0.2)) !default;
+$-voice-player-extra-btn-favorite-color: var(--oxy-voice-player-extra-btn-favorite-color, #ff4757) !default;
+
+$-voice-player-volume-panel-bg: var(--oxy-voice-player-volume-panel-bg, rgba(255, 255, 255, 0.15)) !default;
+$-voice-player-volume-panel-radius: var(--oxy-voice-player-volume-panel-radius, 16rpx) !default;
+$-voice-player-volume-panel-shadow: var(--oxy-voice-player-volume-panel-shadow, 0 4rpx 16rpx rgba(0, 0, 0, 0.1)) !default;
+$-voice-player-volume-track-height: var(--oxy-voice-player-volume-track-height, 3rpx) !default;
+$-voice-player-volume-track-radius: var(--oxy-voice-player-volume-track-radius, 2rpx) !default;
+$-voice-player-volume-track-bg: var(--oxy-voice-player-volume-track-bg, rgba(255, 255, 255, 0.15)) !default;
+$-voice-player-volume-filled-bg: var(--oxy-voice-player-volume-filled-bg, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%)) !default;
+$-voice-player-volume-shadow: var(--oxy-voice-player-volume-shadow, 0 0 6rpx rgba(255, 255, 255, 0.3)) !default;
+$-voice-player-volume-dot-size: var(--oxy-voice-player-volume-dot-size, 20rpx) !default;
+$-voice-player-volume-dot-bg: var(--oxy-voice-player-volume-dot-bg, #fff) !default;
+$-voice-player-volume-dot-shadow: var(--oxy-voice-player-volume-dot-shadow, 0 2rpx 6rpx rgba(0, 0, 0, 0.15), 0 0 0 3rpx rgba(255, 255, 255, 0.2)) !default;
+$-voice-player-volume-text-fs: var(--oxy-voice-player-volume-text-fs, 26rpx) !default;
+$-voice-player-volume-text-color: var(--oxy-voice-player-volume-text-color, rgba(255, 255, 255, 0.9)) !default;
+$-voice-player-volume-text-shadow: var(--oxy-voice-player-volume-text-shadow, 0 1rpx 2rpx rgba(0, 0, 0, 0.1)) !default;
+
+$-voice-player-mini-padding: var(--oxy-voice-player-mini-padding, 20rpx 24rpx) !default;
+$-voice-player-mini-bg: var(--oxy-voice-player-mini-bg, linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%)) !default;
+$-voice-player-mini-shadow: var(--oxy-voice-player-mini-shadow, 0 -4rpx 20rpx rgba(0, 0, 0, 0.1)) !default;
+$-voice-player-mini-cover-size: var(--oxy-voice-player-mini-cover-size, 100rpx) !default;
+$-voice-player-mini-cover-shadow: var(--oxy-voice-player-mini-cover-shadow, 0 4rpx 12rpx rgba(0, 0, 0, 0.25), 0 0 0 4rpx rgba(255, 255, 255, 0.1)) !default;
+$-voice-player-mini-cover-center-size: var(--oxy-voice-player-mini-cover-center-size, 32rpx) !default;
+$-voice-player-mini-cover-center-dot-size: var(--oxy-voice-player-mini-cover-center-dot-size, 12rpx) !default;
+$-voice-player-mini-cover-center-bg: var(--oxy-voice-player-mini-cover-center-bg, linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%)) !default;
+$-voice-player-mini-cover-center-shadow: var(--oxy-voice-player-mini-cover-center-shadow, inset 0 1rpx 4rpx rgba(0, 0, 0, 0.2), 0 1rpx 4rpx rgba(0, 0, 0, 0.15)) !default;
+$-voice-player-mini-cover-center-dot-shadow: var(--oxy-voice-player-mini-cover-center-dot-shadow, inset 0 1rpx 2rpx rgba(0, 0, 0, 0.3)) !default;
+$-voice-player-mini-title-fs: var(--oxy-voice-player-mini-title-fs, 28rpx) !default;
+$-voice-player-mini-title-color: var(--oxy-voice-player-mini-title-color, #fff) !default;
+$-voice-player-mini-title-shadow: var(--oxy-voice-player-mini-title-shadow, 0 1rpx 2rpx rgba(0, 0, 0, 0.1)) !default;
+$-voice-player-mini-artist-fs: var(--oxy-voice-player-mini-artist-fs, 24rpx) !default;
+$-voice-player-mini-artist-color: var(--oxy-voice-player-mini-artist-color, rgba(255, 255, 255, 0.8)) !default;
+$-voice-player-mini-control-btn-size: var(--oxy-voice-player-mini-control-btn-size, 56rpx) !default;
+$-voice-player-mini-control-btn-play-size: var(--oxy-voice-player-mini-control-btn-play-size, 64rpx) !default;
+$-voice-player-mini-control-btn-play-bg: var(--oxy-voice-player-mini-control-btn-play-bg, rgba(255, 255, 255, 0.3)) !default;
+$-voice-player-mini-control-btn-play-shadow: var(--oxy-voice-player-mini-control-btn-play-shadow, 0 4rpx 12rpx rgba(0, 0, 0, 0.2)) !default;
+$-voice-player-mini-btn-icon-fs: var(--oxy-voice-player-mini-btn-icon-fs, 32rpx) !default;
+$-voice-player-mini-btn-icon-color: var(--oxy-voice-player-mini-btn-icon-color, #fff) !default;
+$-voice-player-mini-btn-icon-shadow: var(--oxy-voice-player-mini-btn-icon-shadow, 0 1rpx 2rpx rgba(0, 0, 0, 0.2)) !default;
+$-voice-player-mini-progress-height: var(--oxy-voice-player-mini-progress-height, 3rpx) !default;
+$-voice-player-mini-progress-bg: var(--oxy-voice-player-mini-progress-bg, rgba(255, 255, 255, 0.12)) !default;
+$-voice-player-mini-progress-bar-bg: var(--oxy-voice-player-mini-progress-bar-bg, linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%)) !default;
+$-voice-player-mini-progress-shadow: var(--oxy-voice-player-mini-progress-shadow, 0 0 8rpx rgba(255, 255, 255, 0.4)) !default;
+$-voice-player-mini-progress-dot-size: var(--oxy-voice-player-mini-progress-dot-size, 12rpx) !default;
+$-voice-player-mini-progress-dot-bg: var(--oxy-voice-player-mini-progress-dot-bg, #fff) !default;
+$-voice-player-mini-progress-dot-shadow: var(--oxy-voice-player-mini-progress-dot-shadow, 0 2rpx 6rpx rgba(0, 0, 0, 0.2), 0 0 0 2rpx rgba(255, 255, 255, 0.3)) !default;
+
+$-voice-player-simple-padding: var(--oxy-voice-player-simple-padding, 16rpx 20rpx) !default;
+$-voice-player-simple-bg: var(--oxy-voice-player-simple-bg, transparent) !default;
+$-voice-player-simple-radius: var(--oxy-voice-player-simple-radius, 12rpx) !default;
+$-voice-player-simple-time-fs: var(--oxy-voice-player-simple-time-fs, 24rpx) !default;
+$-voice-player-simple-time-color: var(--oxy-voice-player-simple-time-color, inherit) !default;
+$-voice-player-simple-progress-height: var(--oxy-voice-player-simple-progress-height, 4rpx) !default;
+$-voice-player-simple-progress-radius: var(--oxy-voice-player-simple-progress-radius, 2rpx) !default;
+$-voice-player-simple-progress-bg: var(--oxy-voice-player-simple-progress-bg, rgba(0, 0, 0, 0.1)) !default;
+$-voice-player-simple-progress-filled-bg: var(--oxy-voice-player-simple-progress-filled-bg, linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)) !default;
+$-voice-player-simple-progress-shadow: var(--oxy-voice-player-simple-progress-shadow, 0 0 6rpx rgba(0, 0, 0, 0.2)) !default;
+$-voice-player-simple-progress-dot-size: var(--oxy-voice-player-simple-progress-dot-size, 16rpx) !default;
+$-voice-player-simple-progress-dot-bg: var(--oxy-voice-player-simple-progress-dot-bg, #fff) !default;
+$-voice-player-simple-progress-dot-shadow: var(--oxy-voice-player-simple-progress-dot-shadow, 0 2rpx 6rpx rgba(0, 0, 0, 0.2), 0 0 0 3rpx rgba(0, 0, 0, 0.1)) !default;
+
+@include b(voice-player) {
+  background: $-voice-player-bg;
+  border-radius: $-voice-player-radius;
+  overflow: hidden;
+  position: relative;
+  box-shadow: $-voice-player-shadow;
+  transition: all 0.3s ease;
+  --oxy-slider-handle-radius: 18rpx;
+  --oxy-slider-axie-height: 6rpx;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: $-voice-player-bg;
+    z-index: -1;
+  }
+
+  @include when(theme-dark) {
+    background: $-voice-player-bg-dark;
+    color: $-voice-player-title-color;
+
+    &::before {
+      background: $-voice-player-bg-dark;
+    }
+  }
+
+  @include when(mode-mini) {
+    padding: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: $-voice-player-bg;
+
+    &::before {
+      background: $-voice-player-bg;
+      border-radius: 0;
+    }
+  }
+
+  @include when(mode-simple) {
+    background: transparent;
+    box-shadow: none;
+
+    &::before {
+      background: transparent;
+    }
+    @include when(playing) {
+      box-shadow: none;
+    }
+  }
+
+  @include when(mode-hideView) {
+    display: none;
+  }
+
+  @include when(playing) {
+    box-shadow: $-voice-player-playing-shadow;
+  }
+
+  @include e(normal-mode-container) {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    min-height: 200rpx;
+    padding: 40rpx;
+  }
+
+  @include e(cover-section) {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 40rpx;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 500rpx;
+    position: relative;
+    background: transparent;
+
+    @include when(hidden) {
+      opacity: 0;
+      transform: translateX(-100%);
+      max-height: 0;
+      margin-bottom: 0;
+      overflow: hidden;
+      pointer-events: none;
+      background: transparent;
+    }
+  }
+
+  @include e(cover-container) {
+    width: $-voice-player-cover-size;
+    height: $-voice-player-cover-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  @include e(cover-disc) {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+    box-shadow: $-voice-player-cover-shadow;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transform-origin: center center;
+
+    @include when(rotating) {
+      animation: rotateDisc 20s linear infinite;
+      box-shadow: $-voice-player-cover-rotating-shadow;
+    }
+
+    @include when(paused) {
+      animation-play-state: paused;
+    }
+  }
+
+  @include e(cover-image) {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    display: block;
+    object-fit: cover;
+  }
+
+  @include e(cover-center) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: $-voice-player-cover-center-size;
+    height: $-voice-player-cover-center-size;
+    border-radius: 50%;
+    background: $-voice-player-cover-center-bg;
+    box-shadow: $-voice-player-cover-center-shadow;
+    z-index: 2;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: $-voice-player-cover-center-dot-size;
+      height: $-voice-player-cover-center-dot-size;
+      border-radius: 50%;
+      background: $-voice-player-cover-center-dot-bg;
+      box-shadow: $-voice-player-cover-center-dot-shadow;
+    }
+  }
+
+  @include e(info) {
+    text-align: center;
+    margin-bottom: 40rpx;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 200rpx;
+    background: transparent;
+
+    @include when(hidden) {
+      opacity: 0;
+      transform: translateX(-100%);
+      max-height: 0;
+      margin-bottom: 0;
+      overflow: hidden;
+      pointer-events: none;
+      background: transparent;
+    }
+  }
+
+  @include e(song-title) {
+    display: block;
+    font-size: $-voice-player-title-fs;
+    font-weight: 600;
+    color: $-voice-player-title-color;
+    margin-bottom: 20rpx;
+    text-shadow: $-voice-player-title-shadow;
+    letter-spacing: 1rpx;
+  }
+
+  @include e(song-artist) {
+    display: block;
+    font-size: $-voice-player-artist-fs;
+    color: $-voice-player-artist-color;
+    margin-bottom: 12rpx;
+    text-shadow: $-voice-player-artist-shadow;
+  }
+
+  @include e(song-album) {
+    display: block;
+    font-size: $-voice-player-album-fs;
+    color: $-voice-player-album-color;
+  }
+
+  @include e(lyrics) {
+    height: $-voice-player-lyric-height;
+    margin-bottom: 32rpx;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    background: transparent;
+    overflow: hidden;
+
+    @include when(expanded) {
+      height: $-voice-player-lyric-expanded-height;
+      margin-bottom: 40rpx;
+      background: transparent;
+    }
+  }
+
+  @include e(lyrics-container) {
+    height: 100%;
+    overflow-y: auto;
+    padding: 20rpx 0;
+    background: transparent;
+  }
+
+  @include e(lyric-line) {
+    padding: 16rpx 32rpx;
+    text-align: center;
+    transition: all 0.3s ease;
+
+    @include when(active) {
+      .oxy-voice-player__lyric-text {
+        font-size: $-voice-player-lyric-active-fs;
+        font-weight: 600;
+        color: $-voice-player-lyric-active-color;
+        text-shadow: $-voice-player-lyric-active-shadow;
+      }
+
+      .oxy-voice-player__lyric-translation {
+        font-size: $-voice-player-lyric-translation-fs;
+        color: $-voice-player-lyric-translation-active-color;
+        margin-top: 8rpx;
+      }
+    }
+  }
+
+  @include e(lyric-text) {
+    display: block;
+    font-size: $-voice-player-lyric-fs;
+    color: $-voice-player-lyric-color;
+    line-height: 1.6;
+    transition: all 0.3s ease;
+  }
+
+  @include e(lyric-translation) {
+    display: block;
+    font-size: $-voice-player-lyric-translation-fs;
+    color: $-voice-player-lyric-translation-color;
+    line-height: 1.5;
+    margin-top: 8rpx;
+    transition: all 0.3s ease;
+  }
+
+  @include e(progress-section) {
+    margin-bottom: 12rpx;
+  }
+
+  @include e(time-info) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20rpx;
+  }
+
+  @include e(current-time) {
+    font-size: $-voice-player-time-fs;
+    color: $-voice-player-time-color;
+    font-weight: 500;
+    text-shadow: $-voice-player-time-shadow;
+  }
+
+  @include e(total-time) {
+    font-size: $-voice-player-time-fs;
+    color: $-voice-player-time-color;
+    font-weight: 500;
+    text-shadow: $-voice-player-time-shadow;
+  }
+
+  @include e(slider-wrapper) {
+    position: relative;
+    width: 100%;
+    padding: 32rpx 0;
+    // #ifdef H5
+    touch-action: none;
+    // #endif
+  }
+
+  @include e(progress-track) {
+    position: relative;
+    width: 100%;
+    height: $-voice-player-progress-height;
+    background: $-voice-player-progress-bg;
+    border-radius: $-voice-player-progress-radius;
+    overflow: visible;
+  }
+
+  @include e(progress-buffered) {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 6rpx;
+    background: $-voice-player-progress-buffered-bg;
+    border-radius: $-voice-player-progress-radius;
+    transition: width 0.3s ease;
+    z-index: 1;
+    transform: translateY(-50%);
+  }
+
+  @include e(progress-filled) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: $-voice-player-progress-filled-bg;
+    border-radius: $-voice-player-progress-radius;
+    transition: width 0.1s linear;
+    z-index: 2;
+    box-shadow: $-voice-player-progress-shadow;
+  }
+
+  @include e(progress-dot) {
+    position: absolute;
+    right: -12rpx;
+    top: 50%;
+    transform: translateY(-50%) scale(0.8);
+    width: $-voice-player-progress-dot-size;
+    height: $-voice-player-progress-dot-size;
+    background: $-voice-player-progress-dot-bg;
+    border-radius: 50%;
+    box-shadow: $-voice-player-progress-dot-shadow;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+
+    @include when(dragging) {
+      opacity: 1;
+      transform: translateY(-50%) scale(1.2);
+      box-shadow: $-voice-player-progress-dot-active-shadow;
+    }
+  }
+
+  @include e(progress-slider) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 10;
+    margin: 0;
+  }
+
+  @include e(controls-section) {
+    .oxy-voice-player__main-controls {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 40rpx;
+
+    }
+
+    .oxy-voice-player__extra-controls {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 32rpx;
+      margin-top: 32rpx;
+    }
+  }
+
+  @include e(control-btn) {
+    width: $-voice-player-control-btn-size;
+    height: $-voice-player-control-btn-size;
+    border-radius: 50%;
+    border: none;
+    background: $-voice-player-control-btn-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: $-voice-player-control-btn-shadow;
+
+    &:active {
+      transform: scale(0.9);
+      box-shadow: $-voice-player-control-btn-active-shadow;
+    }
+
+    &.oxy-voice-player--play-btn {
+      width: $-voice-player-control-btn-play-size;
+      height: $-voice-player-control-btn-play-size;
+      background: $-voice-player-control-btn-play-bg;
+
+      &:active {
+        transform: scale(0.92);
+      }
+    }
+  }
+  :deep(.oxy-voice-player__control-icon) {
+    font-size: $-voice-player-control-icon-fs;
+    color: $-voice-player-control-icon-color;
+    text-shadow: $-voice-player-control-icon-shadow;
+  }
+
+  :deep(.oxy-voice-player__btn-icon) {
+    font-size: $-voice-player-control-btn-icon-fs;
+    color: $-voice-player-control-btn-icon-color;
+    text-shadow: $-voice-player-control-btn-icon-shadow;
+  }
+
+  @include e(extra-btn) {
+    width: $-voice-player-extra-btn-size;
+    height: $-voice-player-extra-btn-size;
+    border-radius: 50%;
+    border: none;
+    background: $-voice-player-extra-btn-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: $-voice-player-extra-btn-shadow;
+
+    &:active {
+      transform: scale(0.88);
+      box-shadow: $-voice-player-extra-btn-active-shadow;
+    }
+
+    @include m(favorite-btn) {
+      .oxy-voice-player__extra-btn-icon {
+        color: $-voice-player-extra-btn-icon-color;
+
+        @include when(favorited) {
+          color: $-voice-player-extra-btn-favorite-color;
+        }
+      }
+    }
+  }
+
+  :deep(.oxy-voice-player__extra-btn-icon) {
+    font-size: $-voice-player-extra-btn-icon-fs;
+    color: $-voice-player-extra-btn-icon-color;
+    text-shadow: $-voice-player-extra-btn-icon-shadow;
+  }
+
+  @include e(volume-panel) {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    margin-top: 24rpx;
+    padding: 0 32rpx;
+    background: $-voice-player-volume-panel-bg;
+    border-radius: $-voice-player-volume-panel-radius;
+    box-shadow: $-voice-player-volume-panel-shadow;
+  }
+
+  @include e(volume-slider-wrapper) {
+    flex: 1;
+    position: relative;
+    padding: 28rpx 0;
+  }
+
+  @include e(volume-track) {
+    position: relative;
+    width: 100%;
+    height: $-voice-player-volume-track-height;
+    background: $-voice-player-volume-track-bg;
+    border-radius: $-voice-player-volume-track-radius;
+  }
+
+  @include e(volume-filled) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: $-voice-player-volume-filled-bg;
+    border-radius: $-voice-player-volume-track-radius;
+    transition: width 0.2s ease;
+    box-shadow: $-voice-player-volume-shadow;
+  }
+
+  @include e(volume-dot) {
+    position: absolute;
+    right: -10rpx;
+    top: 50%;
+    transform: translateY(-50%) scale(0.8);
+    width: $-voice-player-volume-dot-size;
+    height: $-voice-player-volume-dot-size;
+    background: $-voice-player-volume-dot-bg;
+    border-radius: 50%;
+    box-shadow: $-voice-player-volume-dot-shadow;
+    opacity: 0;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @include e(volume-slider) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 10;
+  }
+
+  @include e(volume-text) {
+    font-size: $-voice-player-volume-text-fs;
+    color: $-voice-player-volume-text-color;
+    font-weight: 500;
+    min-width: 70rpx;
+    text-align: right;
+    text-shadow: $-voice-player-volume-text-shadow;
+  }
+
+  @include e(mini-player) {
+    display: flex;
+    align-items: center;
+    padding: $-voice-player-mini-padding;
+    background: $-voice-player-mini-bg;
+    position: relative;
+    box-shadow: $-voice-player-mini-shadow;
+    min-width: 0;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @include e(mini-cover) {
+    width: $-voice-player-mini-cover-size;
+    height: $-voice-player-mini-cover-size;
+    min-width: $-voice-player-mini-cover-size;
+    min-height: $-voice-player-mini-cover-size;
+    flex-shrink: 0;
+    margin-right: 16rpx;
+  }
+
+  @include e(mini-cover-disc) {
+    width: $-voice-player-mini-cover-size;
+    height: $-voice-player-mini-cover-size;
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+    box-shadow: $-voice-player-mini-cover-shadow;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    @include when(rotating) {
+      animation: rotateDisc 20s linear infinite;
+    }
+
+    @include when(paused) {
+      animation-play-state: paused;
+    }
+  }
+
+  @include e(mini-cover-image) {
+    width: $-voice-player-mini-cover-size;
+    height: $-voice-player-mini-cover-size;
+    border-radius: 50%;
+    display: block;
+    object-fit: cover;
+  }
+
+  @include e(mini-cover-center) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: $-voice-player-mini-cover-center-size;
+    height: $-voice-player-mini-cover-center-size;
+    border-radius: 50%;
+    background: $-voice-player-mini-cover-center-bg;
+    box-shadow: $-voice-player-mini-cover-center-shadow;
+    z-index: 2;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: $-voice-player-mini-cover-center-dot-size;
+      height: $-voice-player-mini-cover-center-dot-size;
+      border-radius: 50%;
+      background: $-voice-player-cover-center-dot-bg;
+      box-shadow: $-voice-player-mini-cover-center-dot-shadow;
+    }
+  }
+
+  @include e(mini-info) {
+    flex: 1;
+    min-width: 0;
+    margin-right: 16rpx;
+    overflow: hidden;
+  }
+
+  @include e(mini-title) {
+    display: block;
+    font-size: $-voice-player-mini-title-fs;
+    font-weight: 600;
+    color: $-voice-player-mini-title-color;
+    margin-bottom: 8rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-shadow: $-voice-player-mini-title-shadow;
+  }
+
+  @include e(mini-artist) {
+    display: block;
+    font-size: $-voice-player-mini-artist-fs;
+    color: $-voice-player-mini-artist-color;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @include e(mini-controls) {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+  }
+
+  @include e(mini-control-btn) {
+    width: $-voice-player-mini-control-btn-size;
+    height: $-voice-player-mini-control-btn-size;
+    border-radius: 50%;
+    border: none;
+    background: $-voice-player-control-btn-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: $-voice-player-control-btn-shadow;
+
+    &:active {
+      transform: scale(0.9);
+      box-shadow: $-voice-player-control-btn-active-shadow;
+    }
+    &.oxy-voice-player{
+      margin-bottom: 0;
+    }
+
+    @include m(play-btn) {
+      width: $-voice-player-mini-control-btn-play-size;
+      height: $-voice-player-mini-control-btn-play-size;
+      background: $-voice-player-mini-control-btn-play-bg;
+      box-shadow: $-voice-player-mini-control-btn-play-shadow;
+    }
+  }
+
+  :deep(.oxy-voice-player__mini-btn-icon) {
+    font-size: $-voice-player-mini-btn-icon-fs;
+    color: $-voice-player-mini-btn-icon-color;
+    text-shadow: $-voice-player-mini-btn-icon-shadow;
+  }
+
+  @include e(mini-progress) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: $-voice-player-mini-progress-height;
+    background: $-voice-player-mini-progress-bg;
+    overflow: visible;
+  }
+
+  @include e(mini-progress-bar) {
+    height: 100%;
+    background: $-voice-player-mini-progress-bar-bg;
+    transition: width 0.1s linear;
+    box-shadow: $-voice-player-mini-progress-shadow;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: -6rpx;
+      transform: translateY(-50%);
+      width: $-voice-player-mini-progress-dot-size;
+      height: $-voice-player-mini-progress-dot-size;
+      background: $-voice-player-mini-progress-dot-bg;
+      border-radius: 50%;
+      box-shadow: $-voice-player-mini-progress-dot-shadow;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+  }
+
+  @include e(simple-player) {
+    padding: $-voice-player-simple-padding;
+    background: $-voice-player-simple-bg;
+    border-radius: $-voice-player-simple-radius;
+  }
+
+  @include e(simple-time-info) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12rpx;
+  }
+
+  @include e(simple-current-time) {
+    font-size: $-voice-player-simple-time-fs;
+    color: $-voice-player-simple-time-color;
+    font-weight: 500;
+  }
+
+  @include e(simple-total-time) {
+    font-size: $-voice-player-simple-time-fs;
+    color: $-voice-player-simple-time-color;
+    font-weight: 500;
+  }
+
+  @include e(simple-progress-section) {
+    position: relative;
+    width: 100%;
+  }
+
+  @include e(simple-slider-wrapper) {
+    position: relative;
+    width: 100%;
+    padding: 32rpx 0;
+  }
+
+  @include e(simple-progress-track) {
+    position: relative;
+    width: 100%;
+    height: $-voice-player-simple-progress-height;
+    background: $-voice-player-simple-progress-bg;
+    border-radius: $-voice-player-simple-progress-radius;
+    overflow: visible;
+  }
+
+  @include e(simple-progress-filled) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: $-voice-player-simple-progress-filled-bg;
+    border-radius: $-voice-player-simple-progress-radius;
+    transition: width 0.1s linear;
+    z-index: 2;
+    box-shadow: $-voice-player-simple-progress-shadow;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: -8rpx;
+      transform: translateY(-50%);
+      width: $-voice-player-simple-progress-dot-size;
+      height: $-voice-player-simple-progress-dot-size;
+      background: $-voice-player-simple-progress-dot-bg;
+      border-radius: 50%;
+      box-shadow: $-voice-player-simple-progress-dot-shadow;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+  }
+
+  @include e(simple-progress-slider) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 3;
+  }
+}
+
+@keyframes rotateDisc {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 375px) {
+  .oxy-voice-player__cover-container {
+    width: 300rpx;
+    height: 300rpx;
+  }
+
+  .oxy-voice-player__main-controls {
+    gap: 24rpx;
+
+    .oxy-voice-player__control-btn {
+      width: 72rpx;
+      height: 72rpx;
+
+      &.oxy-voice-player--play-btn {
+        width: 96rpx;
+        height: 96rpx;
+      }
+    }
+  }
+}