diff --git a/modules/scripts.py b/modules/scripts.py index 40d8dcc6fc6753475f59785e5284a2f8769ffe10..8f55cf24abc2a14801c51850a1d890ae4e9f6eb4 100644 --- a/modules/scripts.py +++ b/modules/scripts.py @@ -513,6 +513,18 @@ def reload_scripts(): scripts_postproc = scripts_postprocessing.ScriptPostprocessingRunner() +def add_classes_to_gradio_component(comp): + """ + this adds gradio-* to the component for css styling (ie gradio-button to gr.Button), as well as some others + """ + + comp.elem_classes = ["gradio-" + comp.get_block_name(), *(comp.elem_classes or [])] + + if getattr(comp, 'multiselect', False): + comp.elem_classes.append('multiselect') + + + def IOComponent_init(self, *args, **kwargs): if scripts_current is not None: scripts_current.before_component(self, **kwargs) @@ -521,8 +533,7 @@ def IOComponent_init(self, *args, **kwargs): res = original_IOComponent_init(self, *args, **kwargs) - # this adds gradio-* to every component for css styling (ie gradio-button to gr.Button) - self.elem_classes = ["gradio-" + self.get_block_name(), *(self.elem_classes or [])] + add_classes_to_gradio_component(self) script_callbacks.after_component_callback(self, **kwargs) diff --git a/modules/ui.py b/modules/ui.py index 6e0ac89f204a87a43f4bd1f7ffb972f0a4f33750..c5b0e8762a493faff3aa3e53fe980cee3b1e7dd9 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -1601,11 +1601,13 @@ def create_ui(): for i, k, item in quicksettings_list: component = component_dict[k] + info = opts.data_labels[k] component.change( fn=lambda value, k=k: run_settings_single(value, key=k), inputs=[component], outputs=[component, text_settings], + show_progress=info.refresh is not None, ) text_settings.change( diff --git a/modules/ui_common.py b/modules/ui_common.py index d4e008293e0c120258ee54116686c5a0677a56b2..7b752b45ecb2c9d4062aa363a2addb36fb6848da 100644 --- a/modules/ui_common.py +++ b/modules/ui_common.py @@ -129,7 +129,7 @@ Requested path was: {f} generation_info = None with gr.Column(): - with gr.Row(elem_id=f"image_buttons_{tabname}"): + with gr.Row(elem_id=f"image_buttons_{tabname}", elem_classes="image-buttons"): open_folder_button = gr.Button(folder_symbol, visible=not shared.cmd_opts.hide_ui_dir_config) if tabname != "extras": diff --git a/style.css b/style.css index 692833bd1b3622b0c7b524f99ae506f1ad6e35f8..677f03cd0a61c53af78f3e615f58e89d0f1887ee 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ } .block.padded{ - padding: 0.2em 0.5em !important; + padding: 0 !important; } div.gradio-container{ @@ -38,7 +38,8 @@ div.form{ .block.gradio-textbox, .block.gradio-radio, .block.gradio-checkboxgroup, -.block.gradio-number +.block.gradio-number, +.block.gradio-colorpicker { border-width: 0 !important; box-shadow: none !important; @@ -46,11 +47,11 @@ div.form{ .gap.compact{ padding: 0; - gap: 0; + gap: 0.2em 0; } div.compact{ - gap: 0.5em; + gap: 1em; } .gradio-dropdown ul.options{ @@ -58,7 +59,10 @@ div.compact{ z-index: 3000; } -.gradio-dropdown label span:not(.has-info){ +.gradio-dropdown label span:not(.has-info), +.gradio-textbox label span:not(.has-info), +.gradio-number label span:not(.has-info) +{ margin-bottom: 0; } @@ -66,6 +70,14 @@ div.compact{ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } +.gradio-dropdown .token-remove.remove-all.remove-all{ + display: none; +} + +.gradio-dropdown.multiselect .token-remove.remove-all.remove-all{ + display: flex; +} + .gradio-slider input[type="number"]{ width: 6em; } @@ -81,6 +93,17 @@ div.gradio-html.min{ min-height: 0; } +.block.gradio-gallery{ + background: var(--input-background-fill); +} + +.gradio-container .prose a, .gradio-container .prose a:visited{ + color: unset; + text-decoration: none; +} + + + /* general styled components */ .gradio-button.tool{ @@ -188,9 +211,7 @@ div.gradio-html.min{ gap: 0.5em; } .interrogate-col > button{ - min-width: 8em; - max-width: 8em; - height: 5.45em; + flex: 1; } .generate-box{ @@ -241,6 +262,10 @@ div.gradio-html.min{ min-height: 480px !important; } +.image-buttons button{ + min-width: auto; +} + /* settings */ #quicksettings { @@ -254,7 +279,6 @@ div.gradio-html.min{ border: none; box-shadow: none; background: none; - margin-right: 10px; } #quicksettings .gradio-dropdown .wrap-inner{ @@ -286,6 +310,7 @@ div.gradio-html.min{ display: block; border: none; text-align: left; + white-space: initial; } #settings_result{