moritz/lazyflat
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

ui: switch to white/light-blue summer palette

Browse source 
Replace the dark theme with a light/airy look: sky-blue gradient bg,
white cards with soft blue borders, sunny gradient brand mark, pastel
status chips, and readable slate tones.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Moritz 2026-04-21 10:20:39 +02:00
parent 27ab7dc1dc
commit e663386a19
4 changed files with 83 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

75
web/templates/base.html
View file

@ -8,21 +8,66 @@
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
<style>
html { color-scheme: dark; }
body { background: #0b0d12; color: #e6e8ee; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif; }
.card { background: #121521; border: 1px solid #1e2335; border-radius: 12px; }
.btn { border-radius: 8px; padding: 0.4rem 0.9rem; font-weight: 500; transition: background 0.15s; }
.btn-primary { background: #5b8def; color: white; }
.btn-primary:hover { background: #4a7ce0; }
.btn-danger { background: #e14a56; color: white; }
.btn-danger:hover { background: #c63c48; }
.btn-ghost { background: #1e2335; color: #e6e8ee; }
.btn-ghost:hover { background: #2a3048; }
.chip { padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; }
.chip-ok { background: #1a3a2a; color: #7bd88f; border: 1px solid #2d5a3f; }
.chip-warn { background: #3a2a1a; color: #f5b26b; border: 1px solid #5a432d; }
.chip-bad { background: #3a1a1f; color: #e14a56; border: 1px solid #5a2d33; }
.chip-info { background: #1a253a; color: #7ca7ea; border: 1px solid #2d3f5a; }
:root {
--bg-from: #e4f0fb;
--bg-to: #f7fbfe;
--surface: #ffffff;
--border: #d8e6f3;
--text: #10253f;
--muted: #667d98;
--primary: #2f8ae0;
--primary-hover: #1f74c8;
--danger: #e05a6a;
--danger-hover: #c44a59;
--ghost: #eaf2fb;
--ghost-hover: #d5e5f4;
--accent: #fbd76b;
}
html { color-scheme: light; }
body {
background: linear-gradient(180deg, var(--bg-from) 0%, var(--bg-to) 100%);
background-attachment: fixed;
color: var(--text);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(16, 37, 63, 0.04);
}
.border-soft { border-color: var(--border) !important; }
.divide-soft > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
.btn { border-radius: 9px; padding: 0.45rem 0.95rem; font-weight: 500; transition: background 0.15s, box-shadow 0.15s, transform 0.05s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 1px 2px rgba(47, 138, 224, 0.25); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-ghost { background: var(--ghost); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--ghost-hover); }
.input {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.55rem 0.8rem;
width: 100%;
color: var(--text);
transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 138, 224, 0.18); }
.chip { padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; display: inline-block; }
.chip-ok { background: #e4f6ec; color: #1f8a4a; border: 1px solid #b7e4c7; }
.chip-warn { background: #fff4dd; color: #a36a1f; border: 1px solid #f5d48b; }
.chip-bad { background: #fde6e9; color: #b8404e; border: 1px solid #f5b5bf; }
.chip-info { background: #e3effc; color: #1f5f99; border: 1px solid #b6d4f0; }
.brand-dot {
width: 2rem; height: 2rem; border-radius: 10px;
background: linear-gradient(135deg, #66b7f2 0%, #2f8ae0 60%, #fbd76b 100%);
box-shadow: 0 1px 4px rgba(47, 138, 224, 0.35);
}
a { color: var(--primary); }
a:hover { text-decoration: underline; }
</style>
</head>
<body class="min-h-screen">