From b949a0605eb90f29fd90ddcdc0b595bea70c26ed Mon Sep 17 00:00:00 2001
From: Owen G <garciafamilyid4@gmail.com>
Date: Tue, 6 Jan 2026 21:03:54 -0700
Subject: [PATCH] Update css for new terminal

---
 public/style.css                  | 77 ++++++++++++++++++++-----------
 public/themes/default.css         | 20 ++++++--
 public/themes/nord-dark.css       | 24 +++++++---
 public/themes/solarized-light.css | 20 ++++++--
 public/themes/tokyo-night.css     | 20 ++++++--
 public/themes/volcano.css         | 20 ++++++--
 6 files changed, 131 insertions(+), 50 deletions(-)

diff --git a/public/style.css b/public/style.css
index b78a11d..9a88704 100644
--- a/public/style.css
+++ b/public/style.css
@@ -21,23 +21,32 @@ body.chat-collapsed {
 }
 
 .container { text-align: center; position: relative; z-index: 10; }
+
 #network { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
+
 .count { font-size: 8rem; font-weight: bold; color: var(--color-count); transition: color 0.2s; visibility: hidden; }
+
 .count.loaded { visibility: visible; }
-.label { font-size: 1.5rem; color: #9ca3af; margin-top: 1rem; }
+
+.label { font-size: 1.5rem; color: var(--color-text-main-label); margin-top: 1rem; }
+
 .footer { 
     margin: 2rem auto 0;
     font-size: 0.9rem; 
-    color: #9ca3af; 
+    color: var(--color-text-footer); 
 }
+
 .debug { 
     font-size: 0.8rem; 
-    color: #9ca3af; 
+    color: var(--color-text-debug); 
     margin: 1rem auto 0;
 }
-.debug-link { color: #9ca3af; border-bottom: 1px dotted #9ca3af; cursor: pointer; }
-.debug-link:hover { color: #e5e7eb; }
-a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
+
+.debug-link { color: var(--color-text-debug-link); border-bottom: 1px dotted var(--color-text-debug-link); cursor: pointer; transition: color 0.2s, border-color 0.2s;}
+
+.debug-link:hover { color: var(--color-text-debug-link-hover); border-color : var(--color-text-debug-link-hover); }
+
+a { color: var(--color-text-anchor-link); text-decoration: none; border-bottom: 1px dotted var(--color-text-anchor-link); }
 
 .pulse { animation: pulse 0.5s ease-in-out; }
 @keyframes pulse {
@@ -45,16 +54,18 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
     50% { transform: scale(1.1); color: var(--color-pulse); }
     100% { transform: scale(1); }
 }
+
 .footer a { 
-    color: var(--color-text-footer); 
     border-bottom: 1px dotted var(--color-text-footer); 
     cursor: pointer; 
     transition: color 0.2s, border-color 0.2s; 
 }
+
 .footer a:hover { 
     color: var(--color-text-footer-hover); 
     border-color: var(--color-text-footer-hover);
 }
+
 .modal { 
     display: none; 
     position: fixed; 
@@ -65,7 +76,9 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
     height: 100%; 
     background: var(--color-bg-overlay);
 }
+
 .modal.active { display: flex; align-items: center; justify-content: center; }
+
 .modal-content {
     background: var(--color-modal-bg);
     border: 1px solid var(--color-modal-border);
@@ -74,6 +87,7 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
     width: 90%;
     position: relative;
 }
+
 .modal-content.map-content {
     max-width: 1000px;
     width: 100%;
@@ -110,13 +124,14 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
     cursor: pointer;
     transition: color 0.2s;
 }
-.close-btn:hover { color: var(--color-modal-close-btn-hover); }
-    color: #9ca3af;
+
+.close-btn:hover {
+    color: var(--color-modal-close-btn-hover);
     font-size: 1.2rem;
     cursor: pointer;
     z-index: 1001;
 }
-.close-btn:hover { color: #fff; }
+
 .stat-row {
     display: flex;
     justify-content: space-between;
@@ -124,18 +139,23 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
     border-bottom: 1px solid var(--color-modal-stat-div);
     font-size: 0.85rem;
 }
+
 .stat-row:last-child { border-bottom: none; }
+
 .stat-label { color: var(--color-modal-stat-label); }
+
 .stat-value { 
     color: var(--color-modal-stat-value);
     font-variant-numeric: tabular-nums;
 }
+
 .update-time {
     text-align: center;
     font-size: 0.7rem;
     color: var(--color-modal-footer);
     margin-top: 1rem;
 }
+
 .theme-btn {
     position: fixed;
     bottom: 1.5rem;
@@ -160,6 +180,7 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
 
 .theme-btn:hover .material-symbols-outlined {
     color: var(--color-theme-toggle-hover);
+}
 
 .terminal {
     position: fixed;
@@ -169,8 +190,8 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
     width: 800px;
     max-width: 100%;
     height: 250px;
-    background: rgba(0, 0, 0, 0.9);
-    border: 1px solid #333;
+    background: var(--color-terminal-bg);
+    border: 1px solid var(--color-terminal-border);
     border-bottom: none;
     border-radius: 8px 8px 0 0;
     z-index: 100;
@@ -178,9 +199,9 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
     display: flex;
     flex-direction: column;
     padding: 12px;
-    color: #4ade80;
+    color: var(--color-terminal-text-default);
     font-size: 12px;
-    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 -4px 12px var(--color-terminal-shadow);
     transition: transform 0.3s ease;
 }
 
@@ -201,11 +222,11 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
     top: -24px;
     left: 50%;
     transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.9);
-    border: 1px solid #333;
+    background: var(--color-terminal-bg);
+    border: 1px solid var(--color-terminal-border);
     border-bottom: none;
     border-radius: 8px 8px 0 0;
-    color: #4ade80;
+    color: var(--color-terminal-tab-arrow);
     cursor: pointer;
     font-family: monospace;
     font-weight: bold;
@@ -217,17 +238,18 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: color 0.2s, background 0.2s;
 }
 
 .terminal-toggle:hover {
-    color: #fff;
-    background: #222;
+    color: var(--color-terminal-tab-arrow-hover);
+    background: var(--color-terminal-tab-bg-hover);
 }
 
 .system-status-bar {
     height: 20px;
     margin-bottom: 5px;
-    color: #666;
+    color: var(--color-terminal-status-message);
     font-style: italic;
     white-space: nowrap;
     overflow: hidden;
@@ -243,7 +265,7 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
     flex-direction: column;
     gap: 2px;
     scrollbar-width: thin;
-    scrollbar-color: #333 transparent;
+    scrollbar-color: var(--color-terminal-scrollbar) transparent;
 }
 
 .terminal-output::-webkit-scrollbar {
@@ -255,38 +277,37 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
 }
 
 .terminal-output::-webkit-scrollbar-thumb {
-    background-color: #333;
+    background-color: var(--color-terminal-scrollbar);
     border-radius: 3px;
 }
 
 .terminal-output::-webkit-scrollbar-thumb:hover {
-    background-color: #444;
+    background-color: var(--color-terminal-scrollbar-hover);
 }
 
 .terminal-input-line {
     display: flex;
     align-items: center;
-    border-top: 1px solid #333;
+    border-top: 1px solid var(--color-terminal-input-divider);
     padding-top: 10px;
 }
 
 .prompt {
     margin-right: 10px;
-    color: #4ade80;
 }
 
 #terminal-input {
     flex: 1;
     background: transparent;
     border: none;
-    color: #fff;
+    color: var(--color-terminal-input-text);
     font-family: inherit;
     font-size: inherit;
     outline: none;
 }
 
 .msg-system {
-    color: #666;
+    color: var(--color-terminal-status-message);
     font-style: italic;
 }
 
@@ -295,5 +316,5 @@ a { color: #9ca3af; text-decoration: none; border-bottom: 1px dotted #9ca3af; }
 }
 
 .msg-content {
-    color: #ddd;
+    color: var(--color-terminal-output-message);
 }
diff --git a/public/themes/default.css b/public/themes/default.css
index 0e832ba..5ce9c2f 100644
--- a/public/themes/default.css
+++ b/public/themes/default.css
@@ -5,18 +5,17 @@
     --color-pulse: #fff;
     --color-theme-toggle: #4ade80;
     --color-theme-toggle-hover: #fff;
+    --color-bg-main: #111;
+    --color-bg-overlay: rgba(0, 0, 0, 0.8);
 
     --color-text-default: #eee;
-    --color-text-secondary: #4b5563;
     --color-text-main-label: #9ca3af; 
     --color-text-footer: #4b5563;
     --color-text-footer-hover: #9ca3af;
     --color-text-debug: #4b5563;
     --color-text-debug-link: #4b5563;
     --color-text-debug-link-hover: #9ca3af;
-
-    --color-bg-overlay: rgba(0, 0, 0, 0.8);
-    --color-bg-main: #111;
+    --color-text-anchor-link: #4b5563;
 
     --color-modal-bg: #111;
     --color-modal-border: #222;
@@ -28,4 +27,17 @@
     --color-modal-stat-value: #9ca3af;
     --color-modal-footer: #333;
 
+    --color-terminal-bg: rgba(0, 0, 0, 0.9);
+    --color-terminal-border: #333;
+    --color-terminal-shadow: rgba(0, 0, 0, 0.3);
+    --color-terminal-input-text: #fff;
+    --color-terminal-input-divider: #333;
+    --color-terminal-output-message: #ddd;
+    --color-terminal-tab-arrow: #4ade80;
+    --color-terminal-tab-arrow-hover: #fff;
+    --color-terminal-tab-bg-hover: #222;
+    --color-terminal-status-message: #666;
+    --color-terminal-scrollbar: #333;
+    --color-terminal-scrollbar-hover: #444;
+    --color-terminal-text-default: #4ade80;
 }
\ No newline at end of file
diff --git a/public/themes/nord-dark.css b/public/themes/nord-dark.css
index 5512899..b3a11cd 100644
--- a/public/themes/nord-dark.css
+++ b/public/themes/nord-dark.css
@@ -5,18 +5,17 @@
     --color-pulse: #eceff4;
     --color-theme-toggle: #88c0d0;
     --color-theme-toggle-hover: #eceff4;
+    --color-bg-main: #2e3440;
+    --color-bg-overlay: rgba(46, 52, 64, 0.8);
 
     --color-text-default: #eee;
-    --color-text-secondary: #81a1c1;
     --color-text-main-label: #5e81ac; 
     --color-text-footer: #81a1c1;
     --color-text-footer-hover: #5e81ac;
     --color-text-debug: #81a1c1;
     --color-text-debug-link: #81a1c1;
     --color-text-debug-link-hover: #5e81ac;
-
-    --color-bg-overlay: rgba(46, 52, 64, 0.8);
-    --color-bg-main: #2e3440;
+    --color-text-anchor-link: #81a1c1;
 
     --color-modal-bg: #2e3440;
     --color-modal-border: #434c5e;
@@ -24,8 +23,21 @@
     --color-modal-close-btn: #434c5e;
     --color-modal-close-btn-hover: #5e81ac;
     --color-modal-stat-div: #434c5e;
-    --color-modal-stat-label: #5e81ac;
-    --color-modal-stat-value: #8fbcbb;
+    --color-modal-stat-label: #8fbcbb;
+    --color-modal-stat-value: #5e81ac;
     --color-modal-footer: #434c5e;
 
+    --color-terminal-bg: rgba(46, 52, 64, 0.9);
+    --color-terminal-border: #434c5e;
+    --color-terminal-shadow: rgba(0, 0, 0, 0.3);
+    --color-terminal-input-text: #88c0d0;
+    --color-terminal-input-divider: #434c5e;
+    --color-terminal-output-message: #88c0d0;
+    --color-terminal-tab-arrow: #88c0d0;
+    --color-terminal-tab-arrow-hover: #eceff4;
+    --color-terminal-tab-bg-hover: #434c5e;
+    --color-terminal-status-message: #4c566a;
+    --color-terminal-scrollbar: #434c5e;
+    --color-terminal-scrollbar-hover: #4c566a;
+    --color-terminal-text-default: #88c0d0;
 }
