From e6e061ab44ea368bab3af542061c288e1f8f2844 Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Mon, 5 Oct 2026 21:52:27 -0400 Subject: [PATCH 1/2] Fixed send button glow to match input on 'The Network' theme --- www/css/theme/the-network.css | 35 ++++++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/www/css/theme/the-network.css b/www/css/theme/the-network.css index 8a9055a..d2c667b 100644 --- a/www/css/theme/the-network.css +++ b/www/css/theme/the-network.css @@ -45,6 +45,7 @@ along with this program. If not, see .*/ --focus-glow0-inset-top-alt: 2px 0px 2px var(--focus0) inset, -2px 0px 3px var(--focus0) inset, 2px -2px 3px var(--focus0) inset, -2px -2px 3px var(--focus0) inset; --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; + --focus-glow0-alt0-inset-top: 2px 0px 2px var(--focus0-alt0) inset, -2px 0px 3px var(--focus0-alt0) inset, 2px -2px 3px var(--focus0-alt0) inset, -2px -2px 3px var(--focus0-alt0) inset; --danger0: firebrick; --danger0-alt0: rgb(121, 11, 11); @@ -411,14 +412,13 @@ p.channel-guide-entry-item{ } -#chat-panel-send-button:active:not([disabled]){ - box-shadow: var(--focus-glow0-alt0-inset); -} - #chat-panel-send-button:hover:not([disabled]){ - box-shadow: var(--focus-glow0-inset); + box-shadow: var(--focus-glow0-inset-top-alt); } +#chat-panel-send-button:active:not([disabled]){ + box-shadow: var(--focus-glow0-alt0-inset-top); +} .chat-entry:nth-child(even){ background-color: var(--bg0); @@ -653,12 +653,33 @@ select.panel-head-element{ /* There isn't a good way to make a box shadow emit in one direction, so we gotta fake it til' we make it XP */ #chat-panel-control-div:has(#chat-panel-prompt:focus):has(#chat-panel-send-button:not([style*="display: none"])):after{ content: ''; + position: absolute; + background: linear-gradient(to top, var(--focus0), rgb(0,0,0,0)); width: calc(100% - 2.5rem); height: 3px; top: -3px; - background: linear-gradient(to top, var(--focus0), rgb(0,0,0,0)); - position: absolute; pointer-events: none; + +} + +#chat-panel-send-button:hover:not([disabled]):before, +#chat-panel-send-button:active:not([disabled]):before{ + content: ''; + position: absolute; + width: 2.5rem; + height: 3px; + top: -3px; + right: 0; + pointer-events: none; +} + + +#chat-panel-send-button:hover:not([disabled]):before{ + background: linear-gradient(to top, var(--focus0), rgb(0,0,0,0)); +} + +#chat-panel-send-button:active:not([disabled]):before{ + background: linear-gradient(to top, var(--focus0-alt0), rgb(0,0,0,0)); } /* Use a basic box shadow if we dont have a send button */ From 1d09833c2a5f23cb107be94a93246362f446b6e5 Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Mon, 5 Oct 2026 22:31:11 -0400 Subject: [PATCH 2/2] Added '(Classic)' postifx to 'The Network', fixed small theming bug --- ...he-network.css => the-network-classic.css} | 13 +++++++--- www/js/channel/channel.js | 2 +- www/js/themeManager.js | 25 ++++++++++++++++--- 3 files changed, 31 insertions(+), 9 deletions(-) rename www/css/theme/{the-network.css => the-network-classic.css} (99%) diff --git a/www/css/theme/the-network.css b/www/css/theme/the-network-classic.css similarity index 99% rename from www/css/theme/the-network.css rename to www/css/theme/the-network-classic.css index d2c667b..e6aa478 100644 --- a/www/css/theme/the-network.css +++ b/www/css/theme/the-network-classic.css @@ -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; diff --git a/www/js/channel/channel.js b/www/js/channel/channel.js index a7e0498..6b5e535 100644 --- a/www/js/channel/channel.js +++ b/www/js/channel/channel.js @@ -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], diff --git a/www/js/themeManager.js b/www/js/themeManager.js index e5a260e..8874f36 100644 --- a/www/js/themeManager.js +++ b/www/js/themeManager.js @@ -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; }