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{
margin: 0;
width: 100%;
}
#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);
}
.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);
}

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

@ -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');