From eec9a35421aef9c0af2ca60bf8fb265107dbdc2c Mon Sep 17 00:00:00 2001
From: rainbow napkin <ourforest@tuta.io>
Date: Wed, 14 Oct 2026 05:21:23 -0400
Subject: [PATCH] Fixed some CSS bugs created with username format config.

---
 www/css/channel.css                   |  1 +
 www/css/theme/the-network-classic.css | 26 ++++++++++++++++----------
 www/js/channel/chatPostprocessor.js   | 14 +++++++++++---
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/www/css/channel.css b/www/css/channel.css
index bd96277..76fa2ab 100644
--- a/www/css/channel.css
+++ b/www/css/channel.css
@@ -243,6 +243,7 @@ span.user-entry{
 
 .announcement-title{
     margin: 0;
+    width: 100%;
 }
 
 #media-panel-aspect-lock-icon{
diff --git a/www/css/theme/the-network-classic.css b/www/css/theme/the-network-classic.css
index 5d231a9..56fea89 100644
--- a/www/css/theme/the-network-classic.css
+++ b/www/css/theme/the-network-classic.css
@@ -444,11 +444,17 @@ p.channel-guide-entry-item{
     box-shadow: var(--focus-glow0-alt0-inset-top);
 }
 
-.chat-entry:nth-child(even){
+.serverwhisper, .chat-entry-toke{
+	background-color: var(--bg1);
+	margin: 0;
+	padding: 0.2em 0;
+}
+
+.chat-entry:nth-child(even):not(.chat-entry-toke){
     background-color: var(--bg0);
 }
 
-.chat-entry:nth-child(odd){
+.chat-entry:nth-child(odd):not(.chat-entry-toke){
     background-color: var(--bg1-alt0);
 }
 
@@ -457,7 +463,7 @@ p.channel-guide-entry-item{
 }
 
 .serverwhisper{
-    color: var(--accent0-alt1)
+	color: var(--accent0-alt1);
 }
 
 .userlist-color0{/*green0*/
@@ -488,31 +494,31 @@ p.channel-guide-entry-item{
      color: var(--userlist-color6);
 }
 
-.chat-userlist-color0{/*green0*/
+.chat-userlist-color0:not(.chat-entry-toke, .chat-entry-whisper, .chat-entry-tokewhisper, .chat-entry-announcement){/*green0*/
      border-left: solid 5px var(--userlist-color0);
 }
 
-.chat-userlist-color1{/*red0*/
+.chat-userlist-color1:not(.chat-entry-toke, .chat-entry-whisper, .chat-entry-tokewhisper, .chat-entry-announcement){/*red0*/
      border-left: solid 5px var(--userlist-color1);
 }
 
-.chat-userlist-color2{/*blue0*/
+.chat-userlist-color2:not(.chat-entry-toke, .chat-entry-whisper, .chat-entry-tokewhisper, .chat-entry-announcement){/*blue0*/
      border-left: solid 5px var(--userlist-color2);
 }
 
-.chat-userlist-color3{/*tan0*/
+.chat-userlist-color3:not(.chat-entry-toke, .chat-entry-whisper, .chat-entry-tokewhisper, .chat-entry-announcement){/*tan0*/
      border-left: solid 5px var(--userlist-color3);
 }
 
-.chat-userlist-color4{/*pink0*/
+.chat-userlist-color4:not(.chat-entry-toke, .chat-entry-whisper, .chat-entry-tokewhisper, .chat-entry-announcement){/*pink0*/
      border-left: solid 5px var(--userlist-color4);
 }
 
-.chat-userlist-color5{/*orange*/
+.chat-userlist-color5:not(.chat-entry-toke, .chat-entry-whisper, .chat-entry-tokewhisper, .chat-entry-announcement){/*orange*/
      border-left: solid 5px var(--userlist-color5);
 }
 
-.chat-userlist-color6{/*violet*/
+.chat-userlist-color6:not(.chat-entry-toke, .chat-entry-whisper, .chat-entry-tokewhisper, .chat-entry-announcement){/*violet*/
      border-left: solid 5px var(--userlist-color6);
 }
 
diff --git a/www/js/channel/chatPostprocessor.js b/www/js/channel/chatPostprocessor.js
index 50c37eb..84b2e55 100644
--- a/www/js/channel/chatPostprocessor.js
+++ b/www/js/channel/chatPostprocessor.js
@@ -105,6 +105,7 @@ class chatPostprocessor{
         this.chatEntry.classList.add(
             `${classSuffixAlt}-buffer`,
             `${classSuffix}-entry`,
+            `${classSuffix}-entry-${this.rawData.type}`,
             `${classSuffix}-entry-${this.rawData.user}`,
             `${classSuffix}-${color}`
         );
@@ -663,15 +664,22 @@ class chatPostprocessor{
             //add whisper class
             this.chatBody.classList.add('whisper');
         }else if(this.rawData.type == "announcement"){
-            //Squash the high-level
+            //Squash the high-level & timestamp
             this.chatEntry.querySelector('.high-level').remove();
+            this.chatEntry.querySelector('.chat-entry-timestamp').remove();
 
             //Get the username and make it into an announcement title (little hacky but this *IS* postprocessing)
             const userNode = this.chatEntry.querySelector('.chat-entry-username');
-            userNode.textContent = `${userNode.textContent.slice(0,-2)} Announcement`;
+
+            //Get the username and make it into an announcement title (little hacky but this *IS* postprocessing)
+            const flairNode = this.chatEntry.querySelector('.chat-entry-flair-span');
+            flairNode.textContent = `${flairNode.textContent} Announcement`;
 
             //Add/remove relevant classes
-            userNode.classList.remove('chat-entry-username');
+            flairNode.classList.add('announcement-title');
+            flairNode.classList.remove('chat-entry-username');
+            flairNode.classList.remove('chat-entry-flair');
+            flairNode.classList.remove('flair-');
             userNode.classList.add('announcement-title');
             this.chatBody.classList.add('announcement-body');
             this.chatEntry.classList.add('announcement');