Beautify all CSS

css/chat.css

@@ -25,19 +25,19 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 }
 
 #extensions {
-  padding: 0;
+    padding: 0;
-  padding: 0;
+    padding: 0;
 }
 
 #gradio-chatbot {
-  height: 66.67vh;
+    height: 66.67vh;
 }
 
 .wrap.svelte-6roggh.svelte-6roggh {
-  max-height: 92.5%;
+    max-height: 92.5%;
 }
 
 /* This is for the microphone button in the whisper extension */
 .sm.svelte-1ipelgc {
-  width: 100%;
+    width: 100%;
 }

css/chat_style-TheEncrypted777.css

@@ -78,10 +78,10 @@
     padding-top: 5px;
     /*Message gradient background color - remove the line bellow if you don't want a background color or gradient*/
     background: linear-gradient(to bottom, #171730, #1b263f);
-  }
+}
   
   /*Adds 2 extra lines at the top and bottom of the message*/
-  .message-body:before,
+.message-body:before,
   .message-body:after {
     content: "";
     position: absolute;
@@ -89,16 +89,15 @@
     right: 10px;
     height: 1px;
     background-color: rgba(255, 255, 255, 0.13);
-  }
+}
 
-  .message-body:before {
+.message-body:before {
     top: 6px;
-  }
+}
 
-  .message-body:after {
+.message-body:after {
     bottom: 6px;
-  }
+}
-  
 
 .message-body img {
     max-width: 300px;
@@ -124,6 +123,7 @@
 .message-body code {
     overflow-x: auto;
 }
+
 .message-body :not(pre) > code {
     white-space: normal !important;
 }

css/chat_style-cai-chat.css

@@ -42,7 +42,8 @@
     object-fit: cover;
 }
 
-.text {}
+.text {
+}
 
 .text p {
     margin-top: 5px;
@@ -52,7 +53,8 @@
     font-weight: bold;
 }
 
-.message-body {}
+.message-body {
+}
 
 .message-body img {
     max-width: 300px;
@@ -78,6 +80,7 @@
 .message-body code {
     overflow-x: auto;
 }
+
 .message-body :not(pre) > code {
     white-space: normal !important;
 }

css/chat_style-messenger.css

@@ -42,18 +42,20 @@
     height: 100%;
     object-fit: cover;
 }
+
 .circle-you {
-	margin-top: 5px;
+    margin-top: 5px;
     float: right;
 }
+
 .circle-bot + .text, .circle-you + .text {
     border-radius: 18px;
     padding: 8px 12px;
 }
 
 .circle-bot + .text {
-	background-color: #E4E6EB;
+    background-color: #E4E6EB;
-	float: left;
+    float: left;
 }
 
 .circle-you + .text {
@@ -63,10 +65,11 @@
 }
 
 .circle-you + .text div, .circle-you + .text *, .dark .circle-you + .text div, .dark .circle-you + .text * {
-	color: #FFF !important;
+    color: #FFF !important;
 }
+
 .circle-you + .text .username {
-	text-align: right;
+    text-align: right;
 }
 
 .dark .circle-bot + .text div, .dark .circle-bot + .text * {
@@ -74,7 +77,7 @@
 }
 
 .text {
-	max-width: 80%;
+    max-width: 80%;
 }
 
 .text p {
@@ -85,7 +88,8 @@
     font-weight: bold;
 }
 
-.message-body {}
+.message-body {
+}
 
 .message-body img {
     max-width: 300px;
@@ -111,6 +115,7 @@
 .message-body code {
     overflow-x: auto;
 }
+
 .message-body :not(pre) > code {
     white-space: normal !important;
 }

css/chat_style-wpp.css

@@ -19,35 +19,36 @@
 }
 
 .text-you {
-  background-color: #d9fdd3;
+    background-color: #d9fdd3;
-  border-radius: 15px;
+    border-radius: 15px;
-  padding: 10px;
+    padding: 10px;
-  padding-top: 5px;
+    padding-top: 5px;
-  float: right;
+    float: right;
 }
 
 .text-bot {
-  background-color: #f2f2f2;
+    background-color: #f2f2f2;
-  border-radius: 15px;
+    border-radius: 15px;
-  padding: 10px;
+    padding: 10px;
-  padding-top: 5px;
+    padding-top: 5px;
 }
 
 .dark .text-you {
-  background-color: #005c4b;
+    background-color: #005c4b;
-  color: #111b21;
+    color: #111b21;
 }
 
 .dark .text-bot {
-  background-color: #1f2937;
+    background-color: #1f2937;
-  color: #111b21;
+    color: #111b21;
 }
 
 .text-bot p, .text-you p {
-  margin-top: 5px;
+    margin-top: 5px;
 }
 
