mirror of
https://github.com/oobabooga/text-generation-webui.git
synced 2026-03-17 19:04:39 +01:00
UI: Modernize the Gradio theme
This commit is contained in:
oobabooga
parent
9d02d3a13b
commit
dff8903b03
73
css/main.css
73
css/main.css
|
|
@ -2,8 +2,8 @@
|
|||
--darker-gray: #1C1C1D;
|
||||
--dark-gray: #212125;
|
||||
--light-gray: #2C2E34;
|
||||
--light-theme-gray: #f9fbff;
|
||||
--border-color-dark: #525252;
|
||||
--light-theme-gray: #f0f3fb;
|
||||
--border-color-dark: rgba(255, 255, 255, 0.15);
|
||||
--header-width: 112px;
|
||||
--selected-item-color-dark: #282930;
|
||||
}
|
||||
|
|
@ -127,7 +127,7 @@ gradio-app > :first-child {
|
|||
}
|
||||
|
||||
.header_bar {
|
||||
border-right: var(--input-border-width) solid var(--input-border-color);
|
||||
border-right: none;
|
||||
margin-bottom: 0;
|
||||
overflow-x: scroll;
|
||||
text-wrap: nowrap;
|
||||
|
|
@ -150,7 +150,7 @@ gradio-app > :first-child {
|
|||
|
||||
.dark .header_bar {
|
||||
border: none !important;
|
||||
box-shadow: 0 3px 4px rgba(20 20 20 / 60%);
|
||||
box-shadow: none;
|
||||
background-color: #8080802b;
|
||||
}
|
||||
|
||||
|
|
@ -268,17 +268,17 @@ button {
|
|||
.dark #image-history-gallery > :nth-child(2)::-webkit-scrollbar-thumb,
|
||||
.dark #image-history-gallery > :nth-child(2)::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(255 255 255 / 6.25%);
|
||||
border-radius: 10px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.pretty_scrollbar::-webkit-resizer,
|
||||
#image-history-gallery > :nth-child(2)::-webkit-resizer {
|
||||
background: #c5c5d2;
|
||||
background: #d2d2d8;
|
||||
}
|
||||
|
||||
.dark .pretty_scrollbar::-webkit-resizer,
|
||||
.dark #image-history-gallery > :nth-child(2)::-webkit-resizer {
|
||||
background: #ccc;
|
||||
background: rgb(255 255 255 / 10%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -582,10 +582,28 @@ audio {
|
|||
|
||||
#chat-input textarea {
|
||||
background: #f3f4f6;
|
||||
padding: 0.65rem 2.5rem;
|
||||
border: 0;
|
||||
box-shadow: 0;
|
||||
border-radius: 8px;
|
||||
padding: 0.65rem 2.5rem 0.6rem;
|
||||
margin-top: 0.15rem;
|
||||
border: 1px solid #d2d2d8;
|
||||
border-radius: 1.5rem;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
#chat-input textarea::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#chat-input textarea::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#chat-input textarea::-webkit-scrollbar-thumb {
|
||||
background: var(--neutral-300);
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.dark #chat-input textarea::-webkit-scrollbar-thumb {
|
||||
background: rgb(255 255 255 / 6.25%);
|
||||
}
|
||||
|
||||
#chat-input textarea::placeholder {
|
||||
|
|
@ -725,10 +743,12 @@ audio {
|
|||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 25%);
|
||||
box-shadow: 0 2px 12px rgb(0 0 0 / 15%);
|
||||
border-radius: 0.5rem;
|
||||
z-index: 10000;
|
||||
min-width: 330px;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hover-menu button {
|
||||
|
|
@ -739,6 +759,7 @@ audio {
|
|||
margin: 0 !important;
|
||||
height: 36px;
|
||||
border-color: transparent !important;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.hover-menu button:not(#clear-history-confirm) {
|
||||
|
|
@ -914,7 +935,7 @@ audio {
|
|||
.options {
|
||||
z-index: 100 !important;
|
||||
border: 1px solid var(--input-border-color);
|
||||
border-radius: 0;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------
|
||||
|
|
@ -1008,9 +1029,13 @@ audio {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#past-chats label {
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
#past-chats .selected,
|
||||
#past-chats label:hover {
|
||||
background-color: #dbeafe !important;
|
||||
background-color: #c8d8f5 !important;
|
||||
}
|
||||
|
||||
#past-chats-buttons,
|
||||
|
|
@ -1166,7 +1191,7 @@ audio {
|
|||
Dark theme
|
||||
---------------------------------------------- */
|
||||
.dark .header_bar {
|
||||
background-color: var(--darker-gray) !important;
|
||||
background-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.dark .header_bar button.selected {
|
||||
|
|
@ -1176,7 +1201,7 @@ audio {
|
|||
.dark #chat-input textarea {
|
||||
background: var(--light-gray);
|
||||
color: white !important;
|
||||
border-color: #292c3b;
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.dark #chat-input textarea::placeholder {
|
||||
|
|
@ -1192,6 +1217,7 @@ audio {
|
|||
.dark #past-chats-row {
|
||||
background-color: var(--darker-gray);
|
||||
border: 0 !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dark gradio-app .gradio-container.gradio-container-4-37-2 .contain #past-chats .selected,
|
||||
|
|
@ -1228,11 +1254,11 @@ audio {
|
|||
Light theme
|
||||
---------------------------------------------- */
|
||||
.header_bar {
|
||||
background-color: var(--light-theme-gray) !important;
|
||||
background-color: #e4e8f0 !important;
|
||||
}
|
||||
|
||||
.header_bar button.selected {
|
||||
background: #dbeafe;
|
||||
background: #c8d8f5;
|
||||
}
|
||||
|
||||
#chat-controls,
|
||||
|
|
@ -1241,11 +1267,11 @@ audio {
|
|||
}
|
||||
|
||||
.dark #chat-controls {
|
||||
border-left: 1px solid #d9d9d0;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.dark #past-chats-row {
|
||||
border-right: 1px solid #d9d9d0;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
#past-chats-toggle,
|
||||
|
|
@ -1364,6 +1390,7 @@ audio {
|
|||
|
||||
.tgw-accordion {
|
||||
padding: 10px 12px !important;
|
||||
border: 1px solid #d2d2d8;
|
||||
}
|
||||
|
||||
.dark .tgw-accordion {
|
||||
|
|
@ -1393,7 +1420,7 @@ audio {
|
|||
}
|
||||
|
||||
.dark .thinking-block {
|
||||
background-color: transparent;
|
||||
background-color: var(--darker-gray);
|
||||
border: 1px solid var(--input-border-color);
|
||||
}
|
||||
|
||||
|
|
@ -1742,7 +1769,7 @@ button:focus {
|
|||
}
|
||||
|
||||
.dark .sidebar-vertical-separator {
|
||||
border-bottom: 1px solid rgb(255 255 255 / 10%);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
button#swap-height-width {
|
||||
|
|
@ -1932,7 +1959,7 @@ thead + tbody tr:first-child th { border-top: 1px solid; }
|
|||
.dark #tools-group .wrap::-webkit-scrollbar-thumb,
|
||||
.dark #tools-group .wrap::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(255 255 255 / 6.25%);
|
||||
border-radius: 10px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
#tools-group .wrap::-webkit-scrollbar-corner {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,8 @@ theme = gr.themes.Default(
|
|||
if not shared.args.old_colors:
|
||||
theme = theme.set(
|
||||
# General Colors
|
||||
border_color_primary='#c5c5d2',
|
||||
border_color_primary='#d2d2d8',
|
||||
block_border_color='transparent',
|
||||
body_text_color_subdued='#484848',
|
||||
background_fill_secondary='#eaeaea',
|
||||
background_fill_secondary_dark='var(--selected-item-color-dark, #282930)',
|
||||
|
|
@ -77,6 +78,12 @@ if not shared.args.old_colors:
|
|||
body_text_color='rgb(64, 64, 64)',
|
||||
button_secondary_background_fill="white",
|
||||
button_secondary_border_color="var(--border-color-primary)",
|
||||
block_title_text_color='*body_text_color',
|
||||
button_primary_background_fill='#374151',
|
||||
button_primary_background_fill_hover='#4b5563',
|
||||
button_primary_background_fill_hover_dark='rgba(255, 255, 255, 0.05)',
|
||||
button_primary_border_color='#374151',
|
||||
button_primary_text_color='white',
|
||||
input_shadow="none",
|
||||
button_shadow_hover="none",
|
||||
|
||||
|
|
@ -85,11 +92,11 @@ if not shared.args.old_colors:
|
|||
checkbox_background_color_dark='var(--darker-gray, #1C1C1D)',
|
||||
block_background_fill_dark='transparent',
|
||||
block_border_color_dark='transparent',
|
||||
input_border_color_dark='var(--border-color-dark, #525252)',
|
||||
input_border_color_focus_dark='var(--border-color-dark, #525252)',
|
||||
checkbox_border_color_dark='var(--border-color-dark, #525252)',
|
||||
border_color_primary_dark='var(--border-color-dark, #525252)',
|
||||
button_secondary_border_color_dark='var(--border-color-dark, #525252)',
|
||||
input_border_color_dark='var(--border-color-dark)',
|
||||
input_border_color_focus_dark='var(--border-color-dark)',
|
||||
checkbox_border_color_dark='rgba(255, 255, 255, 0.2)',
|
||||
border_color_primary_dark='var(--border-color-dark)',
|
||||
button_secondary_border_color_dark='var(--border-color-dark)',
|
||||
body_background_fill_dark='var(--dark-gray, #212125)',
|
||||
button_primary_background_fill_dark='transparent',
|
||||
button_secondary_background_fill_dark='transparent',
|
||||
|
|
@ -107,10 +114,11 @@ if not shared.args.old_colors:
|
|||
block_shadow_dark='none',
|
||||
input_shadow_focus='none',
|
||||
input_shadow_focus_dark='none',
|
||||
button_large_radius='0.375rem',
|
||||
button_large_radius='0.75rem',
|
||||
button_large_padding='6px 12px',
|
||||
input_radius='0.375rem',
|
||||
block_radius='0',
|
||||
input_radius='0.5rem',
|
||||
block_radius='0.375rem',
|
||||
button_transition='background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease',
|
||||
)
|
||||
|
||||
if (shared.user_data_dir / "notification.mp3").exists():
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ def create_ui():
|
|||
|
||||
with gr.Column():
|
||||
gr.Markdown("## Extensions & flags")
|
||||
shared.gradio['save_settings'] = gr.Button(f'Save extensions settings to {shared.user_data_dir}/settings.yaml', elem_classes='refresh-button', interactive=not mu)
|
||||
shared.gradio['save_settings'] = gr.Button(f'Save extensions settings to {shared.user_data_dir}/settings.yaml', interactive=not mu)
|
||||
shared.gradio['reset_interface'] = gr.Button("Apply flags/extensions and restart", interactive=not mu)
|
||||
with gr.Row():
|
||||
with gr.Column():
|
||||
|
|
|
|||
Loading…
Reference in a new issue