From 3f75a211b356bb5cfccc22d9b5adfe54b7a6d6f0 Mon Sep 17 00:00:00 2001 From: Redacted Date: Sun, 5 Nov 2023 09:28:32 -0600 Subject: [PATCH 1/2] mobile css fixes added media query to detect devices with touchscreen and set --left-column to 100% rather than 500px --- 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 | 9 +++++++++ 7 files changed, 9 insertions(+), 6 deletions(-) diff --git a/javascript/amethyst-nightfall.css b/javascript/amethyst-nightfall.css index 2cbead34f..b9447b038 100644 --- a/javascript/amethyst-nightfall.css +++ b/javascript/amethyst-nightfall.css @@ -2,7 +2,6 @@ :root { --font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', sans-serif; --font-size: 16px; - --left-column: 500px; --highlight-color: #8a3df6; /* Purple color */ --inactive-color: #404040; /* Darker shade of gray */ --background-color: #000000; /* Black */ diff --git a/javascript/black-orange.css b/javascript/black-orange.css index dfc6f8753..d2e1e6a6d 100644 --- a/javascript/black-orange.css +++ b/javascript/black-orange.css @@ -4,7 +4,6 @@ --font: 'NotoSans'; --font-mono: 'ui-monospace', 'Consolas', monospace; --font-size: 16px; - --left-column: 500px; --highlight-color: #ce6400; --inactive-color: #4e1400; --background-color: #000000; diff --git a/javascript/black-teal.css b/javascript/black-teal.css index 1918dfda5..df25a1d34 100644 --- a/javascript/black-teal.css +++ b/javascript/black-teal.css @@ -4,7 +4,6 @@ --font: 'NotoSans'; --font-mono: 'ui-monospace', 'Consolas', monospace; --font-size: 16px; - --left-column: 500px; --primary-50: #7dffff; --primary-100: #72e8e8; --primary-200: #67d2d2; diff --git a/javascript/invoked.css b/javascript/invoked.css index 0b540955b..5564a5a0c 100644 --- a/javascript/invoked.css +++ b/javascript/invoked.css @@ -3,7 +3,6 @@ --font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif; --font-mono: 'ui-monospace', 'Consolas', monospace; --font-size: 16px; - --left-column: 500px; --primary-100: #2b303b; --primary-200: #15181e; --primary-300: #0a0c0e; diff --git a/javascript/light-teal.css b/javascript/light-teal.css index 52e540cfc..89473db42 100644 --- a/javascript/light-teal.css +++ b/javascript/light-teal.css @@ -4,7 +4,6 @@ --font: 'NotoSans'; --font-mono: 'ui-monospace', 'Consolas', monospace; --font-size: 16px; - --left-column: 500px; --primary-50: #7dffff; --primary-100: #72e8e8; --primary-200: #67d2d2; diff --git a/javascript/midnight-barbie.css b/javascript/midnight-barbie.css index 32447c564..25e00c64c 100644 --- a/javascript/midnight-barbie.css +++ b/javascript/midnight-barbie.css @@ -3,7 +3,6 @@ --font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', "Roboto", sans-serif; --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace; --font-size: 14px; - --left-column: 500px; --highlight-color: #ff00f2; --inactive-color: #005485; --background-color: #000000; diff --git a/javascript/sdnext.css b/javascript/sdnext.css index 32e9edecd..29170931d 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -279,3 +279,12 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt --spacing-xl: 5px; --spacing-xxl: 6px; } + + +/* Apply different styles for devices with coarse pointers */ +@media (hover: none) and (pointer: coarse) { + :root, .light, .dark { + --left-column: 100%; + } + .gradio-slider input[type="number"] { text-align: center; } +} From 7190a62995535dee812dc86fc25cf69dc9b88963 Mon Sep 17 00:00:00 2001 From: Redacted Date: Sun, 5 Nov 2023 16:54:50 -0600 Subject: [PATCH 2/2] css fixes Additional css fixes: -modified the media query to affect different ranges of resolutions differently, this ensures a good experience regardless of resolution (there are still going to be gaps) -fixed settings content being pushed off of the display, for now the settings menu is flexed as a row and each panels content shows up below the menu. -shifted icon padding for large buttons on mobile, 10px down to 6px on all themes, this may be redundant as it is in the root theme, I may be able to place this inside sdnext.css --- javascript/amethyst-nightfall.css | 2 +- javascript/black-orange.css | 2 +- javascript/black-teal.css | 4 ++-- javascript/invoked.css | 2 +- javascript/light-teal.css | 2 +- javascript/midnight-barbie.css | 2 +- javascript/sdnext.css | 24 ++++++++++++++++++------ 7 files changed, 25 insertions(+), 13 deletions(-) diff --git a/javascript/amethyst-nightfall.css b/javascript/amethyst-nightfall.css index b9447b038..fc732d56b 100644 --- a/javascript/amethyst-nightfall.css +++ b/javascript/amethyst-nightfall.css @@ -287,7 +287,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } --prose-header-text-weight: 600; --slider-color: ; --table-radius: var(--radius-lg); - --button-large-padding: 2px 10px; + --button-large-padding: 2px 6px; --button-large-radius: var(--radius-lg); --button-large-text-size: var(--text-lg); --button-large-text-weight: 400; diff --git a/javascript/black-orange.css b/javascript/black-orange.css index d2e1e6a6d..00b6ee96c 100644 --- a/javascript/black-orange.css +++ b/javascript/black-orange.css @@ -297,7 +297,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } --prose-header-text-weight: 600; --slider-color: ; --table-radius: var(--radius-lg); - --button-large-padding: 2px 10px; + --button-large-padding: 2px 6px; --button-large-radius: var(--radius-lg); --button-large-text-size: var(--text-lg); --button-large-text-weight: 400; diff --git a/javascript/black-teal.css b/javascript/black-teal.css index df25a1d34..899d74a42 100644 --- a/javascript/black-teal.css +++ b/javascript/black-teal.css @@ -38,7 +38,7 @@ html { font-size: var(--font-size); font-family: var(--font); } body, button, input, select, textarea { font-family: var(--font); } button { font-size: 1.2rem; max-width: 400px; } img { background-color: var(--background-color); } -input[type=range] { height: var(--line-sm) !important; appearance: none !important; margin-top: 0 !important; min-width: 160px !important; +input[type=range] { height: var(--line-sm) !important; appearance: none !important; margin-top: 0 !important; min-width: 100% !important; background-color: var(--background-color) !important; width: 100% !important; background: transparent !important; } input[type=range]::-webkit-slider-runnable-track { width: 100% !important; height: var(--line-sm) !important; cursor: pointer !important; box-shadow: 2px 2px 3px #111111 !important; background: var(--input-background-fill) !important; border-radius: var(--radius-lg) !important; border: 0px solid #222222 !important; } @@ -289,7 +289,7 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p --prose-header-text-weight: 400; --slider-color: ; --table-radius: var(--radius-lg); - --button-large-padding: 2px 10px; + --button-large-padding: 2px 6px; --button-large-radius: var(--radius-lg); --button-large-text-size: var(--text-lg); --button-large-text-weight: 400; diff --git a/javascript/invoked.css b/javascript/invoked.css index 5564a5a0c..d5ad34799 100644 --- a/javascript/invoked.css +++ b/javascript/invoked.css @@ -281,7 +281,7 @@ button.selected {background: var(--button-primary-background-fill);} --prose-header-text-weight: 600; --slider-color: ; --table-radius: var(--radius-lg); - --button-large-padding: 2px 10px; + --button-large-padding: 2px 6px; --button-large-radius: var(--radius-lg); --button-large-text-size: var(--text-lg); --button-large-text-weight: 400; diff --git a/javascript/light-teal.css b/javascript/light-teal.css index 89473db42..4d12778ea 100644 --- a/javascript/light-teal.css +++ b/javascript/light-teal.css @@ -173,7 +173,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } --button-cancel-border-color: #dc2626; --button-cancel-text-color-hover: var(--button-cancel-text-color); --button-cancel-text-color: white; - --button-large-padding: 2px 10px; + --button-large-padding: 2px 6px; --button-large-radius: var(--radius-lg); --button-large-text-size: var(--text-lg); --button-large-text-weight: 400; diff --git a/javascript/midnight-barbie.css b/javascript/midnight-barbie.css index 25e00c64c..cd818cf00 100644 --- a/javascript/midnight-barbie.css +++ b/javascript/midnight-barbie.css @@ -286,7 +286,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } --prose-header-text-weight: 600; --slider-color: ; --table-radius: var(--radius-lg); - --button-large-padding: 2px 10px; + --button-large-padding: 2px 6px; --button-large-radius: var(--radius-lg); --button-large-text-size: var(--text-lg); --button-large-text-weight: 400; diff --git a/javascript/sdnext.css b/javascript/sdnext.css index 29170931d..47a4d3cec 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -277,14 +277,26 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt --spacing-sm: 3px; --spacing-lg: 4px; --spacing-xl: 5px; - --spacing-xxl: 6px; + --spacing-xxl: 6px; } - /* Apply different styles for devices with coarse pointers */ + @media (hover: none) and (pointer: coarse) { - :root, .light, .dark { - --left-column: 100%; - } - .gradio-slider input[type="number"] { text-align: center; } + + /* 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;} + .gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; } + } + + /* Screens 400px and larger up to 1080px */ + @media (max-width: 1080px) and (min-width:425px) { + :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;} + .gradio-slider input[type="number"] { width: 4em; font-size: 0.8rem; height: 16px; text-align: center; } + } + }