\ No newline at end of file
diff --git a/public/themes/solarized-light.css b/public/themes/solarized-light.css
index f3e9045..9b77ffb 100644
--- a/public/themes/solarized-light.css
+++ b/public/themes/solarized-light.css
@@ -5,18 +5,17 @@
     --color-pulse: #93a1a1;
     --color-theme-toggle: #073642;
     --color-theme-toggle-hover: #93a1a1;
+    --color-bg-main: #eee8d5;
+    --color-bg-overlay: rgba(238, 232, 213, 0.8);
 
     --color-text-default: #eee;
-    --color-text-secondary: #657b83;
     --color-text-main-label: #b58900; 
     --color-text-footer: #657b83;
     --color-text-footer-hover: #b58900;
     --color-text-debug: #657b83;
     --color-text-debug-link: #657b83;
     --color-text-debug-link-hover: #b58900;
-
-    --color-bg-overlay: rgba(238, 232, 213, 0.8);
-    --color-bg-main: #eee8d5;
+    --color-text-anchor-link: #657b83;
 
     --color-modal-bg: #eee8d5;
     --color-modal-border: #073642;
@@ -28,4 +27,17 @@
     --color-modal-stat-value: #268bd2;
     --color-modal-footer: #073642;
 
+    --color-terminal-bg: rgba(238, 232, 213, 0.8);
+    --color-terminal-border: #93a1a1;
+    --color-terminal-shadow: rgba(0, 0, 0, 0.3);
+    --color-terminal-input-text: #073642;
+    --color-terminal-input-divider: #93a1a1;
+    --color-terminal-output-message: #073642;
+    --color-terminal-tab-arrow: #268bd2;
+    --color-terminal-tab-arrow-hover: #fdf6e3;
+    --color-terminal-tab-bg-hover: #93a1a1;
+    --color-terminal-status-message: #586e75;
+    --color-terminal-scrollbar: #93a1a1;
+    --color-terminal-scrollbar-hover: #586e75;
+    --color-terminal-text-default: #268bd2;
 }
