feat(console): add autocomplete dropdown stylesheet

This commit is contained in:
mwiegand 2026-05-17 17:52:02 +02:00
parent cdb6a87960
commit 5a85153c4f
No known key found for this signature in database

View file

@ -0,0 +1,55 @@
/* 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(--border-strong, #444);
border-radius: 4px;
font-family: var(--font-mono, 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(--fg-muted, #888);
font-size: 0.9em;
overflow: hidden;
text-overflow: ellipsis;
max-width: 40em;
}