From d90aae3d0a1890e7bd90e6804a8e4fb89e036a96 Mon Sep 17 00:00:00 2001
From: zwitschi <zwitschi82@gmail.com>
Date: Tue, 4 Nov 2025 21:23:52 +0100
Subject: [PATCH] style: update CSS variables and styles for improved theming
 and consistency

---
 requirements-dev.txt |   1 -
 static/css/main.css  | 146 ++++++++++++++++++++++++-------------------
 2 files changed, 82 insertions(+), 65 deletions(-)
 delete mode 100644 requirements-dev.txt

diff --git a/requirements-dev.txt b/requirements-dev.txt
deleted file mode 100644
index b3ca909..0000000
--- a/requirements-dev.txt
+++ /dev/null
@@ -1 +0,0 @@
-black
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index b5d4b5d..3b22daa 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,25 +1,29 @@
 :root {
-  --color-background: #f4f5f7;
-  --color-surface: #ffffff;
-  --color-text-primary: #2a1f33;
-  --color-text-secondary: #624769;
-  --color-text-muted: #64748b;
-  --color-text-subtle: #94a3b8;
+  --bg: #0b0f14;
+  --bg-2: #0f141b;
+  --card: #151b23;
+  --text: #e6edf3;
+  --muted: #a9b4c0;
+  --brand: #f1b21a;
+  --brand-2: #f6c648;
+  --brand-3: #f9d475;
+  --accent: #2ba58f;
+  --danger: #d14b4b;
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+  --radius: 14px;
+  --radius-sm: 10px;
+  --container: 1180px;
+  --muted: var(--muted);
+  --color-text-subtle: rgba(169, 180, 192, 0.6);
   --color-text-invert: #ffffff;
   --color-text-dark: #0f172a;
   --color-text-strong: #111827;
-  --color-primary: #5f320d;
-  --color-primary-strong: #7e4c13;
-  --color-primary-stronger: #837c15;
-  --color-accent: #bff838;
-  --color-border: #e2e8f0;
-  --color-border-strong: #cbd5e1;
-  --color-highlight: #eef2ff;
-  --color-panel-shadow: rgba(15, 23, 42, 0.08);
-  --color-panel-shadow-deep: rgba(15, 23, 42, 0.12);
-  --color-surface-alt: #f8fafc;
-  --color-success: #047857;
-  --color-error: #b91c1c;
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-border-strong: rgba(255, 255, 255, 0.12);
+  --color-highlight: rgba(241, 178, 26, 0.08);
+  --color-panel-shadow: rgba(0, 0, 0, 0.25);
+  --color-panel-shadow-deep: rgba(0, 0, 0, 0.35);
+  --color-surface-alt: rgba(21, 27, 35, 0.7);
   --space-2xs: 0.25rem;
   --space-xs: 0.5rem;
   --space-sm: 0.75rem;
@@ -33,15 +37,30 @@
   --font-size-lg: 1.25rem;
   --font-size-xl: 1.5rem;
   --font-size-2xl: 2rem;
-  --panel-radius: 12px;
-  --table-radius: 10px;
+  --panel-radius: var(--radius);
+  --table-radius: var(--radius-sm);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
 }
 
 body {
   margin: 0;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background-color: var(--color-background);
-  color: var(--color-text-primary);
+  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Roboto',
+    Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
+  color: var(--text);
+  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
+  line-height: 1.45;
+}
+
+a {
+  color: var(--brand);
 }
 
 .app-layout {
@@ -51,7 +70,7 @@ body {
 
 .app-sidebar {
   width: 264px;
-  background-color: var(--color-primary);
+  background-color: var(--card);
   color: var(--color-text-invert);
   display: flex;
   flex-direction: column;
@@ -59,6 +78,7 @@ body {
   position: sticky;
   top: 0;
   height: 100vh;
+  border-right: 1px solid var(--color-border);
 }
 
 .sidebar-inner {
@@ -82,11 +102,7 @@ body {
   width: 44px;
   height: 44px;
   border-radius: 12px;
-  background: linear-gradient(
-    0deg,
-    var(--color-primary-stronger),
-    var(--color-accent)
-  );
+  background: linear-gradient(0deg, var(--brand-3), var(--accent));
   color: var(--color-text-invert);
   font-weight: 700;
   font-size: 1.1rem;
@@ -207,7 +223,7 @@ body {
 }
 
 .app-main {
-  background-color: var(--color-background);
+  background-color: var(--bg);
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -240,7 +256,7 @@ body {
 
 .dashboard-subtitle {
   margin: 0.35rem 0 0;
-  color: var(--color-text-muted);
+  color: var(--muted);
 }
 
 .dashboard-actions {
@@ -259,7 +275,7 @@ body {
 
 .page-subtitle {
   margin-top: 0.35rem;
-  color: var(--color-text-muted);
+  color: var(--muted);
   font-size: 0.95rem;
 }
 
@@ -271,13 +287,14 @@ body {
 }
 
 .settings-card {
-  background: var(--color-surface);
-  border-radius: 12px;
+  background: var(--card);
+  border-radius: var(--radius);
   padding: 1.5rem;
-  box-shadow: 0 4px 14px var(--color-panel-shadow);
+  box-shadow: var(--shadow);
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  border: 1px solid var(--color-border);
 }
 
 .settings-card h2 {
@@ -287,7 +304,7 @@ body {
 
 .settings-card p {
   margin: 0;
-  color: var(--color-text-muted);
+  color: var(--muted);
 }
 
 .settings-card-note {
@@ -311,7 +328,7 @@ body {
 
 .color-form-field.is-env-override {
   background: rgba(191, 248, 56, 0.12);
-  border-color: var(--color-accent);
+  border-color: var(--accent);
 }
 
 .color-field-header {
@@ -319,13 +336,13 @@ body {
   justify-content: space-between;
   gap: var(--space-sm);
   font-weight: 600;
-  color: var(--color-text-strong);
-  font-family: "Fira Code", "Consolas", "Courier New", monospace;
+  color: var(--text);
+  font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
   font-size: 0.85rem;
 }
 
 .color-field-default {
-  color: var(--color-text-muted);
+  color: var(--muted);
   font-weight: 500;
 }
 
@@ -337,7 +354,7 @@ body {
 .color-env-flag {
   font-size: 0.78rem;
   font-weight: 600;
-  color: var(--color-accent);
+  color: var(--accent);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -349,7 +366,7 @@ body {
 }
 
 .color-value-input {
-  font-family: "Fira Code", "Consolas", "Courier New", monospace;
+  font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
 }
 
 .color-value-input[disabled] {
@@ -378,7 +395,7 @@ body {
 }
 
 .env-overrides-table code {
-  font-family: "Fira Code", "Consolas", "Courier New", monospace;
+  font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
   font-size: 0.85rem;
 }
 
@@ -391,7 +408,7 @@ body {
   border-radius: 999px;
   font-weight: 600;
   text-decoration: none;
-  background: var(--color-primary);
+  background: var(--brand);
   color: var(--color-text-invert);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
@@ -410,26 +427,27 @@ body {
 }
 
 .metric-card {
-  background: var(--color-surface);
-  border-radius: 12px;
+  background: var(--card);
+  border-radius: var(--radius);
   padding: 1.2rem 1.4rem;
-  box-shadow: 0 4px 14px var(--color-panel-shadow);
+  box-shadow: var(--shadow);
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
+  border: 1px solid var(--color-border);
 }
 
 .metric-label {
   font-size: 0.82rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--color-text-muted);
+  color: var(--muted);
 }
 
 .metric-value {
   font-size: 1.45rem;
   font-weight: 700;
-  color: var(--color-text-dark);
+  color: var(--muted);
 }
 
 .dashboard-charts {
@@ -522,7 +540,7 @@ body {
 }
 
 .list-detail {
-  color: var(--color-text-secondary);
+  color: var(--muted);
   font-size: 0.95rem;
 }
 
@@ -532,7 +550,7 @@ body {
 }
 
 .btn.is-loading::after {
-  content: "";
+  content: '';
   width: 0.85rem;
   height: 0.85rem;
   border: 2px solid rgba(255, 255, 255, 0.6);
@@ -550,7 +568,7 @@ body {
 }
 
 .panel {
-  background-color: var(--color-surface);
+  background-color: var(--card);
   border-radius: var(--panel-radius);
   padding: var(--space-xl);
   box-shadow: 0 2px 8px var(--color-panel-shadow);
@@ -560,7 +578,7 @@ body {
 .panel h2,
 .panel h3 {
   font-weight: 700;
-  color: var(--color-text-dark);
+  color: var(--text);
   margin: 0 0 var(--space-sm);
 }
 
@@ -583,7 +601,7 @@ body {
   flex-direction: column;
   gap: var(--space-sm);
   font-weight: 600;
-  color: var(--color-text-strong);
+  color: var(--text);
 }
 
 .form-grid input,
@@ -598,7 +616,7 @@ body {
 .form-grid input:focus,
 .form-grid textarea:focus,
 .form-grid select:focus {
-  outline: 2px solid var(--color-primary-strong);
+  outline: 2px solid var(--brand-2);
   outline-offset: 1px;
 }
 
@@ -624,13 +642,13 @@ body {
 }
 
 .btn.primary {
-  background-color: var(--color-primary-strong);
+  background-color: var(--brand-2);
   color: var(--color-text-invert);
 }
 
 .btn.primary:hover,
 .btn.primary:focus {
-  background-color: var(--color-primary-stronger);
+  background-color: var(--brand-3);
 }
 
 .result-output {
@@ -638,14 +656,14 @@ body {
   color: var(--color-surface-alt);
   padding: 1rem;
   border-radius: 8px;
-  font-family: "Fira Code", "Consolas", "Courier New", monospace;
+  font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
   overflow-x: auto;
   margin-top: 1.5rem;
 }
 
 .monospace-input {
   width: 100%;
-  font-family: "Fira Code", "Consolas", "Courier New", monospace;
+  font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
   min-height: 120px;
 }
 
@@ -670,7 +688,7 @@ table {
 }
 
 thead {
-  background-color: var(--color-primary);
+  background-color: var(--brand);
   color: var(--color-text-invert);
 }
 
@@ -687,7 +705,7 @@ tbody tr:nth-child(even) {
 
 .empty-state {
   margin-top: 1.5rem;
-  color: var(--color-text-muted);
+  color: var(--muted);
   font-style: italic;
 }
 
@@ -701,15 +719,15 @@ tbody tr:nth-child(even) {
 }
 
 .feedback.success {
-  color: var(--color-success);
+  color: var(--accent);
 }
 
 .feedback.error {
-  color: var(--color-error);
+  color: var(--danger);
 }
 
 .site-footer {
-  background-color: var(--color-primary);
+  background-color: var(--brand);
   color: var(--color-text-invert);
   margin-top: 3rem;
 }