update styles and add simple gallery separator click option

Signed-off-by: Vladimir Mandic <mandic00@live.com>

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"},

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; }

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 */

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);
       }
     }

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 {

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 = '📘'
-"""