Public/stable-diffusion-webui-ux
1
0
Fork 0
mirror of https://github.com/anapnoe/stable-diffusion-webui-ux.git synced 2026-09-20 01:31:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

draggable reorderable quicksettings for desktop and mobile

Browse Source 
top nav header restructure with fixed position and dynamic height need to add it to the theme configurator
This commit is contained in:
anapnoe
2023-03-02 18:17:43 +02:00
parent eb04bbb2e9
commit 04dad8579b
7 changed files with 430 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/svg/drag-drop-line.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 13l6.964 4.062-2.973.85 2.125 3.681-1.732 1-2.125-3.68-2.223 2.15L16 13zm-2-7h2v2h5a1 1 0 0 1 1 1v4h-2v-3H10v10h4v2H9a1 1 0 0 1-1-1v-5H6v-2h2V9a1 1 0 0 1 1-1h5V6zM4 14v2H2v-2h2zm0-4v2H2v-2h2zm0-4v2H2V6h2zm0-4v2H2V2h2zm4 0v2H6V2h2zm4 0v2h-2V2h2zm4 0v2h-2V2h2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 400 B

html/svg/grid-fill.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M14 10v4h-4v-4h4zm2 0h5v4h-5v-4zm-2 11h-4v-5h4v5zm2 0v-5h5v4a1 1 0 0 1-1 1h-4zM14 3v5h-4V3h4zm2 0h4a1 1 0 0 1 1 1v4h-5V3zm-8 7v4H3v-4h5zm0 11H4a1 1 0 0 1-1-1v-4h5v5zM8 3v5H3V4a1 1 0 0 1 1-1h4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 330 B

html/svg/sort-asc.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0H24V24H0z"/><path d="M19 3l4 5h-3v12h-2V8h-3l4-5zm-5 15v2H3v-2h11zm0-7v2H3v-2h11zm-2-7v2H3V4h9z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

html/svg/sort-desc.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0H24V24H0z"/><path d="M20 4v12h3l-4 5-4-5h3V4h2zm-8 14v2H3v-2h9zm2-7v2H3v-2h11zm0-7v2H3V4h11z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 209 B