-.message-body {}
+.message-body {
+}
 
 .message-body img {
     max-width: 300px;
@@ -73,6 +74,7 @@
 .message-body code {
     overflow-x: auto;
 }
+
 .message-body :not(pre) > code {
     white-space: normal !important;
 }

css/html_4chan_style.css

@@ -2,6 +2,7 @@
     background-color: #eef2ff;
     padding: 17px;
 }
+
 #parent #container .reply {
     background-color: rgb(214, 218, 240);
     border-bottom-color: rgb(183, 197, 217);

css/html_instruct_style.css

@@ -24,7 +24,8 @@
     display: none;
 }
 
-.message-body {}
+.message-body {
+}
 
 .message-body p {
     font-size: 15px !important;
@@ -44,6 +45,7 @@
 .message-body code {
     overflow-x: auto;
 }
+
 .message-body :not(pre) > code {
     white-space: normal !important;
 }
@@ -57,27 +59,27 @@
 }
 
 .gradio-container .chat .assistant-message {
-  padding: 15px;
+    padding: 15px;
-  border-radius: 20px;
+    border-radius: 20px;
-  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 {
-  padding: 15px;
+    padding: 15px;
-  border-radius: 20px;
+    border-radius: 20px;
-  margin-bottom: 9px !important;
+    margin-bottom: 9px !important;
 }
 
 .dark .chat .assistant-message {
-  background-color: #374151;
+    background-color: #374151;
 }
 
 code {
-  background-color: white !important;
+    background-color: white !important;
 }
 
 .dark code {
-  background-color: #1a212f !important;
+    background-color: #1a212f !important;
 }

css/html_readable_style.css

@@ -3,7 +3,7 @@
     margin-left: auto;
     margin-right: auto;
     background-color: rgb(31, 41, 55);
-    padding:3em;
+    padding: 3em;
     word-break: break-word;
     overflow-wrap: anywhere;
     color: #efefef !important;

css/main.css

@@ -11,29 +11,29 @@
 }
 
 #refresh-button {
-  flex: none;
+    flex: none;
-  margin: 0;
+    margin: 0;
-  padding: 0;
+    padding: 0;
-  min-width: 50px;
+    min-width: 50px;
-  border: none;
+    border: none;
-  box-shadow: none;
+    box-shadow: none;
-  border-radius: 10px;
+    border-radius: 10px;
-  background-color: #0000000d;
+    background-color: #0000000d;
 }
 
 #download-label, #upload-label {
-  min-height: 0
+    min-height: 0
 }
 
 #accordion {
 }
 
 .dark svg {
-  fill: white;
+    fill: white;
 }
 
 .dark a {
-  color: white !important;
+    color: white !important;
 }
 
 ol li p, ul li p {
@@ -41,76 +41,76 @@ ol li p, ul li p {
 }
 
 #main, #parameters, #chat-settings, #interface-mode, #lora, #training-tab, #model-tab {
-  border: 0;
+    border: 0;
 }
 
 .gradio-container-3-18-0 .prose * h1, h2, h3, h4 {
-  color: white;
+    color: white;
 }
 
 .gradio-container {
-  max-width: 100% !important;
+    max-width: 100% !important;
-  padding-top: 0 !important;
+    padding-top: 0 !important;
 }
 
 #extensions {
-  padding: 15px;
+    padding: 15px;
-  margin-bottom: 35px;
+    margin-bottom: 35px;
 }
 
 .extension-tab {
-  border: 0 !important;
+    border: 0 !important;
 }
 
 span.math.inline {
-  font-size: 27px;
+    font-size: 27px;
-  vertical-align: baseline !important;
+    vertical-align: baseline !important;
 }
 
 div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
-  flex-wrap: nowrap;
+    flex-wrap: nowrap;
 }
 
 .header_bar {
-  background-color: #f7f7f7;
+    background-color: #f7f7f7;
-  margin-bottom: 30px;
+    margin-bottom: 30px;
 }
 
 .dark .header_bar {
-  border: none !important;
+    border: none !important;
-  background-color: #8080802b;
+    background-color: #8080802b;
 }
 
 .textbox_default textarea {
-  height: calc(100vh - 381px);
+    height: calc(100vh - 381px);
 }
 
 .textbox_default_output textarea {
-  height: calc(100vh - 200px);
+    height: calc(100vh - 200px);
 }
 
 .textbox textarea {
-  height: calc(100vh - 251px);
+    height: calc(100vh - 251px);
 }
 
 .textbox_default textarea, .textbox_default_output textarea, .textbox textarea {
-  font-size: 16px !important;
+    font-size: 16px !important;
-  color: #46464A !important;
+    color: #46464A !important;
 }
 
 .dark textarea {
-  color: #efefef !important;
+    color: #efefef !important;
 }
 
 /* Hide the gradio footer*/
 footer {
-  display: none !important;
+    display: none !important;
 }
 
 button {
-  font-size: 14px !important;
+    font-size: 14px !important;
 }
 
 .small-button {
-  max-width: 171px;
+    max-width: 171px;
 }