From 4bffcf2ee1aaf68887885c752034bb9363457ab6 Mon Sep 17 00:00:00 2001
From: Meleki <meleki@gott.local>
Date: Thu, 26 Feb 2026 20:09:33 +0100
Subject: [PATCH] =?UTF-8?q?theme.css:=20CSS-Variablen=20f=C3=BCr=20Farben?=
 =?UTF-8?q?=20und=20Gr=C3=B6=C3=9Fen,=20alle=20Files=20umgestellt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 wwwroot/css/base.css      | 72 +++++++++++++++++++--------------------
 wwwroot/css/main.css      | 50 +++++++++++++--------------
 wwwroot/css/prototype.css | 18 +++++-----
 wwwroot/css/theme.css     | 15 ++++++++
 wwwroot/index.html        |  1 +
 wwwroot/prototype.html    |  1 +
 6 files changed, 87 insertions(+), 70 deletions(-)
 create mode 100644 wwwroot/css/theme.css

diff --git a/wwwroot/css/base.css b/wwwroot/css/base.css
index 1c57dd0..23d67dc 100644
--- a/wwwroot/css/base.css
+++ b/wwwroot/css/base.css
@@ -1,17 +1,17 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
 body {
-  background: #222;
-  color: #eee;
+  background: var(--f2-bg);
+  color: var(--text);
   height: 100vh;
 }
 
 body, input, select, button, textarea {
-  padding: .5em;
+  padding: var(--s2);
   font-family: monospace;
   font-size: 1em;
   line-height: 1.5;
-  color: #eee;
+  color: var(--text);
 }
 
 h1, h2, h3, h4, h5 {
@@ -19,19 +19,19 @@ h1, h2, h3, h4, h5 {
 }
 
 button, select, textarea {
-  border: 1px solid #444;
-  background: #333;
+  border: 1px solid var(--f2-border);
+  background: var(--f3-bg);
   outline: none;
 }
 
 button:hover, select:hover, input:hover, textarea:hover {
-  border-color: #666;
+  border-color: var(--f3-border);
 }
 
 button {
   cursor: pointer;
   line-height: 1.25;
-  padding: .5em .75em;
+  padding: var(--s2) var(--s3);
 }
 
 textarea {
@@ -42,7 +42,7 @@ textarea {
 .toggle {
   display: flex;
   align-items: center;
-  gap: .5em;
+  gap: var(--s2);
   margin-left: auto;
 }
 
@@ -51,19 +51,19 @@ textarea {
 }
 
 .session-rename {
-  background: #222;
-  border: 1px solid #888;
+  background: var(--f2-bg);
+  border: 1px solid var(--f3-border);
   outline: none;
 }
 
 /* ── Header ── */
 
 header {
-  padding: 1em 2em;
-  border-bottom: 1px solid #444;
+  padding: var(--s4) calc(var(--s4) * 2);
+  border-bottom: 1px solid var(--f2-border);
   display: flex;
   align-items: center;
-  gap: 1em;
+  gap: var(--s4);
   flex-shrink: 0;
 }
 
@@ -71,9 +71,9 @@ header {
 
 #systemPrompt {
   display: none;
-  width: calc(100% - 2em);
-  margin: 1em;
-  padding: 1em;
+  width: calc(100% - calc(var(--s4) * 2));
+  margin: var(--s4);
+  padding: var(--s4);
 }
 
 #systemPrompt.visible { display: block; }
@@ -81,9 +81,9 @@ header {
 /* ── Meta Bar ── */
 
 .meta-bar {
-  padding: .5em;
-  background: #111;
-  border-bottom: 1px solid #333;
+  padding: var(--s2);
+  background: var(--f1-bg);
+  border-bottom: 1px solid var(--f1-border);
   flex-shrink: 0;
   min-height: 2.5em;
 }
@@ -93,34 +93,34 @@ header {
 #chat {
   flex: 1;
   overflow-y: auto;
-  padding: 1em;
+  padding: var(--s4);
   display: flex;
   flex-direction: column;
-  gap: 1em;
+  gap: var(--s4);
 }
 
 .msg {
   max-width: 85%;
-  padding: 1em;
+  padding: var(--s4);
   white-space: pre-wrap;
   word-break: break-word;
 }
 
 .msg.user {
   align-self: flex-end;
-  background: #333;
-  border: 1px solid #444;
+  background: var(--f3-bg);
+  border: 1px solid var(--f3-border);
 }
 
 .msg.assistant {
   align-self: flex-start;
-  background: #111;
-  border: 1px solid #333;
+  background: var(--f1-bg);
+  border: 1px solid var(--f1-border);
 }
 
 .msg.system-info {
   align-self: center;
-  border: 1px solid #444;
+  border: 1px solid var(--f2-border);
   text-align: center;
 }
 
@@ -130,7 +130,7 @@ header {
   display: inline-block;
   width: .125em;
   height: 1em;
-  background: #fff;
+  background: var(--text);
   animation: blink 0.8s infinite;
   vertical-align: text-bottom;
   margin-left: .125em;
@@ -145,19 +145,19 @@ header {
 
 .tool-box {
   align-self: center;
-  padding: .5em;
-  background: #333;
-  border: 1px solid #444;
+  padding: var(--s2);
+  background: var(--f3-bg);
+  border: 1px solid var(--f3-border);
 }
 
 /* ── Input Area ── */
 
 .input-area {
-  border-top: 1px solid #333;
+  border-top: 1px solid var(--f1-border);
   display: flex;
   flex-shrink: 0;
-  gap: 1em;
-  padding: 1em;
+  gap: var(--s4);
+  padding: var(--s4);
 }
 
 .input-area textarea {
@@ -175,7 +175,7 @@ header {
 .archive-container {
   display: flex;
   flex-direction: column;
-  gap: 1em;
+  gap: var(--s4);
 }
 
 .archived { opacity: 0.6; }
diff --git a/wwwroot/css/main.css b/wwwroot/css/main.css
index 6b8c127..48dca29 100644
--- a/wwwroot/css/main.css
+++ b/wwwroot/css/main.css
@@ -20,71 +20,71 @@ body {
 /* ── Nav ── */
 
 #nav {
-  padding: .75em 1.5em;
-  border-bottom: 1px solid #444;
+  padding: var(--s3) calc(var(--s4) * 1.5);
+  border-bottom: 1px solid var(--f2-border);
   display: flex;
   align-items: center;
-  gap: 2em;
+  gap: calc(var(--s4) * 2);
   flex-shrink: 0;
 }
 
 .nav-links {
   display: flex;
-  gap: 1em;
+  gap: var(--s4);
 }
 
 .nav-link {
-  color: #888;
+  color: var(--f3-border);
   text-decoration: none;
-  padding: .25em .5em;
+  padding: var(--s1) var(--s2);
 }
 
-.nav-link:hover { color: #eee; }
-.nav-link.active { color: #eee; border-bottom: 2px solid #eee; }
+.nav-link:hover { color: var(--text); }
+.nav-link.active { color: var(--text); border-bottom: 2px solid var(--primary); }
 
 /* ── Dashboard ── */
 
 .dashboard {
-  padding: 2em;
+  padding: calc(var(--s4) * 2);
   overflow-y: auto;
 }
 
 .dashboard section {
-  margin-bottom: 2em;
+  margin-bottom: calc(var(--s4) * 2);
 }
 
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 1em;
+  margin-bottom: var(--s4);
 }
 
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 1em;
+  gap: var(--s4);
 }
 
 .card {
-  background: #333;
-  border: 1px solid #444;
-  padding: 1em;
+  background: var(--f3-bg);
+  border: 1px solid var(--f3-border);
+  padding: var(--s4);
   display: flex;
   flex-direction: column;
-  gap: .5em;
+  gap: var(--s2);
 }
 
 .card.clickable { cursor: pointer; }
-.card.clickable:hover { border-color: #888; }
+.card.clickable:hover { border-color: var(--primary); }
 
 .card-icon { font-size: 2em; }
 .card-title { font-weight: bold; }
-.card-sub { color: #888; }
+.card-sub { color: var(--f3-border); }
 
 .card.placeholder {
   border-style: dashed;
-  color: #666;
+  color: var(--f2-border);
 }
 
 /* ── Session Page ── */
@@ -95,18 +95,18 @@ body {
 }
 
 .session-header {
-  padding: .75em 1.5em;
-  border-bottom: 1px solid #444;
+  padding: var(--s3) calc(var(--s4) * 1.5);
+  border-bottom: 1px solid var(--f2-border);
   display: flex;
   align-items: center;
-  gap: 1em;
+  gap: var(--s4);
   flex-shrink: 0;
 }
 
 .back-btn {
   background: none;
   border: none;
-  padding: .25em .5em;
+  padding: var(--s1) var(--s2);
 }
 
 .editable-title {
@@ -126,8 +126,8 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1em;
-  color: #888;
+  gap: var(--s4);
+  color: var(--f3-border);
 }
 
 .placeholder-icon {
diff --git a/wwwroot/css/prototype.css b/wwwroot/css/prototype.css
index 4f09cc8..43c342b 100644
--- a/wwwroot/css/prototype.css
+++ b/wwwroot/css/prototype.css
@@ -13,8 +13,8 @@ main {
 
 #sidebar {
   width: 260px;
-  background: #1a1a1a;
-  border-right: 1px solid #444;
+  background: var(--f1-bg);
+  border-right: 1px solid var(--f2-border);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -22,8 +22,8 @@ main {
 }
 
 .sidebar-header {
-  padding: 1em;
-  border-bottom: 1px solid #444;
+  padding: var(--s4);
+  border-bottom: 1px solid var(--f2-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -35,18 +35,18 @@ main {
 }
 
 .session-item {
-  padding: 1em;
+  padding: var(--s4);
   cursor: pointer;
   display: flex;
   flex-direction: column;
   border-left: 3px solid transparent;
 }
 
-.session-item:hover { background: #333; }
+.session-item:hover { background: var(--f3-bg); }
 
 .session-item.active {
-  background: #333;
-  border-left-color: #eee;
+  background: var(--f3-bg);
+  border-left-color: var(--primary);
 }
 
 .session-name {
@@ -57,5 +57,5 @@ main {
 }
 
 .session-date {
-  color: #888;
+  color: var(--f3-border);
 }
diff --git a/wwwroot/css/theme.css b/wwwroot/css/theme.css
new file mode 100644
index 0000000..cb5303e
--- /dev/null
+++ b/wwwroot/css/theme.css
@@ -0,0 +1,15 @@
+:root {
+  --text: #eee;
+  --primary: #a51;
+  --secondary: #5a1;
+  --f1-bg: #111;
+  --f1-border: #555;
+  --f2-bg: #222;
+  --f2-border: #666;
+  --f3-bg: #333;
+  --f3-border: #777;
+  --s1: .25em;
+  --s2: .5em;
+  --s3: .75em;
+  --s4: 1em;
+}
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 8f52d05..af693e3 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Gott</title>
+  <link rel="stylesheet" href="css/theme.css">
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/main.css">
 </head>
diff --git a/wwwroot/prototype.html b/wwwroot/prototype.html
index ad1f62f..7cb8a6c 100644
--- a/wwwroot/prototype.html
+++ b/wwwroot/prototype.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Gott - Debug Console</title>
+  <link rel="stylesheet" href="css/theme.css">
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/prototype.css">
 </head>