left4me/l4d2web/l4d2web/static/css/console-autocomplete.css
mwiegand 7aa9b0b49c
fix(console): use existing CSS tokens for autocomplete dropdown
Replace phantom token refs (--border-strong, --fg-muted, --font-mono)
with the project's real tokens (--color-border, --color-muted) or a
plain font stack where no project-wide token exists.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-17 17:54:44 +02:00

55 lines
1.3 KiB
CSS

/* Console autocomplete dropdown.
Positioned absolutely under the console input by JS; visuals match
the editor's tooltip styling (var(--cm-*) tokens defined in
tokens.css and editor.css). */
.console-autocomplete-dropdown {
position: absolute;
z-index: 1000;
max-height: calc(8 * 2.4rem);
overflow-y: auto;
background-color: var(--cm-bg, #1e1e1e);
color: var(--cm-fg, #e0e0e0);
border: 1px solid var(--color-border, #444);
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.console-autocomplete-row {
display: flex;
align-items: baseline;
gap: 0.75em;
padding: 0.3em 0.6em;
cursor: pointer;
white-space: nowrap;
}
.console-autocomplete-row[aria-selected="true"] {
background-color: var(--cm-selection, #264f78);
}
.console-autocomplete-row:hover {
background-color: var(--cm-selection, #264f78);
}
.console-autocomplete-name {
font-weight: 600;
}
.console-autocomplete-row.kind-cvar .console-autocomplete-name {
color: var(--cm-keyword, #569cd6);
}
.console-autocomplete-row.kind-command .console-autocomplete-name {
color: var(--cm-string, #ce9178);
}
.console-autocomplete-desc {
color: var(--color-muted, #888);
font-size: 0.9em;
overflow: hidden;
text-overflow: ellipsis;
max-width: 40em;
}