aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/ImageBox.scss
diff options
context:
space:
mode:
authorNathan-SR <144961007+Nathan-SR@users.noreply.github.com>2025-03-04 04:32:50 -0500
committerNathan-SR <144961007+Nathan-SR@users.noreply.github.com>2025-03-04 04:32:50 -0500
commit95abdada5a275fc258fa72781f7f3c40c0b306ea (patch)
tree6d729cebe0937ae81108005de9895b5398d1f475 /src/client/views/nodes/ImageBox.scss
parent0a8f3739cf5c30852f18751a4c05d81e0dabe928 (diff)
parent215ad40efa2e343e290d18bffbc55884829f1a0d (diff)
Merge branch 'master' of https://github.com/brown-dash/Dash-Web into Merge
Diffstat (limited to 'src/client/views/nodes/ImageBox.scss')
-rw-r--r--src/client/views/nodes/ImageBox.scss99
1 files changed, 99 insertions, 0 deletions
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 3ffda5a35..671621bbe 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -40,6 +40,7 @@
max-height: 100%;
pointer-events: inherit;
background: transparent;
+ // z-index: -10000; // bcz: not sure why this was here. it broke dropping images on the image box alternate bullseye icon.
img {
height: auto;
@@ -121,6 +122,7 @@
}
}
}
+.imageBox-regenerateDropTarget,
.imageBox-alternateDropTarget {
position: absolute;
color: white;
@@ -128,7 +130,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 +153,88 @@
.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%;
+ .imageBox-aiView-regenerate-createBtn {
+ max-width: 10%;
+ .button-container {
+ width: 100% !important;
+ justify-content: left !important;
+ }
+ }
+ }
+
+ .imageBox-aiView-firefly {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 10%;
+ width: 100%;
+ }
+ .imageBox-aiView-regenerate-send {
+ max-width: 10%;
+ }
+
+ .imageBox-aiView-strength {
+ text-align: center;
+ align-items: center;
+ display: flex;
+ max-width: 25%;
+ 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%;
+ }
+}