rainbownapkin/canopy
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Fixed some CSS bugs created with username format config.

Browse source
This commit is contained in:
rainbow napkin 2026-10-14 05:21:23 -04:00
parent cd5f168243
commit eec9a35421
3 changed files with 28 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

1
www/css/channel.css
View file

@ -243,6 +243,7 @@ span.user-entry{
.announcement-title{ .announcement-title{
margin: 0; margin: 0;
width: 100%;
} }
#media-panel-aspect-lock-icon{ #media-panel-aspect-lock-icon{

26
www/css/theme/the-network-classic.css
View file

@ -444,11 +444,17 @@ p.channel-guide-entry-item{
box-shadow: var(--focus-glow0-alt0-inset-top); 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); background-color: var(--bg0);
} }
.chat-entry:nth-child(odd){ .chat-entry:nth-child(odd):not(.chat-entry-toke){
background-color: var(--bg1-alt0); background-color: var(--bg1-alt0);
} }
@ -457,7 +463,7 @@ p.channel-guide-entry-item{
} }
.serverwhisper{ .serverwhisper{
color: var(--accent0-alt1) color: var(--accent0-alt1);
} }
.userlist-color0{/*green0*/ .userlist-color0{/*green0*/
@ -488,31 +494,31 @@ p.channel-guide-entry-item{
color: var(--userlist-color6); 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); 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); 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); 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); 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); 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); 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); border-left: solid 5px var(--userlist-color6);
} }

14
www/js/channel/chatPostprocessor.js
View file

@ -105,6 +105,7 @@ class chatPostprocessor{
this.chatEntry.classList.add( this.chatEntry.classList.add(
`${classSuffixAlt}-buffer`, `${classSuffixAlt}-buffer`,
`${classSuffix}-entry`, `${classSuffix}-entry`,
`${classSuffix}-entry-${this.rawData.type}`,
`${classSuffix}-entry-${this.rawData.user}`, `${classSuffix}-entry-${this.rawData.user}`,
`${classSuffix}-${color}` `${classSuffix}-${color}`
); );
@ -663,15 +664,22 @@ class chatPostprocessor{
//add whisper class //add whisper class
this.chatBody.classList.add('whisper'); this.chatBody.classList.add('whisper');
}else if(this.rawData.type == "announcement"){ }else if(this.rawData.type == "announcement"){
//Squash the high-level //Squash the high-level & timestamp
this.chatEntry.querySelector('.high-level').remove(); 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) //Get the username and make it into an announcement title (little hacky but this *IS* postprocessing)
const userNode = this.chatEntry.querySelector('.chat-entry-username'); 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 //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'); userNode.classList.add('announcement-title');
this.chatBody.classList.add('announcement-body'); this.chatBody.classList.add('announcement-body');
this.chatEntry.classList.add('announcement'); this.chatEntry.classList.add('announcement');