extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-01-11 16:58:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

added a simple tooltip to the reset button

Browse Source
This commit is contained in:
Malcolm Diller 2022-10-21 17:44:04 -07:00
parent 726abf6e65
commit 32d7835119
2 changed files with 72 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/index.html
View File

@ -103,7 +103,14 @@
<div class="line-separator">&nbsp;</div>
<div id="editor-settings" class="panel-box settings-box">
<h4 class="collapsible">Image Settings<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left"></i></h4>
<h4 class="collapsible">
Image Settings
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left">
<span class="simple-tooltip right">
Reset Image Settings
</span>
</i>
</h4>
<ul id="editor-settings-entries" class="collapsible-content">
<li><table>
<tr><b class="settings-subheader">Image Settings</b></tr>

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

@ -576,3 +576,67 @@ input::file-selector-button {
#promptsFromFileBtn {
font-size: 9pt;
}
#reset-image-settings {
position: relative;
}
.simple-tooltip {
border-radius: 3px;
font-weight: bold;
font-size: 16px;
background-color: var(--background-color3);
visibility: hidden;
opacity: 0;
position: absolute;
white-space: nowrap;
padding: 8px 12px;
transition: 0.3s all;
pointer-events: none;
}
@media (hover: hover) {
:hover > .simple-tooltip {
opacity: 1;
visibility: visible;
}
}
/* position specific */
.simple-tooltip.right {
right: 0px;
top: 50%;
transform: translate(calc(100% - 15%), -50%);
}
:hover > .simple-tooltip.right {
transform: translate(100%, -50%);
}
.simple-tooltip.top {
top: 0px;
left: 50%;
transform: translate(-50%, calc(-100% + 15%));
}
:hover > .simple-tooltip.top {
transform: translate(-50%, -100%);
}
.simple-tooltip.left {
left: 0px;
top: 50%;
transform: translate(calc(-100% + 15%), -50%);
}
:hover > .simple-tooltip.left {
transform: translate(-100%, -50%);
}
.simple-tooltip.bottom {
bottom: 0px;
left: 50%;
transform: translate(-50%, calc(100% - 15%));
}
:hover > .simple-tooltip.bottom {
transform: translate(-50%, 100%);
}