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 {
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%;
}

20
css/chat_style-TheEncrypted777.css
View file

@ -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;
}

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

@ -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;
}

19
css/chat_style-messenger.css
View file

@ -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;
float: left;
background-color: #E4E6EB;
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;
}

32
css/chat_style-wpp.css
View file

@ -19,35 +19,36 @@
}
.text-you {
background-color: #d9fdd3;
border-radius: 15px;
padding: 10px;
padding-top: 5px;
float: right;
background-color: #d9fdd3;
border-radius: 15px;
padding: 10px;
padding-top: 5px;
float: right;
}
.text-bot {
background-color: #f2f2f2;
border-radius: 15px;
padding: 10px;
padding-top: 5px;
background-color: #f2f2f2;
border-radius: 15px;
padding: 10px;
padding-top: 5px;
}
.dark .text-you {
background-color: #005c4b;
color: #111b21;
background-color: #005c4b;
color: #111b21;
}
.dark .text-bot {
background-color: #1f2937;
color: #111b21;
background-color: #1f2937;
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;
}

1
css/html_4chan_style.css
View file

@ -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);

26
css/html_instruct_style.css
View file

@ -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;
border-radius: 20px;
background-color: #0000000f;
margin-top: 9px !important;
margin-bottom: 18px !important;
padding: 15px;
border-radius: 20px;
background-color: #0000000f;
margin-top: 9px !important;
margin-bottom: 18px !important;
}
.gradio-container .chat .user-message {
padding: 15px;
border-radius: 20px;
margin-bottom: 9px !important;
padding: 15px;
border-radius: 20px;
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;
}

2
css/html_readable_style.css
View file

@ -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;

68
css/main.css
View file

@ -11,29 +11,29 @@
}
#refresh-button {
flex: none;
margin: 0;
padding: 0;
min-width: 50px;
border: none;
box-shadow: none;
border-radius: 10px;
background-color: #0000000d;
flex: none;
margin: 0;
padding: 0;
min-width: 50px;
border: none;
box-shadow: none;
border-radius: 10px;
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;
padding-top: 0 !important;
max-width: 100% !important;
padding-top: 0 !important;
}
#extensions {
padding: 15px;
margin-bottom: 35px;
padding: 15px;
margin-bottom: 35px;
}
.extension-tab {
border: 0 !important;
border: 0 !important;
}
span.math.inline {
font-size: 27px;
vertical-align: baseline !important;
font-size: 27px;
vertical-align: baseline !important;
}
div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
flex-wrap: nowrap;
flex-wrap: nowrap;
}
.header_bar {
background-color: #f7f7f7;
margin-bottom: 30px;
background-color: #f7f7f7;
margin-bottom: 30px;
}
.dark .header_bar {
border: none !important;
background-color: #8080802b;
border: none !important;
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;
color: #46464A !important;
font-size: 16px !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;
}