mirror of
https://github.com/oobabooga/text-generation-webui.git
synced 2026-04-04 22:27:29 +00:00
Improved instruct style (with syntax highlighting & LaTeX rendering) (#5936)
This commit is contained in:
parent
9c04365f54
commit
6761b5e7c6
74 changed files with 1358 additions and 51 deletions
30
css/main.css
30
css/main.css
|
|
@ -96,7 +96,7 @@ gradio-app > :first-child {
|
|||
|
||||
.header_bar {
|
||||
background-color: #f7f7f7;
|
||||
box-shadow: 0 2px 3px rgba(22 22 22 / 35%);
|
||||
box-shadow: 0 0px 3px rgba(22 22 22 / 35%);
|
||||
margin-bottom: 0;
|
||||
overflow-x: scroll;
|
||||
margin-left: calc(-1 * var(--size-4));
|
||||
|
|
@ -220,7 +220,7 @@ button {
|
|||
}
|
||||
|
||||
.pretty_scrollbar::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.pretty_scrollbar::-webkit-scrollbar-track {
|
||||
|
|
@ -229,12 +229,12 @@ button {
|
|||
|
||||
.pretty_scrollbar::-webkit-scrollbar-thumb,
|
||||
.pretty_scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #c5c5d2;
|
||||
background: var(--neutral-300);
|
||||
}
|
||||
|
||||
.dark .pretty_scrollbar::-webkit-scrollbar-thumb,
|
||||
.dark .pretty_scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #374151;
|
||||
background: var(--neutral-700);
|
||||
}
|
||||
|
||||
.pretty_scrollbar::-webkit-resizer {
|
||||
|
|
@ -433,11 +433,12 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
|||
.message-body code {
|
||||
white-space: pre-wrap !important;
|
||||
word-wrap: break-word !important;
|
||||
border: 1px solid var(--border-color-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--background-fill-secondary);
|
||||
font-size: 90%;
|
||||
border: 1px solid #666666;
|
||||
border-radius: 5px;
|
||||
font-size: 82%;
|
||||
padding: 1px 3px;
|
||||
background: #0d1117 !important;
|
||||
color: rgb(201, 209, 217);
|
||||
}
|
||||
|
||||
.message-body pre > code {
|
||||
|
|
@ -518,8 +519,12 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dark #show-controls span {
|
||||
color: var(--neutral-400);
|
||||
}
|
||||
|
||||
#show-controls span {
|
||||
opacity: 0.6;
|
||||
color: var(--neutral-600);
|
||||
}
|
||||
|
||||
#typing-container {
|
||||
|
|
@ -590,8 +595,8 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
|||
position: absolute;
|
||||
bottom: 80%;
|
||||
left: 0;
|
||||
background-color: var(--background-fill-secondary);
|
||||
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
|
||||
background-color: var(--background-fill-primary);
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 25%);
|
||||
z-index: 10000;
|
||||
min-width: 330px;
|
||||
flex-direction: column;
|
||||
|
|
@ -601,6 +606,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
|||
width: 100%;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border-color: var(--border-color-primary);
|
||||
justify-content: space-between;
|
||||
margin: 0 !important;
|
||||
height: 36px;
|
||||
|
|
@ -611,7 +617,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
|||
}
|
||||
|
||||
.hover-menu button:not(#clear-history-confirm):last-child {
|
||||
border-bottom: var(--button-border-width) solid var(--button-secondary-border-color) !important;
|
||||
border-bottom: var(--button-border-width) solid var(--border-color-primary) !important;
|
||||
}
|
||||
|
||||
.hover-menu button:hover {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue