diff --git a/templates/user_mindmap.html b/templates/user_mindmap.html index 59eb6e0..06c8274 100644 --- a/templates/user_mindmap.html +++ b/templates/user_mindmap.html @@ -229,6 +229,87 @@ gap: 0.5rem; } + /* Suchergebnisse Container */ + .search-results-container { + position: absolute; + top: 5rem; + left: 1rem; + width: 350px; + max-height: calc(100vh - 16rem); + overflow-y: auto; + border-radius: 1rem; + opacity: 0; + transform: translateY(-10px); + pointer-events: none; + transition: all 0.3s ease; + z-index: 100; + } + + .search-results-container.visible { + opacity: 1; + transform: translateY(0); + pointer-events: all; + } + + body.dark .search-results-container { + background-color: rgba(15, 23, 42, 0.95); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + } + + body:not(.dark) .search-results-container { + background-color: rgba(255, 255, 255, 0.95); + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + color: #1e293b; + } + + /* Suchergebnis-Item */ + .search-result-item { + padding: 0.75rem; + border-bottom: 1px solid rgba(127, 127, 127, 0.2); + cursor: pointer; + transition: all 0.2s ease; + } + + .search-result-item:last-child { + border-bottom: none; + } + + body.dark .search-result-item:hover { + background-color: rgba(255, 255, 255, 0.05); + } + + body:not(.dark) .search-result-item:hover { + background-color: rgba(0, 0, 0, 0.05); + } + + .search-result-title { + font-weight: 600; + margin-bottom: 0.25rem; + display: flex; + align-items: center; + } + + .search-result-color { + width: 0.75rem; + height: 0.75rem; + border-radius: 50%; + margin-right: 0.5rem; + display: inline-block; + } + + .search-result-desc { + font-size: 0.85rem; + opacity: 0.8; + } + + .search-result-source { + font-size: 0.75rem; + opacity: 0.6; + margin-top: 0.25rem; + } + body.dark .menu-item:hover { background-color: rgba(255, 255, 255, 0.1); }