extra network details styling

CHANGELOG.md

@@ -6,7 +6,7 @@
   - EDM samplers for Playground 2.5
   - Stable Cascade
 
-## Update for 2024-03-07
+## Update for 2024-03-08
 
 - [Playground v2.5](https://huggingface.co/playgroundai/playground-v2.5-1024px-aesthetic)
   - new model version from Playground: based on SDXL, but with some cool new concepts
@@ -48,7 +48,7 @@
   - *DPM++ 2M EDM* and *Euler EDM*  
     EDM is a new solver algorithm currently available for DPM++2M and Euler samplers  
     Note that using EDM samplers with non-EDM optimized models will provide just noise and vice-versa  
-- **Styles**
+- **Styles**: styles are not just for prompts!
   - new styles editor: *networks -> styles -> edit*
   - styles can apply generate parameters, for example to have a style that enables and configures hires:  
     parameters=`enable_hr: True, hr_scale: 2, hr_upscaler: Latent Bilinear antialias, hr_sampler_name: DEIS, hr_second_pass_steps: 20, denoising_strength: 0.5`

javascript/sdnext.css

@@ -229,15 +229,14 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
 .extra-network-cards .card-list .tag { color: var(--primary-500); margin-left: 0.8em; }
 .extra-details-close { position: fixed; top: 0.2em; right: 0.2em; z-index: 99; background: var(--button-secondary-background-fill) !important; }
 .extra-details-tabs textarea, .extra-details-tabs .gradio-json { overflow-y: scroll !important; scrollbar-width: unset !important; max-height: 15vh; }
-
-#txt2img_description, #img2img_description, #control_description { max-height: 63px; overflow-y: auto !important; }
-#txt2img_description>label>textarea, #img2img_description>label>textarea, #control_description>label>textarea { font-size: var(--text-xs); height: 6em; }
-
-#txt2img_extra_details>div, #img2img_extra_details>div { overflow-y: auto; min-height: 40vh; max-height: 80vh; align-self: flex-start; }
-#txt2img_extra_details, #img2img_extra_details { position: fixed; bottom: 50%; left: 50%; transform: translate(-50%, 50%); padding: 0.8em; border: var(--block-border-width) solid var(--highlight-color) !important;
+.extra-details-text .form { overflow-x: hidden; overflow-y: scroll; display: block; }
+.extra-description { max-height: 63px; overflow-y: auto !important; }
+.extra-description > label > textarea { font-size: var(--text-xs); height: 6em; }
+.extra-details { position: fixed; bottom: 50%; left: 50%; transform: translate(-50%, 50%); padding: 0.8em; border: var(--block-border-width) solid var(--highlight-color) !important;
   z-index: 100; box-shadow: var(--button-shadow); }
-#txt2img_extra_details td:first-child, #img2img_extra_details td:first-child { font-weight: bold; vertical-align: top; }
-#txt2img_extra_details .gradio-image, #img2img_extra_details .gradio-image { max-height: 70vh; }
+.extra-details > div { overflow-y: auto; min-height: 40vh; max-height: 80vh; align-self: flex-start; }
+.extra-details td:first-child { font-weight: bold; vertical-align: top; }
+.extra-details .gradio-image { max-height: 50vh; }
 
 
 /* specific elements */

modules/ui_extra_networks.py

@@ -480,7 +480,7 @@ def create_ui(container, button_parent, tabname, skip_indexing = False):
     ui.pages = []
     ui.state = gr.Textbox('{}', elem_id=f"{tabname}_extra_state", visible=False)
     ui.visible = gr.State(value=False) # pylint: disable=abstract-class-instantiated
-    ui.details = gr.Group(elem_id=f"{tabname}_extra_details", visible=False)
+    ui.details = gr.Group(elem_id=f"{tabname}_extra_details", elem_classes=["extra-details"], visible=False)
     ui.tabs = gr.Tabs(elem_id=f"{tabname}_extra_tabs")
     ui.button_details = gr.Button('Details', elem_id=f"{tabname}_extra_details_btn", visible=False)
     state = {}
@@ -556,7 +556,7 @@ def create_ui(container, button_parent, tabname, skip_indexing = False):
                 with gr.Tab('Embedded metadata', elem_classes=['extra-details-tabs']):
                     meta = gr.JSON({}, show_label=False)
                     ui.details_components.append(meta)
-        with gr.Group(elem_id=f"{tabname}_extra_details_text", visible=False) as ui.details_text:
+        with gr.Group(elem_id=f"{tabname}_extra_details_text", elem_classes=["extra-details-text"], visible=False) as ui.details_text:
             description = gr.Textbox(label='Description', lines=1, placeholder="Style description...")
             prompt = gr.Textbox(label='Prompt', lines=2, placeholder="Prompt...")
             negative = gr.Textbox(label='Negative prompt', lines=2, placeholder="Negative prompt...")
@@ -585,7 +585,7 @@ def create_ui(container, button_parent, tabname, skip_indexing = False):
         ui.button_close = ToolButton(symbols.close, elem_id=f"{tabname}_extra_close", visible=True)
         ui.button_model = ToolButton(symbols.refine, elem_id=f"{tabname}_extra_model", visible=True)
         ui.search = gr.Textbox('', show_label=False, elem_id=f"{tabname}_extra_search", placeholder="Search...", elem_classes="textbox", lines=2, container=False)
-        ui.description = gr.Textbox('', show_label=False, elem_id=f"{tabname}_description", elem_classes="textbox", lines=2, interactive=False, container=False)
+        ui.description = gr.Textbox('', show_label=False, elem_id=f"{tabname}_description", elem_classes=["textbox", "extra-description"], lines=2, interactive=False, container=False)
 
         if ui.tabname == 'txt2img': # refresh only once
             global refresh_time # pylint: disable=global-statement