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

refactor(css): consolidate monospace stack into --font-mono token

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mwiegand 2026-05-17 19:00:11 +02:00
parent 81ba4ac83a
commit 25016b0ff6
No known key found for this signature in database
4 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
l4d2web/l4d2web/static/css/components.css
View file

@ -61,7 +61,7 @@ textarea {
} }
textarea { textarea {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: var(--font-mono);
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.5; line-height: 1.5;
resize: vertical; resize: vertical;
@ -214,7 +214,7 @@ dialog.modal::backdrop {
margin: 0; margin: 0;
display: grid; display: grid;
gap: var(--space-xs); gap: var(--space-xs);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-family: var(--font-mono);
font-size: 0.875rem; font-size: 0.875rem;
} }
@ -348,7 +348,7 @@ dialog.modal::backdrop {
.overlay-picker-handle { .overlay-picker-handle {
color: var(--color-muted); color: var(--color-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: var(--font-mono);
letter-spacing: -0.1em; letter-spacing: -0.1em;
} }
@ -516,7 +516,7 @@ button.danger-outline:hover {
border: var(--line); border: var(--line);
border-bottom: none; border-bottom: none;
border-radius: var(--radius-s) var(--radius-s) 0 0; 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; font-size: 0.875rem;
line-height: 1.5; line-height: 1.5;
white-space: pre; white-space: pre;
@ -579,7 +579,7 @@ button.danger-outline:hover {
.files-row-root > .files-row-root-label { .files-row-root > .files-row-root-label {
color: var(--color-muted); color: var(--color-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: var(--font-mono);
} }
.files-root-children { .files-root-children {
@ -672,7 +672,7 @@ div.modal.modal-wide {
.files-editor-field input, .files-editor-field input,
.files-editor-field textarea { .files-editor-field textarea {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: var(--font-mono);
font-size: 0.875rem; font-size: 0.875rem;
} }
@ -684,7 +684,7 @@ div.modal.modal-wide {
} }
.files-editor-path { .files-editor-path {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: var(--font-mono);
font-size: 0.95rem; font-size: 0.95rem;
margin: 0; margin: 0;
} }
@ -702,7 +702,7 @@ div.modal.modal-wide {
} }
.files-editor-rename-hint code { .files-editor-rename-hint code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: var(--font-mono);
} }
.files-editor-binary { .files-editor-binary {
@ -779,7 +779,7 @@ div.modal.modal-wide {
} }
.files-conflict-path { .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. */ /* Floating uploads panel — bottom-right of the page. */
@ -829,7 +829,7 @@ div.modal.modal-wide {
} }
.files-uploads-row-name { .files-uploads-row-name {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: var(--font-mono);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -942,7 +942,7 @@ div.modal.modal-wide {
color: var(--color-log-text); color: var(--color-log-text);
border-radius: var(--radius-s); border-radius: var(--radius-s);
padding: var(--space-m); padding: var(--space-m);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family: var(--font-mono);
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.4; line-height: 1.4;
margin-bottom: var(--space-m); margin-bottom: var(--space-m);
@ -988,7 +988,7 @@ div.modal.modal-wide {
} }
.console-prompt-glyph { .console-prompt-glyph {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family: var(--font-mono);
font-weight: 600; font-weight: 600;
color: var(--color-primary); color: var(--color-primary);
flex-shrink: 0; flex-shrink: 0;
@ -1002,7 +1002,7 @@ div.modal.modal-wide {
.console-spinner { .console-spinner {
display: none; display: none;
color: var(--color-muted); color: var(--color-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family: var(--font-mono);
flex-shrink: 0; flex-shrink: 0;
} }

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

@ -12,7 +12,7 @@
color: var(--cm-fg, #e0e0e0); color: var(--cm-fg, #e0e0e0);
border: 1px solid var(--color-border, #444); border: 1px solid var(--color-border, #444);
border-radius: 4px; border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-family: var(--font-mono);
font-size: 13px; font-size: 13px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
} }

2
l4d2web/l4d2web/static/css/logs.css
View file

@ -6,7 +6,7 @@
color: var(--color-log-text); color: var(--color-log-text);
border-radius: var(--radius-s); border-radius: var(--radius-s);
padding: var(--space-m); padding: var(--space-m);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family: var(--font-mono);
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.4; line-height: 1.4;
white-space: pre-wrap; white-space: pre-wrap;

2
l4d2web/l4d2web/static/css/tokens.css
View file

@ -26,6 +26,8 @@
--radius-s: var(--radius-base); --radius-s: var(--radius-base);
--radius-m: calc(var(--radius-base) * 2); --radius-m: calc(var(--radius-base) * 2);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--line: 1px solid var(--color-border); --line: 1px solid var(--color-border);
--line-soft: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent); --line-soft: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);