mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-19 17:39:16 +02:00
Overlaid info
This commit is contained in:
parent
62048c68f0
commit
5ba802dc68
@ -69,27 +69,35 @@ label {
|
||||
font-size: 8pt;
|
||||
}
|
||||
.imgSeedLabel {
|
||||
font-size: 1.3em;
|
||||
font-size: 1em;
|
||||
background-color: rgb(44, 45, 48);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
.imgItem {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
padding: 0.5em;
|
||||
border: 1px solid rgb(255 255 255 / 25%);
|
||||
margin-top: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.imgContainer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.imgItemInfo {
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
padding-bottom: 0.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
opacity: 0.25;
|
||||
transition: 0.1s all;
|
||||
}
|
||||
.imgInfoLeft {
|
||||
margin-right: 1em;
|
||||
.imgContainer:hover > .imgItemInfo {
|
||||
opacity: 1;
|
||||
}
|
||||
.imgItemInfo * {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
#container {
|
||||
width: 90%;
|
||||
|
@ -271,16 +271,14 @@ function showImages(res, req) {
|
||||
const imageItemElem = document.createElement('div');
|
||||
imageItemElem.className = 'imgItem';
|
||||
imageItemElem.innerHTML = `
|
||||
<div class="imgItemInfo">
|
||||
<div class="imgInfoLeft">
|
||||
<div class="imgContainer">
|
||||
<img/>
|
||||
<div class="imgItemInfo">
|
||||
<span class="imgSeedLabel"></span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="imgUseBtn">Use as Input</button>
|
||||
<button class="imgSaveBtn">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
<img/>
|
||||
`;
|
||||
|
||||
const imageElem = imageItemElem.querySelector('img'),
|
||||
@ -292,7 +290,7 @@ function showImages(res, req) {
|
||||
imageElem.width = parseInt(imageWidth);
|
||||
imageElem.height = parseInt(imageHeight);
|
||||
|
||||
imageSeedLabel.innerText = imageSeed;
|
||||
imageSeedLabel.innerText = 'Seed: ' + imageSeed;
|
||||
|
||||
useAsInputBtn.addEventListener('click', () => {
|
||||
initImageSelector.value = null;
|
||||
|
Loading…
x
Reference in New Issue
Block a user