feat(console): add autocomplete dropdown stylesheet
This commit is contained in:
parent
cdb6a87960
commit
5a85153c4f
1 changed files with 55 additions and 0 deletions
55
l4d2web/l4d2web/static/css/console-autocomplete.css
Normal file
55
l4d2web/l4d2web/static/css/console-autocomplete.css
Normal 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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue