diff --git a/README.md b/README.md
index 079c09b..b9bb56a 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ you'll obviously need A1111's webUI installed before you can use this, thus you'
5. configure your local webhost in your homelab to serve the newly cloned repo like the technological bastion you are, or simply run the included `openOutpaint.bat` on windows or `openOutpaint.sh` on mac/linux.
6. open your locally-hosted web server at http://127.0.0.1:3456 (or wherever, i'm not your boss)
-7. update the host field if necessary to point at your stable diffusion API address, change my stupid prompts with whatever you want, click somewhere in the canvas using the dream [`d`] tool, and wait (**OR** you can load as many existing images from your computer as you'd like using the "stamp image" tool [`U`]). if you've requested a batch of generated images and one of them sparks you as something you might want to use later, you can click the "res" button to add the image to the stampable dream resources as well. _(NOTE: you can select or deselect imported images/added resources freely simply by clicking on them)_
+7. update the host field if necessary to point at your stable diffusion API address, change my stupid prompts with whatever you want, click somewhere in the canvas using the dream [`d`] tool, and wait (**OR** you can load as many existing images from your computer as you'd like using the "stamp image" tool [`U`]). If you've requested a batch of generated images and one of them sparks you as something you might want to use later, you can click the "res" button to add the image to the stampable dream resources as well. _(NOTE: you can select or deselect imported images/added resources freely simply by clicking on them)_
8. once an image appears\*, click the `<` and `>` buttons at the bottom-left corner of the image to cycle through the others in the batch if you requested multiple (it defaults to 2 batch size, 2 batch count) - click `y` to choose one you like, or `n` to cancel that image generation batch outright and possibly try again
9. now that you've got a starter, click somewhere near it to outpaint - try and include as much of the "context" as possible in the reticle for the best result convergence, or you can right-click to remove some of it if you want to completely retry a chunk but leave the rest alone
10. enable the mask mode to prepare previously rendered imagery for touchups/inpainting, then paint over the objectionable region; once your masked region is drawn, disable mask mode and change your prompt if necessary, then click over the canvas containing the mask you just painted to request the refined image(s)
diff --git a/css/index.css b/css/index.css
index e57686e..4db5e50 100644
--- a/css/index.css
+++ b/css/index.css
@@ -2,8 +2,16 @@
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
}
+
+/* Body is stuck with no scroll */
body {
+ width: 100%;
+ height: 100%;
+
margin: 0px;
+ padding: 0px;
+
+ overflow: clip;
}
.container {
@@ -96,31 +104,27 @@ body {
grid-row-gap: 0px;
}
-.maskCanvasMonitor .overMaskCanvasMonitor .initImgCanvasMonitor {
- position: absolute;
-}
-
/* Mask colors for mask inversion */
/* Filters are some magic acquired at https://codepen.io/sosuke/pen/Pjoqqp */
-.maskPaintCanvas {
+.mask-canvas {
opacity: 0%;
}
-.maskPaintCanvas.display {
+.mask-canvas.display {
opacity: 40%;
filter: invert(100%);
}
-.maskPaintCanvas.display.opaque {
+.mask-canvas.display.opaque {
opacity: 100%;
}
-.maskPaintCanvas.display.clear {
+.mask-canvas.display.clear {
filter: invert(71%) sepia(46%) saturate(6615%) hue-rotate(321deg)
brightness(106%) contrast(100%);
}
-.maskPaintCanvas.display.hold {
+.mask-canvas.display.hold {
filter: invert(41%) sepia(16%) saturate(5181%) hue-rotate(218deg)
brightness(103%) contrast(108%);
}
@@ -193,6 +197,10 @@ body {
background-color: #dddd49;
}
+.host-field-wrapper .connection-status.before {
+ background-color: #777;
+}
+
input#host {
box-sizing: border-box;
}
@@ -207,11 +215,6 @@ div.prompt-wrapper > textarea {
margin: 0;
padding: 0;
- top: 0px;
- bottom: 0px;
- left: 0px;
- right: 0;
-
resize: vertical;
}
@@ -220,7 +223,6 @@ div.prompt-wrapper > textarea:focus {
}
/* Tool buttons */
-
.button-array {
display: flex;
justify-content: stretch;
diff --git a/css/layers.css b/css/layers.css
new file mode 100644
index 0000000..8675b29
--- /dev/null
+++ b/css/layers.css
@@ -0,0 +1,46 @@
+/* Debug floating window */
+#layer-preview .preview-canvas {
+ background-color: white;
+ width: 100%;
+ height: 150px;
+}
+
+#layer-manager .menu-container {
+ height: 200px;
+}
+
+.layer-render-target {
+ position: fixed;
+ background-color: #466;
+
+ margin: 0;
+ padding: 0;
+
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 100%;
+}
+
+.layer-render-target .collection {
+ position: absolute;
+}
+
+.layer-render-target .collection > .collection-input-overlay {
+ position: absolute;
+
+ top: 0;
+ left: 0;
+
+ z-index: 10;
+}
+
+.layer-render-target canvas {
+ position: absolute;
+
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
diff --git a/css/ui/toolbar.css b/css/ui/toolbar.css
index bb69d01..39c9341 100644
--- a/css/ui/toolbar.css
+++ b/css/ui/toolbar.css
@@ -9,6 +9,10 @@
background-color: var(--c-primary);
}
+#ui-toolbar * {
+ user-select: none;
+}
+
#ui-toolbar .handle {
display: flex;
align-items: center;
diff --git a/index.html b/index.html
index 04f6a77..3e07789 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,8 @@
+
+
@@ -190,109 +192,26 @@
-