From 7190a62995535dee812dc86fc25cf69dc9b88963 Mon Sep 17 00:00:00 2001 From: Redacted Date: Sun, 5 Nov 2023 16:54:50 -0600 Subject: [PATCH] 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; } + } + }