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 {