cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(console): add color legend under console input

Browse source 
Three labelled swatches mirror the dropdown's name colors so users
can decode the cvar/command/sourcemod color scheme without guesswork.
Plain-text caveat next to the sourcemod swatch notes that those
commands are plugin-dependent.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mwiegand 2026-05-17 19:56:54 +02:00
parent 44e82e3c42
commit b45adcd819
No known key found for this signature in database
2 changed files with 34 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
l4d2web/l4d2web/static/css/console-autocomplete.css
View file

@ -50,6 +50,35 @@
color: var(--cm-number, #884488); color: var(--cm-number, #884488);
} }
/* Color legend rendered under the console input, mirroring the
three name colors used in dropdown rows. */
.console-color-legend {
display: flex;
flex-wrap: wrap;
gap: 1.2em;
margin-top: 0.4em;
padding: 0 0.2em;
font-family: var(--font-mono);
font-size: 0.85em;
color: var(--color-muted, #888);
}
.console-color-legend-swatch {
font-weight: 600;
}
.console-color-legend-swatch.swatch-cvar {
color: var(--cm-keyword, #569cd6);
}
.console-color-legend-swatch.swatch-command {
color: var(--cm-string, #ce9178);
}
.console-color-legend-swatch.swatch-sourcemod {
color: var(--cm-number, #884488);
}
.console-autocomplete-desc { .console-autocomplete-desc {
color: var(--color-muted, #888); color: var(--color-muted, #888);
font-size: 0.9em; font-size: 0.9em;

5
l4d2web/l4d2web/templates/server_detail.html
View file

@ -61,6 +61,11 @@
<span class="console-spinner" aria-hidden="true">…</span> <span class="console-spinner" aria-hidden="true">…</span>
<button type="submit">Send</button> <button type="submit">Send</button>
</form> </form>
<div class="console-color-legend" aria-label="Autocomplete color legend">
<span class="console-color-legend-swatch swatch-cvar">cvar</span>
<span class="console-color-legend-swatch swatch-command">command</span>
<span class="console-color-legend-swatch swatch-sourcemod">sm_* (SourceMod — only if the plugin is loaded)</span>
</div>
</section> </section>
<h2 class="section-title">Files</h2> <h2 class="section-title">Files</h2>