diff --git a/css/main.css b/css/main.css index 25ae15b1..22fac5c5 100644 --- a/css/main.css +++ b/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 { diff --git a/modules/ui.py b/modules/ui.py index 3f39a1a4..bbb22266 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -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(): diff --git a/modules/ui_session.py b/modules/ui_session.py index e1807dea..c0615843 100644 --- a/modules/ui_session.py +++ b/modules/ui_session.py @@ -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():