extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-06-20 01:48:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

Overlaid info

Browse Source
This commit is contained in:
Haka 2022-09-26 17:50:27 +03:00
parent 62048c68f0
commit 5ba802dc68
2 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/media/main.css
View File

@ -69,27 +69,35 @@ label {
font-size: 8pt; font-size: 8pt;
} }
.imgSeedLabel { .imgSeedLabel {
font-size: 1.3em; font-size: 1em;
background-color: rgb(44, 45, 48);
border-radius: 5px;
padding: 5px;
} }
.imgItem { .imgItem {
display: inline-block; display: inline-block;
width: fit-content;
height: fit-content;
padding: 0.5em;
border: 1px solid rgb(255 255 255 / 25%);
margin-top: 1em; margin-top: 1em;
margin-right: 1em; margin-right: 1em;
} }
.imgContainer {
display: flex;
justify-content: flex-end;
}
.imgItemInfo { .imgItemInfo {
width: 100%;
height: 2em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
display: flex; display: flex;
align-items: center; align-items: flex-end;
justify-content: space-between; flex-direction: column;
position: absolute;
padding: 5px;
opacity: 0.25;
transition: 0.1s all;
} }
.imgInfoLeft { .imgContainer:hover > .imgItemInfo {
margin-right: 1em; opacity: 1;
}
.imgItemInfo * {
margin-bottom: 7px;
} }
#container { #container {
width: 90%; width: 90%;

10
ui/media/main.js
View File

@ -271,16 +271,14 @@ function showImages(res, req) {
const imageItemElem = document.createElement('div'); const imageItemElem = document.createElement('div');
imageItemElem.className = 'imgItem'; imageItemElem.className = 'imgItem';
imageItemElem.innerHTML = ` imageItemElem.innerHTML = `
<div class="imgItemInfo"> <div class="imgContainer">
<div class="imgInfoLeft"> <img/>
<div class="imgItemInfo">
<span class="imgSeedLabel"></span> <span class="imgSeedLabel"></span>
</div>
<div>
<button class="imgUseBtn">Use as Input</button> <button class="imgUseBtn">Use as Input</button>
<button class="imgSaveBtn">Download</button> <button class="imgSaveBtn">Download</button>
</div> </div>
</div> </div>
<img/>
`; `;
const imageElem = imageItemElem.querySelector('img'), const imageElem = imageItemElem.querySelector('img'),
@ -292,7 +290,7 @@ function showImages(res, req) {
imageElem.width = parseInt(imageWidth); imageElem.width = parseInt(imageWidth);
imageElem.height = parseInt(imageHeight); imageElem.height = parseInt(imageHeight);
imageSeedLabel.innerText = imageSeed; imageSeedLabel.innerText = 'Seed: ' + imageSeed;
useAsInputBtn.addEventListener('click', () => { useAsInputBtn.addEventListener('click', () => {
initImageSelector.value = null; initImageSelector.value = null;