diff --git a/html/svg/drag-drop-line.svg b/html/svg/drag-drop-line.svg new file mode 100644 index 00000000..d6d78a5b --- /dev/null +++ b/html/svg/drag-drop-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/svg/grid-fill.svg b/html/svg/grid-fill.svg new file mode 100644 index 00000000..fef4a086 --- /dev/null +++ b/html/svg/grid-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/svg/sort-asc.svg b/html/svg/sort-asc.svg new file mode 100644 index 00000000..96552675 --- /dev/null +++ b/html/svg/sort-asc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/svg/sort-desc.svg b/html/svg/sort-desc.svg new file mode 100644 index 00000000..a25ce6c2 --- /dev/null +++ b/html/svg/sort-desc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/javascript/ui.js b/javascript/ui.js index ef1a5686..5f7820ea 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -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(); diff --git a/modules/ui.py b/modules/ui.py index 586db54b..ce623d72 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -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) diff --git a/style.css b/style.css index f26b0b77..35434ce4 100644 --- a/style.css +++ b/style.css @@ -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; + }