hide delete button for single-item dropdown

more stylistic changes

4 files changed, 50 insertions, 12 deletions

diff --git a/modules/scripts.py b/modules/scripts.py
index 40d8dcc6..8f55cf24 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 6e0ac89f..c5b0e876 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 d4e00829..7b752b45 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 692833bd..677f03cd 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{