holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated with latest updates for this support

Browse Source
This commit is contained in:
Malcolm Diller 2022-11-08 19:22:14 -08:00
parent 484e53cc08
commit f216ee739a
3 changed files with 35 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Stable Diffusion UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="/media/images/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/media/images/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
@ -88,7 +89,7 @@
<h4 class="collapsible"> <h4 class="collapsible">
Image Settings Image Settings
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button"> <i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button">
<span class="simple-tooltip right"> <span class="simple-tooltip left">
Reset Image Settings Reset Image Settings
</span> </span>
</i> </i>
@ -194,7 +195,7 @@
<h4 class="collapsible"> <h4 class="collapsible">
Image Modifiers Image Modifiers
<i id="modifier-settings-btn" class="fa-solid fa-gear section-button"> <i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
<span class="simple-tooltip right"> <span class="simple-tooltip left">
Add Custom Modifiers Add Custom Modifiers
</span> </span>
</i> </i>

57
ui/media/css/main.css
View File

@ -29,7 +29,6 @@ label {
margin-bottom: 6px; margin-bottom: 6px;
} }
.image_preview_container { .image_preview_container {
/* display: none; */
margin-top: 10pt; margin-top: 10pt;
} }
.image_clear_btn { .image_clear_btn {
@ -113,7 +112,7 @@ label {
} }
#editor { #editor {
background: var(--background-color2); background: var(--background-color2);
padding: 8px 8px 24px 8px; padding: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -179,12 +178,6 @@ label {
display: flex; display: flex;
width: 100%; width: 100%;
} }
.col-50 {
flex: 50%;
}
.col-fixed-10 {
flex: 0 0 350pt;
}
.col-free { .col-free {
flex: 1; flex: 1;
} }
@ -207,17 +200,6 @@ label {
.collapsible:not(.active) ~ .collapsible-content { .collapsible:not(.active) ~ .collapsible-content {
display: none !important; display: none !important;
} }
.panel-box {
background: var(--background-color2);
border: 1px solid var(--background-color3);
border-radius: 6px;
padding: 5px;
}
.panel-box h4 {
margin: 0;
padding: 2px 0;
}
#editor-modifiers { #editor-modifiers {
max-width: 600px; max-width: 600px;
overflow-y: auto; overflow-y: auto;
@ -247,13 +229,8 @@ img {
text-align: right; text-align: right;
} }
#server-status-color { #server-status-color {
/* width: 8pt;
height: 8pt;
border-radius: 4pt; */
font-size: 14pt; font-size: 14pt;
color: rgb(200, 139, 0); color: rgb(200, 139, 0);
/* background-color: rgb(197, 1, 1); */
/* transform: translateY(15%); */
display: inline; display: inline;
} }
#server-status-msg { #server-status-msg {
@ -432,6 +409,8 @@ img {
#init_image_preview { #init_image_preview {
max-width: 150px; max-width: 150px;
max-height: 150px; max-height: 150px;
height: 100%;
width: 100%;
object-fit: contain; object-fit: contain;
border-radius: 6px; border-radius: 6px;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
@ -440,6 +419,7 @@ img {
#init_image_preview:hover { #init_image_preview:hover {
max-width: 500px; max-width: 500px;
max-height: 1000px; max-height: 1000px;
transition: all 1s 0.5s ease-in-out; transition: all 1s 0.5s ease-in-out;
} }
@ -490,6 +470,7 @@ img {
width: 100%; width: 100%;
} }
/* INPUTS STYLING */
button, button,
input[type="file"], input[type="file"],
input[type="checkbox"], input[type="checkbox"],
@ -549,6 +530,7 @@ input::file-selector-button {
height: 19px; height: 19px;
} }
/* MOBILE SUPPORT */
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
#top-nav { #top-nav {
flex-direction: column; flex-direction: column;
@ -586,6 +568,14 @@ input::file-selector-button {
left: 0px; left: 0px;
right: 0px; right: 0px;
} }
#editor {
padding: 16px 8px;
}
}
@media (min-width: 700px) {
#editor {
max-width: 500px;
}
} }
#promptsFromFileBtn { #promptsFromFileBtn {
@ -617,6 +607,7 @@ input::file-selector-button {
display: none; display: none;
} }
/* SIMPLE TOOTIP */
.simple-tooltip { .simple-tooltip {
border-radius: 3px; border-radius: 3px;
font-weight: bold; font-weight: bold;
@ -639,8 +630,6 @@ input::file-selector-button {
visibility: visible; visibility: visible;
} }
} }
/* position specific */
.simple-tooltip.right { .simple-tooltip.right {
right: 0px; right: 0px;
top: 50%; top: 50%;
@ -676,6 +665,8 @@ input::file-selector-button {
:hover > .simple-tooltip.bottom { :hover > .simple-tooltip.bottom {
transform: translate(-50%, 100%); transform: translate(-50%, 100%);
} }
/* PROGRESS BAR */
.progress-bar { .progress-bar {
background: var(--background-color3); background: var(--background-color3);
border-radius: 4px; border-radius: 4px;
@ -694,7 +685,6 @@ input::file-selector-button {
width: 0%; width: 0%;
transition: width 1s ease-in-out; transition: width 1s ease-in-out;
} }
/* animated progress-bar */
.progress-bar.active { .progress-bar.active {
background: repeating-linear-gradient(-65deg, background: repeating-linear-gradient(-65deg,
var(--background-color2), var(--background-color2),
@ -714,13 +704,14 @@ input::file-selector-button {
100% { background-position: 0 0; } 100% { background-position: 0 0; }
} }
/* POPUPS */
.popup:not(.active) { .popup:not(.active) {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
.popup { .popup {
position: absolute; position: fixed;
background: rgba(32, 33, 36, 50%); background: rgba(32, 33, 36, 50%);
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -753,6 +744,7 @@ input::file-selector-button {
padding: 24px; padding: 24px;
} }
/* TABS */
#tab-container { #tab-container {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -781,13 +773,13 @@ input::file-selector-button {
} }
/* FLOATING FIXED STUFF */
/*
@media (min-width: 700px) { @media (min-width: 700px) {
#editor { #editor {
max-width: 500px; max-width: 500px;
} }
/* FLOATING FIXED STUFF */
#tab-content { #tab-content {
flex-direction: column; flex-direction: column;
} }
@ -808,5 +800,6 @@ input::file-selector-button {
#editor-settings-entries { #editor-settings-entries {
flex-direction: row; flex-direction: row;
} }
} }
*/

12
ui/media/js/main.js
View File

@ -838,13 +838,15 @@ function createTask(task) {
let taskEntry = document.createElement('div') let taskEntry = document.createElement('div')
taskEntry.className = 'imageTaskContainer' taskEntry.className = 'imageTaskContainer'
taskEntry.innerHTML = ` <div class="taskStatusLabel">Enqueued</div> taskEntry.innerHTML = ` <div class="header-content panel collapsible active">
<button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button> <div class="taskStatusLabel">Enqueued</div>
<div class="preview-prompt collapsible active"></div> <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
<div class="taskConfig">${taskConfig}</div> <div class="preview-prompt collapsible active"></div>
<div class="collapsible-content" style="display: block"> <div class="taskConfig">${taskConfig}</div>
<div class="outputMsg"></div> <div class="outputMsg"></div>
<div class="progress-bar active"><div></div></div> <div class="progress-bar active"><div></div></div>
</div>
<div class="collapsible-content">
<div class="img-preview"> <div class="img-preview">
</div>` </div>`