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

feat(l4d2-web): add neutral shell and theme tokens

Browse source
This commit is contained in:
mwiegand 2026-05-06 12:06:23 +02:00
parent 98872727a7
commit 881b6635f9
No known key found for this signature in database
7 changed files with 158 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
.panel,
.card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-4);
margin-bottom: var(--space-4);
box-shadow: 0 8px 20px #0F766E12;
background: var(--color-surface);
border: var(--line);
border-radius: var(--radius-m);
padding: var(--space-l);
margin-bottom: var(--space-l);
}
.table {
@ -15,8 +15,8 @@
.table th,
.table td {
text-align: left;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
padding: var(--space-s) var(--space-m);
border-bottom: var(--line);
}
.muted {
@ -25,7 +25,7 @@
.stack {
display: grid;
gap: var(--space-3);
gap: var(--space-m);
}
input,
@ -36,10 +36,27 @@ textarea {
}
button {
background: var(--color-link);
background: var(--color-primary);
border: none;
border-radius: 8px;
border-radius: var(--radius-s);
color: #fff;
padding: var(--space-2) var(--space-4);
padding: var(--space-s) var(--space-l);
cursor: pointer;
}
button.danger {
background: var(--color-danger);
}
.link-button {
background: none;
border: none;
color: var(--color-link);
padding: 0;
text-decoration: underline;
cursor: pointer;
}
.inline-form {
display: inline;
}

21
l4d2web/static/css/layout.css
View file

@ -4,35 +4,42 @@
body {
margin: 0;
font-family: "Segoe UI", "Helvetica Neue", sans-serif;
background: radial-gradient(circle at top right, #DDEFEA, #F3F7F6 45%);
font-family: system-ui, -apple-system, sans-serif;
background: var(--color-bg);
color: var(--color-text);
}
.site-header {
background: #FFFFFFD9;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
border-bottom: var(--line);
position: sticky;
top: 0;
backdrop-filter: blur(6px);
}
.site-header-inner {
max-width: 960px;
margin: 0 auto;
padding: var(--space-4);
padding: var(--space-l);
display: flex;
justify-content: space-between;
align-items: center;
}
.primary-nav,
.account-nav {
display: flex;
gap: var(--space-l);
align-items: center;
}
.brand {
font-weight: 700;
text-decoration: none;
margin-right: var(--space-l);
}
.container {
max-width: 960px;
margin: 0 auto;
padding: var(--space-6) var(--space-4) var(--space-6);
padding: var(--space-2xl) var(--space-l);
}

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

@ -1,10 +1,13 @@
.log-stream {
min-height: 180px;
max-height: 360px;
max-height: 480px;
overflow: auto;
background: #0A1412;
color: #CCE9E1;
border-radius: 8px;
padding: var(--space-3);
font-family: "SFMono-Regular", Menlo, Consolas, monospace;
background: var(--color-log-bg);
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-size: 0.875rem;
line-height: 1.4;
white-space: pre-wrap;
}

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

@ -1,15 +1,49 @@
:root {
--color-link: #0F766E;
--color-bg: #F3F7F6;
--color-text: #11201D;
--color-card: #FFFFFF;
--color-border: #D4E4DF;
--color-muted: #4A6A63;
--radius: 10px;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--color-bg: #f4f4f5;
--color-surface: #ffffff;
--color-surface-muted: #f8fafc;
--color-text: #18181b;
--color-muted: #60646c;
--color-border: #d4d4d8;
--color-link: #1d4ed8;
--color-primary: #1d4ed8;
--color-danger: #b42318;
--color-warning: #a15c07;
--color-success: #067647;
--color-focus: #2563eb;
--color-log-bg: #111827;
--color-log-text: #e5e7eb;
--space-base: 0.25rem;
--space-xs: var(--space-base);
--space-s: calc(var(--space-base) * 2);
--space-m: calc(var(--space-base) * 3);
--space-l: calc(var(--space-base) * 4);
--space-xl: calc(var(--space-base) * 6);
--space-2xl: calc(var(--space-base) * 8);
--radius-base: 0.25rem;
--radius-s: var(--radius-base);
--radius-m: calc(var(--radius-base) * 2);
--line: 1px solid var(--color-border);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #18181b;
--color-surface: #27272a;
--color-surface-muted: #1f1f23;
--color-text: #f4f4f5;
--color-muted: #a1a1aa;
--color-border: #3f3f46;
--color-link: #93c5fd;
--color-primary: #93c5fd;
--color-danger: #fca5a5;
--color-warning: #fcd34d;
--color-success: #86efac;
--color-focus: #bfdbfe;
}
}
a {

17
l4d2web/templates/base.html
View file

@ -13,11 +13,22 @@
<body>
<header class="site-header">
<div class="site-header-inner">
<nav class="primary-nav" aria-label="Main navigation">
<a class="brand" href="/dashboard">left4me</a>
<nav>
<a href="/dashboard">Dashboard</a>
<a href="/admin/overlays">Overlays</a>
<a href="/servers">servers</a>
<a href="/blueprints">blueprints</a>
<a href="/overlays">overlays</a>
</nav>
{% if g.user %}
<nav class="account-nav" aria-label="Account navigation">
{% if g.user.admin %}<a href="/admin">admin</a>{% endif %}
<span class="muted">{{ g.user.username }}</span>
<form method="post" action="/logout" class="inline-form">
<input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
<button class="link-button" type="submit">logout</button>
</form>
</nav>
{% endif %}
</div>
</header>
<main class="container">

22
l4d2web/templates/dashboard.html
View file

@ -3,26 +3,8 @@
{% block title %}Dashboard | left4me{% endblock %}
{% block content %}
<section class="card">
<section class="panel">
<h1>Dashboard</h1>
<p class="muted">Status refresh every {{ refresh_seconds }}s.</p>
<table class="table">
<thead>
<tr><th>Name</th><th>Port</th><th>Desired</th><th>Actual</th><th></th></tr>
</thead>
<tbody>
{% for server in servers %}
<tr>
<td>{{ server.name }}</td>
<td>{{ server.port }}</td>
<td>{{ server.desired_state }}</td>
<td>{{ server.actual_state }}</td>
<td><a href="/servers/{{ server.id }}">View</a></td>
</tr>
{% else %}
<tr><td colspan="5" class="muted">No servers yet.</td></tr>
{% endfor %}
</tbody>
</table>
<p class="muted">Use the navigation to manage servers, blueprints, and overlays.</p>
</section>
{% endblock %}

46
l4d2web/tests/test_pages.py
View file

@ -1,4 +1,5 @@
import pytest
from pathlib import Path
from l4d2web.app import create_app
from l4d2web.auth import hash_password
@ -59,11 +60,52 @@ def user_client_and_other_blueprint(tmp_path, monkeypatch):
return client, blueprint_id
def test_dashboard_renders_server_and_status(auth_client_with_server) -> None:
def test_dashboard_is_simple_landing_page(auth_client_with_server) -> None:
response = auth_client_with_server.get("/dashboard")
text = response.get_data(as_text=True)
assert response.status_code == 200
assert "alpha" in text
assert "Dashboard" in text
assert "Use the navigation to manage servers, blueprints, and overlays." in text
assert "alpha" not in text
def test_shell_nav_uses_main_sections(auth_client_with_server) -> None:
response = auth_client_with_server.get("/dashboard")
text = response.get_data(as_text=True)
assert 'href="/dashboard"' in text
assert 'href="/servers"' in text
assert 'href="/blueprints"' in text
assert 'href="/overlays"' in text
assert 'action="/logout"' in text
assert "csrf_token" in text
def test_css_tokens_define_neutral_light_and_dark_theme() -> None:
css = Path("l4d2web/static/css/tokens.css").read_text()
for token in [
"--color-bg",
"--color-surface",
"--color-text",
"--color-muted",
"--color-border",
"--color-link",
"--space-base",
"--space-xs",
"--space-s",
"--space-m",
"--space-l",
"--space-xl",
"--space-2xl",
"--radius-s",
"--radius-m",
"--line",
]:
assert token in css
assert "prefers-color-scheme: dark" in css
assert "radial-gradient" not in Path("l4d2web/static/css/layout.css").read_text()
def test_blueprint_page_private_visibility(user_client_and_other_blueprint) -> None: