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

Fixed some hacky drop-shadow related CSS, then added some moar XP

Browse source
This commit is contained in:
rainbow napkin 2026-10-05 20:11:13 -04:00
parent ab8a416e12
commit b78b64ef5d
1 changed files with 24 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -41,6 +41,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
--focus0-alt1: rgb(12, 85, 12); --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: 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: 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: 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: 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;
@ -286,10 +287,14 @@ div.control-prompt{
background-color: var(--bg2); 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) */ /* 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: ''; content: '';
box-shadow: var(--focus-glow0-inset); box-shadow: var(--focus-glow0-inset-top);
width: calc(100% - 2.5rem); width: calc(100% - 2.5rem);
height: 2em; height: 2em;
position: absolute; position: absolute;
@ -297,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 */ /* 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"]){ #chat-panel-control-div:focus-within:has(#chat-panel-send-button[style*="display: none"]){
box-shadow: var(--focus-glow0-inset); box-shadow: var(--focus-glow0-inset-top);
} }
input.control-prompt, input.control-prompt:focus{ input.control-prompt, input.control-prompt:focus{
@ -359,17 +364,32 @@ p.channel-guide-entry-item{
/* channel */ /* channel */
#media-panel-div{ #media-panel-div{
background-color: black; background-color: black;
z-index: 1;
} }
#chat-panel-buffer-div{ #chat-panel-buffer-div{
background-color: var(--bg2); 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{ #chat-area{
background-color: var(--bg2); background-color: var(--bg2);
} }
#chat-panel-head-div{ #chat-panel-head-div{
background-color: var(--bg0); background-color: var(--bg0);
box-shadow: -1px .5em .5em var(--bg2);
} }
#chat-panel-head-spacer-span, #chat-panel-users-div{ #chat-panel-head-spacer-span, #chat-panel-users-div{