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

Emote Palette UI Complete

Browse source
This commit is contained in:
rainbow napkin 2024-12-21 16:47:19 -05:00
parent 633884534c
commit 42d306e1f2
6 changed files with 148 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

4
www/css/adminPanel.css
View file

@ -126,6 +126,10 @@ i.toke-command-list{
margin: 0.2em;
}
#new-emote-button{
margin-left: 0.3em;
}
#emote-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));

5
www/css/channel.css
View file

@ -101,6 +101,7 @@ div#chat-panel-main-div{
.right-drag-handle{
right: 0;
width: 0.6em;
}
#chat-panel-multipanel-div{
@ -236,10 +237,14 @@ span.user-entry{
top: 0;
bottom: 0;
left: 0;
overflow-y: auto;
scrollbar-width: thin;
}
#cpanel-pinned-div{
position: relative;
overflow-y: auto;
scrollbar-width: thin;
}
.cpanel-div{

28
www/css/panel/emote.css
View file

@ -2,6 +2,7 @@
display: flex;
flex-direction: row;
text-wrap: nowrap;
user-select: none;
}
.title-filler-span{
@ -13,6 +14,7 @@
.emote-panel-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
flex-direction: column;
padding: 1em;
justify-items: center;
}
@ -23,6 +25,13 @@ div.emote-panel-list-emote{
flex-direction: column;
padding: 0.5em 0;
margin: 0.5em;
user-select: none;
cursor: pointer;
}
div.emote-panel-list-big-emote{
width: 100%;
margin: 0.5em auto;
}
p.emote-list-title{
@ -34,4 +43,23 @@ p.emote-list-title{
max-height: 8em;
max-width: 8em;
margin: auto;
}
.emote-list-big-media{
max-height: 80VH;
max-width: 100%;
margin: 0.5em;
}
div.panel-control-prompt{
margin: 0.5em;
flex: 1;
}
#emote-panel-personal-prompts{
display: flex;
}
#new-emote-button{
margin-left: 0.3em;
}

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

@ -37,7 +37,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
--focus0-alt0: rgb(229, 255, 229);
--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-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;
--danger0: firebrick;
--danger0-alt0: rgb(121, 11, 11);
@ -71,12 +73,12 @@ a{
color: var(--accent0);
}
a:hover, i:hover{
a:hover, i:hover, .interactive:hover{
color: var(--focus0-alt0);
text-shadow: var(--focus-glow0);
}
a:active, i:active{
a:active, i:active, .interactive:active{
color: var(--focus0-alt1);
text-shadow: var(--focus-glow0-alt0);
}
@ -347,7 +349,20 @@ select.panel-head-element{
background-color: var(--accent0);
}
div.emote-panel-list-emote{
border: 1px solid var(--accent0);
}
.emote-panel-list-emote:hover{
color: var(--focus0-alt0);
border: 1px solid var(--focus0-alt0);
text-shadow: var(--focus-glow0);
box-shadow: var(--focus-glow0), var(--focus-glow0-inset);
}
.emote-panel-list-emote:active{
color: var(--focus0-alt1);
text-shadow: var(--focus-glow0-alt0);
border: 1px solid var(--focus0-alt1);
box-shadow: var(--focus-glow0-alt0), var(--focus-glow0-alt0-inset);
}