自定义播放控件

public/css/style.css

@@ -561,6 +561,7 @@ header p {
     height: 100%;
     object-fit: contain;
     outline: none;
+    cursor: pointer;
 }
 
 .player-overlay {
@@ -607,6 +608,139 @@ header p {
     font-weight: 600;
 }
 
+.custom-controls {
+    margin-top: 0.9rem;
+    padding: 0.9rem 1rem;
+    border-radius: 14px;
+    border: 1px solid var(--panel-border);
+    background: rgba(15, 23, 42, 0.72);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: wrap;
+    opacity: 1;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.custom-controls.controls-faded,
+.custom-seek-container.controls-faded {
+    opacity: 0;
+    transform: translateY(8px);
+    pointer-events: none;
+}
+
+.controls-left,
+.controls-right {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.playback-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.8rem;
+    border-radius: 999px;
+    background: rgba(15, 23, 42, 0.86);
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    color: #e2e8f0;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.status-dot {
+    width: 0.7rem;
+    height: 0.7rem;
+    border-radius: 50%;
+    background: #f59e0b;
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
+}
+
+.playback-status.playing .status-dot {
+    background: #22c55e;
+    animation: statusPulse 1.8s ease-in-out infinite;
+}
+
+.playback-status.paused .status-dot {
+    background: #f59e0b;
+}
+
+.playback-status.seeking .status-dot {
+    background: #38bdf8;
+    animation: statusPulse 1.1s ease-in-out infinite;
+}
+
+@keyframes statusPulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
+    50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
+}
+
+.control-btn {
+    appearance: none;
+    border: 1px solid rgba(148, 163, 184, 0.24);
+    background: rgba(30, 41, 59, 0.9);
+    color: #f8fafc;
+    border-radius: 999px;
+    padding: 0.65rem 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+
+.control-btn:hover {
+    transform: translateY(-1px);
+    background: rgba(51, 65, 85, 0.95);
+    border-color: rgba(96, 165, 250, 0.45);
+}
+
+.control-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.volume-control {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    min-width: 180px;
+}
+
+.volume-slider {
+    width: 140px;
+    accent-color: #60a5fa;
+    cursor: pointer;
+}
+
+.volume-value {
+    min-width: 3.5rem;
+    color: rgba(226, 232, 240, 0.88);
+    font-size: 0.9rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.speed-control {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.55rem;
+    color: rgba(226, 232, 240, 0.88);
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.speed-select {
+    border-radius: 999px;
+    border: 1px solid rgba(148, 163, 184, 0.24);
+    background: rgba(30, 41, 59, 0.9);
+    color: #f8fafc;
+    padding: 0.55rem 0.85rem;
+    outline: none;
+    cursor: pointer;
+}
+
 .progress-info {
     width: 100%;
     margin-top: 1rem;
@@ -800,4 +934,32 @@ header p {
     .player-section {
         order: 1;
     }
-}
+
+    .custom-controls {
+        align-items: stretch;
+    }
+
+    .controls-left,
+    .controls-right {
+        width: 100%;
+    }
+
+    .controls-right {
+        justify-content: flex-end;
+    }
+
+    .playback-status,
+    .speed-control {
+        width: 100%;
+    }
+
+    .volume-control {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .volume-slider {
+        flex: 1;
+        width: auto;
+    }
+}