From 3815617a8eeaee92e797549d3859e25f5831b44d Mon Sep 17 00:00:00 2001
From: rainbow napkin <ourforest@tuta.io>
Date: Sat, 3 Oct 2026 07:30:20 -0400
Subject: [PATCH] Continued work on 'The Network' theme.

---
 www/css/theme/the-network.css | 58 ++++++++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 11 deletions(-)

diff --git a/www/css/theme/the-network.css b/www/css/theme/the-network.css
index e85da5e..c6412e6 100644
--- a/www/css/theme/the-network.css
+++ b/www/css/theme/the-network.css
@@ -20,12 +20,12 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
     --bg0: rgb(37, 37, 37);
     --bg0-alpha0: rgba(37, 37, 37, 0.4);
     --bg0-alpha1: rgba(37, 37, 37, 0.75);
-    --bg1: rgb(1, 1, 1);
+    --bg1: rgb(0, 0, 0);
     --bg1-gradient: linear-gradient(to top, rgb(1, 1, 1), rgb(37, 37, 37));
-    --bg2: rgb(0, 0, 0);
+    --bg2: rgb(20, 20, 20);
     --bg1-alt0: rgb(30, 30, 30);
-    --bg2-alt0: rgb(200, 200, 200);
-    --bg2-alt1: rgb(180, 180, 180);
+    --bg2-alt0: rgb(60, 60, 60);
+    --bg2-alt1: rgb(25, 25, 25);
 
     --accent0: rgb(212, 212, 212);
     --accent0-alt0: rgb(185, 185, 185);
@@ -240,7 +240,7 @@ textarea{
 }
 
 .dynamic-container{
-    background-color: var(--bg1);
+    background-color: var(--bg2);
     color: var(--accent1);
 }
 
@@ -251,7 +251,7 @@ textarea{
 }
 
 .dynamic-container, .nested-dynamic-container{
-    box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
+    box-shadow: 3px 3px 1px var(--bg1) inset;
     border-radius: 1em;
 }
 
@@ -274,18 +274,29 @@ a.admin-list-entry-item{
 
 div.control-prompt{
     border-radius: 1em;
-    background-color: var(--bg0);
+    background-color: var(--bg2);
 }
 
-div.control-prompt:focus-within{
-    box-shadow: var(--focus-glow0);
+/* This is hacky as shit, but it allows us to place the focus glow either on top of, or next to, elements within the prompt div (such as the send button bg color) */
+div.control-prompt:has(#chat-panel-prompt:focus):has(#chat-panel-send-button:not([style*="display: none"])):before{
+    content: '';
+    box-shadow: var(--focus-glow0-inset);
+    width: calc(100% - 2.5rem);
+    height: 2em;
+    position: absolute;
+    pointer-events: none;
+}
+
+/* Use a basic box shadow if we dont have a send button */
+div.control-prompt:focus-within:has(#chat-panel-send-button[style*="display: none"]){
+    box-shadow: var(--focus-glow0-inset);
 }
 
 input.control-prompt, input.control-prompt:focus{
     border: none;
     outline: none;
     box-shadow: none;
-    background-color: var(--bg0);
+    background-color: var(--bg2);
     color: var(--accent0);
 }
 
@@ -365,8 +376,33 @@ p.channel-guide-entry-item{
 #chat-panel-control-div{
     margin: 0;
     border-radius: 0;
+    background-color: var(--bg1);
 }
 
+#chat-panel-prompt{
+    background-color: rgba(0,0,0,0);
+}
+
+#chat-panel-send-button{
+    height: 100%;
+    width: 2.5rem;
+    padding: 0;
+    margin: 0 0;
+    border-radius: 0;
+    background-color: var(--bg0);
+    border-left: solid 1px var(--accent0);
+}
+
+
+#chat-panel-send-button:active:not([disabled]){
+    box-shadow: var(--focus-glow0-alt0-inset);
+}
+
+#chat-panel-send-button:hover:not([disabled]){
+    box-shadow: var(--focus-glow0-inset);
+}
+
+
 .chat-entry:nth-child(even){
     background-color: var(--bg0);
 }
@@ -734,7 +770,7 @@ div.now-playing{
 }
 
 div.archived p{
-    color: var(--bg2-alt1);
+    color: var(--bg2-alt0);
 }
 
 .queue-playlists-div{