mmarch/text-generation-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Restyle the chat input box + several CSS improvements

Browse source 
- Remove extra spacing below the last chat message
- Change the background color of code blocks in dark mode
- Remove border radius from selected header bar elements
- Make the chat scrollbar more discrete
This commit is contained in:
oobabooga 2023-08-17 11:06:18 -07:00
parent cebe07f29c
commit bdb6eb5734
4 changed files with 43 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

6
css/html_instruct_style.css
View file

@ -43,6 +43,10 @@
margin-bottom: 9px !important;
}
.gradio-container .chat .assistant-message:last-child, .gradio-container .chat .user-message:last-child {
margin-bottom: 0px !important;
}
.dark .chat .assistant-message {
background-color: #3741519e;
border: 1px solid #4b5563;
@ -58,5 +62,5 @@ code {
}
.dark code {
background-color: #1a212f !important;
background-color: #0e1321 !important;
}

32
css/main.css
View file

@ -100,6 +100,10 @@ div.svelte-15lo0d8 > *, div.svelte-15lo0d8 > .form > * {
background-color: #8080802b;
}
.header_bar button.selected {
border-radius: 0;
}
.textbox_default textarea {
height: calc(100dvh - 310px);
}
@ -166,7 +170,7 @@ button {
}
.pretty_scrollbar::-webkit-scrollbar {
width: 10px;
width: 5px;
}
.pretty_scrollbar::-webkit-scrollbar-track {
@ -176,13 +180,11 @@ button {
.pretty_scrollbar::-webkit-scrollbar-thumb,
.pretty_scrollbar::-webkit-scrollbar-thumb:hover {
background: #c5c5d2;
border-radius: 10px;
}
.dark .pretty_scrollbar::-webkit-scrollbar-thumb,
.dark .pretty_scrollbar::-webkit-scrollbar-thumb:hover {
background: #374151;
border-radius: 10px;
}
.pretty_scrollbar::-webkit-resizer {
@ -247,7 +249,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
#chat {
height: calc(100dvh - 272px) !important;
height: calc(100dvh - 262px) !important;
}
.bigchat #chat {
@ -265,7 +267,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
max-width: 800px;
height: 100%;
overflow-y: auto;
padding-right: 20px;
padding-right: 15px;
display: flex;
flex-direction: column;
word-break: break-word;
@ -274,7 +276,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
}
#chat {
height: calc(100dvh - 284px);
height: calc(100dvh - 272px);
}
.bigchat #chat {
@ -284,7 +286,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
#show-controls {
position: absolute;
background-color: transparent;
left: calc(100% - 140px);
left: calc(100% - 130px);
}
.chat > .messages {
@ -292,6 +294,11 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
flex-direction: column;
}
.chat .message:last-child {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
.message-body li {
margin-top: 0.5em !important;
margin-bottom: 0.5em !important;
@ -322,6 +329,17 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
white-space: normal !important;
}
#chat-input {
padding: 0;
padding-top: 18px;
background: var(--background-fill-primary);
border: none;
}
#chat-input textarea:focus {
box-shadow: none !important;
}
@media print {
body {
visibility: hidden;