From 25016b0ff6212f0b1e4863d51fd7a462cd2369a4 Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sun, 17 May 2026 19:00:11 +0200
Subject: [PATCH] refactor(css): consolidate monospace stack into --font-mono
 token

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 l4d2web/l4d2web/static/css/components.css     | 26 +++++++++----------
 .../static/css/console-autocomplete.css       |  2 +-
 l4d2web/l4d2web/static/css/logs.css           |  2 +-
 l4d2web/l4d2web/static/css/tokens.css         |  2 ++
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/l4d2web/l4d2web/static/css/components.css b/l4d2web/l4d2web/static/css/components.css
index befe52b..c629fe0 100644
--- a/l4d2web/l4d2web/static/css/components.css
+++ b/l4d2web/l4d2web/static/css/components.css
@@ -61,7 +61,7 @@ textarea {
 }
 
 textarea {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.875rem;
   line-height: 1.5;
   resize: vertical;
@@ -214,7 +214,7 @@ dialog.modal::backdrop {
   margin: 0;
   display: grid;
   gap: var(--space-xs);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 0.875rem;
 }
 
@@ -348,7 +348,7 @@ dialog.modal::backdrop {
 
 .overlay-picker-handle {
   color: var(--color-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   letter-spacing: -0.1em;
 }
 
@@ -516,7 +516,7 @@ button.danger-outline:hover {
   border: var(--line);
   border-bottom: none;
   border-radius: var(--radius-s) var(--radius-s) 0 0;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.875rem;
   line-height: 1.5;
   white-space: pre;
@@ -579,7 +579,7 @@ button.danger-outline:hover {
 
 .files-row-root > .files-row-root-label {
   color: var(--color-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
 }
 
 .files-root-children {
@@ -672,7 +672,7 @@ div.modal.modal-wide {
 
 .files-editor-field input,
 .files-editor-field textarea {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.875rem;
 }
 
@@ -684,7 +684,7 @@ div.modal.modal-wide {
 }
 
 .files-editor-path {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.95rem;
   margin: 0;
 }
@@ -702,7 +702,7 @@ div.modal.modal-wide {
 }
 
 .files-editor-rename-hint code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
 }
 
 .files-editor-binary {
@@ -779,7 +779,7 @@ div.modal.modal-wide {
 }
 
 .files-conflict-path {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
 }
 
 /* Floating uploads panel — bottom-right of the page. */
@@ -829,7 +829,7 @@ div.modal.modal-wide {
 }
 
 .files-uploads-row-name {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -942,7 +942,7 @@ div.modal.modal-wide {
   color: var(--color-log-text);
   border-radius: var(--radius-s);
   padding: var(--space-m);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.875rem;
   line-height: 1.4;
   margin-bottom: var(--space-m);
@@ -988,7 +988,7 @@ div.modal.modal-wide {
 }
 
 .console-prompt-glyph {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   font-weight: 600;
   color: var(--color-primary);
   flex-shrink: 0;
@@ -1002,7 +1002,7 @@ div.modal.modal-wide {
 .console-spinner {
   display: none;
   color: var(--color-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   flex-shrink: 0;
 }
 
diff --git a/l4d2web/l4d2web/static/css/console-autocomplete.css b/l4d2web/l4d2web/static/css/console-autocomplete.css
index 7ad0185..46621c4 100644
--- a/l4d2web/l4d2web/static/css/console-autocomplete.css
+++ b/l4d2web/l4d2web/static/css/console-autocomplete.css
@@ -12,7 +12,7 @@
   color: var(--cm-fg, #e0e0e0);
   border: 1px solid var(--color-border, #444);
   border-radius: 4px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono);
   font-size: 13px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
diff --git a/l4d2web/l4d2web/static/css/logs.css b/l4d2web/l4d2web/static/css/logs.css
index c28274e..0a92b9f 100644
--- a/l4d2web/l4d2web/static/css/logs.css
+++ b/l4d2web/l4d2web/static/css/logs.css
@@ -6,7 +6,7 @@
   color: var(--color-log-text);
   border-radius: var(--radius-s);
   padding: var(--space-m);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.875rem;
   line-height: 1.4;
   white-space: pre-wrap;
diff --git a/l4d2web/l4d2web/static/css/tokens.css b/l4d2web/l4d2web/static/css/tokens.css
index d69823d..2c48305 100644
--- a/l4d2web/l4d2web/static/css/tokens.css
+++ b/l4d2web/l4d2web/static/css/tokens.css
@@ -26,6 +26,8 @@
   --radius-s: var(--radius-base);
   --radius-m: calc(var(--radius-base) * 2);
 
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
   --line: 1px solid var(--color-border);
   --line-soft: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);