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>
<html>
<head>
<title>Stable Diffusion UI</title>
<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-32x32.png" sizes="32x32">
@ -88,7 +89,7 @@
<h4 class="collapsible">
Image Settings
<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
</span>
</i>
@ -194,7 +195,7 @@
<h4 class="collapsible">
Image Modifiers
<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
</span>
</i>

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

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

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

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