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

Compare commits

base: rainbownapkin:5fb2609d623ef492b434389b71958f5ca3f4c3b0
Branches Tags
rainbownapkin:main
rainbownapkin:dev
rainbownapkin:0.1-alpha-hotfix-5
rainbownapkin:0.4-indev-hotfix-3
rainbownapkin:0.4-indev-hotfix-2
rainbownapkin:0.4-indev-hotfix-1
rainbownapkin:0.4-indev
rainbownapkin:0.3-indev-hotfix-1
rainbownapkin:0.3-indev
rainbownapkin:verbose-queue
rainbownapkin:0.2-indev
rainbownapkin:0.1-indev
..
compare: rainbownapkin:b78b64ef5d181f1064073197ee95b222480ba098
Branches Tags
rainbownapkin:dev
rainbownapkin:main
rainbownapkin:0.1-alpha-hotfix-5
rainbownapkin:0.4-indev-hotfix-3
rainbownapkin:0.4-indev-hotfix-2
rainbownapkin:0.4-indev-hotfix-1
rainbownapkin:0.4-indev
rainbownapkin:0.3-indev-hotfix-1
rainbownapkin:0.3-indev
rainbownapkin:verbose-queue
rainbownapkin:0.2-indev
rainbownapkin:0.1-indev

3 commits
5fb2609d62 ... b78b64ef5d

Author SHA1 Message Date
rainbow napkin
b78b64ef5d Fixed some hacky drop-shadow related CSS, then added some moar XP 2026-10-05 20:11:13 -04:00
rainbow napkin
ab8a416e12 Fixed dynamic-container backgrounds, improved contrast for username colors. 2026-10-05 18:59:39 -04:00
rainbow napkin
69a56aadaf Cleaned up theme css 2026-10-05 18:59:10 -04:00
2 changed files with 41 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

9
www/css/theme/movie-night.css
View file

