1 files changed, 62 insertions, 42 deletions
diff --git a/style.css b/style.css
index 97f9402a..0845519a 100644
--- a/style.css
+++ b/style.css
@@ -20,7 +20,7 @@
     padding-right: 0.25em;
     margin: 0.1em 0;
     opacity: 0%;
-    cursor: default;	
+    cursor: default;
 }
 
 .output-html p {margin: 0 0.5em;}
@@ -114,6 +114,7 @@
     min-width: unset !important;
     flex-grow: 0 !important;
     padding: 0.4em 0;
+    gap: 0;
 }
 
 #roll_col > button {
@@ -141,10 +142,15 @@
     min-width: 8em !important;
 }
 
-#txt2img_style_index, #txt2img_style2_index, #img2img_style_index, #img2img_style2_index{
+#txt2img_styles, #img2img_styles{
     margin-top: 1em;
 }
 
+#txt2img_styles ul, #img2img_styles ul{
+    max-height: 35em;
+    z-index: 2000;
+}
+
 .gr-form{
     background: transparent;
 }
@@ -154,10 +160,14 @@
     margin-bottom: 0;
 }
 
-#toprow div{
+#toprow div.gr-box, #toprow div.gr-form{
     border: none;
     gap: 0;
     background: transparent;
+    box-shadow: none;
+}
+#toprow div{
+    gap: 0;
 }
 
 #resize_mode{
@@ -221,7 +231,10 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500,  label.block s
 
 .dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span{
     background-color: rgb(31, 41, 55);
-    box-shadow: 6px 0 6px 0px rgb(31, 41, 55), -6px 0 6px 0px rgb(31, 41, 55);
+    box-shadow: none;
+    border: 1px solid rgba(128, 128, 128, 0.1);
+    border-radius: 6px;
+    padding: 0.1em 0.5em;
 }
 
 #txt2img_column_batch, #img2img_column_batch{
@@ -286,30 +299,15 @@ input[type="range"]{
 }
 
 /* more gradio's garbage cleanup */
-.min-h-\[4rem\] {
-  min-height: unset !important;
-}
-
-#txt2img_progressbar, #img2img_progressbar, #ti_progressbar{
-  position: absolute;
-  z-index: 1000;
-  right: 0;
-  padding-left: 5px;
-  padding-right: 5px;
-  display: block;
-}
-
-#txt2img_progress_row, #img2img_progress_row{
-  margin-bottom: 10px;
-  margin-top: -18px;
-}
+.min-h-\[4rem\] { min-height: unset !important; }
+.min-h-\[6rem\] { min-height: unset !important; }
 
 .progressDiv{
     position: absolute;
     height: 20px;
     top: -20px;
     background: #b4c0cc;
-    border-radius: 8px !important;
+    border-radius: 3px !important;
 }
 
 .dark .progressDiv{
@@ -325,9 +323,10 @@ input[type="range"]{
     line-height: 20px;
     padding: 0 8px 0 0;
     text-align: right;
-    border-radius: 8px;
+    border-radius: 3px;
     overflow: visible;
     white-space: nowrap;
+    padding: 0 0.5em;
 }
 
 .livePreview{
@@ -392,7 +391,7 @@ input[type="range"]{
     grid-area: tile;
 }
 
-.modalClose, 
+.modalClose,
 .modalZoom,
 .modalTileImage {
   color: white;
@@ -531,30 +530,21 @@ input[type="range"]{
     gap: 0.4em;
 }
 
-#quicksettings > div{
-    border: none;
-    background: none;
-    flex: unset;
-    gap: 1em;
-}
-
-#quicksettings > div > div{
-    max-width: 32em;
+#quicksettings > div, #quicksettings > fieldset{
+    max-width: 24em;
     min-width: 24em;
     padding: 0;
+    border: none;
+    box-shadow: none;
+    background: none;
 }
 
-#quicksettings > div > div > div > div > label > span {
+#quicksettings > div > div > div > label > span {
     position: relative;
     margin-right: 9em;
     margin-bottom: -1em;
 }
 
-#quicksettings > div > div > label > span {
-    position: relative;
-    margin-bottom: -1em;
-}
-
 canvas[key="mask"] {
     z-index: 12 !important;
     filter: invert();
@@ -644,7 +634,11 @@ canvas[key="mask"] {
     max-width: 2.5em;
     min-width: 2.5em !important;
     height: 2.4em;
-    margin: 0.55em 0.7em 0.55em 0;
+    margin: 1.6em 0.7em 0.55em 0;
+}
+
+#tab_modelmerger .gr-button-tool{
+    margin: 0.6em 0em 0.55em 0;
 }
 
 #quicksettings .gr-button-tool{
@@ -689,7 +683,10 @@ footer {
     font-weight: bold;
 }
 
-#txt2img_checkboxes > div > div{
+#txt2img_checkboxes, #img2img_checkboxes{
+    margin-bottom: 0.5em;
+}
+#txt2img_checkboxes > div > div, #img2img_checkboxes > div > div{
     flex: 0;
     white-space: nowrap;
     min-width: auto;
@@ -699,6 +696,29 @@ footer {
     opacity: 0.5;
 }
 
+.gr-compact {
+    border: none;
+}
+
+.dark .gr-compact{
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+    margin-left: 0.8em;
+}
+
+.gr-compact > *{
+    margin-top: 0.5em !important;
+}
+
+.gr-compact .gr-block, .gr-compact .gr-form{
+    border: none;
+    box-shadow: none;
+}
+
+.gr-compact .gr-box{
+    border-radius: .5rem !important;
+    border-width: 1px !important;
+}
+
 #mode_img2img > div > div{
     gap: 0 !important;
 }
@@ -794,4 +814,4 @@ Then, you will need to add the RTL counterpart only if needed in the rtl section
         right: unset;
         left: 0.5em;
     }
-}
-\ No newline at end of file
+}