left4me/l4d2web/static/css/tokens.css
mwiegand 3c4bd6880a
refactor(l4d2-web): detail-page UI — single panel, soft border, footer Delete
- Detail panels: softer (color-mix --line-soft) border. h2 sub-section
  spacing inside a single outer panel. admin and job_detail collapse to
  one panel each.
- Color tokens: --color-button-primary / --color-button-danger stay
  saturated in dark mode so white text on filled buttons stays readable.
- Site header: transparent, no full-width bar; aligned with panel-content
  width. No more sticky.
- Page-level Delete: low-contrast outline button at the page footer
  (left side, justify-content flex-start). Save buttons no longer
  full-width (.stack > button { justify-self: end }).
- form-actions-inline helper for right-aligned button rows.
- New service: l4d2web.services.timeago.humanize_delta — used by the
  upcoming server / overlay live-status partials.
- Server route: POST /servers/<id> renames the server (mirrors the
  overlay update pattern, returns 409 on per-user duplicate).
- Overlay route: POST /overlays/<id>/script handles `action` form value
  — `save_build` (default) or `save_reset_build` (wipes overlay dir
  before queuing build). Redirect lands on /overlays/<id> instead of
  the job page so users see the live status.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-09 01:26:57 +02:00

59 lines
1.6 KiB
CSS

:root {
--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: #f8fafc;
--color-log-text: #18181b;
--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);
--line-soft: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
/* Filled buttons stay saturated in both themes — white text needs a deep
background to read. Don't redefine these in the dark-mode block. */
--color-button-primary: #1d4ed8;
--color-button-danger: #b42318;
}
@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;
--color-log-bg: #111827;
--color-log-text: #e5e7eb;
}
}
a {
color: var(--color-link);
}