Chat CSS improvements

This commit is contained in:
oobabooga 2023-10-20 12:30:01 -07:00
parent 32984ea2f0
commit dedbdb46c2
3 changed files with 30 additions and 19 deletions

View File

@ -4,7 +4,11 @@
padding-bottom: 25px; padding-bottom: 25px;
font-size: 15px; font-size: 15px;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif; font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
line-height: 23px !important; line-height: 22.5px !important;
}
.message-body {
margin-top: 2px;
} }
.circle-you { .circle-you {
@ -29,10 +33,6 @@
object-fit: cover; object-fit: cover;
} }
.text p {
margin-top: 5px;
}
.username { .username {
font-weight: bold; font-weight: bold;
} }
@ -44,9 +44,16 @@
} }
.message-body p { .message-body p {
margin-bottom: 0 !important;
font-size: 15px !important; font-size: 15px !important;
line-height: 23px !important; line-height: 22.5px !important;
}
.message-body p, .chat .message-body ul, .chat .message-body ol {
margin-bottom: 23.4375px !important;
}
.message-body p:last-child, .chat .message-body ul:last-child, .chat .message-body ol:last-child {
margin-bottom: 0em !important;
} }
.dark .message-body p em { .dark .message-body p em {

View File

@ -11,13 +11,13 @@
display: none; display: none;
} }
.message-body p { .message-body p, .message-body li {
font-size: 15px !important; font-size: 15px !important;
line-height: 22px !important; line-height: 22.5px !important;
} }
.message-body p, .chat .message-body ul, .chat .message-body ol { .message-body p, .chat .message-body ul, .chat .message-body ol {
margin-bottom: 1.25em !important; margin-bottom: 23.4375px !important;
} }
.message-body p:last-child, .chat .message-body ul:last-child, .chat .message-body ol:last-child { .message-body p:last-child, .chat .message-body ul:last-child, .chat .message-body ol:last-child {
@ -33,16 +33,16 @@
} }
.gradio-container .chat .assistant-message { .gradio-container .chat .assistant-message {
padding: 15px; padding: 20px;
border-radius: 20px; border-radius: 15px;
background-color: #0000000f; background-color: #0000000f;
margin-top: 9px !important; margin-top: 9px !important;
margin-bottom: 18px !important; margin-bottom: 18px !important;
} }
.gradio-container .chat .user-message { .gradio-container .chat .user-message {
padding: 15px; padding: 20px;
border-radius: 20px; border-radius: 15px;
margin-bottom: 9px !important; margin-bottom: 9px !important;
} }

View File

@ -364,9 +364,13 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
padding-bottom: 0px !important; padding-bottom: 0px !important;
} }
.message-body li { .message-body li:not(:last-child) {
margin-top: 0 !important; margin-top: 0 !important;
margin-bottom: 0 !important; margin-bottom: 2px !important;
}
.message-body li:last-child {
margin-bottom: 0px !important;
} }
.message-body li > p { .message-body li > p {
@ -382,7 +386,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
} }
.message-body pre:not(:last-child) { .message-body pre:not(:last-child) {
margin-bottom: 1.25em !important; margin-bottom: 35.625px !important;
} }
.message-body pre:last-child { .message-body pre:last-child {
@ -395,13 +399,13 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
border: 1px solid var(--border-color-primary); border: 1px solid var(--border-color-primary);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--background-fill-secondary); background: var(--background-fill-secondary);
font-size: 85%; font-size: 90%;
padding: 1px 3px; padding: 1px 3px;
} }
.message-body pre > code { .message-body pre > code {
display: block; display: block;
padding: .5em .7em; padding: 15px;
} }
.message-body :not(pre) > code { .message-body :not(pre) > code {