added manual match modal for local library

2026-01-03 20:32:27 +01:00
parent 148beb6c5a
commit c5a96d59ff
10 changed files with 398 additions and 34 deletions
--- a/desktop/views/css/profile.css
+++ b/desktop/views/css/profile.css
@@ -704,4 +704,95 @@
    margin-bottom: 1.5rem;
 }

-.hidden { display: none !important; }
+.hidden { display: none !important; }
+
+/* =========================================
+   8. CUSTOM MODAL (Manual Match)
+   ========================================= */
+.custom-modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+    transition: opacity 0.2s;
+}
+
+.custom-modal-overlay.hidden {
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.custom-modal-content {
+    background: var(--color-bg-elevated, #18181b);
+    border: 1px solid var(--border-medium, rgba(255,255,255,0.1));
+    width: 100%;
+    max-width: 500px;
+    border-radius: 16px;
+    box-shadow: var(--shadow-lg);
+    transform: scale(1);
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+    overflow: hidden;
+}
+
+.custom-modal-overlay.hidden .custom-modal-content {
+    transform: scale(0.95);
+}
+
+.modal-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-header h3 { margin: 0; font-size: 1.25rem; }
+
+.close-modal-btn {
+    background: transparent; border: none;
+    color: var(--color-text-muted); font-size: 1.5rem;
+    cursor: pointer; line-height: 1;
+}
+.close-modal-btn:hover { color: white; }
+
+.modal-body { padding: 1.5rem; }
+
+.modal-description {
+    color: var(--color-text-secondary);
+    font-size: 0.9rem; margin-bottom: 1.5rem;
+}
+
+.path-display {
+    background: rgba(0,0,0,0.3);
+    border: 1px solid rgba(255,255,255,0.1);
+    padding: 0.8rem;
+    border-radius: 6px;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 0.85rem;
+    color: #e4e4e7;
+    word-break: break-all;
+    margin-top: 0.5rem;
+    max-height: 100px;
+    overflow-y: auto;
+}
+
+.input-group { margin-bottom: 1.5rem; }
+.input-group label {
+    display: block; font-size: 0.85rem;
+    font-weight: 600; color: var(--color-text-secondary);
+    margin-bottom: 0.5rem;
+}
+
+.modal-footer {
+    padding: 1rem 1.5rem;
+    background: rgba(0,0,0,0.2);
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+}