mirror of
https://github.com/oobabooga/text-generation-webui.git
synced 2024-10-01 01:26:03 -04:00
Create chat_style-messenger.css (#2187)
Add Messenger-like style for chat mode
This commit is contained in:
parent
499c2e009e
commit
c98d6ad27f
124
css/chat_style-messenger.css
Normal file
124
css/chat_style-messenger.css
Normal file
@ -0,0 +1,124 @@
|
||||
.chat {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 800px;
|
||||
height: calc(100vh - 306px);
|
||||
overflow-y: auto;
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding-bottom: 25px;
|
||||
font-size: 15px;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
line-height: 1.428571429;
|
||||
}
|
||||
|
||||
.circle-you {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: rgb(238, 78, 59);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.circle-bot {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: rgb(59, 78, 244);
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.circle-bot img,
|
||||
.circle-you img {
|
||||
border-radius: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.circle-you {
|
||||
margin-top: 5px;
|
||||
float: right;
|
||||
}
|
||||
.circle-bot + .text, .circle-you + .text {
|
||||
border-radius: 18px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.circle-bot + .text {
|
||||
background-color: #E4E6EB;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.circle-you + .text {
|
||||
float: right;
|
||||
background-color: rgb(0, 132, 255);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.circle-you + .text div, .circle-you + .text *, .dark .circle-you + .text div, .dark .circle-you + .text * {
|
||||
color: #FFF !important;
|
||||
}
|
||||
.circle-you + .text .username {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dark .circle-bot + .text div, .dark .circle-bot + .text * {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.text {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.text p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message-body {}
|
||||
|
||||
.message-body img {
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.message-body p {
|
||||
margin-bottom: 0 !important;
|
||||
font-size: 15px !important;
|
||||
line-height: 1.428571429 !important;
|
||||
}
|
||||
|
||||
.message-body li {
|
||||
margin-top: 0.5em !important;
|
||||
margin-bottom: 0.5em !important;
|
||||
}
|
||||
|
||||
.message-body li > p {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.message-body code {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.message-body :not(pre) > code {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.dark .message-body p em {
|
||||
color: rgb(138, 138, 138) !important;
|
||||
}
|
||||
|
||||
.message-body p em {
|
||||
color: rgb(110, 110, 110) !important;
|
||||
}
|
Loading…
Reference in New Issue
Block a user