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

style(editor): add stylesheet for editor shell + Prism tokens + popup

Browse source 
Defines .editor-shell, .editor-code, .editor-popup. Reuses tokens.css
variables where present so the editor matches the site palette.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mwiegand 2026-05-16 19:17:05 +02:00
parent db1a255223
commit 75a586a47b
No known key found for this signature in database
1 changed files with 82 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
l4d2web/l4d2web/static/css/editor.css Normal file
View file

@ -0,0 +1,82 @@
/* Code editor widget — paired with editor.js. Mounted as a sibling of
any <textarea data-editor-language>. The textarea is hidden but stays
in the DOM for form submission and JS .value reads. */
/* Token swaps from spec to match tokens.css:
--color-fg → --color-text (text color token)
--color-bg-input → --color-surface (textarea uses --color-surface)
--radius-input → --radius-s (closest available radius token)
--color-bg-popover → --color-surface (surface layer for overlays)
*/
.editor-shell {
position: relative;
width: 100%;
}
.editor-code {
display: block;
width: 100%;
min-height: 6em;
padding: 0.5em 0.75em;
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
font-size: 0.95em;
line-height: 1.45;
color: var(--color-text, #e6e6e6);
background: var(--color-surface, #1b1b1b);
border: 1px solid var(--color-border, #333);
border-radius: var(--radius-s, 4px);
white-space: pre-wrap;
word-break: break-word;
overflow: auto;
outline: none;
caret-color: var(--color-caret, #fff);
}
.editor-code:focus {
border-color: var(--color-focus, #6ab0ff);
}
/* Prism token colors — override defaults to match the site palette. */
.editor-code .token.comment { color: var(--color-muted, #888); font-style: italic; }
.editor-code .token.string { color: var(--color-string, #c2e886); }
.editor-code .token.keyword { color: var(--color-keyword, #ff7b72); font-weight: 600; }
.editor-code .token.number { color: var(--color-number, #f0b86e); }
.editor-code .token.operator { color: var(--color-muted, #888); }
.editor-code .token.identifier { color: inherit; }
/* Autocomplete popup. */
.editor-popup {
position: absolute;
z-index: 1000;
max-height: 14em;
overflow-y: auto;
min-width: 14em;
margin: 0;
padding: 0.25em 0;
list-style: none;
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
font-size: 0.9em;
background: var(--color-surface, #222);
border: 1px solid var(--color-border, #333);
border-radius: var(--radius-s, 4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.editor-popup-item {
padding: 0.25em 0.75em;
cursor: pointer;
white-space: nowrap;
}
.editor-popup-item.is-active {
background: var(--color-bg-popover-active, #2d4f7c);
}
.editor-popup-item .name { color: var(--color-text, #e6e6e6); }
.editor-popup-item .desc { color: var(--color-muted, #888); margin-left: 0.5em; }
/* Files-editor language dropdown. */
.editor-language-select {
margin-left: 0.5em;
}