D4rkst3r/d4rkbot
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Spiel-Auswahl im Server-Tab: eigene Combobox statt nativer datalist

Browse Source 
Die Browser-datalist ließ sich nicht stylen und fiel aus dem Design.
Jetzt eine GameSelect-Combobox im D4RKST3R-Look: filtert Presets beim
Tippen (ID + Label), zeigt Icon-Label plus gamedig-ID, Klick wählt aus,
freie gamedig-IDs bleiben weiterhin möglich.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
D4rkst3r
2026-07-30 02:27:45 +02:00
co-authored by Claude Fable 5
parent 00249f9d8b
commit 3bfa559f2e
2 changed files with 74 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/style.css
+22
View File
@@ -1091,3 +1091,25 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
.dpv-image { max-width: 100%; border-radius: 6px; margin-top: .6rem; display: block; }
.dpv-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.dpv-footer { font-size: .72rem; color: #949ba4; margin-top: .55rem; }
/* ── GameSelect: stylebare Combobox für die Spiel-Auswahl ── */
.gamesel { position: relative; }
.gamesel input { width: 100%; padding-right: 1.8rem; }
.gamesel-caret {
position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
color: var(--muted); cursor: pointer; user-select: none; font-size: .8rem;
}
.gamesel-list {
position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%;
max-height: 16rem; overflow-y: auto;
background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.gamesel-item {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
width: 100%; padding: .45rem .7rem; border: 0; background: none; cursor: pointer;
color: var(--text); font-family: var(--body); font-size: .95rem; text-align: left;
}
.gamesel-item:hover, .gamesel-item.active { background: var(--bg3); color: var(--neon); }
.gamesel-id { color: var(--muted2); font-family: var(--mono); font-size: .75rem; }
.gamesel-item:hover .gamesel-id { color: var(--muted); }