@ -23,8 +23,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
--bg1: rgb(70, 70, 70);
--bg2: rgb(220, 220, 220);
--bg1-alt0: rgb(30, 30, 30);
--bg2-alt0: rgb(200, 200, 200);
--bg2-alt1: rgb(180, 180, 180);
--bg2-alt0: rgb(180, 180, 180);
--accent0: rgb(47, 47, 47);
--accent0-alt0: rgb(34, 34, 34);
@ -362,7 +361,7 @@ p.channel-guide-entry-item{
.chat-entry{
background-color: var(--bg2);
border-bottom: 1px solid var(--bg2-alt1);
border-bottom: 1px solid var(--bg2-alt0);
}
.serverwhisper{
@ -661,7 +660,7 @@ div.queue-entry.live {
}
#queue-control-buttons button:not(:hover, .danger-button, .critical-danger-button, .positive-button){
background-color: var(--bg2-alt1);
background-color: var(--bg2-alt0);
}
div.started-yesterday{
@ -695,7 +694,7 @@ div.now-playing{
}
div.archived p{
color: var(--bg2-alt1);
color: var(--bg2-alt0);
}
.queue-playlists-div{

53
www/css/theme/the-network.css
View file

@ -24,12 +24,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
--bg1-gradient: linear-gradient(to top, rgb(1, 1, 1), rgb(37, 37, 37));
--bg2: rgb(20, 20, 20);
--bg1-alt0: rgb(30, 30, 30);
--bg2-alt0: rgb(60, 60, 60);
--bg2-alt1: rgb(25, 25, 25);
--bg2-alt0: rgb(25, 25, 25);
--bg2-alt1: rgb(9, 9, 9);
--accent0: rgb(212, 212, 212);
--accent0-alt0: rgb(185, 185, 185);
--accent0-alt1: rgb(124, 124, 124);
--accent0-alt2: rgb(51, 51, 51);
--accent1: var(--accent0);
--accent1-alt0: var(--accent0-alt0);
--accent1-alt1: var(--accent0-alt1);
@ -40,6 +41,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
--focus0-alt1: rgb(12, 85, 12);
--focus-glow0: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
--focus-glow0-inset: 2px 2px 3px var(--focus0) inset, -2px 2px 3px var(--focus0) inset, 2px -2px 3px var(--focus0) inset, -2px -2px 3px var(--focus0) inset;
--focus-glow0-inset-top: 2px 0px 2px var(--focus0) inset, -2px 0px 3px var(--focus0) inset, 2px -2px 3px var(--focus0) inset, -2px -2px 3px var(--focus0) inset, 0px -0.5px 3px 3px var(--focus0);
--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;
@ -53,13 +55,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
--timer-glow: -2px 1px 3px var(--danger0-alt1), 2px -1px 3px var(--danger0-alt1);
--userlist-color0:rgb(63, 121, 71);
--userlist-color1:rgb(143, 46, 26);
--userlist-color0:rgb(80, 155, 90);
--userlist-color1:rgb(156, 52, 31);
--userlist-color2:rgb(51, 101, 161);
--userlist-color3:rgb(110, 94, 13);
--userlist-color4:rgb(129, 43, 43);
--userlist-color5:rgb(150, 64, 6);
--userlist-color6:rgb(111, 61, 204);
--userlist-color3:rgb(189, 160, 18);
--userlist-color4:rgb(172, 40, 40);
--userlist-color5:rgb(187, 77, 3);
--userlist-color6:rgb(120, 68, 218);
--userlist-contrast-glow: 2px 2px 3px var(--bg0), 2px -2px 3px var(--bg0), -2px 2px 3px var(--bg0), -2px -2px 3px var(--bg0);
@ -248,7 +250,7 @@ textarea{
}
.dynamic-container{
background-color: var(--bg2);
background-color: var(--bg2-alt1);
color: var(--accent1);
}
@ -285,10 +287,14 @@ div.control-prompt{
background-color: var(--bg2);
}
#chat-panel-control-div{
position: relative;
}
/* This is hacky as shit, but it allows us to place the focus glow either on top of, or next to, elements within the prompt div (such as the send button bg color) */
div.control-prompt:has(#chat-panel-prompt:focus):has(#chat-panel-send-button:not([style*="display: none"])):before{
#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);
box-shadow: var(--focus-glow0-inset-top);
width: calc(100% - 2.5rem);
height: 2em;
position: absolute;
@ -296,8 +302,8 @@ div.control-prompt:has(#chat-panel-prompt:focus):has(#chat-panel-send-button:not
}
/* Use a basic box shadow if we dont have a send button */
div.control-prompt:focus-within:has(#chat-panel-send-button[style*="display: none"]){
box-shadow: var(--focus-glow0-inset);
#chat-panel-control-div:focus-within:has(#chat-panel-send-button[style*="display: none"]){
box-shadow: var(--focus-glow0-inset-top);
}
input.control-prompt, input.control-prompt:focus{
@ -358,17 +364,32 @@ p.channel-guide-entry-item{
/* channel */
#media-panel-div{
background-color: black;
z-index: 1;
}
#chat-panel-buffer-div{
background-color: var(--bg2);
}
/* 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-buffer-div:before{
content: '';
box-shadow: 0px .5em .5em var(--bg2);
left: -1em;
height: 1em;
right: 0;
position: absolute;
overflow: hidden;
top: -1em;
pointer-events: none;
}
#chat-area{
background-color: var(--bg2);
}
#chat-panel-head-div{
background-color: var(--bg0);
box-shadow: -1px .5em .5em var(--bg2);
}
#chat-panel-head-spacer-span, #chat-panel-users-div{
@ -704,7 +725,7 @@ span.emote-list-trash-icon{
}
span.queue-marker{
background-color: var(--accent0);
background-color: var(--accent0-alt1);
}
#time-marker{
@ -744,7 +765,7 @@ div.queue-entry.live {
}
#queue-control-buttons button:not(:hover, .danger-button, .critical-danger-button, .positive-button){
background-color: var(--bg2-alt1);
background-color: var(--bg2-alt0);
}
div.started-yesterday{
@ -778,7 +799,7 @@ div.now-playing{
}
div.archived p{
color: var(--bg2-alt0);
color: var(--accent0-alt2);
}
.queue-playlists-div{