From 44f28830d184a3323b8673c98bfc979c8d5c50e3 Mon Sep 17 00:00:00 2001 From: oobabooga <112222186+oobabooga@users.noreply.github.com> Date: Sun, 18 Jun 2023 01:56:43 -0300 Subject: [PATCH] Chat CSS: fix ul, li, pre styles + remove redefinitions --- css/chat.css | 43 ++++++++++++++++++++++++++++++ css/chat_style-TheEncrypted777.css | 31 --------------------- css/chat_style-cai-chat.css | 37 ------------------------- css/chat_style-messenger.css | 31 --------------------- css/chat_style-wpp.css | 34 ----------------------- css/html_instruct_style.css | 34 ----------------------- server.py | 2 +- 7 files changed, 44 insertions(+), 168 deletions(-) diff --git a/css/chat.css b/css/chat.css index b5c42d0c..00d681f8 100644 --- a/css/chat.css +++ b/css/chat.css @@ -45,3 +45,46 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { #main button { min-width: 0 !important; } + +/*****************************************************/ +/*************** Chat box declarations ***************/ +/*****************************************************/ + +.chat { + margin-left: auto; + margin-right: auto; + max-width: 800px; + height: calc(100vh - 296px); + overflow-y: auto; + padding-right: 20px; + display: flex; + flex-direction: column-reverse; + word-break: break-word; + overflow-wrap: anywhere; + padding-top: 1px; +} + +.message-body li { + margin-top: 0.5em !important; + margin-bottom: 0.5em !important; +} + +.message-body li > p { + display: inline !important; +} + +.message-body ul, .message-body ol { + font-size: 15px !important; +} + +.message-body pre { + margin-bottom: 1.25em !important; +} + +.message-body code { + overflow-x: auto; +} + +.message-body :not(pre) > code { + white-space: normal !important; +} diff --git a/css/chat_style-TheEncrypted777.css b/css/chat_style-TheEncrypted777.css index 4d8d5474..7682011d 100644 --- a/css/chat_style-TheEncrypted777.css +++ b/css/chat_style-TheEncrypted777.css @@ -1,19 +1,5 @@ /* All credits to TheEncrypted777: https://www.reddit.com/r/Oobabooga/comments/12xe6vq/updated_css_styling_with_color_customization_for/ */ -.chat { - margin-left: auto; - margin-right: auto; - max-width: 800px; - height: calc(100vh - 296px); - overflow-y: auto; - padding-right: 20px; - display: flex; - flex-direction: column-reverse; - word-break: break-word; - overflow-wrap: anywhere; - padding-top: 1px; -} - .message { display: grid; grid-template-columns: 60px minmax(0, 1fr); @@ -112,23 +98,6 @@ line-height: 1.428571429 !important; } -.message-body li { - margin-top: 0.5em !important; - margin-bottom: 0.5em !important; -} - -.message-body li > p { - display: inline !important; -} - -.message-body code { - overflow-x: auto; -} - -.message-body :not(pre) > code { - white-space: normal !important; -} - .dark .message-body p em { color: rgb(138, 138, 138) !important; } diff --git a/css/chat_style-cai-chat.css b/css/chat_style-cai-chat.css index fd28ba10..d48fe76b 100644 --- a/css/chat_style-cai-chat.css +++ b/css/chat_style-cai-chat.css @@ -1,17 +1,3 @@ -.chat { - margin-left: auto; - margin-right: auto; - max-width: 800px; - height: calc(100vh - 296px); - overflow-y: auto; - padding-right: 20px; - display: flex; - flex-direction: column-reverse; - word-break: break-word; - overflow-wrap: anywhere; - padding-top: 1px; -} - .message { display: grid; grid-template-columns: 60px minmax(0, 1fr); @@ -43,9 +29,6 @@ object-fit: cover; } -.text { -} - .text p { margin-top: 5px; } @@ -54,9 +37,6 @@ font-weight: bold; } -.message-body { -} - .message-body img { max-width: 300px; max-height: 300px; @@ -69,23 +49,6 @@ line-height: 1.428571429 !important; } -.message-body li { - margin-top: 0.5em !important; - margin-bottom: 0.5em !important; -} - -.message-body li > p { - display: inline !important; -} - -.message-body code { - overflow-x: auto; -} - -.message-body :not(pre) > code { - white-space: normal !important; -} - .dark .message-body p em { color: rgb(138, 138, 138) !important; } diff --git a/css/chat_style-messenger.css b/css/chat_style-messenger.css index b5769df2..0e5528d8 100644 --- a/css/chat_style-messenger.css +++ b/css/chat_style-messenger.css @@ -1,17 +1,3 @@ -.chat { - margin-left: auto; - margin-right: auto; - max-width: 800px; - height: calc(100vh - 296px); - overflow-y: auto; - padding-right: 20px; - display: flex; - flex-direction: column-reverse; - word-break: break-word; - overflow-wrap: anywhere; - padding-top: 1px; -} - .message { padding-bottom: 25px; font-size: 15px; @@ -104,23 +90,6 @@ line-height: 1.428571429 !important; } -.message-body li { - margin-top: 0.5em !important; - margin-bottom: 0.5em !important; -} - -.message-body li > p { - display: inline !important; -} - -.message-body code { - overflow-x: auto; -} - -.message-body :not(pre) > code { - white-space: normal !important; -} - .dark .message-body p em { color: rgb(138, 138, 138) !important; } diff --git a/css/chat_style-wpp.css b/css/chat_style-wpp.css index 5371c611..14b40878 100644 --- a/css/chat_style-wpp.css +++ b/css/chat_style-wpp.css @@ -1,17 +1,3 @@ -.chat { - margin-left: auto; - margin-right: auto; - max-width: 800px; - height: calc(100vh - 296px); - overflow-y: auto; - padding-right: 20px; - display: flex; - flex-direction: column-reverse; - word-break: break-word; - overflow-wrap: anywhere; - padding-top: 1px; -} - .message { padding-bottom: 25px; font-size: 15px; @@ -48,9 +34,6 @@ margin-top: 5px; } -.message-body { -} - .message-body img { max-width: 300px; max-height: 300px; @@ -63,23 +46,6 @@ line-height: 1.428571429 !important; } -.message-body li { - margin-top: 0.5em !important; - margin-bottom: 0.5em !important; -} - -.message-body li > p { - display: inline !important; -} - -.message-body code { - overflow-x: auto; -} - -.message-body :not(pre) > code { - white-space: normal !important; -} - .dark .message-body p em { color: rgb(138, 138, 138) !important; } diff --git a/css/html_instruct_style.css b/css/html_instruct_style.css index 71b03d43..132d4dd4 100644 --- a/css/html_instruct_style.css +++ b/css/html_instruct_style.css @@ -1,17 +1,3 @@ -.chat { - margin-left: auto; - margin-right: auto; - max-width: 800px; - height: calc(100vh - 296px); - overflow-y: auto; - padding-right: 20px; - display: flex; - flex-direction: column-reverse; - word-break: break-word; - overflow-wrap: anywhere; - padding-top: 1px; -} - .message { display: grid; grid-template-columns: 60px 1fr; @@ -25,32 +11,12 @@ display: none; } -.message-body { -} - .message-body p { font-size: 15px !important; line-height: 1.75 !important; margin-bottom: 1.25em !important; } -.message-body li { - margin-top: 0.5em !important; - margin-bottom: 0.5em !important; -} - -.message-body li > p { - display: inline !important; -} - -.message-body code { - overflow-x: auto; -} - -.message-body :not(pre) > code { - white-space: normal !important; -} - .dark .message-body p em { color: rgb(198, 202, 214) !important; } diff --git a/server.py b/server.py index 1e1760ce..9cdd33d1 100644 --- a/server.py +++ b/server.py @@ -708,6 +708,7 @@ def create_interface(): with gr.Row(): shared.gradio['interface_modes_menu'] = gr.Dropdown(choices=modes, value=current_mode, label="Mode") + shared.gradio['reset_interface'] = gr.Button("Apply and restart the interface", elem_classes="small-button") shared.gradio['toggle_dark_mode'] = gr.Button('Toggle dark/light mode', elem_classes="small-button") with gr.Row(): @@ -717,7 +718,6 @@ def create_interface(): with gr.Column(): shared.gradio['bool_menu'] = gr.CheckboxGroup(choices=bool_list, value=bool_active, label="Boolean command-line flags", elem_classes='checkboxgroup-table') - shared.gradio['reset_interface'] = gr.Button("Apply and restart the interface") with gr.Row(): extension_name = gr.Textbox(lines=1, label='Install or update an extension', info='Enter the GitHub URL below. For a list of extensions, see: https://github.com/oobabooga/text-generation-webui-extensions ⚠️ WARNING ⚠️ : extensions can execute arbitrary code. Make sure to inspect their source code before activating them.') extension_install = gr.Button('Install or update', elem_classes="small-button")