extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-05-17 23:00:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Show the image dimensions on mouse over

Browse Source
This commit is contained in:
cmdr2 2023-03-01 15:17:27 +05:30
parent b425b43d3e
commit 24cce08580
3 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/index.html
View File

@ -70,7 +70,7 @@
<div id="init_image_preview_container" class="image_preview_container"> <div id="init_image_preview_container" class="image_preview_container">
<div id="init_image_wrapper"> <div id="init_image_wrapper">
<img id="init_image_preview" src="" /> <img id="init_image_preview" src="" />
<span id="init_image_size_box"></span> <span id="init_image_size_box" class="img_bottom_label"></span>
<button class="init_image_clear image_clear_btn"><i class="fa-solid fa-xmark"></i></button> <button class="init_image_clear image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
</div> </div>
<div id="init_image_buttons"> <div id="init_image_buttons">

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

@ -123,6 +123,9 @@ code {
.imgPreviewItemClearBtn { .imgPreviewItemClearBtn {
opacity: 0; opacity: 0;
} }
.imgContainer .img_bottom_label {
opacity: 0;
}
.imgPreviewItemClearBtn:hover { .imgPreviewItemClearBtn:hover {
background: rgb(177, 27, 0); background: rgb(177, 27, 0);
} }
@ -132,6 +135,9 @@ code {
.imgContainer:hover > .imgPreviewItemClearBtn { .imgContainer:hover > .imgPreviewItemClearBtn {
opacity: 1; opacity: 1;
} }
.imgContainer:hover > .img_bottom_label {
opacity: 60%;
}
.imgItemInfo * { .imgItemInfo * {
margin-bottom: 7px; margin-bottom: 7px;
} }
@ -601,6 +607,9 @@ div.img-preview img {
} */ } */
#init_image_size_box { #init_image_size_box {
border-radius: 6px 0px;
}
.img_bottom_label {
position: absolute; position: absolute;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
@ -610,7 +619,6 @@ div.img-preview img {
text-shadow: 0px 0px 4px black; text-shadow: 0px 0px 4px black;
opacity: 60%; opacity: 60%;
font-size: 12px; font-size: 12px;
border-radius: 6px 0px;
} }
#editor-settings { #editor-settings {

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

@ -269,6 +269,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
<span class="imgSeedLabel"></span> <span class="imgSeedLabel"></span>
</div> </div>
<button class="imgPreviewItemClearBtn image_clear_btn"><i class="fa-solid fa-xmark"></i></button> <button class="imgPreviewItemClearBtn image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
<span class="img_bottom_label">${imageWidth} x ${imageHeight}</span>
</div> </div>
` `
outputContainer.appendChild(imageItemElem) outputContainer.appendChild(imageItemElem)