theme.css: CSS-Variablen für Farben und Größen, alle Files umgestellt

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; }