1 files changed, 106 insertions, 0 deletions
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 3ffda5a35..3d6942e6f 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -40,6 +40,8 @@
     max-height: 100%;
     pointer-events: inherit;
     background: transparent;
+    z-index: 0;
+    // z-index: -10000; // bcz: not sure why this was here.  it broke dropping images on the image box alternate bullseye icon.
 
     img {
         height: auto;
@@ -102,6 +104,10 @@
     margin: 0 auto;
     display: flex;
     height: 100%;
+    img {
+        object-fit: contain;
+        height: 100%;
+    }
 
     .imageBox-fadeBlocker,
     .imageBox-fadeBlocker-hover {
@@ -121,6 +127,7 @@
         }
     }
 }
+.imageBox-regenerateDropTarget,
 .imageBox-alternateDropTarget {
     position: absolute;
     color: white;
@@ -128,7 +135,19 @@
     right: 0;
     bottom: 0;
     z-index: 2;
+    transform-origin: bottom right;
     cursor: default;
+    > svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+.imageBox-regenerateDropTarget {
+    right: 30;
+    border-radius: 50%;
+    svg {
+        border-radius: 50%;
+    }
 }
 
 .imageBox-fader img {
@@ -139,3 +158,90 @@
 .imageBox-fadeBlocker-hover {
     opacity: 0;
 }
+
+.imageBox-aiView-history {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+
+    .imageBox-aiView-img {
+        width: 100%;
+        padding: 5px;
+
+        &:hover {
+            filter: brightness(0.8);
+        }
+    }
+
+    .imageBox-aiView-caption {
+        font-size: 7px;
+    }
+}
+
+.imageBox-aiView {
+    text-align: center;
+    font-weight: bold;
+    transform-origin: top left;
+    width: 100%;
+
+    .imageBox-aiView-subtitle {
+        position: relative;
+        align-content: center;
+        max-width: 10%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .imageBox-aiView-regenerate,
+    .imageBox-aiView-options {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        gap: 5px;
+        width: 100%;
+        padding: 0 10;
+        .imageBox-aiView-regenerate-createBtn {
+            max-width: 20%;
+            .button-container {
+                width: 100% !important;
+                justify-content: left !important;
+            }
+        }
+    }
+
+    .imageBox-aiView-firefly {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 15%;
+        width: 100%;
+    }
+    .imageBox-aiView-regenerate-send {
+        max-width: 10%;
+    }
+
+    .imageBox-aiView-strength {
+        text-align: center;
+        align-items: center;
+        display: flex;
+        max-width: 90%;
+        width: 100%;
+        .imageBox-aiView-similarity {
+            max-width: 65;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 100%;
+        }
+    }
+    .imageBox-aiView-slider {
+        width: 90%;
+        margin-left: 5px;
+    }
+    .imageBox-aiView-input {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 65%;
+        width: 100%;
+        color: black;
+    }
+}