From 75a586a47b39783eb2972aa59938d2d8a13082f5 Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sat, 16 May 2026 19:17:05 +0200
Subject: [PATCH] style(editor): add stylesheet for editor shell + Prism tokens
 + popup

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>
---
 l4d2web/l4d2web/static/css/editor.css | 82 +++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 l4d2web/l4d2web/static/css/editor.css

diff --git a/l4d2web/l4d2web/static/css/editor.css b/l4d2web/l4d2web/static/css/editor.css
new file mode 100644
index 0000000..6d323f1
--- /dev/null
+++ b/l4d2web/l4d2web/static/css/editor.css
@@ -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;
+}