Chat CSS improvements

oobabooga · Oct 20, 2023 · dedbdb4 · dedbdb4
1 parent 32984ea
commit dedbdb4
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/css/chat_style-cai-chat.css b/css/chat_style-cai-chat.css
@@ -4,7 +4,11 @@
     padding-bottom: 25px;
     font-size: 15px;
     font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
-    line-height: 23px !important;
+    line-height: 22.5px !important;
+}
+
+.message-body {
+    margin-top: 2px;
 }
 
 .circle-you {
@@ -29,10 +33,6 @@
     object-fit: cover;
 }
 
-.text p {
-    margin-top: 5px;
-}
-
 .username {
     font-weight: bold;
 }
@@ -44,9 +44,16 @@
 }
 
 .message-body p {
-    margin-bottom: 0 !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 {

diff --git a/css/html_instruct_style.css b/css/html_instruct_style.css
@@ -11,13 +11,13 @@
     display: none;
 }
 
-.message-body p {
+.message-body p, .message-body li {
     font-size: 15px !important;
-    line-height: 22px !important;
+    line-height: 22.5px !important;
 }
 
 .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 {
@@ -33,16 +33,16 @@
 }
 
 .gradio-container .chat .assistant-message {
-    padding: 15px;
-    border-radius: 20px;
+    padding: 20px;
+    border-radius: 15px;
     background-color: #0000000f;
     margin-top: 9px !important;
     margin-bottom: 18px !important;
 }
 
 .gradio-container .chat .user-message {
-    padding: 15px;
-    border-radius: 20px;
+    padding: 20px;
+    border-radius: 15px;
     margin-bottom: 9px !important;
 }
 

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