Mirrors/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2024-09-20 18:45:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Beautify all CSS

Browse source
This commit is contained in:
oobabooga 2023-05-25 13:12:34 -03:00
parent 231305d0f5
commit 35009c32f0
9 changed files with 99 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
css/chat.css
View file

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

20
css/chat_style-TheEncrypted777.css
View file

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

7
css/chat_style-cai-chat.css
View file

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

19
css/chat_style-messenger.css
View file

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

32
css/chat_style-wpp.css
View file

@ -19,35 +19,36 @@
} }
.text-you { .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 { .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 { .dark .text-you {
background-color: #005c4b; background-color: #005c4b;
color: #111b21; color: #111b21;
} }
.dark .text-bot { .dark .text-bot {
background-color: #1f2937; background-color: #1f2937;
color: #111b21; color: #111b21;
} }
.text-bot p, .text-you p { .text-bot p, .text-you p {
margin-top: 5px; margin-top: 5px;
} }
.message-body {} .message-body {
}
.message-body img { .message-body img {
max-width: 300px; max-width: 300px;
@ -73,6 +74,7 @@
.message-body code { .message-body code {
overflow-x: auto; overflow-x: auto;
} }
.message-body :not(pre) > code { .message-body :not(pre) > code {
white-space: normal !important; white-space: normal !important;
} }

1
css/html_4chan_style.css
View file

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

26
css/html_instruct_style.css
View file

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

2
css/html_readable_style.css
View file

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

68
css/main.css
View file

@ -11,29 +11,29 @@
} }
#refresh-button { #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 { #download-label, #upload-label {
min-height: 0 min-height: 0
} }
#accordion { #accordion {
} }
.dark svg { .dark svg {
fill: white; fill: white;
} }
.dark a { .dark a {
color: white !important; color: white !important;
} }
ol li p, ul li p { 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 { #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 { .gradio-container-3-18-0 .prose * h1, h2, h3, h4 {
color: white; color: white;
} }
.gradio-container { .gradio-container {
max-width: 100% !important; max-width: 100% !important;
padding-top: 0 !important; padding-top: 0 !important;
} }
#extensions { #extensions {
padding: 15px; padding: 15px;
margin-bottom: 35px; margin-bottom: 35px;
} }
.extension-tab { .extension-tab {
border: 0 !important; border: 0 !important;
} }
span.math.inline { span.math.inline {
font-size: 27px; font-size: 27px;
vertical-align: baseline !important; vertical-align: baseline !important;
} }
div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * { div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.header_bar { .header_bar {
background-color: #f7f7f7; background-color: #f7f7f7;
margin-bottom: 30px; margin-bottom: 30px;
} }
.dark .header_bar { .dark .header_bar {
border: none !important; border: none !important;
background-color: #8080802b; background-color: #8080802b;
} }
.textbox_default textarea { .textbox_default textarea {
height: calc(100vh - 381px); height: calc(100vh - 381px);
} }
.textbox_default_output textarea { .textbox_default_output textarea {
height: calc(100vh - 200px); height: calc(100vh - 200px);
} }
.textbox textarea { .textbox textarea {
height: calc(100vh - 251px); height: calc(100vh - 251px);
} }
.textbox_default textarea, .textbox_default_output textarea, .textbox textarea { .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 { .dark textarea {
color: #efefef !important; color: #efefef !important;
} }
/* Hide the gradio footer*/ /* Hide the gradio footer*/
footer { footer {
display: none !important; display: none !important;
} }
button { button {
font-size: 14px !important; font-size: 14px !important;
} }
.small-button { .small-button {
max-width: 171px; max-width: 171px;
} }