\ No newline at end of file
diff --git a/public/themes/tokyo-night.css b/public/themes/tokyo-night.css
index 944643d..98c8f9d 100644
--- a/public/themes/tokyo-night.css
+++ b/public/themes/tokyo-night.css
@@ -5,18 +5,17 @@
     --color-pulse: #b4f9f8;
     --color-theme-toggle: #f7768e;
     --color-theme-toggle-hover: #b4f9f8;
+    --color-bg-main: #1a1b26;
+    --color-bg-overlay: rgba(26, 27, 38, 0.8);
 
     --color-text-default: #eee;
-    --color-text-secondary: #9aa5ce;
     --color-text-main-label: #bb9af7; 
     --color-text-footer: #9aa5ce;
     --color-text-footer-hover: #bb9af7;
     --color-text-debug: #9aa5ce;
     --color-text-debug-link: #9aa5ce;
     --color-text-debug-link-hover: #bb9af7;
-
-    --color-bg-overlay: rgba(26, 27, 38, 0.8);
-    --color-bg-main: #1a1b26;
+    --color-text-anchor-link: #9aa5ce;
 
     --color-modal-bg: #1a1b26;
     --color-modal-border: #414868;
@@ -28,4 +27,17 @@
     --color-modal-stat-value: #ff9e64;
     --color-modal-footer: #414868;
 
