Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-18 16:54:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

css fixes

Browse Source 
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
This commit is contained in:
Redacted
2023-11-05 16:54:50 -06:00
committed by GitHub
parent 3f75a211b3
commit 7190a62995
7 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/amethyst-nightfall.css
+1 -1
View File
@@ -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;
javascript/black-orange.css
+1 -1
View File
@@ -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;
javascript/black-teal.css
+2 -2
View File
@@ -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;
javascript/invoked.css
+1 -1
View File
@@ -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;
javascript/light-teal.css
+1 -1
View File
@@ -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;
javascript/midnight-barbie.css
+1 -1
View File
@@ -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;
javascript/sdnext.css
+18 -6
View File
@@ -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; }
}
}