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

Fixed send button glow to match input on 'The Network' theme

Browse source
This commit is contained in:
rainbow napkin 2026-10-05 21:52:27 -04:00
parent 75485525f0
commit e6e061ab44
1 changed files with 28 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -45,6 +45,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
--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-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: 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;
--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: firebrick;
--danger0-alt0: rgb(121, 11, 11); --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]){ #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){ .chat-entry:nth-child(even){
background-color: var(--bg0); 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 */ /* 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{ #chat-panel-control-div:has(#chat-panel-prompt:focus):has(#chat-panel-send-button:not([style*="display: none"])):after{
content: ''; content: '';
position: absolute;
background: linear-gradient(to top, var(--focus0), rgb(0,0,0,0));
width: calc(100% - 2.5rem); width: calc(100% - 2.5rem);
height: 3px; height: 3px;
top: -3px; top: -3px;
background: linear-gradient(to top, var(--focus0), rgb(0,0,0,0));
position: absolute;
pointer-events: none; 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 */ /* Use a basic box shadow if we dont have a send button */