klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 13:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Comment css styling of chat page for later reference

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2023-01-13 22:40:01 -03:00
parent cfef346d03
commit 16d4560ff8
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/interface/web/chat.html
View File

@@ -148,8 +148,9 @@
font-size: medium; font-size: medium;
margin: 0px; margin: 0px;
line-height: 20px; line-height: 20px;
overflow-y: scroll; overflow-y: scroll; /* Make chat body scroll to see history */
} }
/* add chat metatdata to bottom of bubble */
.chat-message::after { .chat-message::after {
content: attr(data-meta); content: attr(data-meta);
display: block; display: block;
@@ -157,14 +158,17 @@
color: #475569; color: #475569;
margin: -12px 7px 0 -5px; margin: -12px 7px 0 -5px;
} }
/* move message by khoj to left */
.chat-message.khoj { .chat-message.khoj {
margin-left: auto; margin-left: auto;
text-align: left; text-align: left;
} }
/* move message by you to right */
.chat-message.you { .chat-message.you {
margin-right: auto; margin-right: auto;
text-align: right; text-align: right;
} }
/* basic style chat message text */
.chat-message-text { .chat-message-text {
margin: 10px; margin: 10px;
border-radius: 10px; border-radius: 10px;
@@ -174,11 +178,13 @@
max-width: 80%; max-width: 80%;
text-align: left; text-align: left;
} }
/* color chat bubble by khoj blue */
.chat-message-text.khoj { .chat-message-text.khoj {
color: #f8fafc; color: #f8fafc;
background: #017eff; background: #017eff;
margin-left: auto; margin-left: auto;
} }
/* add left protrusion to khoj chat bubble */
.chat-message-text.khoj:after { .chat-message-text.khoj:after {
content: ''; content: '';
position: absolute; position: absolute;
@@ -189,11 +195,13 @@
border-bottom: 0; border-bottom: 0;
transform: rotate(-60deg); transform: rotate(-60deg);
} }
/* color chat bubble by you dark grey */
.chat-message-text.you { .chat-message-text.you {
color: #f8fafc; color: #f8fafc;
background: #475569; background: #475569;
margin-right: auto; margin-right: auto;
} }
/* add right protrusion to you chat bubble */
.chat-message-text.you:after { .chat-message-text.you:after {
content: ''; content: '';
position: absolute; position: absolute;