+    --color-terminal-bg: rgba(26, 27, 38, 0.9);
+    --color-terminal-border: #414868;
+    --color-terminal-shadow: rgba(0, 0, 0, 0.3);
+    --color-terminal-input-text: #b4f9f8;
+    --color-terminal-input-divider: #414868;
+    --color-terminal-output-message: #b4f9f8;
+    --color-terminal-tab-arrow: #ff9e64;
+    --color-terminal-tab-arrow-hover: #b4f9f8;
+    --color-terminal-tab-bg-hover: #414868;
+    --color-terminal-status-message: #565f89;
+    --color-terminal-scrollbar: #414868;
+    --color-terminal-scrollbar-hover: #565f89;
+    --color-terminal-text-default: #ff9e64;
 }
\ No newline at end of file
diff --git a/public/themes/volcano.css b/public/themes/volcano.css
index bbdb4db..774932c 100644
--- a/public/themes/volcano.css
+++ b/public/themes/volcano.css
@@ -5,18 +5,17 @@
     --color-pulse: #ffd0aa;
     --color-theme-toggle: #00bcd4;
     --color-theme-toggle-hover: #ffd0aa;
+    --color-bg-main: #390000;
+    --color-bg-overlay: rgba(57, 0, 0, 0.8);
 
     --color-text-default: #eee;
-    --color-text-secondary: #ffd0aa;
     --color-text-main-label: #ffd0aa; 
     --color-text-footer: #7F6451;
     --color-text-footer-hover: #ffd0aa;
     --color-text-debug: #7F6451;
     --color-text-debug-link: #7F6451;
     --color-text-debug-link-hover: #ffd0aa;
-
-    --color-bg-overlay: rgba(57, 0, 0, 0.8);
-    --color-bg-main: #390000;
+    --color-text-anchor-link: #7F6451;
 
     --color-modal-bg: #390000;
     --color-modal-border: #ffd0aa;
@@ -28,4 +27,17 @@
     --color-modal-stat-value: #00bcd4;
     --color-modal-footer: #7F6451;
 
+    --color-terminal-bg: rgba(57, 0, 0, 0.9);
+    --color-terminal-border: #7F6451;
+    --color-terminal-shadow: rgba(0, 0, 0, 0.3);
+    --color-terminal-input-text: #ffd0aa;
+    --color-terminal-input-divider: #7F6451;
+    --color-terminal-output-message: #ffd0aa;
+    --color-terminal-tab-arrow: #00bcd4;
+    --color-terminal-tab-arrow-hover: #ffd0aa;
+    --color-terminal-tab-bg-hover: #7F6451;
+    --color-terminal-status-message: #7f3c3c;
+    --color-terminal-scrollbar: #7f3c3c;
+    --color-terminal-scrollbar-hover: #00bcd4;
+    --color-terminal-text-default: #ffd0aa;
 }
\ No newline at end of file