1 files changed, 75 insertions, 44 deletions
diff --git a/style.css b/style.css
index c1ebd501..b6239142 100644
--- a/style.css
+++ b/style.css
@@ -302,41 +302,49 @@ input[type="range"]{
   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;
+.progressDiv{
+    position: absolute;
+    height: 20px;
+    top: -20px;
+    background: #b4c0cc;
+    border-radius: 3px !important;
 }
 
-#txt2img_progress_row, #img2img_progress_row{
-  margin-bottom: 10px;
-  margin-top: -18px;
+.dark .progressDiv{
+    background: #424c5b;
 }
 
-.progressDiv{
-  width: 100%;
-  height: 20px;
-  background: #b4c0cc;
-  border-radius: 8px;
+.progressDiv .progress{
+    width: 0%;
+    height: 20px;
+    background: #0060df;
+    color: white;
+    font-weight: bold;
+    line-height: 20px;
+    padding: 0 8px 0 0;
+    text-align: right;
+    border-radius: 3px;
+    overflow: visible;
+    white-space: nowrap;
+    padding: 0 0.5em;
 }
 
-.dark .progressDiv{
-  background: #424c5b;
+.livePreview{
+    position: absolute;
+    z-index: 300;
+    background-color: white;
+    margin: -4px;
 }
 
-.progressDiv .progress{
-  width: 0%;
-  height: 20px;
-  background: #0060df;
-  color: white;
-  font-weight: bold;
-  line-height: 20px;
-  padding: 0 8px 0 0;
-  text-align: right;
-  border-radius: 8px;
+.dark .livePreview{
+    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.livePreview img{
+    position: absolute;
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
 }
 
 #lightboxModal{
@@ -462,23 +470,25 @@ input[type="range"]{
     display:none
 }
 
-#txt2img_interrupt, #img2img_interrupt{
-  position: absolute;
-  width: 50%;
-  height: 72px;
-  background: #b4c0cc;
-  border-radius: 0px;
-  display: none;
+#txt2img_generate_box, #img2img_generate_box{
+    position: relative;
+}
+
+#txt2img_interrupt, #img2img_interrupt, #txt2img_skip, #img2img_skip{
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    background: #b4c0cc;
+    display: none;
 }
 
+#txt2img_interrupt, #img2img_interrupt{
+    left: 0;
+    border-radius: 0.5rem 0 0 0.5rem;
+}
 #txt2img_skip, #img2img_skip{
-  position: absolute;
-  width: 50%;
-  right: 0px;
-  height: 72px;
-  background: #b4c0cc;
-  border-radius: 0px;
-  display: none;
+    right: 0;
+    border-radius: 0 0.5rem 0.5rem 0;
 }
 
 .red {
@@ -624,7 +634,11 @@ canvas[key="mask"] {
     max-width: 2.5em;
     min-width: 2.5em !important;
     height: 2.4em;
-    margin: 1.6em 0 0 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{
@@ -684,7 +698,6 @@ footer {
 
 .gr-compact {
     border: none;
-    padding-top: 1em;
 }
 
 .dark .gr-compact{
@@ -706,6 +719,24 @@ footer {
     border-width: 1px !important;
 }
 
+#mode_img2img > div > div{
+    gap: 0 !important;
+}
+
+[id*='img2img_copy_to_'] {
+    border: none;
+}
+
+[id*='img2img_copy_to_'] > button {
+}
+
+[id*='img2img_label_copy_to_'] {
+    font-size: 1.0em;
+    font-weight: bold;
+    text-align: center;
+    line-height: 2.4em;
+}
+
 /* The following handles localization for right-to-left (RTL) languages like Arabic.
 The rtl media type will only be activated by the logic in javascript/localization.js.
 If you change anything above, you need to make sure it is RTL compliant by just running
@@ -783,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
+}