diff --git a/extensions-builtin/sdnext-modernui b/extensions-builtin/sdnext-modernui index a290c8f6f..8432c89cf 160000 --- a/extensions-builtin/sdnext-modernui +++ b/extensions-builtin/sdnext-modernui @@ -1 +1 @@ -Subproject commit a290c8f6feb14dc25d2f4dbaf6e522eeb32bd4ca +Subproject commit 8432c89cf3ec4365f5db7e2d0b3746a85d9ad861 diff --git a/html/locale_en.json b/html/locale_en.json index a52301f0c..57d8848d8 100644 --- a/html/locale_en.json +++ b/html/locale_en.json @@ -10,7 +10,7 @@ {"id":"","label":"⟲","localized":"","hint":"Refresh"}, {"id":"","label":"✕","localized":"","hint":"Close"}, {"id":"","label":"⊜","localized":"","hint":"Fill"}, - {"id":"","label":"⌾","localized":"","hint":"Load model as refiner model when selected, otherwise load as base model"}, + {"id":"","label":"※","localized":"","hint":"Load model as refiner model when selected, otherwise load as base model"}, {"id":"","label":"🔎︎","localized":"","hint":"Scan CivitAI for missing metadata and previews"}, {"id":"","label":"☲","localized":"","hint":"Change view type"}, {"id":"","label":"📐","localized":"","hint":"Measure"}, diff --git a/javascript/base.css b/javascript/base.css index 45f96b889..85fd965b3 100644 --- a/javascript/base.css +++ b/javascript/base.css @@ -104,8 +104,8 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt .extra-network-cards .card:hover .actions { display: block; } .extra-network-cards .card:hover .overlay .tags { display: block; } .extra-network-cards .card .actions { font-size: 3em; display: none; text-align-last: right; cursor: pointer; font-variant: unicase; position: absolute; z-index: 100; right: 0; height: 0.7em; width: 100%; background: rgba(0, 0, 0, 0.40); } -#txt2img_description, #img2img_description { max-height: 63px; overflow-y: auto !important; } -#txt2img_description > label > textarea, #img2img_description > label > textarea { font-size: 0.9em } +#txt2img_description, #img2img_description, #control_description, #video_description { max-height: 63px; overflow-y: auto !important; } +#txt2img_description>label>textarea, #img2img_description>label>textarea, #control_description>label>textarea, #video_description>label>textarea { font-size: 0.9em } .extra-details { position: fixed; bottom: 50%; left: 50%; transform: translate(-50%, 50%); padding: 0.8em; border: var(--block-border-width) solid var(--highlight-color) !important; z-index: 100; box-shadow: var(--button-shadow); } .extra-details > div { overflow-y: auto; min-height: 40vh; max-height: 80vh; align-self: flex-start; } diff --git a/javascript/black-teal.css b/javascript/black-teal.css index 8a99cb91c..13f2b5143 100644 --- a/javascript/black-teal.css +++ b/javascript/black-teal.css @@ -76,12 +76,14 @@ body, button, input, select, textarea { font-family: var(--font); } button { max-width: 400px; white-space: nowrap; } img { background-color: var(--background-color); } -input[type='range'] { display: block; margin: 0; padding: 0; height: 1em; background-color: transparent; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 0 transparent; -webkit-appearance: none; appearance: none; } +input[type='range'] { display: block; margin: 0; padding: 0; height: 0.8em; background-color: transparent; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 0 transparent; -webkit-appearance: none; appearance: none; } input[type='range']::-webkit-slider-thumb { height: .9em; width: .9em; background-color: hsl(180, 54%, 61%); box-shadow: var(--range-shadow); border-radius: var(--radius-xs); } input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; } input[type='range']::-moz-range-thumb { height: .9em; width: .9em; background-color: hsl(180, 54%, 61%); box-shadow: var(--range-shadow); } input[type='range']::-moz-range-track, input[type='range']::-webkit-slider-runnable-track { border: none; background: none; width: 100%; height: 100%; } +.gradio-dropdown .wrap-inner { padding: 2px !important; } + :root { scrollbar-color: var(--highlight-color) #303030; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #303030; } @@ -157,7 +159,6 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p #txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); } #txt2img_settings { min-width: var(--left-column); max-width: var(--left-column); background-color: var(--neutral-950); padding-top: 16px; } #pnginfo_html2_info { margin-top: -18px; background-color: var(--input-background-fill); padding: var(--input-padding) } -#txt2img_styles_row, #img2img_styles_row, #control_styles_row { margin-top: -6px; } .block > span { margin-bottom: 0 !important; margin-top: var(--spacing-lg); } /* based on gradio built-in dark theme */ diff --git a/javascript/gallery.js b/javascript/gallery.js index cd044c487..0707c2e59 100644 --- a/javascript/gallery.js +++ b/javascript/gallery.js @@ -71,6 +71,16 @@ async function createThumb(img) { return dataURL; } +async function handleSeparator(separator) { + separator.classList.toggle('gallery-separator-hidden'); + const all = Array.from(el.files.children); + const hide = separator.classList.contains('gallery-separator-hidden'); + separator.innerText = `${hide ? '▶' : '▼'} ${separator.title}`; + for (const f of all) { + if (separator.title.length > 0 && f.name?.startsWith(separator.title)) f.style.display = hide ? 'none' : 'unset'; + } +} + async function addSeparators() { document.querySelectorAll('.gallery-separator').forEach((node) => el.files.removeChild(node)); const all = Array.from(el.files.children); @@ -84,8 +94,9 @@ async function addSeparators() { if (dir.length > 0) { const sep = document.createElement('div'); sep.className = 'gallery-separator'; - sep.innerText = dir; + sep.innerText = `▼ ${dir}`; sep.title = dir; + sep.onclick = () => handleSeparator(sep); el.files.insertBefore(sep, f); } } diff --git a/javascript/sdnext.css b/javascript/sdnext.css index 0c3fc060f..51046b932 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -187,8 +187,11 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { .gradio-dropdown { margin-right: var(--spacing-sm) !important; min-width: 160px; + max-width: fit-content +} -max-width: fit-content +.gradio-dropdown label span { + margin-bottom: 2px !important; } .gradio-dropdown ul.options { @@ -659,8 +662,7 @@ div#extras_scale_to_tab div.form { } #txt2img_styles, #img2img_styles, #control_styles, #video_styles { - margin-top: 2px; - padding: 0; + padding: 0 !important; } #txt2img_styles:hover, #img2img_styles:hover, #control_styles:hover, #video_styles:hover { @@ -1068,12 +1070,18 @@ table.settings-value-table td { } .extra-networks .search { - flex: 1; - height: 4em; + width: unset !important; + min-width: unset !important; } +.extra-networks .search textarea { + width: calc(120px / 1.1); + resize: none; + margin-right: 2px; +} + + .extra-networks .description { - flex: 3; } .extra-networks .description textarea { @@ -1095,8 +1103,6 @@ table.settings-value-table td { .extra-networks .buttons>button { color: var(--primary-300) !important; - font-size: 20px !important; - height: 1.4em; margin-left: -0.2em; } @@ -1143,6 +1149,7 @@ table.settings-value-table td { overflow-y: auto; width: -moz-available; width: -webkit-fill-available; + justify-content: space-evenly; } .extra-network-cards .card { @@ -1327,6 +1334,7 @@ table.settings-value-table td { overflow-y: auto; } + .extra-details td:first-child { font-weight: bold; vertical-align: top; @@ -1632,6 +1640,7 @@ div:has(>#tab-gallery-folders) { display: block !important; font-size: larger; padding: 0.5em; + cursor: cell; } #html_log_gallery { diff --git a/modules/ui_symbols.py b/modules/ui_symbols.py index ef426e7e7..66fbda681 100644 --- a/modules/ui_symbols.py +++ b/modules/ui_symbols.py @@ -10,7 +10,7 @@ scan = '🔎︎' view = '☲' networks = '🌐' paste = '⇦' -refine = '⌾' +refine = '※' switch = '⇅' sort = '⇕' detect = '📐' @@ -41,14 +41,3 @@ sort_time_asc = '\uf0de' sort_time_dsc = '\uf0dd' style_apply = '↶' style_save = '↷' -""" -refresh = '🔄' -close = '🛗' -load = '⬆️' -save = '⬇️' -apply = '⏩' -clear = '🚮' -fill = '⏫' -networks = '🌐' -paste = '📘' -"""