From b46d67cccb37cae0122b6a612065d01e1829a211 Mon Sep 17 00:00:00 2001 From: eadnams22 <68871928+eadnams22@users.noreply.github.com> Date: Wed, 1 Nov 2023 14:38:20 -0700 Subject: [PATCH 1/5] Update sdnext.css first fix for img2img --- javascript/sdnext.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript/sdnext.css b/javascript/sdnext.css index 1c3313ade..ca1fe80db 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -213,7 +213,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt /* specific elements */ #modelmerger_interp_description { margin-top: 1em; margin-bottom: 1em; } -#scripts_alwayson_txt2img, #scripts_alwayson_img2img { display: grid; padding: 0 } +#scripts_alwayson_txt2img, #scripts_alwayson_img2img { padding: 0 } #scripts_alwayson_txt2img > .label-wrap, #scripts_alwayson_img2img > .label-wrap { background: var(--input-background-fill); padding: 0; margin: 0; border-radius: var(--radius-lg); } #scripts_alwayson_txt2img > .label-wrap > span, #scripts_alwayson_img2img > .label-wrap > span { padding: var(--spacing-xxl); } #scripts_alwayson_txt2img div { max-width: var(--left-column); } From 9fe3a76bf2bd5214559b855a498af43715123c13 Mon Sep 17 00:00:00 2001 From: eadnams22 <68871928+eadnams22@users.noreply.github.com> Date: Wed, 1 Nov 2023 14:46:32 -0700 Subject: [PATCH 2/5] Update black-teal.css Safari fixes --- javascript/black-teal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript/black-teal.css b/javascript/black-teal.css index bef9280ac..78f317c90 100644 --- a/javascript/black-teal.css +++ b/javascript/black-teal.css @@ -125,7 +125,7 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p #extras_upscale { margin-top: 10px } #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); } -#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; } +#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; min-width: calc(min(320px, 100%))!IMPORTANT;} #txt2img_settings { min-width: var(--left-column); max-width: var(--left-column); background-color: #111111; padding-top: 16px; } #pnginfo_html2_info { margin-top: -18px; background-color: var(--input-background-fill); padding: var(--input-padding) } #txt2img_styles_row, #img2img_styles_row { margin-top: -6px; } From 9ae1a6643d63a44d149b0510e7af8e592331bfbe Mon Sep 17 00:00:00 2001 From: eadnams22 <68871928+eadnams22@users.noreply.github.com> Date: Wed, 1 Nov 2023 14:47:17 -0700 Subject: [PATCH 3/5] Update black-orange.css safari fixes --- javascript/black-orange.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript/black-orange.css b/javascript/black-orange.css index 30e069777..7192ba1c4 100644 --- a/javascript/black-orange.css +++ b/javascript/black-orange.css @@ -113,7 +113,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } #extras_upscale { margin-top: 10px } #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); } -#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; } +#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; min-width: calc(min(320px, 100%))!IMPORTANT;} #txt2img_settings { min-width: var(--left-column); max-width: var(--left-column); background-color: #111111; padding-top: 16px; } #pnginfo_html2_info { margin-top: -18px; background-color: var(--input-background-fill); padding: var(--input-padding) } .gradio-button.tool { filter: hue-rotate(180deg) saturate(0.5); } From 538b62afeb4cf1272e77855d7f1a099d00c6cd4a Mon Sep 17 00:00:00 2001 From: eadnams22 <68871928+eadnams22@users.noreply.github.com> Date: Wed, 1 Nov 2023 14:47:48 -0700 Subject: [PATCH 4/5] Update amethyst-nightfall.css safari fixes --- javascript/amethyst-nightfall.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript/amethyst-nightfall.css b/javascript/amethyst-nightfall.css index 6cf91ab63..a2fe0b4ea 100644 --- a/javascript/amethyst-nightfall.css +++ b/javascript/amethyst-nightfall.css @@ -109,7 +109,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } #extras_upscale { margin-top: 10px } #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); } -#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; } +#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; min-width: calc(min(320px, 100%))!IMPORTANT;} #txt2img_seed_row { padding: 0; margin-top: 8px; } #txt2img_settings { min-width: var(--left-column); max-width: var(--left-column); background-color: #111111; padding-top: 16px; } #txt2img_subseed_row { padding: 0; margin-top: 16px; } From 77f3235f8c539aa089e44eb61b6352bb93a6acb0 Mon Sep 17 00:00:00 2001 From: eadnams22 <68871928+eadnams22@users.noreply.github.com> Date: Wed, 1 Nov 2023 15:53:30 -0600 Subject: [PATCH 5/5] WebKit Fixing Safari/Chrome on ipad displaying correctly. --- javascript/invoked.css | 2 +- javascript/light-teal.css | 2 +- javascript/midnight-barbie.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/javascript/invoked.css b/javascript/invoked.css index 6d4150d02..741a062c2 100644 --- a/javascript/invoked.css +++ b/javascript/invoked.css @@ -120,7 +120,7 @@ button.selected {background: var(--button-primary-background-fill);} #extras_upscale { margin-top: 10px } #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); } -#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; } +#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; min-width: calc(min(320px, 100%))!IMPORTANT;} #txt2img_settings { min-width: var(--left-column); max-width: var(--left-column); background-color: #111111; padding-top: 16px; } #pnginfo_html2_info { margin-top: -18px; background-color: var(--input-background-fill); padding: var(--input-padding) } #txt2img_tools, #img2img_tools { margin-top: -4px; margin-bottom: -4px; } diff --git a/javascript/light-teal.css b/javascript/light-teal.css index 7778caded..f38499d06 100644 --- a/javascript/light-teal.css +++ b/javascript/light-teal.css @@ -121,7 +121,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } #extras_upscale { margin-top: 10px } #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); } -#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; } +#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; min-width: calc(min(320px, 100%))!IMPORTANT;} #txt2img_settings { min-width: var(--left-column); max-width: var(--left-column); background-color: #111111; padding-top: 16px; } #pnginfo_html2_info { margin-top: -18px; background-color: var(--input-background-fill); padding: var(--input-padding) } #txt2img_styles_row, #img2img_styles_row { margin-top: -6px; z-index: 200; } diff --git a/javascript/midnight-barbie.css b/javascript/midnight-barbie.css index 238dac9ff..f4debac83 100644 --- a/javascript/midnight-barbie.css +++ b/javascript/midnight-barbie.css @@ -113,7 +113,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } #extras_upscale { margin-top: 10px } #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); } -#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; } +#txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; min-width: calc(min(320px, 100%))!IMPORTANT;} #txt2img_settings { min-width: var(--left-column); max-width: var(--left-column); background-color: #111111; padding-top: 16px; } #pnginfo_html2_info { margin-top: -18px; background-color: var(--input-background-fill); padding: var(--input-padding) } .gradio-button.tool { filter: hue-rotate(120deg) saturate(0.5); }