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

Added '(Classic)' postifx to 'The Network', fixed small theming bug

Browse source
This commit is contained in:
rainbow napkin 2026-10-05 22:31:11 -04:00
parent e6e061ab44
commit 1d09833c2a
3 changed files with 31 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

13
www/css/theme/the-network.css → www/css/theme/the-network-classic.css
View file

@ -360,6 +360,10 @@ p.channel-guide-entry-item{
}
/* 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-control{
padding-bottom: 0.1em;
}
#chat-panel-buffer-div:before{
content: '';
box-shadow: 0px .5em .5em var(--bg2);
@ -398,11 +402,12 @@ p.channel-guide-entry-item{
#chat-panel-prompt{
background-color: rgba(0,0,0,0);
padding-bottom: 0.2em;
}
#chat-panel-send-button{
height: 100%;
width: 2.5rem;
width: 3.2rem;
padding: 0;
margin: 0 0;
border-radius: 0;
@ -643,7 +648,7 @@ select.panel-head-element{
#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-top-alt);
width: calc(100% - 2.5rem);
width: calc(100% - 3.2rem);
height: 2em;
position: absolute;
pointer-events: none;
@ -655,7 +660,7 @@ select.panel-head-element{
content: '';
position: absolute;
background: linear-gradient(to top, var(--focus0), rgb(0,0,0,0));
width: calc(100% - 2.5rem);
width: calc(100% - 3.2rem);
height: 3px;
top: -3px;
pointer-events: none;
@ -666,7 +671,7 @@ select.panel-head-element{
#chat-panel-send-button:active:not([disabled]):before{
content: '';
position: absolute;
width: 2.5rem;
width: 3.2rem;
height: 3px;
top: -3px;
right: 0;

2
www/js/channel/channel.js
View file

@ -353,7 +353,7 @@ class channel{
["syncTolerance",1],
["liveSyncTolerance", 10],
["syncDelta", 6],
["theme", "The Network"],
["theme", "The Network (Classic)"],
["chatWidthMin", 20],
["disablePortrait", false],
["disableSendButton", false],

25
www/js/themeManager.js
View file

@ -27,14 +27,14 @@ class themeManager{
*/
this.themes = new Map([
["Movie Night", "/css/theme/movie-night.css"],
["The Network", "/css/theme/the-network.css"]
["The Network (Classic)", "/css/theme/the-network-classic.css"]
]);
/**
* Sets default theme for new users
*/
this.defaultTheme = "The Network";
this.defaultTheme = "The Network (Classic)";
/**
* Define property to hold theme link DOM node
@ -51,7 +51,7 @@ class themeManager{
*/
setTheme(theme = localStorage.getItem("theme")){
//If we didnt get a theme to set
if(theme == null){
if(theme == null || theme == ""){
//Use the first theme in the list
theme = this.defaultTheme;
}
@ -65,6 +65,14 @@ class themeManager{
//Create new link element and use it to set themeLink
this.themeLink = this.genThemeLink(theme);
//If we got a bad link
if(this.themeLink == null){
//Reset the theme to the default theme
this.setTheme(this.defaultTheme);
//Do not pass go, do not collect $200
return;
}
//Append themeLink to header
document.querySelector('head').appendChild(this.themeLink);
@ -73,6 +81,15 @@ class themeManager{
}
genThemeLink(theme = localStorage.getItem("theme")){
//Grab themePath by name
let themePath = this.themes.get(theme)
//If we got dookie-dick for a theme
if(themePath == null || themePath == ""){
//GIMME A THEME WITH NUTHIN'! NUTHIN'?!?! NUTHIN'!! https://i.ytimg.com/vi/CccHBlGrOu8/hqdefault.jpg
return;
}
//Create new link element and use it to set themeLink
const themeLink = document.createElement('link');
@ -81,7 +98,7 @@ class themeManager{
themeLink.rel = "stylesheet";
//Set theme href to theme location
themeLink.href = this.themes.get(theme);
themeLink.href = themePath;
return themeLink;
}