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>
55 lines
1.3 KiB
CSS
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;
|
|
}
|