badrihippo/convo
badrihippo/convo
1
0
Fork 0
Code Issues 7 Pull requests Packages Projects 1 Releases Wiki Activity

Smarten chatbox styling

Browse source 
They now can take on any width (for example when the message is
shorter), and the font is larger for emoji-only messages
This commit is contained in:
Badri Sunderarajan 2022-09-17 22:28:23 +05:30
parent cf926cd5b6
commit e5a9ea5905
1 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/ChatMessage.svelte
View file

@ -14,7 +14,7 @@
>
<div class="chat-item-row">
<div class="avatar"></div>
<div class="chat-item">
<div class="chat-item{message.attributes?.is_only_emojis ? ' only-emoji' : ''}">
<p>{message.attributes?.message}</p>
</div>
</div>
@ -56,11 +56,11 @@
color: var(--chatbox-color);
padding: 0;
display: inline-block;
width: calc(100% - 4rem);
max-width: calc(100% - 4rem);
border-radius: 0 1rem 1rem 1rem;
}
.chat-item p{
.chat-item p {
word-wrap: break-word;
overflow: hidden;
font-size: 1.7rem;
@ -68,6 +68,10 @@
margin: 1rem;
}
.chat-item.only-emoji p {
font-size: 3rem;
}
.chat-item-indicator:focus-within {
background: var(--chatbox-indicator-background-focused);
}