From a05e30903d6c8e877849259b48a981373796d05f Mon Sep 17 00:00:00 2001 From: Redacted Date: Mon, 6 Nov 2023 12:21:24 -0600 Subject: [PATCH] fixing previous css modifications previous commit ce715de471b35cb54dc8587ec80fff55acaa3077 breaks compatibility for screens larger than 425px. --- javascript/amethyst-nightfall.css | 1 - javascript/black-orange.css | 1 - javascript/black-teal.css | 1 - javascript/invoked.css | 1 - javascript/light-teal.css | 1 - javascript/midnight-barbie.css | 1 - javascript/sdnext.css | 4 +++- 7 files changed, 3 insertions(+), 7 deletions(-) diff --git a/javascript/amethyst-nightfall.css b/javascript/amethyst-nightfall.css index d8af990c0..b36ae8160 100644 --- a/javascript/amethyst-nightfall.css +++ b/javascript/amethyst-nightfall.css @@ -107,7 +107,6 @@ 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; 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; } diff --git a/javascript/black-orange.css b/javascript/black-orange.css index 858cf80ca..b35267daa 100644 --- a/javascript/black-orange.css +++ b/javascript/black-orange.css @@ -123,7 +123,6 @@ 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; 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); } diff --git a/javascript/black-teal.css b/javascript/black-teal.css index 2c82a542e..70e1807ac 100644 --- a/javascript/black-teal.css +++ b/javascript/black-teal.css @@ -125,7 +125,6 @@ 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; 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; } diff --git a/javascript/invoked.css b/javascript/invoked.css index 1e4707ca0..ab5b48c06 100644 --- a/javascript/invoked.css +++ b/javascript/invoked.css @@ -119,7 +119,6 @@ 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; 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 0f1a587dd..ae582231f 100644 --- a/javascript/light-teal.css +++ b/javascript/light-teal.css @@ -121,7 +121,6 @@ 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; 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 df1145373..8f47fe262 100644 --- a/javascript/midnight-barbie.css +++ b/javascript/midnight-barbie.css @@ -112,7 +112,6 @@ 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; 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); } diff --git a/javascript/sdnext.css b/javascript/sdnext.css index af6dd17a0..61aebf947 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -280,14 +280,15 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt --spacing-xxl: 6px; } -/* Apply different styles for devices with coarse pointers */ +/* Apply different styles for devices with coarse pointers dependant on screen resolution */ @media (hover: none) and (pointer: coarse) { /* Screens 400px and smaller */ @media (max-width: 425px) { :root, .light, .dark { --left-column: 100%; } #settings {display: flex;gap: var(--layout-gap);flex-wrap: wrap;flex-direction: row;} + #txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0; min-width: calc(min(320px, 100%)) !important;} .gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; } } @@ -296,6 +297,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt :root, .light, .dark { --left-column: 39%; } #scripts_alwayson_txt2img div { max-width: 99%; } #settings {display: flex;gap: var(--layout-gap);flex-wrap: wrap;flex-direction: row;} + #txt2img_results, #img2img_results, #extras_results { background-color: var(--background-color); padding: 0;} .gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; } }