javascript/ui.js
+217 -21
View File
@@ -387,8 +387,10 @@ onUiUpdate(function(){
// menu
function disableScroll() {
scrollTop = 0;//window.pageYOffset || document.documentElement.scrollTop;
scrollLeft = 0;//window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
window.scrollTo(scrollLeft, scrollTop);
window.onscroll = function() {
window.scrollTo(scrollLeft, scrollTop);
}
@@ -397,6 +399,7 @@ onUiUpdate(function(){
function enableScroll() {
window.onscroll = function() {}
}
function toggleMenu(isopen, icon, panel, func) {
if(isopen){
@@ -412,17 +415,31 @@ onUiUpdate(function(){
}
}
function getPos(el) {
let rect=el.getBoundingClientRect();
return {x:rect.left,y:rect.top};
}
// mobile nav menu
const tabs_menu = gradioApp().querySelector('#tabs > div:first-child');
const nav_menu = gradioApp().querySelector('#nav_menu');
const header = gradioApp().querySelector('#header-top');
let menu_open = false;
let z_menu = nav_menu.cloneNode(true);
/* let pos = getPos(nav_menu);
clone.style.position = 'fixed';
clone.style.left = pos.x+'px';
clone.style.top = pos.y+'px';
clone.style.zIndex = 99999; */
z_menu.id = "clone_nav_menu";
header.parentElement.append(z_menu);
function toggleNavMenu(e) {
//e.preventDefault();
e.stopPropagation();
menu_open = !menu_open;
menu_open = !menu_open;
toggleMenu(menu_open, nav_menu, tabs_menu, toggleNavMenu);
}
nav_menu.addEventListener('click', toggleNavMenu);
z_menu.addEventListener('click', toggleNavMenu);
// quicksettings nav menu
let quick_menu_open = false;
@@ -533,7 +550,6 @@ onUiUpdate(function(){
})
})
extra_networks_cards_visible_rows(opts.extra_networks_cards_visible_rows);
//hidden ui tabs
let radio_hidden_html="";
@@ -543,10 +559,13 @@ onUiUpdate(function(){
const setting_ui_hidden_tabs = gradioApp().querySelector('#setting_ui_hidden_tabs textarea');
const setting_ui_header_tabs = gradioApp().querySelector('#setting_ui_header_tabs textarea');
const parent_header_tabs = gradioApp().querySelector('#nav_menu_header_tabs');
setting_ui_hidden_tabs.style.display = "none";
setting_ui_header_tabs.style.display = "none";
const maintabs = gradioApp().querySelectorAll('#tabs > div:first-child > button');
const tabitem = gradioApp().querySelectorAll('#tabs > div.tabitem');
function tabOpsSave(setting){
const iEvent = new Event("input");
Object.defineProperty(iEvent, "target", {value: setting})
@@ -596,39 +615,34 @@ onUiUpdate(function(){
}
Observe("#tabs > div.tabitem", {
attributesList: ["style"], attributeOldValue: false, }, (m) => {
attributesList: ["style"], attributeOldValue: true, }, (m) => {
if(m.target.style.display === 'block'){
let idx = m.target.getAttribute("tab-item");
let idx = parseInt(m.target.getAttribute("tab-item"));
tabSelected(idx);
}
})
function tabSelected(idx){
gradioApp().querySelectorAll('#tabs > div > button.bg-white').forEach(function (tab){
gradioApp().querySelectorAll('#tabs > div > button.bg-white, #nav_menu_header_tabs > button.bg-white').forEach(function (tab){
tab.classList.remove("bg-white");
})
gradioApp().querySelectorAll('#tabs > div > button:nth-child('+(parseInt(idx)+1)+')').forEach(function (tab){
gradioApp().querySelectorAll('#tabs > div > button:nth-child('+(idx+1)+'), #nav_menu_header_tabs > button:nth-child('+(idx+1)+')').forEach(function (tab){
tab.classList.add("bg-white");
})
}
function navigate2Tab(idx){
gradioApp().querySelectorAll('#tabs > div.tabitem').forEach(function (tabitem, index){
if(parseInt(idx) === index){
if(idx == index){
tabitem.style.display = "block";
}else{
tabitem.style.display = "none";
}
})
}
const maintabs = gradioApp().querySelectorAll('#tabs > div:first-child > button');
const tabitem = gradioApp().querySelectorAll('#tabs > div.tabitem');
maintabs.forEach(function (elem, index) {
let tabvalue = elem.innerText.replaceAll(" ", "");
hiddentabs[tabvalue] = false;
@@ -654,7 +668,7 @@ onUiUpdate(function(){
clonetab.setAttribute("tab-id", index);
clonetab.addEventListener('click', function (e) {
const idx = e.currentTarget.getAttribute("tab-id");
const idx = parseInt(e.currentTarget.getAttribute("tab-id"));
navigate2Tab(idx);
})
@@ -697,7 +711,7 @@ onUiUpdate(function(){
// add to quick settings
const settings_submit = gradioApp().querySelector('#settings_submit');
const quick_parent = gradioApp().querySelector("#quicksettings_overflow");
const quick_parent = gradioApp().querySelector("#quicksettings_overflow_container");
function add2quickSettings(id, section, checked){
const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea');
@@ -710,7 +724,7 @@ onUiUpdate(function(){
field_settings = field_settings.replaceAll(id, ",");
const setting_parent = gradioApp().querySelector("#"+section+"_settings_2img_settings");
let quick_row = gradioApp().querySelector('#row_setting_'+id);
console.log(quick_row);
//console.log(quick_row);
setting_parent.append(quick_row);
}
@@ -725,7 +739,6 @@ onUiUpdate(function(){
Object.defineProperty(cEvent, "target", {value: settings_submit})
settings_submit.dispatchEvent(cEvent);
//settings_submit.click();
//console.log(section + " - "+ id + " - " + checked);
}
gradioApp().querySelectorAll('[id*="add2quick_"]').forEach(function (elem){
@@ -738,6 +751,189 @@ onUiUpdate(function(){
})
})
const container = gradioApp().querySelector("#quicksettings_overflow_container");
let draggables;
// function that gets the element next of cursor/touch
function getElementAfter(container, y){
return draggables.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if(offset < 0 && offset > closest.offset){
return { offset: offset, element: child};
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY } ).element;
}
let lastElemAfter;
let islastChild;
let timeout;
function preventBehavior(e){
e.stopPropagation();
e.preventDefault();
return false;
}
function dragOrderChange(elementAfter, isComplete, delem) {
if(lastElemAfter !== elementAfter || islastChild){
if(lastElemAfter != null ){
lastElemAfter.classList.remove('marker-top', 'marker-bottom');
}
if(elementAfter == null){
islastChild = true;
lastElemAfter.classList.add('marker-bottom');
} else {
islastChild = false;
elementAfter.classList.add('marker-top');
lastElemAfter = elementAfter;
}
}
if(isComplete){
if(elementAfter == null){
container.append(delem);
} else {
container.insertBefore(delem, elementAfter);
}
let order_settings="";
gradioApp().querySelectorAll('#quicksettings_overflow_container > div').forEach(function (el){
el.classList.remove('marker-top', 'marker-bottom', 'dragging');
order_settings += el.id.split("row_setting_")[1]+",";
})
//console.log(order_settings);
const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea');
setting_quicksettings.value = order_settings;
const iEvent = new Event("input");
Object.defineProperty(iEvent, "target", {value: setting_quicksettings})
setting_quicksettings.dispatchEvent(iEvent);
const cEvent = new Event("click");//submit
Object.defineProperty(cEvent, "target", {value: settings_submit})
settings_submit.dispatchEvent(cEvent);
container.classList.remove('no-scroll');
}
}
function touchmove(e){
let y = e.touches[0].clientY;
let elementAfter = getElementAfter(container, y);
dragOrderChange(elementAfter);
}
function touchstart(e){
e.currentTarget.draggable = "false";
let target = e.currentTarget;
// touch should be hold for 1 second
timeout = setTimeout(function(){
target.classList.add('dragging');
container.classList.add('no-scroll');
target.addEventListener('touchmove', touchmove);
container.addEventListener("touchmove", preventBehavior, {passive: false});
}, 1000);
target.addEventListener('touchend', touchend);
target.addEventListener('touchcancel', touchcancel);
}
function touchend(e){
e.currentTarget.draggable = "true";
clearTimeout(timeout);
e.currentTarget.removeEventListener('touchmove', touchmove);
container.removeEventListener("touchmove", preventBehavior);
let y = e.changedTouches[0].clientY;
let elementAfter = getElementAfter(container, y);
dragOrderChange(elementAfter, true, e.currentTarget);
}
function touchcancel(e){
e.currentTarget.draggable = "true";
clearTimeout(timeout);
e.currentTarget.classList.remove('dragging');
e.currentTarget.removeEventListener('touchmove', touchmove);
container.removeEventListener("touchmove", preventBehavior);
}
function dragstart(e){
e.currentTarget.draggable = "false";
e.currentTarget.classList.add("dragging");
}
function dragend(e){
e.stopPropagation();
e.preventDefault();
e.currentTarget.draggable = "true";
let y = e.clientY;
let elementAfter = getElementAfter(container, y);
dragOrderChange(elementAfter, true, e.currentTarget);
}
function dragOver(e) {
e.preventDefault();
let y = e.clientY;
let elementAfter = getElementAfter(container, y);
dragOrderChange(elementAfter);
}
function actionQuickSettingsDraggable(checked){
if(checked){
draggables = Array.from(gradioApp().querySelectorAll('#quicksettings_overflow_container > div:not(.dragging)'));
gradioApp().addEventListener('drop', preventBehavior);
}else{
gradioApp().removeEventListener('drop', preventBehavior);
}
gradioApp().querySelectorAll('#quicksettings_overflow_container > div').forEach(function (elem){
//elem.setAttribute("draggable", checked);
elem.draggable = checked;
if(checked){
elem.addEventListener('touchstart', touchstart);
elem.addEventListener('dragstart', dragstart);
elem.addEventListener('dragend', dragend);
elem.addEventListener('dragover', dragOver);
}else{
elem.removeEventListener('touchstart', touchstart, false);
elem.removeEventListener('touchend', touchend, false);
elem.removeEventListener('touchcancel', touchcancel, false);
elem.removeEventListener('touchmove', touchmove, false);
elem.removeEventListener('dragstart', dragstart, false);
elem.removeEventListener('dragend', dragend, false);
elem.removeEventListener('dragover', dragOver, false);
}
})
}
gradioApp().querySelector('#quicksettings_draggable').addEventListener('click', function (e) {
if (e.target && e.target.matches("input[type='checkbox']")) {
actionQuickSettingsDraggable(e.target.checked);
}
})
updateOpStyles();
modules/ui.py
+25 -18
View File
@@ -1711,26 +1711,33 @@ def create_ui():
# print(selected)
# return gr.Tabs.update(selected=selected)
with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo:
with gr.Row(elem_id="quicksettings"):
with gr.Row(elem_id="top_row_sd_model_checkpoint") as qsettings_row:
component = create_setting_component("sd_model_checkpoint", "sd", is_quicksettings=True)
component_dict["sd_model_checkpoint"] = component
with gr.Column(elem_id="quicksettings_overflow"):
for i, k, item in sorted(quicksettings_list, key=lambda x: quicksettings_names.get(x[1], x[0])):
if( k != "sd_model_checkpoint"):
#with gr.Row(elem_id=f"quick_row_{k}") as qsettings_row:
component = create_setting_component(k, item.section[0], is_quicksettings=True)
component_dict[k] = component
gr.Row(elem_id="quick_menu")
parameters_copypaste.connect_paste_params_buttons()
with gr.Tabs(elem_id="tabs") as tabs:
with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo:
with gr.Row(elem_id="header-top"):
gr.Row(elem_id="nav_menu")
gr.Row(elem_id="nav_menu_header_tabs")
with gr.Row(elem_id="quicksettings"):
with gr.Row(elem_id="top_row_sd_model_checkpoint") as qsettings_row:
component = create_setting_component("sd_model_checkpoint", "sd", is_quicksettings=True)
component_dict["sd_model_checkpoint"] = component
with gr.Column(elem_id="quicksettings_overflow"):
with gr.Row(elem_id="quicksettings_actions"):
gr.Checkbox(label='', elem_id="quicksettings_draggable", interactive=True)
#ToolButton(elem_id="quicksettings_sort_asc", interactive=True)
#ToolButton(elem_id="quicksettings_sort_desc", interactive=True)
with gr.Column(elem_id="quicksettings_overflow_container"):
for i, k, item in sorted(quicksettings_list, key=lambda x: quicksettings_names.get(x[1], x[0])):
if( k != "sd_model_checkpoint"):
#with gr.Row(elem_id=f"quick_row_{k}") as qsettings_row:
component = create_setting_component(k, item.section[0], is_quicksettings=True)
component_dict[k] = component
gr.Row(elem_id="quick_menu")
parameters_copypaste.connect_paste_params_buttons()
with gr.Tabs(elem_id="tabs") as tabs:
# with gr.Row(elem_id="nav_menu_header_tabs"):
# for interface, label, ifid in interfaces:
# btn = gr.Button(label, elem_id='tab_clone_' + ifid)
style.css
+184 -71
View File
@@ -14,6 +14,7 @@ License: GNU General Public License
--extra-networks-height: calc((var(--extra-networks-card-real-size) * var(--extra-networks-visible-rows)) + ( var(--inside-padding-size) * 2 ) );
--extra-networks-name-size: calc(var(--extra-networks-card-size) * 1em);
--top-header-height:60px;
@@ -31,6 +32,60 @@ body {
background-color: var(--main-bg-color) !important;
}
#tabs{
margin-top: var(--top-header-height);
}
#header-top{
position: fixed;
top: 0px;
left: 0;
right: 0;
z-index: 10000;
min-height: var(--top-header-height);
background-color: var(--main-bg-color);
/* padding: 10px; */
padding-left: 1rem;
padding-right: 1rem;
}
#nav_menu_header_tabs {
position: relative;
height: 34px;
align-self: center;
}
#quicksettings {
align-items: center;
width: auto;
background: 0;
padding: 0;
position: relative;
max-height: 34px;
align-self: center;
}
#top_row_sd_model_checkpoint {
position: absolute;
z-index: 9999;
max-width: 290px;
right: 0;
}
#quick_menu {
z-index: 9999;
background-color: var(--input-bg-color);
position: relative;
width: 38px;
height: 38px;
border-radius: 100%;
cursor: pointer;
min-width: unset;
max-width: 38px;
align-self: center;
}
/* label color */
.dark .dark\:text-gray-200 {
@@ -113,11 +168,20 @@ body {
color: inherit;
}
[id*="add2quick_"] {
min-width: unset !important;
max-width: 42px;
#quicksettings_actions > div{
background-color: transparent !important;
border: 0;
}
#quicksettings_actions > div > div,
[id*="add2quick_"] {
min-width: unset !important;
flex-grow:0 !important;
padding: 4px;
border: 1px solid;
}
#quicksettings_actions > div label,
[id*="add2quick_"] label {
display: block;
position: relative;
@@ -129,9 +193,12 @@ body {
user-select: none;
margin: auto !important;
padding: 0 !important;
min-width: 25px;
min-height: 25px;
}
/* Hide the browser's default checkbox */
#quicksettings_actions > div input,
[id*="add2quick_"] input {
position: absolute;
opacity: 0;
@@ -141,28 +208,34 @@ body {
}
/* Create a custom checkbox */
#quicksettings_actions > div span,
[id*="add2quick_"] span {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
-webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
background-color: var(--input-color);
padding: 0;
margin: 0 !important;
opacity:0.5;
}
[id*="add2quick_"] span {
-webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
}
/* On mouse-over, add a grey background color */
#quicksettings_draggable label input:checked ~ span,
#quicksettings_actions > div label:hover input ~ span,
[id*="add2quick_"] label:hover input ~ span {
background-color: var(--icon-color);
opacity:1.0;
}
/* When the checkbox is checked, add a blue background */
[id*="add2quick_"] label input:checked ~ span {
-webkit-mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%;
mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%;
@@ -170,12 +243,71 @@ body {
opacity:0.5;
}
#quicksettings_draggable span {
-webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%;
mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%;
}
#quicksettings_sort_asc span {
-webkit-mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%;
mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%;
}
#quicksettings_sort_desc span {
-webkit-mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%;
mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%;
}
#quicksettings_overflow_container > div.marker-bottom:after,
#quicksettings_overflow_container > div.marker-top:before {
content: ' ';
display: inline-block;
background-color: var(--primary-color);
width: 100%;
height: 2px;
position: relative;
margin-top: -5px;
}
#quicksettings_overflow_container > div.marker-bottom:after {
top: 8px;
}
#quicksettings_overflow_container > div:first-child {
margin-top: var(--outside-gap-size);
}
#quicksettings_overflow_container.no-scroll{
/*overflow:hidden;
width:100%;*/
}
/* #quicksettings_actions{
margin-bottom:0 !important;
} */
#quicksettings_overflow_container > div.dragging {
opacity:0.4 !important;
}
[draggable="true"] [id*="add2quick_"]{
pointer-events: none;
}
[draggable="true"] [id*="add2quick_"] label input:checked ~ span {
-webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%;
mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%;
background-color: var(--input-color);
opacity:0.5;
}
#quicksettings_actions > div label input:checked ~ span:after,
#quicksettings_actions > div label:hover input:checked ~ span,
[id*="add2quick_"] label:hover input:checked ~ span {
background-color: var(--icon-color);
opacity:1.0;
}
/* Create the checkmark/indicator (hidden when not checked) */
#quicksettings_actions > div label span:after,
[id*="add2quick_"] label span:after {
content: "";
position: absolute;
@@ -183,6 +315,7 @@ body {
}
/* Show the checkmark when checked */
#quicksettings_actions > div label input:checked ~ span:after,
[id*="add2quick_"] label input:checked ~ span:after {
display: block;
}
@@ -494,13 +627,13 @@ body {
/* offcanvas menu */
#tabs > div:first-child {
position: fixed;
z-index: 9999;
z-index: 10000;
display: block;
width: 90%;
height: 100%;
background-color: var(--nav-bg-color) !important;
top: 0;
padding-top: 70px;
padding-top: var(--top-header-height);
left:0;
max-width: 320px;
transform: translateX(-100%);
@@ -516,7 +649,6 @@ body {
box-shadow: rgba(0,0,0,0.4)-30px 0 30px 30px;
}
#tabs > div:first-child > button {
display: block;
width: 320px;
@@ -541,25 +673,21 @@ body {
}
#tabs > #nav_menu {
[id$="nav_menu"]{
z-index: 9999;
background-color: var(--input-bg-color);
position: absolute;
position: relative;
width: 38px;
height: 38px;
top: -2px;
left: 0;
border-radius: 100%;
cursor: pointer;
max-width: 38px;
min-width: unset;
align-self: center;
}
#tabs > #nav_menu.fixed {
position: fixed;
top:22px;
left:16px;
}
#tabs > #nav_menu::before {
[id$="nav_menu"]::before {
content: ' ';
display: inline-block;
-webkit-mask-size: cover;
@@ -577,13 +705,20 @@ body {
}
#tabs > #nav_menu:hover {
[id$="nav_menu"]:hover {
background-color: var(--primary-color);
}
#tabs > #nav_menu:hover::before {
[id$="nav_menu"]:hover::before {
background-color: var(--main-bg-color);
}
#clone_nav_menu{
position:fixed;
z-index:99999;
left:1rem;
top: calc((var(--top-header-height) - 38px) / 2);
}
/* offcanvas quicksettings menu */
#quicksettings_overflow {
@@ -592,19 +727,24 @@ body {
display: block;
width: 90%;
background-color: var(--main-bg-color) !important;
top: 70px;
top: var(--top-header-height);
bottom: 0px;
padding: 16px;
padding-top: 0px;
/*padding-top: 0px;*/
right: 0;
max-width: 480px;
transform: translateX(100%);
transition: all 0.25s ease 0s;
box-shadow: rgba(0,0,0,0) -30px 0 30px -30px;
overflow-y: auto;
overflow: hidden;
}
#quicksettings_overflow_container {
overflow-y: auto;
height: calc(100% - 45px);
}
#quicksettings_overflow.open {
transform: translateX(0);
box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px;
@@ -618,22 +758,8 @@ body {
height:auto;
}
*/
#quicksettings {
align-items: center;
flex-direction: row;
width: auto;
align-self: end;
background: 0;
padding: 0;
}
#top_row_sd_model_checkpoint {
margin-right:50px;
margin-left:50px;
position:relative;
z-index:9999;
}
#top_row_sd_model_checkpoint div {
border: 0;
@@ -652,23 +778,7 @@ padding-right: 37px;
min-height: 34px;
}
#quick_menu {
z-index: 9999;
background-color: var(--input-bg-color);
position: absolute;
width: 38px;
height: 38px;
top: -2px;
right: 0;
border-radius: 100%;
cursor: pointer;
}
#quick_menu.fixed {
position: fixed;
top:22px;
right:16px;
}
#quick_menu::before {
content: ' ';
@@ -705,6 +815,7 @@ min-height: 34px;
margin:0;
min-width: 300px;
overflow: hidden;
padding-top: 0;
}
.min-h-screen > .mx-auto.container > div{
@@ -1692,23 +1803,23 @@ canvas[key=mask] {
margin-right:8px;
}
#quicksettings_overflow > div > div:nth-child(2),
#quicksettings_overflow_container > div > div:nth-child(2),
[id$="settings_2img_settings"] > div > div:nth-child(2)
{
flex-shrink: 1 !important;
flex-grow: 0 !important;
flex-basis: 0% !important;
min-width: 43px;
min-width: unset;
position: relative;
margin-left: -1px;
}
#quicksettings_overflow > div > div:nth-child(2) > div,
#quicksettings_overflow_container > div > div:nth-child(2) > div,
[id$="settings_2img_settings"] > div > div:nth-child(2) > div{
min-width:unset !important;
}
#quicksettings_overflow > div,
#quicksettings_overflow_container > div,
[id$="settings_2img_settings"] > div{
gap:0 !important;
}
@@ -1718,31 +1829,28 @@ canvas[key=mask] {
display:none;
}
#top_row_sd_model_checkpoint {
margin-right: 50px;
margin-left: 50px;
max-width: 290px;
}
#nav_menu_header_tabs{
position:absolute;
height: 34px;
top:0;
left:50px;
}
#nav_menu_header_tabs button{
font-size: 14px;
flex: 1 1 auto;
flex-grow: 0;
min-width: unset;
padding-bottom: 0;
padding-right: 0;
padding-top:0;
border: 0;
color:var(--nav-color);
background: 0 !important;
}
#nav_menu_header_tabs button.bg-white{
color:var(--primary-color);
}
/*
[id$="settings_2img_settings"] button {
height:auto;
@@ -2896,10 +3004,10 @@ ul.list-none {
[id$="settings_2img_settings"] {
max-height: none;
}
#nav_menu_header_tabs,
#tab_extensions td,
#tab_extensions th {
display:none;
display:none !important;
}
#tab_extensions td:first-child,
@@ -2909,6 +3017,11 @@ ul.list-none {
{
display:table-cell;
}
#quicksettings {
margin-left: 8px;
margin-right: 8px;
}