Image Modifiers popup shouldn't break the scrolling panes plugin

This commit is contained in:
cmdr2 2023-06-27 17:06:49 +05:30
parent 1f9a429a62
commit 74aa1a9db1
2 changed files with 34 additions and 26 deletions

View File

@ -71,32 +71,6 @@
<div class="collapsible-content"> <div class="collapsible-content">
<textarea id="negative_prompt" name="negative_prompt" placeholder="list the things to remove from the image (e.g. fog, green)"></textarea> <textarea id="negative_prompt" name="negative_prompt" placeholder="list the things to remove from the image (e.g. fog, green)"></textarea>
</div> </div>
<div id="editor-modifiers">
<div id="editor-modifiers-header" class="dialog-header">
<div id="modifiers-header-left" class="dialog-header-left">
<h4>Image Modifiers</h4>
<span>(drawing style, camera, etc.)</span>
</div>
<div id="modifiers-header-right">
<i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
<span class="simple-tooltip left">
Add Custom Modifiers
</span>
</i>
<i id="modifiers-container-size-btn" class="fa-solid fa-expand"></i>
<i id="modifiers-close-button" class="fa-solid fa-xmark fa-lg"></i>
</div>
</div>
<div id="editor-modifiers-subheader">
<div id="modifiers-action-collapsibles-btn">
<i class="modifiers-action-icon fa-solid fa-square-plus"></i>
<span class="modifiers-action-text">
Expand Categories
</span>
</div>
</div>
<div id="editor-modifiers-entries" class="collapsible-content"></div>
</div>
</div> </div>
<div id="editor-inputs-init-image" class="row"> <div id="editor-inputs-init-image" class="row">
@ -525,6 +499,33 @@
</div> </div>
</div> </div>
<div id="editor-modifiers">
<div id="editor-modifiers-header" class="dialog-header">
<div id="modifiers-header-left" class="dialog-header-left">
<h4>Image Modifiers</h4>
<span>(drawing style, camera, etc.)</span>
</div>
<div id="modifiers-header-right">
<i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
<span class="simple-tooltip left">
Add Custom Modifiers
</span>
</i>
<i id="modifiers-container-size-btn" class="fa-solid fa-expand"></i>
<i id="modifiers-close-button" class="fa-solid fa-xmark fa-lg"></i>
</div>
</div>
<div id="editor-modifiers-subheader">
<div id="modifiers-action-collapsibles-btn">
<i class="modifiers-action-icon fa-solid fa-square-plus"></i>
<span class="modifiers-action-text">
Expand Categories
</span>
</div>
</div>
<div id="editor-modifiers-entries" class="collapsible-content"></div>
</div>
<dialog id="modifier-settings-config"> <dialog id="modifier-settings-config">
<div id="modifier-settings-header" class="dialog-header"> <div id="modifier-settings-header" class="dialog-header">
<div id="modifier-settings-header-left" class="dialog-header-left"> <div id="modifier-settings-header-left" class="dialog-header-left">

View File

@ -304,6 +304,12 @@ button#resume {
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 0px 30px black; box-shadow: 0px 0px 30px black;
border: 2px solid rgb(255 255 255 / 10%); border: 2px solid rgb(255 255 255 / 10%);
margin-top: 150pt;
}
@media screen and (max-height: 500px) {
#editor-modifiers {
margin-top: 50pt;
}
} }
#editor-modifiers.active { #editor-modifiers.active {
display: flex; display: flex;
@ -317,6 +323,7 @@ button#resume {
bottom: 0px !important; bottom: 0px !important;
left: 0px !important; left: 0px !important;
right: 0px !important; right: 0px !important;
margin: 0px !important;
max-width: unset !important; max-width: unset !important;
max-height: unset !important; max-height: unset !important;
border: 0px !important; border: 0px !important;