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

Continued work on 'The Network' theme.

Browse source
This commit is contained in:
rainbow napkin 2026-10-03 07:30:20 -04:00
parent a23175c626
commit 3815617a8e
1 changed files with 47 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,12 +20,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
--bg0: rgb(37, 37, 37); --bg0: rgb(37, 37, 37);
--bg0-alpha0: rgba(37, 37, 37, 0.4); --bg0-alpha0: rgba(37, 37, 37, 0.4);
--bg0-alpha1: rgba(37, 37, 37, 0.75); --bg0-alpha1: rgba(37, 37, 37, 0.75);
--bg1: rgb(1, 1, 1); --bg1: rgb(0, 0, 0);
--bg1-gradient: linear-gradient(to top, rgb(1, 1, 1), rgb(37, 37, 37)); --bg1-gradient: linear-gradient(to top, rgb(1, 1, 1), rgb(37, 37, 37));
--bg2: rgb(0, 0, 0); --bg2: rgb(20, 20, 20);
--bg1-alt0: rgb(30, 30, 30); --bg1-alt0: rgb(30, 30, 30);
--bg2-alt0: rgb(200, 200, 200); --bg2-alt0: rgb(60, 60, 60);
--bg2-alt1: rgb(180, 180, 180); --bg2-alt1: rgb(25, 25, 25);
--accent0: rgb(212, 212, 212); --accent0: rgb(212, 212, 212);
--accent0-alt0: rgb(185, 185, 185); --accent0-alt0: rgb(185, 185, 185);
@ -240,7 +240,7 @@ textarea{
} }
.dynamic-container{ .dynamic-container{
background-color: var(--bg1); background-color: var(--bg2);
color: var(--accent1); color: var(--accent1);
} }
@ -251,7 +251,7 @@ textarea{
} }
.dynamic-container, .nested-dynamic-container{ .dynamic-container, .nested-dynamic-container{
box-shadow: 3px 3px 1px var(--bg1-alt0) inset; box-shadow: 3px 3px 1px var(--bg1) inset;
border-radius: 1em; border-radius: 1em;
} }
@ -274,18 +274,29 @@ a.admin-list-entry-item{
div.control-prompt{ div.control-prompt{
border-radius: 1em; border-radius: 1em;
background-color: var(--bg0); background-color: var(--bg2);
} }
div.control-prompt:focus-within{ /* 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) */
box-shadow: var(--focus-glow0); div.control-prompt:has(#chat-panel-prompt:focus):has(#chat-panel-send-button:not([style*="display: none"])):before{
content: '';
box-shadow: var(--focus-glow0-inset);
width: calc(100% - 2.5rem);
height: 2em;
position: absolute;
pointer-events: none;
}
/* 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);
} }
input.control-prompt, input.control-prompt:focus{ input.control-prompt, input.control-prompt:focus{
border: none; border: none;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
background-color: var(--bg0); background-color: var(--bg2);
color: var(--accent0); color: var(--accent0);
} }
@ -365,8 +376,33 @@ p.channel-guide-entry-item{
#chat-panel-control-div{ #chat-panel-control-div{
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
background-color: var(--bg1);
} }
#chat-panel-prompt{
background-color: rgba(0,0,0,0);
}
#chat-panel-send-button{
height: 100%;
width: 2.5rem;
padding: 0;
margin: 0 0;
border-radius: 0;
background-color: var(--bg0);
border-left: solid 1px var(--accent0);
}
#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);
}
.chat-entry:nth-child(even){ .chat-entry:nth-child(even){
background-color: var(--bg0); background-color: var(--bg0);
} }
@ -734,7 +770,7 @@ div.now-playing{
} }
div.archived p{ div.archived p{
color: var(--bg2-alt1); color: var(--bg2-alt0);
} }
.queue-playlists-div{ .queue-playlists-div{