diff --git a/index.html b/index.html index d069548..894a637 100644 --- a/index.html +++ b/index.html @@ -194,10 +194,9 @@
Playlist Cover -
-
Playlist
-

-

+
+

+

@@ -94,7 +93,13 @@ export function initializeUIInteractions(player, api) { const index = parseInt(item.dataset.queueIndex); item.addEventListener('click', (e) => { - if (e.target.closest('.track-menu-btn')) return; + const removeBtn = e.target.closest('.queue-remove-btn'); + if (removeBtn) { + e.stopPropagation(); + player.removeFromQueue(index); + renderQueue(); + return; + } player.playAtIndex(index); renderQueue(); }); diff --git a/styles.css b/styles.css index 3972300..3507e0c 100644 --- a/styles.css +++ b/styles.css @@ -1137,7 +1137,6 @@ input:checked + .slider::before { height: 6px; background-color: var(--secondary); border-radius: 3px; - transition: height 0.2s ease; } .progress-bar:hover { @@ -1202,7 +1201,6 @@ input:checked + .slider::before { height: 4px; background-color: var(--secondary); border-radius: 2px; - transition: height 0.2s ease; } .volume-controls .volume-bar:hover { @@ -1515,21 +1513,40 @@ input:checked + .slider::before { cursor: grab; } -.queue-track-item .track-menu-btn { +.queue-track-item .queue-remove-btn { background: transparent; border: none; color: var(--muted-foreground); cursor: pointer; - padding: 4px; - border-radius: 4px; + padding: 0.5rem; + border-radius: var(--radius); transition: all var(--transition); display: flex; align-items: center; justify-content: center; + flex-shrink: 0; + opacity: 0.2; } -.queue-track-item .track-menu-btn:hover { - background-color: var(--muted); +.queue-track-item:hover .queue-remove-btn { + opacity: 1; +} + +@media (hover: none) { + .queue-track-item .queue-remove-btn { + opacity: 1; + } +} + +.queue-track-item .queue-remove-btn:hover { + background-color: var(--secondary); + color: var(--foreground); +} + +.queue-track-item .queue-remove-btn svg { + width: 20px; + height: 20px; +} color: var(--foreground); } @@ -2128,7 +2145,6 @@ input:checked + .slider::before { .main-header { grid-area: header; - padding: var(--spacing-md) var(--spacing-md) 0; margin-bottom: var(--spacing-md); } @@ -2373,7 +2389,7 @@ input:checked + .slider::before { } .queue-track-item { - grid-template-columns: 24px 1fr 40px 28px; + grid-template-columns: 24px 1fr 40px 36px; gap: var(--spacing-sm); padding: var(--spacing-sm); } @@ -2392,7 +2408,7 @@ input:checked + .slider::before { height: 36px; } - .queue-track-item .track-menu-btn { + .queue-track-item .queue-remove-btn { padding: 0.5rem; } @@ -2509,7 +2525,7 @@ input:checked + .slider::before { } .queue-track-item { - grid-template-columns: 20px 1fr 36px 24px; + grid-template-columns: 20px 1fr 36px 32px; gap: 0.375rem; padding: 0.5rem; } @@ -2604,14 +2620,11 @@ input:checked + .slider::before { } @supports (padding-top: env(safe-area-inset-top)) { - .main-header { - padding-top: max(var(--spacing-md), env(safe-area-inset-top)); - } - .now-playing-bar { padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom)); } + .main-content, .sidebar { padding-top: max(1.5rem, env(safe-area-inset-top)); } @@ -2892,19 +2905,6 @@ input:checked + .slider::before { opacity: 0.3; } -#page-playlist .detail-info { - flex: 1; - min-width: 0; -} - -#page-playlist .detail-info .type { - font-size: 0.875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 0.5rem; - color: var(--muted-foreground); -} #playlist-detail-title { font-size: 3rem;