mirror of
https://github.com/oobabooga/text-generation-webui.git
synced 2024-10-01 01:26:03 -04:00
Beautify all CSS
This commit is contained in:
parent
231305d0f5
commit
35009c32f0
10
css/chat.css
10
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%;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
@ -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
68
css/main.css
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user