From 69a56aadaf7788b1a1486f4b233c30e0a900c5e5 Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Mon, 5 Oct 2026 18:59:10 -0400 Subject: [PATCH 1/3] Cleaned up theme css --- www/css/theme/movie-night.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css index e04d3c8..78c6cbb 100644 --- a/www/css/theme/movie-night.css +++ b/www/css/theme/movie-night.css @@ -23,8 +23,7 @@ along with this program. If not, see .*/ --bg1: rgb(70, 70, 70); --bg2: rgb(220, 220, 220); --bg1-alt0: rgb(30, 30, 30); - --bg2-alt0: rgb(200, 200, 200); - --bg2-alt1: rgb(180, 180, 180); + --bg2-alt0: rgb(180, 180, 180); --accent0: rgb(47, 47, 47); --accent0-alt0: rgb(34, 34, 34); @@ -362,7 +361,7 @@ p.channel-guide-entry-item{ .chat-entry{ background-color: var(--bg2); - border-bottom: 1px solid var(--bg2-alt1); + border-bottom: 1px solid var(--bg2-alt0); } .serverwhisper{ @@ -661,7 +660,7 @@ div.queue-entry.live { } #queue-control-buttons button:not(:hover, .danger-button, .critical-danger-button, .positive-button){ - background-color: var(--bg2-alt1); + background-color: var(--bg2-alt0); } div.started-yesterday{ @@ -695,7 +694,7 @@ div.now-playing{ } div.archived p{ - color: var(--bg2-alt1); + color: var(--bg2-alt0); } .queue-playlists-div{ From ab8a416e1259196fec6cff639154cedc0977956d Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Mon, 5 Oct 2026 18:59:39 -0400 Subject: [PATCH 2/3] Fixed dynamic-container backgrounds, improved contrast for username colors. --- www/css/theme/the-network.css | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/www/css/theme/the-network.css b/www/css/theme/the-network.css index 3f81803..330015e 100644 --- a/www/css/theme/the-network.css +++ b/www/css/theme/the-network.css @@ -24,12 +24,13 @@ along with this program. If not, see .*/ --bg1-gradient: linear-gradient(to top, rgb(1, 1, 1), rgb(37, 37, 37)); --bg2: rgb(20, 20, 20); --bg1-alt0: rgb(30, 30, 30); - --bg2-alt0: rgb(60, 60, 60); - --bg2-alt1: rgb(25, 25, 25); + --bg2-alt0: rgb(25, 25, 25); + --bg2-alt1: rgb(9, 9, 9); --accent0: rgb(212, 212, 212); --accent0-alt0: rgb(185, 185, 185); --accent0-alt1: rgb(124, 124, 124); + --accent0-alt2: rgb(51, 51, 51); --accent1: var(--accent0); --accent1-alt0: var(--accent0-alt0); --accent1-alt1: var(--accent0-alt1); @@ -53,13 +54,13 @@ along with this program. If not, see .*/ --timer-glow: -2px 1px 3px var(--danger0-alt1), 2px -1px 3px var(--danger0-alt1); - --userlist-color0:rgb(63, 121, 71); - --userlist-color1:rgb(143, 46, 26); + --userlist-color0:rgb(80, 155, 90); + --userlist-color1:rgb(156, 52, 31); --userlist-color2:rgb(51, 101, 161); - --userlist-color3:rgb(110, 94, 13); - --userlist-color4:rgb(129, 43, 43); - --userlist-color5:rgb(150, 64, 6); - --userlist-color6:rgb(111, 61, 204); + --userlist-color3:rgb(189, 160, 18); + --userlist-color4:rgb(172, 40, 40); + --userlist-color5:rgb(187, 77, 3); + --userlist-color6:rgb(120, 68, 218); --userlist-contrast-glow: 2px 2px 3px var(--bg0), 2px -2px 3px var(--bg0), -2px 2px 3px var(--bg0), -2px -2px 3px var(--bg0); @@ -248,7 +249,7 @@ textarea{ } .dynamic-container{ - background-color: var(--bg2); + background-color: var(--bg2-alt1); color: var(--accent1); } @@ -704,7 +705,7 @@ span.emote-list-trash-icon{ } span.queue-marker{ - background-color: var(--accent0); + background-color: var(--accent0-alt1); } #time-marker{ @@ -744,7 +745,7 @@ div.queue-entry.live { } #queue-control-buttons button:not(:hover, .danger-button, .critical-danger-button, .positive-button){ - background-color: var(--bg2-alt1); + background-color: var(--bg2-alt0); } div.started-yesterday{ @@ -778,7 +779,7 @@ div.now-playing{ } div.archived p{ - color: var(--bg2-alt0); + color: var(--accent0-alt2); } .queue-playlists-div{ From b78b64ef5d181f1064073197ee95b222480ba098 Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Mon, 5 Oct 2026 20:11:13 -0400 Subject: [PATCH 3/3] Fixed some hacky drop-shadow related CSS, then added some moar XP --- www/css/theme/the-network.css | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/www/css/theme/the-network.css b/www/css/theme/the-network.css index 330015e..f101998 100644 --- a/www/css/theme/the-network.css +++ b/www/css/theme/the-network.css @@ -41,6 +41,7 @@ along with this program. If not, see .*/ --focus0-alt1: rgb(12, 85, 12); --focus-glow0: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0); --focus-glow0-inset: 2px 2px 3px var(--focus0) inset, -2px 2px 3px var(--focus0) inset, 2px -2px 3px var(--focus0) inset, -2px -2px 3px var(--focus0) inset; + --focus-glow0-inset-top: 2px 0px 2px var(--focus0) inset, -2px 0px 3px var(--focus0) inset, 2px -2px 3px var(--focus0) inset, -2px -2px 3px var(--focus0) inset, 0px -0.5px 3px 3px var(--focus0); --focus-glow0-alt0: 2px 2px 3px var(--focus0-alt0), -2px 2px 3px var(--focus0-alt0), 2px -2px 3px var(--focus0-alt0), -2px -2px 3px var(--focus0-alt0); --focus-glow0-alt0-inset: 2px 2px 3px var(--focus0-alt0) inset, -2px 2px 3px var(--focus0-alt0) inset, 2px -2px 3px var(--focus0-alt0) inset, -2px -2px 3px var(--focus0-alt0) inset; @@ -286,10 +287,14 @@ div.control-prompt{ background-color: var(--bg2); } +#chat-panel-control-div{ + position: relative; +} + /* 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{ +#chat-panel-control-div:has(#chat-panel-prompt:focus):has(#chat-panel-send-button:not([style*="display: none"])):before{ content: ''; - box-shadow: var(--focus-glow0-inset); + box-shadow: var(--focus-glow0-inset-top); width: calc(100% - 2.5rem); height: 2em; position: absolute; @@ -297,8 +302,8 @@ div.control-prompt:has(#chat-panel-prompt:focus):has(#chat-panel-send-button:not } /* 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); +#chat-panel-control-div:focus-within:has(#chat-panel-send-button[style*="display: none"]){ + box-shadow: var(--focus-glow0-inset-top); } input.control-prompt, input.control-prompt:focus{ @@ -359,17 +364,32 @@ p.channel-guide-entry-item{ /* channel */ #media-panel-div{ background-color: black; + z-index: 1; } #chat-panel-buffer-div{ background-color: var(--bg2); } +/* Movie Night didnt have a shadow here, but I wanted to add one like ol' ttn had. Lil' hacky to avoid editing hypertext but it works.*/ +#chat-panel-buffer-div:before{ + content: ''; + box-shadow: 0px .5em .5em var(--bg2); + left: -1em; + height: 1em; + right: 0; + position: absolute; + overflow: hidden; + top: -1em; + pointer-events: none; +} + #chat-area{ background-color: var(--bg2); } #chat-panel-head-div{ background-color: var(--bg0); + box-shadow: -1px .5em .5em var(--bg2); } #chat-panel-head-spacer-span, #chat-panel-users-div{