diff --git a/webui/index.html b/webui/index.html index 0f4c8a17..1ed7833f 100644 --- a/webui/index.html +++ b/webui/index.html @@ -195,7 +195,9 @@ - + @@ -3302,6 +3304,7 @@
diff --git a/webui/static/script.js b/webui/static/script.js index 355b6537..da462dab 100644 --- a/webui/static/script.js +++ b/webui/static/script.js @@ -34568,11 +34568,24 @@ async function searchImportAlbum() { `).join(''); + // Show clear button + document.getElementById('import-album-clear-btn').classList.remove('hidden'); } catch (err) { grid.innerHTML = `
Error: ${err.message}
`; } } +function clearImportAlbumSearch() { + document.getElementById('import-album-search-input').value = ''; + document.getElementById('import-album-results').innerHTML = ''; + document.getElementById('import-album-clear-btn').classList.add('hidden'); + // Re-show suggestions + const sugGrid = document.getElementById('import-suggestions-grid'); + if (sugGrid && sugGrid.children.length > 0) { + document.getElementById('import-suggestions-section').classList.remove('hidden'); + } +} + async function selectImportAlbum(albumId) { // Show match section, hide search document.getElementById('import-album-search-section').classList.add('hidden'); @@ -34652,9 +34665,10 @@ function resetImportAlbumSearch() { } // Refresh suggestions since files may have changed loadImportSuggestions(); - // Clear search results + // Clear search results and hide clear button document.getElementById('import-album-results').innerHTML = ''; document.getElementById('import-album-search-input').value = ''; + document.getElementById('import-album-clear-btn').classList.add('hidden'); } async function processImportAlbum() { diff --git a/webui/static/style.css b/webui/static/style.css index 556c299b..7c4dedd1 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -21791,11 +21791,54 @@ body { /* ============================= */ .import-button { - background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important; - color: #fff !important; + position: relative; + width: 44px; + height: 44px; + background: linear-gradient(135deg, + rgba(124, 58, 237, 0.12) 0%, + rgba(99, 39, 196, 0.18) 100%); + backdrop-filter: blur(20px) saturate(1.4); + -webkit-backdrop-filter: blur(20px) saturate(1.4); + border: 1.5px solid rgba(124, 58, 237, 0.25); + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 4px 16px rgba(124, 58, 237, 0.2), + 0 2px 8px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.08); + padding: 0; } .import-button:hover { - background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%) !important; + background: linear-gradient(135deg, + rgba(124, 58, 237, 0.18) 0%, + rgba(99, 39, 196, 0.25) 100%); + border-color: rgba(124, 58, 237, 0.4); + transform: scale(1.05); + box-shadow: + 0 6px 20px rgba(124, 58, 237, 0.3), + 0 3px 12px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.12); +} +.import-button:active { + transform: scale(0.95); + box-shadow: + 0 2px 8px rgba(124, 58, 237, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.06); +} +.import-logo { + width: 22px; + height: 22px; + object-fit: contain; + opacity: 0.85; + transition: opacity 0.3s ease; + filter: invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); +} +.import-button:hover .import-logo { + opacity: 1; } /* Modal container — matches wishlist/playlist modal vibe */ @@ -21988,6 +22031,29 @@ body { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(29, 185, 84, 0.3); } +.import-clear-btn { + width: 40px; + height: 40px; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.06); + color: rgba(255, 255, 255, 0.5); + font-size: 14px; + cursor: pointer; + transition: all 0.3s ease; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; +} +.import-clear-btn:hover { + background: rgba(239, 68, 68, 0.15); + border-color: rgba(239, 68, 68, 0.3); + color: #ef4444; +} +.import-clear-btn.hidden { + display: none; +} /* Album grid */ .import-album-grid {