marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Hinzufügen von CSS-Stilen für die Suchergebnisse und deren Darstellung in der Benutzer-Mindmap-Vorlage zur Verbesserung der Benutzeroberfläche

Browse Source
This commit is contained in:
Till Tomczak
2025-05-10 23:05:44 +02:00
parent 4bf046c657
commit e7b3374c53
1 changed files with 81 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
templates/user_mindmap.html
View File

@@ -229,6 +229,87 @@
gap: 0.5rem; 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 { body.dark .menu-item:hover {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }