1 files changed, 71 insertions, 14 deletions
diff --git a/style.css b/style.css
index bdf0635a..d67b6336 100644
--- a/style.css
+++ b/style.css
@@ -137,11 +137,16 @@ a{
     cursor: pointer;
 }
 
-/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reqasaon. */
-.block.gradio-textbox, div.gradio-group, div.gradio-group div, div.gradio-dropdown{
+/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reason. */
+div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown{
     overflow: visible !important;
 }
 
+/* align-items isn't enough and elements may overflow in Safari. */
+.unequal-height {
+    align-content: flex-start;
+}
+
 
 /* general styled components */
 
@@ -282,8 +287,8 @@ div.block.gradio-accordion {
     }
 }
 
-#txt2img_gallery img, #img2img_gallery img, #extras_gallery img{
-    object-fit: scale-down;
+.gradio-gallery .thumbnails img {
+    object-fit: scale-down !important;
 }
 #txt2img_actions_column, #img2img_actions_column {
     gap: 0.5em;
@@ -499,11 +504,15 @@ table.popup-table .link{
 
 /* live preview */
 .progressDiv{
-    position: relative;
+    position: absolute;
     height: 20px;
     background: #b4c0cc;
     border-radius: 3px !important;
-    margin-bottom: -3px;
+    top: -20px;
+}
+
+[id$=_results].mobile{
+    margin-top: 28px;
 }
 
 .dark .progressDiv{
@@ -528,19 +537,16 @@ table.popup-table .link{
 .livePreview{
     position: absolute;
     z-index: 300;
-    background-color: white;
-    margin: -4px;
-}
-
-.dark .livePreview{
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+    background: var(--background-fill-primary);
+    width: 100%;
+    height: 100%;
 }
 
 .livePreview img{
     position: absolute;
     object-fit: contain;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 60px);  /* to match gradio's height */
 }
 
 /* fullscreen popup (ie in Lora's (i) button) */
@@ -609,13 +615,19 @@ table.popup-table .link{
     display: flex;
     gap: 1em;
     padding: 1em;
-    background-color: rgba(0,0,0,0.2);
+    background-color:rgba(0,0,0,0);
+    z-index: 1;
+    transition: 0.2s ease background-color;
+}
+.modalControls:hover {
+    background-color:rgba(0,0,0,0.9);
 }
 .modalClose {
     margin-left: auto;
 }
 .modalControls span{
     color: white;
+    text-shadow: 0px 0px 0.25em black;
     font-size: 35px;
     font-weight: bold;
     cursor: pointer;
@@ -640,6 +652,13 @@ table.popup-table .link{
     min-height: 0;
 }
 
+#modalImage{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
 .modalPrev,
 .modalNext {
   cursor: pointer;
@@ -844,6 +863,7 @@ footer {
     position: absolute;
     color: white;
     right: 0;
+    z-index: 1
 }
 .extra-network-cards .card:hover .button-row{
     display: flex;
@@ -1034,3 +1054,40 @@ div.accordions > div.input-accordion.input-accordion-open{
     flex-flow: column;
 }
 
+
+/* sticky right hand columns */
+
+#img2img_results, #txt2img_results, #extras_results {
+    position: sticky;
+    top: 0.5em;
+}
+
+body.resizing {
+    cursor: col-resize !important;
+}
+
+body.resizing * {
+    pointer-events: none !important;
+}
+
+body.resizing .resize-handle {
+    pointer-events: initial !important;
+}
+
+.resize-handle {
+    position: relative;
+    cursor: col-resize;
+    grid-column: 2 / 3;
+    min-width: 16px !important;
+    max-width: 16px !important;
+    height: 100%;
+}
+
+.resize-handle::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 7.5px;
+    border-left: 1px dashed var(--border-color-primary);
+}