From cc41cc4349514bbfeb9f37445c931a050b076bd6 Mon Sep 17 00:00:00 2001
From: w-e-w <40751091+w-e-w@users.noreply.github.com>
Date: Wed, 13 Dec 2023 02:06:56 +0900
Subject: on mouse hover show / hide modal image viewer icons

---
 style.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

(limited to 'style.css')

diff --git a/style.css b/style.css
index ee39a57b..ec449bde 100644
--- a/style.css
+++ b/style.css
@@ -749,6 +749,22 @@ table.popup-table .link{
     display: none;
 }
 
+@media (pointer: fine) {
+    .modalPrev:hover,
+    .modalNext:hover,
+    .modalControls:hover ~ .modalPrev,
+    .modalControls:hover ~ .modalNext,
+    .modalControls:hover .cursor {
+        opacity: 1;
+    }
+
+    .modalPrev,
+    .modalNext,
+    .modalControls .cursor {
+        opacity: 0;
+    }
+}
+
 /* context menu (ie for the generate button) */
 
 #context-menu{
-- 
cgit v1.2.3


From 0c5427960b3a4ffe6d673c28e8e135b26f015717 Mon Sep 17 00:00:00 2001
From: w-e-w <40751091+w-e-w@users.noreply.github.com>
Date: Fri, 15 Dec 2023 17:11:59 +0900
Subject: make modal toolbar and icon opacity adjustable

---
 style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index ec449bde..6d4c8a0d 100644
--- a/style.css
+++ b/style.css
@@ -679,7 +679,7 @@ table.popup-table .link{
     transition: 0.2s ease background-color;
 }
 .modalControls:hover {
-    background-color:rgba(0,0,0,0.9);
+    background-color:rgba(0,0,0, var(--sd-webui-modal-lightbox-toolbar-opacity));
 }
 .modalClose {
     margin-left: auto;
@@ -761,7 +761,7 @@ table.popup-table .link{
     .modalPrev,
     .modalNext,
     .modalControls .cursor {
-        opacity: 0;
+        opacity: var(--sd-webui-modal-lightbox-icon-opacity);
     }
 }
 
-- 
cgit v1.2.3


From 2f98a35fc4508494355c01ec45f5bec725f570a6 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Sun, 7 Jan 2024 09:21:21 +0300
Subject: add assets repo; serve fonts locally rather than from google's
 servers

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 6d4c8a0d..4957c523 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
 /* temporary fix to load default gradio font in frontend instead of backend */
 
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
+@import url('webui-assets/css/sourcesanspro.css');
 
 
 /* temporary fix to hide gradio crop tool until it's fixed https://github.com/gradio-app/gradio/issues/3810 */
-- 
cgit v1.2.3


From df8aa69a99e38ae59a4e599b9dff11eccf3490f4 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 8 Jan 2024 14:10:03 -0500
Subject: Add tree-view display for extra networks.

---
 style.css | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)

(limited to 'style.css')

diff --git a/style.css b/style.css
index ee39a57b..680a5f83 100644
--- a/style.css
+++ b/style.css
@@ -1157,3 +1157,95 @@ body.resizing .resize-handle {
     left: 7.5px;
     border-left: 1px dashed var(--border-color-primary);
 }
+
+.extra-network-cards .card .copy-path-button:before {
+    content: "⎘";
+}
+
+.extra-network-cards .card-minimal .button-column {
+    display: inline-flex;
+    visibility: hidden;
+    color: white;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    align-items: center;
+}
+
+.extra-network-cards .card-minimal:hover .button-column {
+    visibility: visible;
+}
+
+.extra-network-cards .card-minimal .copy-path-button:before {
+    content: "⎘";
+}
+
+.extra-network-cards .card-minimal .metadata-button:before{
+    content: "🛈";
+}
+
+.extra-network-cards .card-minimal .edit-button:before{
+    content: "🛠";
+}
+
+.extra-network-cards .card-minimal .card-button {
+    color: white;
+    text-shadow: 2px 2px 3px black;
+    font-size: 1rem;
+    width: 1.5rem;
+}
+
+.extra-network-cards .card-minimal .card-button:hover {
+    color: red;
+}
+
+.extra-network-cards .card-minimal {
+    display: inline-flex;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    line-break: anywhere;
+}
+
+.file-item {
+    list-style-type: '📄';
+}
+
+/* prevents clicking/collapsing of details tags when disabled attribute is used*/
+details[disabled] summary {
+    pointer-events: none;
+    user-select: none;
+}
+
+details.folder-item > summary {
+    list-style-type: '📁';
+}
+
+details.folder-item[open] > summary {
+    list-style-type: '📂';
+}
+
+.file-item,
+.folder-item,
+.folder-item-summary {
+    display: block;
+    font-size: 1rem;
+    padding: 0.05rem;
+    cursor: pointer;
+    user-select: none;
+}
+
+.folder-item-summary:hover,
+.file-item:hover {
+    -webkit-transition: all 0.1s ease-in-out;
+	transition: all 0.1s ease-in-out;
+    background-color: var(--neutral-200);
+}
+
+.dark .folder-item-summary:hover,
+.dark .file-item:hover {
+    -webkit-transition: all 0.05s ease-in-out;
+	transition: all 0.05s ease-in-out;
+    background-color: var(--neutral-800);
+}
-- 
cgit v1.2.3


From 3db6938caa719aaa38b52edecf42740ef62b0c3c Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Wed, 10 Jan 2024 18:11:48 -0500
Subject: begin redesign of tree module.

---
 style.css | 204 +++++++++++++++++++++++++++++++++++---------------------------
 1 file changed, 115 insertions(+), 89 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 680a5f83..4f285c68 100644
--- a/style.css
+++ b/style.css
@@ -863,7 +863,7 @@ footer {
     margin-bottom: 1em;
 }
 
-.extra-network-cards{
+.extra-network-pane{
     height: calc(100vh - 24rem);
     overflow: clip scroll;
     resize: vertical;
@@ -908,53 +908,75 @@ footer {
     width: auto;
 }
 
-.extra-network-cards .nocards{
+.extra-network-pane .nocards{
     margin: 1.25em 0.5em 0.5em 0.5em;
 }
 
-.extra-network-cards .nocards h1{
+.extra-network-pane .nocards h1{
     font-size: 1.5em;
     margin-bottom: 1em;
 }
 
-.extra-network-cards .nocards li{
+.extra-network-pane .nocards li{
     margin-left: 0.5em;
 }
 
+.extra-network-pane :is(.card, .card-minimal) .button-row{
+    display: inline-flex;
+    visibility: hidden;
+    color: white;
+}
 
-.extra-network-cards .card .button-row{
-    display: none;
+.extra-network-pane .card .button-row {
     position: absolute;
-    color: white;
     right: 0;
-    z-index: 1
+    z-index: 1;
 }
-.extra-network-cards .card:hover .button-row{
-    display: flex;
+
+.extra-network-pane .card-minimal .button-row {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    align-items: center;
 }
 
-.extra-network-cards .card .card-button{
+.extra-network-pane :is(.card:hover, .card-minimal:hover) .button-row{
+    visibility: visible;
+}
+
+.extra-network-pane .card-button{
     color: white;
 }
 
-.extra-network-cards .card .metadata-button:before{
+.extra-network-pane .copy-path-button:before {
+    content: "⎘";
+}
+
+.extra-network-pane .metadata-button:before{
     content: "🛈";
 }
 
-.extra-network-cards .card .edit-button:before{
+.extra-network-pane .edit-button:before{
     content: "🛠";
 }
 
-.extra-network-cards .card .card-button {
+.extra-network-pane .card-button {
+    width: 1.5em;
     text-shadow: 2px 2px 3px black;
+    color: white;
     padding: 0.25em 0.1em;
-    font-size: 200%;
-    width: 1.5em;
 }
-.extra-network-cards .card .card-button:hover{
+
+.extra-network-pane .card-button:hover{
     color: red;
 }
 
+.extra-network-pane .card .card-button {
+    font-size: 2rem;
+}
+
+.extra-network-pane .card-minimal .card-button {
+    font-size: 1rem;
+}
 
 .standalone-card-preview.card .preview{
     position: absolute;
@@ -963,7 +985,7 @@ footer {
     height:100%;
 }
 
-.extra-network-cards .card, .standalone-card-preview.card{
+.extra-network-pane .card, .standalone-card-preview.card{
     display: inline-block;
     margin: 0.5rem;
     width: 16rem;
@@ -980,15 +1002,15 @@ footer {
     background-image: url('./file=html/card-no-preview.png')
 }
 
-.extra-network-cards .card:hover{
+.extra-network-pane .card:hover{
     box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35);
 }
 
-.extra-network-cards .card .actions .additional{
+.extra-network-pane .card .actions .additional{
     display: none;
 }
 
-.extra-network-cards .card .actions{
+.extra-network-pane .card .actions{
     position: absolute;
     bottom: 0;
     left: 0;
@@ -999,45 +1021,45 @@ footer {
     text-shadow: 0 0 0.2em black;
 }
 
-.extra-network-cards .card .actions *{
+.extra-network-pane .card .actions *{
     color: white;
 }
 
-.extra-network-cards .card .actions .name{
+.extra-network-pane .card .actions .name{
     font-size: 1.7em;
     font-weight: bold;
     line-break: anywhere;
 }
 
-.extra-network-cards .card .actions .description {
+.extra-network-pane .card .actions .description {
     display: block;
     max-height: 3em;
     white-space: pre-wrap;
     line-height: 1.1;
 }
 
-.extra-network-cards .card .actions .description:hover {
+.extra-network-pane .card .actions .description:hover {
     max-height: none;
 }
 
-.extra-network-cards .card .actions:hover .additional{
+.extra-network-pane .card .actions:hover .additional{
     display: block;
 }
 
-.extra-network-cards .card ul{
+.extra-network-pane .card ul{
     margin: 0.25em 0 0.75em 0.25em;
     cursor: unset;
 }
 
-.extra-network-cards .card ul a{
+.extra-network-pane .card ul a{
     cursor: pointer;
 }
 
-.extra-network-cards .card ul a:hover{
+.extra-network-pane .card ul a:hover{
     color: red;
 }
 
-.extra-network-cards .card .preview{
+.extra-network-pane .card .preview{
     position: absolute;
     object-fit: cover;
     width: 100%;
@@ -1158,94 +1180,98 @@ body.resizing .resize-handle {
     border-left: 1px dashed var(--border-color-primary);
 }
 
-.extra-network-cards .card .copy-path-button:before {
-    content: "⎘";
-}
-
-.extra-network-cards .card-minimal .button-column {
+.extra-network-pane .card-minimal {
     display: inline-flex;
-    visibility: hidden;
-    color: white;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    align-items: center;
+    flex-grow: 1;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    line-break: anywhere;
 }
 
-.extra-network-cards .card-minimal:hover .button-column {
-    visibility: visible;
+/* Pushes buttons to right */
+.extra-network-pane .card-minimal .name {
+    flex-grow: 1;
 }
 
-.extra-network-cards .card-minimal .copy-path-button:before {
-    content: "⎘";
+.file-item,
+.folder-item,
+.folder-item-summary {
+    padding-left: 0.05rem;
+    cursor: pointer;
+    user-select: none;
+    font-size: 1rem;
 }
 
-.extra-network-cards .card-minimal .metadata-button:before{
-    content: "🛈";
+.extra-network-pane .extra-network-tree .folder-item-summary:hover,
+.extra-network-pane .extra-network-tree .file-item:hover {
+    -webkit-transition: all 0.1s ease-in-out;
+	transition: all 0.1s ease-in-out;
+    background-color: var(--neutral-200);
 }
 
-.extra-network-cards .card-minimal .edit-button:before{
-    content: "🛠";
+.dark .extra-network-pane .extra-network-tree .folder-item-summary:hover,
+.dark .extra-network-pane .extra-network-tree .file-item:hover {
+    -webkit-transition: all 0.05s ease-in-out;
+	transition: all 0.05s ease-in-out;
+    background-color: var(--neutral-800);
 }
 
-.extra-network-cards .card-minimal .card-button {
-    color: white;
-    text-shadow: 2px 2px 3px black;
-    font-size: 1rem;
-    width: 1.5rem;
+/* prevents clicking/collapsing of details tags when disabled attribute is used*/
+.extra-network-pane .extra-network-tree details[disabled] summary {
+    pointer-events: none;
+    user-select: none;
 }
 
-.extra-network-cards .card-minimal .card-button:hover {
-    color: red;
+.extra-network-pane .extra-network-tree details.folder-item > summary {
+    list-style-type: '📁';
+    text-overflow: ellipsis;
 }
 
-.extra-network-cards .card-minimal {
-    display: inline-flex;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    line-break: anywhere;
+.extra-network-pane .extra-network-tree details.folder-item[open] > summary {
+    list-style-type: '📂';
+    text-overflow: ellipsis;
 }
 
-.file-item {
-    list-style-type: '📄';
+.extra-network-pane .extra-network tree ul.folder-container {
+    list-style: none;
+    font-size: 1rem;
+    text-overflow: ellipsis;
 }
 
-/* prevents clicking/collapsing of details tags when disabled attribute is used*/
-details[disabled] summary {
-    pointer-events: none;
-    user-select: none;
+.extra-network-pane .extra-network-tree li.file-item {
+    display: flex;
+    position: relative;
+    align-items: center;
 }
 
-details.folder-item > summary {
-    list-style-type: '📁';
+.extra-network-pane .extra-network-tree li.file-item::before {
+    content: '📄';
+    font-size: 0.85rem;
+    vertical-align: middle;
 }
 
-details.folder-item[open] > summary {
-    list-style-type: '📂';
+.extra-network-pane {
+    display: flex;
 }
 
-.file-item,
-.folder-item,
-.folder-item-summary {
+.extra-network-pane .extra-network-subdirs {
     display: block;
+}
+.extra-network-pane .extra-network-tree {
     font-size: 1rem;
-    padding: 0.05rem;
-    cursor: pointer;
-    user-select: none;
+    width: 25%;
 }
-
-.folder-item-summary:hover,
-.file-item:hover {
-    -webkit-transition: all 0.1s ease-in-out;
-	transition: all 0.1s ease-in-out;
-    background-color: var(--neutral-200);
+.extra-network-pane .extra-network-cards {
+    flex-grow: 1;
 }
 
-.dark .folder-item-summary:hover,
-.dark .file-item:hover {
-    -webkit-transition: all 0.05s ease-in-out;
-	transition: all 0.05s ease-in-out;
+.dark .extra-network-tree .folder-item-summary.selected{
     background-color: var(--neutral-800);
 }
+
+.extra-network-tree .folder-item-summary.selected {
+    background-color: var(--neutral-200);
+}
-- 
cgit v1.2.3


From 0726a6e12e85a37d1e514f5603acf9f058c11783 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Thu, 11 Jan 2024 15:06:57 -0500
Subject: Finish base layout. Fix bugs. Need to test for stability and clean
 up.

---
 style.css | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 4f285c68..70d80d6a 100644
--- a/style.css
+++ b/style.css
@@ -878,16 +878,8 @@ footer {
     margin: 0.3em;
 }
 
-.extra-network-subdirs{
-    padding: 0.2em 0.35em;
-}
-
-.extra-network-subdirs button{
-    margin: 0 0.15em;
-}
 .extra-networks .tab-nav .search,
-.extra-networks .tab-nav .sort,
-.extra-networks .tab-nav .show-dirs
+.extra-networks .tab-nav .sort
 {
     margin: 0.3em;
     align-self: center;
@@ -1196,6 +1188,10 @@ body.resizing .resize-handle {
     flex-grow: 1;
 }
 
+.folder-container {
+    margin-left: 1.5em !important;
+}
+
 .file-item,
 .folder-item,
 .folder-item-summary {
@@ -1235,7 +1231,7 @@ body.resizing .resize-handle {
     text-overflow: ellipsis;
 }
 
-.extra-network-pane .extra-network tree ul.folder-container {
+.extra-network-pane .extra-network-tree ul.folder-container {
     list-style: none;
     font-size: 1rem;
     text-overflow: ellipsis;
@@ -1257,15 +1253,15 @@ body.resizing .resize-handle {
     display: flex;
 }
 
-.extra-network-pane .extra-network-subdirs {
-    display: block;
-}
 .extra-network-pane .extra-network-tree {
     font-size: 1rem;
-    width: 25%;
+    min-width: 25%;
+    max-width: 25%;
+    border: 1px solid var(--block-border-color);
 }
 .extra-network-pane .extra-network-cards {
     flex-grow: 1;
+    border: 1px solid var(--block-border-color);
 }
 
 .dark .extra-network-tree .folder-item-summary.selected{
-- 
cgit v1.2.3


From 02e6963325e5221e0efb96a63f3dc849550489b7 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Sat, 13 Jan 2024 13:16:39 -0500
Subject: continue cleanup and redesign.

---
 style.css | 277 ++++++++++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 214 insertions(+), 63 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index aaafaa9d..8aa41088 100644
--- a/style.css
+++ b/style.css
@@ -955,15 +955,15 @@ footer {
     color: white;
 }
 
-.extra-network-pane .copy-path-button:before {
+.extra-network-pane .copy-path-button::before {
     content: "⎘";
 }
 
-.extra-network-pane .metadata-button:before{
+.extra-network-pane .metadata-button::before{
     content: "🛈";
 }
 
-.extra-network-pane .edit-button:before{
+.extra-network-pane .edit-button::before{
     content: "🛠";
 }
 
@@ -1188,102 +1188,253 @@ body.resizing .resize-handle {
     border-left: 1px dashed var(--border-color-primary);
 }
 
-.extra-network-pane .card-minimal {
-    display: inline-flex;
-    flex-grow: 1;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    line-break: anywhere;
+/* ========================= */
+.extra-network-pane {
+    display: flex;
 }
 
-/* Pushes buttons to right */
-.extra-network-pane .card-minimal .name {
-    flex-grow: 1;
+.extra-network-pane .extra-network-cards {
+    display: block;
 }
 
-.folder-container {
-    margin-left: 1.5em !important;
+.extra-network-pane .extra-network-tree {
+    display: block;
+    font-size: 1rem;
+    min-width: 25%;
+    border: 1px solid var(--block-border-color);
+    overflow: hidden;
 }
 
-.file-item,
-.folder-item,
-.folder-item-summary {
-    padding-left: 0.05rem;
+.extra-network-tree .action-list--tree {
     cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
-    font-size: 1rem;
+    margin: 0;
+    padding: 0;
 }
 
-.extra-network-pane .extra-network-tree .folder-item-summary:hover,
-.extra-network-pane .extra-network-tree .file-item:hover {
-    -webkit-transition: all 0.1s ease-in-out;
-	transition: all 0.1s ease-in-out;
-    background-color: var(--neutral-200);
+/* Remove auto indentation from tree. Will be overridden later. */
+.extra-network-tree .action-list--subgroup {
+    margin: 0 !important;
+    padding: 0 !important;
+    box-shadow: 0.6rem 0 0 var(--body-background-fill) inset,
+                0.8rem 0 0 var(--neutral-800) inset;
+}
+
+/* Set indentation for each depth of tree. */
+.extra-network-tree .action-list--subgroup > .action-list-item {
+    margin-left: 0.4rem !important;
+    padding-left: 0.4rem !important;
 }
 
-.dark .extra-network-pane .extra-network-tree .folder-item-summary:hover,
-.dark .extra-network-pane .extra-network-tree .file-item:hover {
+/* Styles for tree <ul> elements. */
+.extra-network-tree .action-list {
+
+}
+
+/* Styles for tree <li> elements. */
+.extra-network-tree .action-list-item {
+    list-style: none;
+    position: relative;
+    background-color: transparent;
+}
+
+/* Directory <ul> */
+.extra-network-tree .action-list-content[expanded=false]+.action-list--subgroup {
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    opacity: 0;
+}
+
+.extra-network-tree .action-list-content[expanded=true]+.action-list--subgroup {
+    height: auto;
+    overflow: visible;
+    visibility: visible;
+    opacity: 1;
+}
+
+/* File <li> */
+.extra-network-tree .action-list-item--subitem {
+}
+
+/* <li> containing <ul> */
+.extra-network-tree .action-list-item--has-subitem {
+}
+
+/* BUTTON ELEMENTS */
+/* <button> */
+.extra-network-tree .action-list-content {
+    position: relative;
+    display: grid;
+    width: 100%;
+    padding: 6px 8px;
+    font-size: 1rem;
+    text-align: left;
+    user-select: none;
+    background-color: transparent;
+    border: none;
+    transition: background 33.333ms linear;
+    grid-template-rows: min-content;
+    grid-template-areas: "leading-action leading-visual label trailing-visual spacer trailing-action";
+    grid-template-columns: min-content min-content minmax(0, auto) min-content 1fr min-content;
+    grid-gap: 0.1em;
+    align-items: start;
+    flex-grow: 1;
+    flex-basis: 100%;
+}
+
+.dark .extra-network-tree button.action-list-content:hover {
     -webkit-transition: all 0.05s ease-in-out;
 	transition: all 0.05s ease-in-out;
     background-color: var(--neutral-800);
 }
 
-/* prevents clicking/collapsing of details tags when disabled attribute is used*/
-.extra-network-pane .extra-network-tree details[disabled] summary {
-    pointer-events: none;
-    user-select: none;
+.dark .extra-network-tree button.action-list-content[selected] {
+    background-color: var(--neutral-700);
 }
 
-.extra-network-pane .extra-network-tree details.folder-item > summary {
-    list-style-type: '📁';
-    text-overflow: ellipsis;
+.extra-network-tree button.action-list-content:hover {
+    -webkit-transition: all 0.05s ease-in-out;
+	transition: all 0.05s ease-in-out;
+    background-color: var(--neutral-200);
 }
 
-.extra-network-pane .extra-network-tree details.folder-item[open] > summary {
-    list-style-type: '📂';
-    text-overflow: ellipsis;
+.extra-network-tree button.action-list-content[selected] {
+    background-color: var(--neutral-300);
 }
 
-.extra-network-pane .extra-network-tree ul.folder-container {
-    list-style: none;
-    font-size: 1rem;
-    text-overflow: ellipsis;
+/* Buttons for directories. */
+.extra-network-tree .action-list-content-dir {
+
 }
 
-.extra-network-pane .extra-network-tree li.file-item {
-    display: flex;
+/* Buttons for files. */
+.extra-network-tree .action-list-content-file {
+    margin-left: 2em;
+}
+
+/* Text for button. */
+.extra-network-tree .action-list-item-label {
     position: relative;
-    align-items: center;
+    line-height: 1.25em;
+    color: var(--button-secondary-text-color);
+    grid-area: label;
+    padding-left: 0.5em;
 }
 
-.extra-network-pane .extra-network-tree li.file-item::before {
-    content: '📄';
-    font-size: 0.85rem;
-    vertical-align: middle;
+/* Text for button truncated. */
+.extra-network-tree .action-list-item-label--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-.extra-network-pane {
-    display: flex;
+/* Icon for button. */
+.extra-network-tree .action-list-item-visual {
+    min-height: 1em;
+    color: var(--button-secondary-text-color);
+    pointer-events: none;
+    align-items: right;
 }
 
-.extra-network-pane .extra-network-tree {
-    font-size: 1rem;
-    min-width: 25%;
-    max-width: 25%;
-    border: 1px solid var(--block-border-color);
+/* Icon for button when it is before label. */
+.extra-network-tree .action-list-item-visual--leading {
+    grid-area: leading-visual;
 }
-.extra-network-pane .extra-network-cards {
+
+/* Icon for button when it is after label. */
+.extra-network-tree .action-list-item-visual--trailing {
+    grid-area: trailing-visual;
+}
+
+/* Dropdown arrow for button. */
+.extra-network-tree .action-list-item-action--leading {
+    margin-right: 1em;
+}
+
+/* Define the animation for the arrow when it is clicked. */
+.extra-network-tree .action-list-content-dir[expanded=false] .action-list-item-action {
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    transition: transform 0.2s;
+}
+
+.extra-network-tree .action-list-content-dir[expanded=true] .action-list-item-action {
+    -ms-transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    transition: transform 0.2s;
+}
+
+.action-list-item-action-chevron {
+    display: inline-block;
+    padding: 0.3em;
+    box-shadow: 0.1em 0.1em 0 0px var(--neutral-200) inset;
+    transform: rotate(135deg);
+}
+
+.extra-network-tree .action-list-item-action--leading {
+    grid-area: leading-action;
+}
+
+/* Dropdown arrow for button when it is after label.  UNUSED? */
+.extra-network-tree .action-list-item-action--trailing {
+    grid-area: trailing-action;
+}
+
+.extra-network-tree .action-list-item-action .button-row {
+    display: flex;
     flex-grow: 1;
-    border: 1px solid var(--block-border-color);
 }
 
-.dark .extra-network-tree .folder-item-summary.selected{
-    background-color: var(--neutral-800);
+.extra-network-tree .action-list-content .button-row {
+    display: inline-flex;
+    visibility: hidden !important;
+    color: white;
 }
 
-.extra-network-tree .folder-item-summary.selected {
-    background-color: var(--neutral-200);
+.extra-network-tree .action-list-content:hover .button-row {
+    visibility: visible;
 }
+
+/* Add icon to left side of <input> */
+.extra-network-tree .action-list-search::before {
+    content: "🔎︎";
+    position: absolute;
+    margin: 0.5em;
+    font-size: 1em;
+    color: var(--input-placeholder-color);
+}
+
+.extra-network-tree .action-list-search {
+    position: relative;
+    margin: 0.5em;
+}
+
+.extra-network-tree .action-list-search .action-list-search-text {
+    border: 1px solid var(--button-secondary-border-color);
+    border-radius: 0.5em;
+    color: var(--button-secondary-text-color);
+    background-color: transparent;
+    width: 100%;
+    padding-left: 2em;
+    line-height: 1em;
+}
+
+/* <input> clear button (x on right side) styling */
+.extra-network-tree .action-list-search .action-list-search-text::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    height: 1em;
+    width: 1em;
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-size: 100%;
+    background-color: var(--input-placeholder-color);
+}
\ No newline at end of file
-- 
cgit v1.2.3


From d88424ef2a5d175fb3cb8b557da0abefb468bae0 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 15 Jan 2024 13:40:47 -0500
Subject: fix bugs. introduce new ones.

---
 style.css | 181 +++++++++++++++++++++++++++++++-------------------------------
 1 file changed, 90 insertions(+), 91 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 8aa41088..2dafe97f 100644
--- a/style.css
+++ b/style.css
@@ -929,7 +929,7 @@ footer {
     margin-left: 0.5em;
 }
 
-.extra-network-pane :is(.card, .card-minimal) .button-row{
+.extra-network-pane .card .button-row{
     display: inline-flex;
     visibility: hidden;
     color: white;
@@ -941,13 +941,7 @@ footer {
     z-index: 1;
 }
 
-.extra-network-pane .card-minimal .button-row {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    align-items: center;
-}
-
-.extra-network-pane :is(.card:hover, .card-minimal:hover) .button-row{
+.extra-network-pane .card:hover .button-row{
     visibility: visible;
 }
 
@@ -1110,9 +1104,6 @@ div.block.gradio-box.edit-user-metadata {
     margin-top: 1.5em;
 }
 
-
-
-
 div.block.gradio-box.popup-dialog, .popup-dialog {
     width: 56em;
     background: var(--body-background-fill);
@@ -1205,7 +1196,7 @@ body.resizing .resize-handle {
     overflow: hidden;
 }
 
-.extra-network-tree .action-list--tree {
+.extra-network-tree .tree-list--tree {
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -1213,43 +1204,42 @@ body.resizing .resize-handle {
     user-select: none;
     margin: 0;
     padding: 0;
+    margin-left: 0.25rem;
 }
 
 /* Remove auto indentation from tree. Will be overridden later. */
-.extra-network-tree .action-list--subgroup {
+.extra-network-tree .tree-list--subgroup {
     margin: 0 !important;
     padding: 0 !important;
-    box-shadow: 0.6rem 0 0 var(--body-background-fill) inset,
-                0.8rem 0 0 var(--neutral-800) inset;
+    box-shadow: 0.5rem 0 0 var(--body-background-fill) inset,
+                0.7rem 0 0 var(--neutral-800) inset;
 }
 
 /* Set indentation for each depth of tree. */
-.extra-network-tree .action-list--subgroup > .action-list-item {
+.extra-network-tree .tree-list--subgroup > .tree-list-item {
     margin-left: 0.4rem !important;
     padding-left: 0.4rem !important;
 }
 
 /* Styles for tree <ul> elements. */
-.extra-network-tree .action-list {
-
-}
+.extra-network-tree .tree-list {}
 
 /* Styles for tree <li> elements. */
-.extra-network-tree .action-list-item {
+.extra-network-tree .tree-list-item {
     list-style: none;
     position: relative;
     background-color: transparent;
 }
 
-/* Directory <ul> */
-.extra-network-tree .action-list-content[expanded=false]+.action-list--subgroup {
+/* Directory <ul> visibility based on expanded attribute. */
+.extra-network-tree .tree-list-content[expanded=false]+.tree-list--subgroup {
     height: 0;
     overflow: hidden;
     visibility: hidden;
     opacity: 0;
 }
 
-.extra-network-tree .action-list-content[expanded=true]+.action-list--subgroup {
+.extra-network-tree .tree-list-content[expanded=true]+.tree-list--subgroup {
     height: auto;
     overflow: visible;
     visibility: visible;
@@ -1257,20 +1247,25 @@ body.resizing .resize-handle {
 }
 
 /* File <li> */
-.extra-network-tree .action-list-item--subitem {
+.extra-network-tree .tree-list-item--subitem {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
 }
 
 /* <li> containing <ul> */
-.extra-network-tree .action-list-item--has-subitem {
-}
+.extra-network-tree .tree-list-item--has-subitem {}
 
 /* BUTTON ELEMENTS */
 /* <button> */
-.extra-network-tree .action-list-content {
+.extra-network-tree .tree-list-content {
     position: relative;
     display: grid;
     width: 100%;
-    padding: 6px 8px;
+    padding: 0 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
     font-size: 1rem;
     text-align: left;
     user-select: none;
@@ -1278,160 +1273,164 @@ body.resizing .resize-handle {
     border: none;
     transition: background 33.333ms linear;
     grid-template-rows: min-content;
-    grid-template-areas: "leading-action leading-visual label trailing-visual spacer trailing-action";
-    grid-template-columns: min-content min-content minmax(0, auto) min-content 1fr min-content;
-    grid-gap: 0.1em;
+    grid-template-areas: "leading-action leading-visual label trailing-visual trailing-action";
+    grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
+    grid-gap: 0.1rem;
     align-items: start;
     flex-grow: 1;
     flex-basis: 100%;
 }
+/* Buttons for directories. */
+.extra-network-tree .tree-list-content-dir {}   
+
+/* Buttons for files. */
+.extra-network-tree .tree-list-item--has-subitem .tree-list--subgroup > li:first-child {
+    padding-top: 0.5rem !important;
+}
 
-.dark .extra-network-tree button.action-list-content:hover {
+.dark .extra-network-tree button.tree-list-content:hover {
     -webkit-transition: all 0.05s ease-in-out;
 	transition: all 0.05s ease-in-out;
     background-color: var(--neutral-800);
 }
 
-.dark .extra-network-tree button.action-list-content[selected] {
+.dark .extra-network-tree button.tree-list-content[selected] {
     background-color: var(--neutral-700);
 }
 
-.extra-network-tree button.action-list-content:hover {
+.extra-network-tree button.tree-list-content:hover {
     -webkit-transition: all 0.05s ease-in-out;
 	transition: all 0.05s ease-in-out;
     background-color: var(--neutral-200);
 }
 
-.extra-network-tree button.action-list-content[selected] {
+.extra-network-tree button.tree-list-content[selected] {
     background-color: var(--neutral-300);
 }
 
-/* Buttons for directories. */
-.extra-network-tree .action-list-content-dir {
-
-}
-
-/* Buttons for files. */
-.extra-network-tree .action-list-content-file {
-    margin-left: 2em;
-}
-
 /* Text for button. */
-.extra-network-tree .action-list-item-label {
+.extra-network-tree .tree-list-item-label {
     position: relative;
-    line-height: 1.25em;
+    line-height: 1.25rem;
     color: var(--button-secondary-text-color);
     grid-area: label;
-    padding-left: 0.5em;
+    padding-left: 0.5rem;
 }
 
 /* Text for button truncated. */
-.extra-network-tree .action-list-item-label--truncate {
+.extra-network-tree .tree-list-item-label--truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 /* Icon for button. */
-.extra-network-tree .action-list-item-visual {
-    min-height: 1em;
+.extra-network-tree .tree-list-item-visual {
+    min-height: 1rem;
     color: var(--button-secondary-text-color);
     pointer-events: none;
     align-items: right;
 }
 
 /* Icon for button when it is before label. */
-.extra-network-tree .action-list-item-visual--leading {
+.extra-network-tree .tree-list-item-visual--leading {
     grid-area: leading-visual;
+    width: 1rem;
+    text-align: right;
 }
 
 /* Icon for button when it is after label. */
-.extra-network-tree .action-list-item-visual--trailing {
+.extra-network-tree .tree-list-item-visual--trailing {
     grid-area: trailing-visual;
+    width: 1rem;
+    text-align: right;
 }
 
 /* Dropdown arrow for button. */
-.extra-network-tree .action-list-item-action--leading {
-    margin-right: 1em;
+.extra-network-tree .tree-list-item-action--leading {
+    margin-right: 0.2rem;
+    margin-left: 0.2rem;
+}
+
+.extra-network-tree .tree-list-content-file .tree-list-item-action--leading {
+    visibility: hidden;
 }
 
 /* Define the animation for the arrow when it is clicked. */
-.extra-network-tree .action-list-content-dir[expanded=false] .action-list-item-action {
-    -ms-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
+.extra-network-tree .tree-list-content-dir[expanded=false] .tree-list-item-action-chevron {
+    -ms-transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+    transform: rotate(135deg);
     transition: transform 0.2s;
 }
 
-.extra-network-tree .action-list-content-dir[expanded=true] .action-list-item-action {
-    -ms-transform: rotate(90deg);
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
+.extra-network-tree .tree-list-content-dir[expanded=true] .tree-list-item-action-chevron {
+    -ms-transform: rotate(225deg);
+    -webkit-transform: rotate(225deg);
+    transform: rotate(225deg);
     transition: transform 0.2s;
 }
 
-.action-list-item-action-chevron {
-    display: inline-block;
-    padding: 0.3em;
-    box-shadow: 0.1em 0.1em 0 0px var(--neutral-200) inset;
+.tree-list-item-action-chevron {
+    display: inline-flex;
+    /* Uses box shadow to generate a pseudo chevron `>` icon. */
+    padding: 0.3rem;
+    box-shadow: 0.1rem 0.1rem 0 0 var(--neutral-200) inset;
     transform: rotate(135deg);
 }
 
-.extra-network-tree .action-list-item-action--leading {
+
+.extra-network-tree .tree-list-item-action--leading {
     grid-area: leading-action;
 }
 
-/* Dropdown arrow for button when it is after label.  UNUSED? */
-.extra-network-tree .action-list-item-action--trailing {
+.extra-network-tree .tree-list-item-action--trailing {
     grid-area: trailing-action;
+    display: inline-flex;
 }
 
-.extra-network-tree .action-list-item-action .button-row {
-    display: flex;
-    flex-grow: 1;
-}
-
-.extra-network-tree .action-list-content .button-row {
+.extra-network-tree .tree-list-content .button-row {
     display: inline-flex;
-    visibility: hidden !important;
-    color: white;
+    visibility: hidden;
+    color: var(--button-secondary-text-color);
+
 }
 
-.extra-network-tree .action-list-content:hover .button-row {
+.extra-network-tree .tree-list-content:hover .button-row {
     visibility: visible;
 }
 
 /* Add icon to left side of <input> */
-.extra-network-tree .action-list-search::before {
+.extra-network-tree .tree-list-search::before {
     content: "🔎︎";
     position: absolute;
-    margin: 0.5em;
-    font-size: 1em;
+    margin: 0.5rem;
+    font-size: 1rem;
     color: var(--input-placeholder-color);
 }
 
-.extra-network-tree .action-list-search {
+.extra-network-tree .tree-list-search {
     position: relative;
-    margin: 0.5em;
+    margin: 0.5rem;
 }
 
-.extra-network-tree .action-list-search .action-list-search-text {
+.extra-network-tree .tree-list-search .tree-list-search-text {
     border: 1px solid var(--button-secondary-border-color);
-    border-radius: 0.5em;
+    border-radius: 0.5rem;
     color: var(--button-secondary-text-color);
     background-color: transparent;
     width: 100%;
-    padding-left: 2em;
-    line-height: 1em;
+    padding-left: 2rem;
+    line-height: 1rem;
 }
 
 /* <input> clear button (x on right side) styling */
-.extra-network-tree .action-list-search .action-list-search-text::-webkit-search-cancel-button {
+.extra-network-tree .tree-list-search .tree-list-search-text::-webkit-search-cancel-button {
     -webkit-appearance: none;
     appearance: none;
     cursor: pointer;
-    height: 1em;
-    width: 1em;
+    height: 1rem;
+    width: 1rem;
     mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
     mask-repeat: no-repeat;
     mask-position: center center;
-- 
cgit v1.2.3


From f49c220c03f9b6ead18c2e08c04a469bf599b7d9 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Mon, 15 Jan 2024 17:34:44 -0500
Subject: Move extra network tab buttons into tree view;

---
 style.css | 264 +++++++++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 186 insertions(+), 78 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 2dafe97f..08573248 100644
--- a/style.css
+++ b/style.css
@@ -1196,17 +1196,33 @@ body.resizing .resize-handle {
     overflow: hidden;
 }
 
-.extra-network-tree .tree-list--tree {
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    margin: 0;
+.extra-network-tree .tree-list {
+    margin: 0 0.25rem;
     padding: 0;
-    margin-left: 0.25rem;
 }
 
+.extra-network-tree .tree-list .tree-list-controls {
+    position: relative;
+    display: grid;
+    width: 100%;
+    padding: 0 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    font-size: 1rem;
+    text-align: left;
+    user-select: none;
+    background-color: transparent;
+    border: none;
+    transition: background 33.333ms linear;
+    grid-template-rows: min-content;
+    grid-template-areas: "tree-list-controls-col-0 tree-list-controls-col-1 tree-list-controls-col-2 tree-list-controls-col-3";
+    grid-template-columns: minmax(0, auto) min-content min-content min-content;
+    grid-gap: 0.1rem;
+    align-items: start;
+}
+
+.extra-network-tree .tree-list--tree {}
+
 /* Remove auto indentation from tree. Will be overridden later. */
 .extra-network-tree .tree-list--subgroup {
     margin: 0 !important;
@@ -1221,9 +1237,6 @@ body.resizing .resize-handle {
     padding-left: 0.4rem !important;
 }
 
-/* Styles for tree <ul> elements. */
-.extra-network-tree .tree-list {}
-
 /* Styles for tree <li> elements. */
 .extra-network-tree .tree-list-item {
     list-style: none;
@@ -1288,26 +1301,182 @@ body.resizing .resize-handle {
     padding-top: 0.5rem !important;
 }
 
-.dark .extra-network-tree button.tree-list-content:hover {
+.dark .extra-network-tree div.tree-list-content:hover {
     -webkit-transition: all 0.05s ease-in-out;
 	transition: all 0.05s ease-in-out;
     background-color: var(--neutral-800);
 }
 
-.dark .extra-network-tree button.tree-list-content[selected] {
+.dark .extra-network-tree div.tree-list-content[selected] {
     background-color: var(--neutral-700);
 }
 
-.extra-network-tree button.tree-list-content:hover {
+.extra-network-tree div.tree-list-content:hover {
     -webkit-transition: all 0.05s ease-in-out;
 	transition: all 0.05s ease-in-out;
     background-color: var(--neutral-200);
 }
 
-.extra-network-tree button.tree-list-content[selected] {
+.extra-network-tree div.tree-list-content[selected] {
     background-color: var(--neutral-300);
 }
 
+/* ==== CHEVRON ICON ACTIONS ==== */
+/* Define the animation for the arrow when it is clicked. */
+.extra-network-tree .tree-list-content-dir[expanded=false] .tree-list-item-action-chevron {
+    -ms-transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+    transform: rotate(135deg);
+    transition: transform 0.2s;
+}
+
+.extra-network-tree .tree-list-content-dir[expanded=true] .tree-list-item-action-chevron {
+    -ms-transform: rotate(225deg);
+    -webkit-transform: rotate(225deg);
+    transform: rotate(225deg);
+    transition: transform 0.2s;
+}
+
+.tree-list-item-action-chevron {
+    display: inline-flex;
+    /* Uses box shadow to generate a pseudo chevron `>` icon. */
+    padding: 0.3rem;
+    box-shadow: 0.1rem 0.1rem 0 0 var(--neutral-200) inset;
+    transform: rotate(135deg);
+}
+
+/* ==== SEARCH INPUT ACTIONS ==== */
+/* Add icon to left side of <input> */
+.extra-network-tree .tree-list-controls .tree-list-search::before {
+    content: "🔎︎";
+    position: absolute;
+    margin: 0.5rem;
+    font-size: 1rem;
+    color: var(--input-placeholder-color);
+}
+
+.extra-network-tree .tree-list-controls .tree-list-search {
+    display: inline-flex;
+    grid-area: tree-list-controls-col-0;
+    position: relative;
+    margin: 0.5rem;
+}
+
+.extra-network-tree .tree-list-controls .tree-list-search .tree-list-search-text {
+    border: 1px solid var(--button-secondary-border-color);
+    border-radius: 0.5rem;
+    color: var(--button-secondary-text-color);
+    background-color: transparent;
+    width: 100%;
+    padding-left: 2rem;
+    line-height: 1rem;
+}
+
+/* <input> clear button (x on right side) styling */
+.extra-network-tree .tree-list-controls .tree-list-search .tree-list-search-text::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    height: 1rem;
+    width: 1rem;
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-size: 100%;
+    background-color: var(--input-placeholder-color);
+}
+
+/* ==== SORT ICON ACTIONS ==== */
+.extra-network-tree .tree-list-controls .tree-list-sort {
+    grid-area: tree-list-controls-col-1;
+    padding: 0.25rem;
+    display: inline-flex;
+    cursor: pointer;
+    justify-self: center;
+    align-self: center;
+}
+
+.extra-network-tree .tree-list-controls .tree-list-sort .tree-list-sort-icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-size: 100%;
+    background-color: var(--input-placeholder-color);
+}
+
+.extra-network-tree .tree-list-sort[data-sortmode="path"] .tree-list-sort-icon {
+    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 3.34315 2.34315 2 4 2H8.43845C9.81505 2 11.015 2.93689 11.3489 4.27239L11.7808 6H13.5H20C21.6569 6 23 7.34315 23 9V11C23 11.5523 22.5523 12 22 12C21.4477 12 21 11.5523 21 11V9C21 8.44772 20.5523 8 20 8H13.5H11.7808H4C3.44772 8 3 8.44772 3 9V10V19C3 19.5523 3.44772 20 4 20H9C9.55228 20 10 20.4477 10 21C10 21.5523 9.55228 22 9 22H4C2.34315 22 1 20.6569 1 19V10V9V5ZM3 6.17071C3.31278 6.06015 3.64936 6 4 6H9.71922L9.40859 4.75746C9.2973 4.3123 8.89732 4 8.43845 4H4C3.44772 4 3 4.44772 3 5V6.17071ZM20.1716 18.7574C20.6951 17.967 21 17.0191 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C17.0191 21 17.967 20.6951 18.7574 20.1716L21.2929 22.7071C21.6834 23.0976 22.3166 23.0976 22.7071 22.7071C23.0976 22.3166 23.0976 21.6834 22.7071 21.2929L20.1716 18.7574ZM13 16C13 14.3431 14.3431 13 16 13C17.6569 13 19 14.3431 19 16C19 17.6569 17.6569 19 16 19C14.3431 19 13 17.6569 13 16Z" fill="%23000000"></path></g></svg>');
+}
+
+.extra-network-tree .tree-list-sort[data-sortmode="name"] .tree-list-sort-icon {
+    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.1841 6.69223C17.063 6.42309 16.7953 6.25 16.5002 6.25C16.2051 6.25 15.9374 6.42309 15.8162 6.69223L11.3162 16.6922C11.1463 17.07 11.3147 17.514 11.6924 17.6839C12.0701 17.8539 12.5141 17.6855 12.6841 17.3078L14.1215 14.1136H18.8789L20.3162 17.3078C20.4862 17.6855 20.9302 17.8539 21.308 17.6839C21.6857 17.514 21.8541 17.07 21.6841 16.6922L17.1841 6.69223ZM16.5002 8.82764L14.7965 12.6136H18.2039L16.5002 8.82764Z" fill="%231C274C"></path><path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H13C13.4142 6.25 13.75 6.58579 13.75 7C13.75 7.41421 13.4142 7.75 13 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H10C10.4142 11.25 10.75 11.5858 10.75 12C10.75 12.4142 10.4142 12.75 10 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H8C8.41421 16.25 8.75 16.5858 8.75 17C8.75 17.4142 8.41421 17.75 8 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17Z" fill="%231C274C"></path></g></svg>');
+}
+
+.extra-network-tree .tree-list-sort[data-sortmode="date_created"] .tree-list-sort-icon {
+    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 11C14.2386 11 12 13.2386 12 16C12 18.7614 14.2386 21 17 21C19.7614 21 22 18.7614 22 16C22 13.2386 19.7614 11 17 11ZM17 11V9M2 9V15.8C2 16.9201 2 17.4802 2.21799 17.908C2.40973 18.2843 2.71569 18.5903 3.09202 18.782C3.51984 19 4.0799 19 5.2 19H13M2 9V8.2C2 7.0799 2 6.51984 2.21799 6.09202C2.40973 5.71569 2.71569 5.40973 3.09202 5.21799C3.51984 5 4.0799 5 5.2 5H13.8C14.9201 5 15.4802 5 15.908 5.21799C16.2843 5.40973 16.5903 5.71569 16.782 6.09202C17 6.51984 17 7.0799 17 8.2V9M2 9H17M5 3V5M14 3V5M15 16H17M17 16H19M17 16V14M17 16V18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
+}
+
+.extra-network-tree .tree-list-sort[data-sortmode="date_modified"] .tree-list-sort-icon {
+    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M10 21H6.2C5.0799 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4802 3 18.9201 3 17.8V8.2C3 7.0799 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H17.8C18.9201 5 19.4802 5 19.908 5.21799C20.2843 5.40973 20.5903 5.71569 20.782 6.09202C21 6.51984 21 7.0799 21 8.2V10M7 3V5M17 3V5M3 9H21M13.5 13.0001L7 13M10 17.0001L7 17M14 21L16.025 20.595C16.2015 20.5597 16.2898 20.542 16.3721 20.5097C16.4452 20.4811 16.5147 20.4439 16.579 20.399C16.6516 20.3484 16.7152 20.2848 16.8426 20.1574L21 16C21.5523 15.4477 21.5523 14.5523 21 14C20.4477 13.4477 19.5523 13.4477 19 14L14.8426 18.1574C14.7152 18.2848 14.6516 18.3484 14.601 18.421C14.5561 18.4853 14.5189 18.5548 14.4903 18.6279C14.458 18.7102 14.4403 18.7985 14.405 18.975L14 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
+}
+
+/* ==== SORT DIRECTION ICON ACTIONS ==== */
+.extra-network-tree .tree-list-controls .tree-list-sort-dir {
+    grid-area: tree-list-controls-col-2;
+    padding: 0.25rem;
+    display: inline-flex;
+    cursor: pointer;
+    justify-self: center;
+    align-self: center;
+}
+
+.extra-network-tree .tree-list-controls .tree-list-sort-dir .tree-list-sort-dir-icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-size: 100%;
+    background-color: var(--input-placeholder-color);
+}
+
+.extra-network-tree .tree-list-sort-dir[data-sortdir="Ascending"] .tree-list-sort-dir-icon {
+    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 7L3 10M6 7L9 10" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
+}
+
+.extra-network-tree .tree-list-sort-dir[data-sortdir="Descending"] .tree-list-sort-dir-icon {
+    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 17L3 14M6 17L9 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
+}
+
+/* ==== REFRESH ICON ACTIONS ==== */
+.extra-network-tree .tree-list-controls .tree-list-refresh {
+    grid-area: tree-list-controls-col-3;
+    padding: 0.25rem;
+    display: inline-flex;
+    cursor: pointer;
+    justify-self: center;
+    align-self: center;
+}
+
+.extra-network-tree .tree-list-controls .tree-list-refresh .tree-list-refresh-icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38"/></svg>');
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-size: 100%;
+    background-color: var(--input-placeholder-color);
+}
+
+.extra-network-tree .tree-list-refresh-icon:active {
+    -ms-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+    transition: transform 0.2s;
+}
+
+/* ==== TREE GRID CONFIG ==== */
+
 /* Text for button. */
 .extra-network-tree .tree-list-item-label {
     position: relative;
@@ -1332,6 +1501,7 @@ body.resizing .resize-handle {
     align-items: right;
 }
 
+
 /* Icon for button when it is before label. */
 .extra-network-tree .tree-list-item-visual--leading {
     grid-area: leading-visual;
@@ -1348,7 +1518,7 @@ body.resizing .resize-handle {
 
 /* Dropdown arrow for button. */
 .extra-network-tree .tree-list-item-action--leading {
-    margin-right: 0.2rem;
+    margin-right: 0.5rem;
     margin-left: 0.2rem;
 }
 
@@ -1356,30 +1526,6 @@ body.resizing .resize-handle {
     visibility: hidden;
 }
 
-/* Define the animation for the arrow when it is clicked. */
-.extra-network-tree .tree-list-content-dir[expanded=false] .tree-list-item-action-chevron {
-    -ms-transform: rotate(135deg);
-    -webkit-transform: rotate(135deg);
-    transform: rotate(135deg);
-    transition: transform 0.2s;
-}
-
-.extra-network-tree .tree-list-content-dir[expanded=true] .tree-list-item-action-chevron {
-    -ms-transform: rotate(225deg);
-    -webkit-transform: rotate(225deg);
-    transform: rotate(225deg);
-    transition: transform 0.2s;
-}
-
-.tree-list-item-action-chevron {
-    display: inline-flex;
-    /* Uses box shadow to generate a pseudo chevron `>` icon. */
-    padding: 0.3rem;
-    box-shadow: 0.1rem 0.1rem 0 0 var(--neutral-200) inset;
-    transform: rotate(135deg);
-}
-
-
 .extra-network-tree .tree-list-item-action--leading {
     grid-area: leading-action;
 }
@@ -1399,41 +1545,3 @@ body.resizing .resize-handle {
 .extra-network-tree .tree-list-content:hover .button-row {
     visibility: visible;
 }
-
-/* Add icon to left side of <input> */
-.extra-network-tree .tree-list-search::before {
-    content: "🔎︎";
-    position: absolute;
-    margin: 0.5rem;
-    font-size: 1rem;
-    color: var(--input-placeholder-color);
-}
-
-.extra-network-tree .tree-list-search {
-    position: relative;
-    margin: 0.5rem;
-}
-
-.extra-network-tree .tree-list-search .tree-list-search-text {
-    border: 1px solid var(--button-secondary-border-color);
-    border-radius: 0.5rem;
-    color: var(--button-secondary-text-color);
-    background-color: transparent;
-    width: 100%;
-    padding-left: 2rem;
-    line-height: 1rem;
-}
-
-/* <input> clear button (x on right side) styling */
-.extra-network-tree .tree-list-search .tree-list-search-text::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    height: 1rem;
-    width: 1rem;
-    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-size: 100%;
-    background-color: var(--input-placeholder-color);
-}
\ No newline at end of file
-- 
cgit v1.2.3


From 4f9626703345ced77935e6bbb06de0b4522d53b7 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Tue, 16 Jan 2024 13:35:01 -0500
Subject: Finish cleanup.

---
 style.css | 81 +++++++++++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 56 insertions(+), 25 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 08573248..1090e436 100644
--- a/style.css
+++ b/style.css
@@ -879,13 +879,6 @@ footer {
     margin-bottom: 1em;
 }
 
-.extra-network-pane{
-    height: calc(100vh - 24rem);
-    overflow: clip scroll;
-    resize: vertical;
-    min-height: 52rem;
-}
-
 .extra-networks > div.tab-nav{
     min-height: 3.4rem;
 }
@@ -1182,23 +1175,63 @@ body.resizing .resize-handle {
 /* ========================= */
 .extra-network-pane {
     display: flex;
-}
-
-.extra-network-pane .extra-network-cards {
-    display: block;
+    height: calc(100vh - 24rem);
+    resize: vertical;
+    min-height: 52rem;
 }
 
 .extra-network-pane .extra-network-tree {
-    display: block;
+    flex: 1;
+    flex-direction: column;
+    display: flex;
     font-size: 1rem;
-    min-width: 25%;
     border: 1px solid var(--block-border-color);
-    overflow: hidden;
 }
 
-.extra-network-tree .tree-list {
-    margin: 0 0.25rem;
+.extra-network-pane .extra-network-cards {
+    flex: 3;
+    overflow: clip auto !important;
+    border: 1px solid var(--block-border-color);
+}
+
+.extra-network-pane .extra-network-tree .tree-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
     padding: 0;
+    width: 100%;
+    overflow: hidden;
+}
+
+.extra-network-pane .extra-network-tree .tree-list .tree-list-container {
+    flex: 1;
+    overflow: clip auto !important;
+    width: 100%;
+}
+
+
+.extra-network-pane .extra-network-cards::-webkit-scrollbar,
+.extra-network-pane .tree-list-container::-webkit-scrollbar {
+    background-color: transparent;
+    width: 16px;
+}
+
+.extra-network-pane .extra-network-cards::-webkit-scrollbar-track,
+.extra-network-pane .tree-list-container::-webkit-scrollbar-track {
+    background-color: transparent;
+    background-clip: content-box;
+}
+
+.extra-network-pane .extra-network-cards::-webkit-scrollbar-thumb,
+.extra-network-pane .tree-list-container::-webkit-scrollbar-thumb {
+    background-color: var(--border-color-primary);
+    border-radius: 16px;
+    border: 4px solid var(--background-fill-primary);
+}
+
+.extra-network-pane .extra-network-cards::-webkit-scrollbar-button,
+.extra-network-pane .tree-list-container::-webkit-scrollbar-button {
+    display: none;
 }
 
 .extra-network-tree .tree-list .tree-list-controls {
@@ -1244,17 +1277,15 @@ body.resizing .resize-handle {
     background-color: transparent;
 }
 
-/* Directory <ul> visibility based on expanded attribute. */
-.extra-network-tree .tree-list-content[expanded=false]+.tree-list--subgroup {
+/* Directory <ul> visibility based on data-expanded attribute. */
+.extra-network-tree .tree-list-content+.tree-list--subgroup {
     height: 0;
-    overflow: hidden;
     visibility: hidden;
     opacity: 0;
 }
 
-.extra-network-tree .tree-list-content[expanded=true]+.tree-list--subgroup {
+.extra-network-tree .tree-list-content[data-expanded]+.tree-list--subgroup {
     height: auto;
-    overflow: visible;
     visibility: visible;
     opacity: 1;
 }
@@ -1307,7 +1338,7 @@ body.resizing .resize-handle {
     background-color: var(--neutral-800);
 }
 
-.dark .extra-network-tree div.tree-list-content[selected] {
+.dark .extra-network-tree div.tree-list-content[data-selected] {
     background-color: var(--neutral-700);
 }
 
@@ -1317,20 +1348,20 @@ body.resizing .resize-handle {
     background-color: var(--neutral-200);
 }
 
-.extra-network-tree div.tree-list-content[selected] {
+.extra-network-tree div.tree-list-content[data-selected] {
     background-color: var(--neutral-300);
 }
 
 /* ==== CHEVRON ICON ACTIONS ==== */
 /* Define the animation for the arrow when it is clicked. */
-.extra-network-tree .tree-list-content-dir[expanded=false] .tree-list-item-action-chevron {
+.extra-network-tree .tree-list-content-dir .tree-list-item-action-chevron {
     -ms-transform: rotate(135deg);
     -webkit-transform: rotate(135deg);
     transform: rotate(135deg);
     transition: transform 0.2s;
 }
 
-.extra-network-tree .tree-list-content-dir[expanded=true] .tree-list-item-action-chevron {
+.extra-network-tree .tree-list-content-dir[data-expanded] .tree-list-item-action-chevron {
     -ms-transform: rotate(225deg);
     -webkit-transform: rotate(225deg);
     transform: rotate(225deg);
-- 
cgit v1.2.3


From 50e444fa1d1c779b0c9c915e44ed2d78b587f277 Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Thu, 18 Jan 2024 12:13:09 -0500
Subject: Fix missing important style.

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 1090e436..57c52354 100644
--- a/style.css
+++ b/style.css
@@ -28,7 +28,7 @@ div.gradio-container{
 }
 
 .hidden{
-    display: none;
+    display: none !important;
 }
 
 .compact{
-- 
cgit v1.2.3


From 2310cd66e5381fbe6b966894381c6ee7b762898f Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Sat, 20 Jan 2024 11:43:45 -0500
Subject: Add toggle button for tree view. Use default settings for sortmode
 and direction.

---
 style.css | 86 ++++++++++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 57 insertions(+), 29 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 57c52354..f3fd1571 100644
--- a/style.css
+++ b/style.css
@@ -1178,6 +1178,13 @@ body.resizing .resize-handle {
     height: calc(100vh - 24rem);
     resize: vertical;
     min-height: 52rem;
+    flex-direction: column;
+}
+
+.extra-network-pane .extra-network-pane-content {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
 }
 
 .extra-network-pane .extra-network-tree {
@@ -1234,7 +1241,7 @@ body.resizing .resize-handle {
     display: none;
 }
 
-.extra-network-tree .tree-list .tree-list-controls {
+.extra-network-pane .extra-network-control {
     position: relative;
     display: grid;
     width: 100%;
@@ -1248,8 +1255,7 @@ body.resizing .resize-handle {
     border: none;
     transition: background 33.333ms linear;
     grid-template-rows: min-content;
-    grid-template-areas: "tree-list-controls-col-0 tree-list-controls-col-1 tree-list-controls-col-2 tree-list-controls-col-3";
-    grid-template-columns: minmax(0, auto) min-content min-content min-content;
+    grid-template-columns: minmax(0, auto) repeat(4, min-content);
     grid-gap: 0.1rem;
     align-items: start;
 }
@@ -1342,16 +1348,16 @@ body.resizing .resize-handle {
     background-color: var(--neutral-700);
 }
 
+.extra-network-tree div.tree-list-content[data-selected] {
+    background-color: var(--neutral-300);
+}
+
 .extra-network-tree div.tree-list-content:hover {
     -webkit-transition: all 0.05s ease-in-out;
 	transition: all 0.05s ease-in-out;
     background-color: var(--neutral-200);
 }
 
-.extra-network-tree div.tree-list-content[data-selected] {
-    background-color: var(--neutral-300);
-}
-
 /* ==== CHEVRON ICON ACTIONS ==== */
 /* Define the animation for the arrow when it is clicked. */
 .extra-network-tree .tree-list-content-dir .tree-list-item-action-chevron {
@@ -1378,7 +1384,7 @@ body.resizing .resize-handle {
 
 /* ==== SEARCH INPUT ACTIONS ==== */
 /* Add icon to left side of <input> */
-.extra-network-tree .tree-list-controls .tree-list-search::before {
+.extra-network-pane .extra-network-control .extra-network-control--search::before {
     content: "🔎︎";
     position: absolute;
     margin: 0.5rem;
@@ -1386,14 +1392,12 @@ body.resizing .resize-handle {
     color: var(--input-placeholder-color);
 }
 
-.extra-network-tree .tree-list-controls .tree-list-search {
+.extra-network-pane .extra-network-control .extra-network-control--search {
     display: inline-flex;
-    grid-area: tree-list-controls-col-0;
     position: relative;
-    margin: 0.5rem;
 }
 
-.extra-network-tree .tree-list-controls .tree-list-search .tree-list-search-text {
+.extra-network-pane .extra-network-control .extra-network-control--search .extra-network-control--search-text {
     border: 1px solid var(--button-secondary-border-color);
     border-radius: 0.5rem;
     color: var(--button-secondary-text-color);
@@ -1404,7 +1408,7 @@ body.resizing .resize-handle {
 }
 
 /* <input> clear button (x on right side) styling */
-.extra-network-tree .tree-list-controls .tree-list-search .tree-list-search-text::-webkit-search-cancel-button {
+.extra-network-pane .extra-network-control .extra-network-control--search .extra-network-control--search-text::-webkit-search-cancel-button {
     -webkit-appearance: none;
     appearance: none;
     cursor: pointer;
@@ -1418,8 +1422,7 @@ body.resizing .resize-handle {
 }
 
 /* ==== SORT ICON ACTIONS ==== */
-.extra-network-tree .tree-list-controls .tree-list-sort {
-    grid-area: tree-list-controls-col-1;
+.extra-network-pane .extra-network-control .extra-network-control--sort {
     padding: 0.25rem;
     display: inline-flex;
     cursor: pointer;
@@ -1427,7 +1430,7 @@ body.resizing .resize-handle {
     align-self: center;
 }
 
-.extra-network-tree .tree-list-controls .tree-list-sort .tree-list-sort-icon {
+.extra-network-pane .extra-network-control .extra-network-control--sort .extra-network-control--sort-icon {
     height: 1.5rem;
     width: 1.5rem;
     mask-repeat: no-repeat;
@@ -1436,25 +1439,24 @@ body.resizing .resize-handle {
     background-color: var(--input-placeholder-color);
 }
 
-.extra-network-tree .tree-list-sort[data-sortmode="path"] .tree-list-sort-icon {
+.extra-network-pane .extra-network-control .extra-network-control--sort[data-sortmode="path"] .extra-network-control--sort-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 3.34315 2.34315 2 4 2H8.43845C9.81505 2 11.015 2.93689 11.3489 4.27239L11.7808 6H13.5H20C21.6569 6 23 7.34315 23 9V11C23 11.5523 22.5523 12 22 12C21.4477 12 21 11.5523 21 11V9C21 8.44772 20.5523 8 20 8H13.5H11.7808H4C3.44772 8 3 8.44772 3 9V10V19C3 19.5523 3.44772 20 4 20H9C9.55228 20 10 20.4477 10 21C10 21.5523 9.55228 22 9 22H4C2.34315 22 1 20.6569 1 19V10V9V5ZM3 6.17071C3.31278 6.06015 3.64936 6 4 6H9.71922L9.40859 4.75746C9.2973 4.3123 8.89732 4 8.43845 4H4C3.44772 4 3 4.44772 3 5V6.17071ZM20.1716 18.7574C20.6951 17.967 21 17.0191 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C17.0191 21 17.967 20.6951 18.7574 20.1716L21.2929 22.7071C21.6834 23.0976 22.3166 23.0976 22.7071 22.7071C23.0976 22.3166 23.0976 21.6834 22.7071 21.2929L20.1716 18.7574ZM13 16C13 14.3431 14.3431 13 16 13C17.6569 13 19 14.3431 19 16C19 17.6569 17.6569 19 16 19C14.3431 19 13 17.6569 13 16Z" fill="%23000000"></path></g></svg>');
 }
 
-.extra-network-tree .tree-list-sort[data-sortmode="name"] .tree-list-sort-icon {
+.extra-network-pane .extra-network-control .extra-network-control--sort[data-sortmode="name"] .extra-network-control--sort-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.1841 6.69223C17.063 6.42309 16.7953 6.25 16.5002 6.25C16.2051 6.25 15.9374 6.42309 15.8162 6.69223L11.3162 16.6922C11.1463 17.07 11.3147 17.514 11.6924 17.6839C12.0701 17.8539 12.5141 17.6855 12.6841 17.3078L14.1215 14.1136H18.8789L20.3162 17.3078C20.4862 17.6855 20.9302 17.8539 21.308 17.6839C21.6857 17.514 21.8541 17.07 21.6841 16.6922L17.1841 6.69223ZM16.5002 8.82764L14.7965 12.6136H18.2039L16.5002 8.82764Z" fill="%231C274C"></path><path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H13C13.4142 6.25 13.75 6.58579 13.75 7C13.75 7.41421 13.4142 7.75 13 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H10C10.4142 11.25 10.75 11.5858 10.75 12C10.75 12.4142 10.4142 12.75 10 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H8C8.41421 16.25 8.75 16.5858 8.75 17C8.75 17.4142 8.41421 17.75 8 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17Z" fill="%231C274C"></path></g></svg>');
 }
 
-.extra-network-tree .tree-list-sort[data-sortmode="date_created"] .tree-list-sort-icon {
+.extra-network-pane .extra-network-control .extra-network-control--sort[data-sortmode="date_created"] .extra-network-control--sort-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 11C14.2386 11 12 13.2386 12 16C12 18.7614 14.2386 21 17 21C19.7614 21 22 18.7614 22 16C22 13.2386 19.7614 11 17 11ZM17 11V9M2 9V15.8C2 16.9201 2 17.4802 2.21799 17.908C2.40973 18.2843 2.71569 18.5903 3.09202 18.782C3.51984 19 4.0799 19 5.2 19H13M2 9V8.2C2 7.0799 2 6.51984 2.21799 6.09202C2.40973 5.71569 2.71569 5.40973 3.09202 5.21799C3.51984 5 4.0799 5 5.2 5H13.8C14.9201 5 15.4802 5 15.908 5.21799C16.2843 5.40973 16.5903 5.71569 16.782 6.09202C17 6.51984 17 7.0799 17 8.2V9M2 9H17M5 3V5M14 3V5M15 16H17M17 16H19M17 16V14M17 16V18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
-.extra-network-tree .tree-list-sort[data-sortmode="date_modified"] .tree-list-sort-icon {
+.extra-network-pane .extra-network-control .extra-network-control--sort[data-sortmode="date_modified"] .extra-network-control--sort-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M10 21H6.2C5.0799 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4802 3 18.9201 3 17.8V8.2C3 7.0799 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H17.8C18.9201 5 19.4802 5 19.908 5.21799C20.2843 5.40973 20.5903 5.71569 20.782 6.09202C21 6.51984 21 7.0799 21 8.2V10M7 3V5M17 3V5M3 9H21M13.5 13.0001L7 13M10 17.0001L7 17M14 21L16.025 20.595C16.2015 20.5597 16.2898 20.542 16.3721 20.5097C16.4452 20.4811 16.5147 20.4439 16.579 20.399C16.6516 20.3484 16.7152 20.2848 16.8426 20.1574L21 16C21.5523 15.4477 21.5523 14.5523 21 14C20.4477 13.4477 19.5523 13.4477 19 14L14.8426 18.1574C14.7152 18.2848 14.6516 18.3484 14.601 18.421C14.5561 18.4853 14.5189 18.5548 14.4903 18.6279C14.458 18.7102 14.4403 18.7985 14.405 18.975L14 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
 /* ==== SORT DIRECTION ICON ACTIONS ==== */
-.extra-network-tree .tree-list-controls .tree-list-sort-dir {
-    grid-area: tree-list-controls-col-2;
+.extra-network-pane .extra-network-control .extra-network-control--sort-dir {
     padding: 0.25rem;
     display: inline-flex;
     cursor: pointer;
@@ -1462,7 +1464,7 @@ body.resizing .resize-handle {
     align-self: center;
 }
 
-.extra-network-tree .tree-list-controls .tree-list-sort-dir .tree-list-sort-dir-icon {
+.extra-network-pane .extra-network-control .extra-network-control--sort-dir .extra-network-control--sort-dir-icon {
     height: 1.5rem;
     width: 1.5rem;
     mask-repeat: no-repeat;
@@ -1471,17 +1473,43 @@ body.resizing .resize-handle {
     background-color: var(--input-placeholder-color);
 }
 
-.extra-network-tree .tree-list-sort-dir[data-sortdir="Ascending"] .tree-list-sort-dir-icon {
+.extra-network-pane .extra-network-control .extra-network-control--sort-dir[data-sortdir="Ascending"] .extra-network-control--sort-dir-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 7L3 10M6 7L9 10" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
-.extra-network-tree .tree-list-sort-dir[data-sortdir="Descending"] .tree-list-sort-dir-icon {
+.extra-network-pane .extra-network-control .extra-network-control--sort-dir[data-sortdir="Descending"] .extra-network-control--sort-dir-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 17L3 14M6 17L9 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
+/* ==== TREE VIEW ICON ACTIONS ==== */
+.extra-network-pane .extra-network-control .extra-network-control--tree-view {
+    padding: 0.25rem;
+    display: inline-flex;
+    cursor: pointer;
+    justify-self: center;
+    align-self: center;
+}
+
+.extra-network-pane .extra-network-control .extra-network-control--tree-view .extra-network-control--tree-view-icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="black"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="black" d="M16 10v-4h-11v1h-2v-3h9v-4h-12v4h2v10h3v2h11v-4h-11v1h-2v-5h2v2z"></path></g></svg>');
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-size: 100%;
+    background-color: var(--input-placeholder-color);
+}
+
+.dark .extra-network-pane .extra-network-control .extra-network-control--enabled {
+    background-color: var(--neutral-700);
+}
+
+.dark .extra-network-pane .extra-network-control .extra-network-control--enabled {
+    background-color: var(--neutral-300);
+}
+
 /* ==== REFRESH ICON ACTIONS ==== */
-.extra-network-tree .tree-list-controls .tree-list-refresh {
-    grid-area: tree-list-controls-col-3;
+.extra-network-pane .extra-network-control .extra-network-control--refresh {
     padding: 0.25rem;
     display: inline-flex;
     cursor: pointer;
@@ -1489,7 +1517,7 @@ body.resizing .resize-handle {
     align-self: center;
 }
 
-.extra-network-tree .tree-list-controls .tree-list-refresh .tree-list-refresh-icon {
+.extra-network-pane .extra-network-control .extra-network-control--refresh .extra-network-control--refresh-icon {
     height: 1.5rem;
     width: 1.5rem;
     mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38"/></svg>');
@@ -1499,7 +1527,7 @@ body.resizing .resize-handle {
     background-color: var(--input-placeholder-color);
 }
 
-.extra-network-tree .tree-list-refresh-icon:active {
+.extra-network-pane .extra-network-control .extra-network-control--refresh-icon:active {
     -ms-transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
-- 
cgit v1.2.3


From d7d3166a2749fe04f0ba1d8d0f88c8e8819a379d Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Sun, 21 Jan 2024 11:27:24 -0500
Subject: Fix broken scrollbars

---
 style.css | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index f3fd1571..ff1d9072 100644
--- a/style.css
+++ b/style.css
@@ -1179,20 +1179,20 @@ body.resizing .resize-handle {
     resize: vertical;
     min-height: 52rem;
     flex-direction: column;
+    overflow: hidden;
 }
 
 .extra-network-pane .extra-network-pane-content {
     display: flex;
     flex: 1;
-    flex-direction: row;
+    overflow: hidden;
 }
 
 .extra-network-pane .extra-network-tree {
     flex: 1;
-    flex-direction: column;
-    display: flex;
     font-size: 1rem;
     border: 1px solid var(--block-border-color);
+    overflow: clip auto !important;
 }
 
 .extra-network-pane .extra-network-cards {
@@ -1210,34 +1210,28 @@ body.resizing .resize-handle {
     overflow: hidden;
 }
 
-.extra-network-pane .extra-network-tree .tree-list .tree-list-container {
-    flex: 1;
-    overflow: clip auto !important;
-    width: 100%;
-}
-
 
 .extra-network-pane .extra-network-cards::-webkit-scrollbar,
-.extra-network-pane .tree-list-container::-webkit-scrollbar {
+.extra-network-pane .extra-network-tree::-webkit-scrollbar {
     background-color: transparent;
     width: 16px;
 }
 
 .extra-network-pane .extra-network-cards::-webkit-scrollbar-track,
-.extra-network-pane .tree-list-container::-webkit-scrollbar-track {
+.extra-network-pane .extra-network-tree::-webkit-scrollbar-track {
     background-color: transparent;
     background-clip: content-box;
 }
 
 .extra-network-pane .extra-network-cards::-webkit-scrollbar-thumb,
-.extra-network-pane .tree-list-container::-webkit-scrollbar-thumb {
+.extra-network-pane .extra-network-tree::-webkit-scrollbar-thumb {
     background-color: var(--border-color-primary);
     border-radius: 16px;
     border: 4px solid var(--background-fill-primary);
 }
 
 .extra-network-pane .extra-network-cards::-webkit-scrollbar-button,
-.extra-network-pane .tree-list-container::-webkit-scrollbar-button {
+.extra-network-pane .extra-network-tree::-webkit-scrollbar-button {
     display: none;
 }
 
-- 
cgit v1.2.3


From f4e931f18fa4f94aece1f4dabd4dd0d635ecec13 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Mon, 22 Jan 2024 23:20:30 +0300
Subject: put extra networks controls row into the tabs UI element for #14588

---
 style.css | 51 ++++++++++++++++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 23 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index ff1d9072..4352737e 100644
--- a/style.css
+++ b/style.css
@@ -880,7 +880,12 @@ footer {
 }
 
 .extra-networks > div.tab-nav{
-    min-height: 3.4rem;
+    min-height: 2.7rem;
+}
+
+.extra-networks-controls-div{
+    align-self: center;
+    margin-left: auto;
 }
 
 .extra-networks > div > [id *= '_extra_']{
@@ -1235,7 +1240,7 @@ body.resizing .resize-handle {
     display: none;
 }
 
-.extra-network-pane .extra-network-control {
+.extra-network-control {
     position: relative;
     display: grid;
     width: 100%;
@@ -1378,7 +1383,7 @@ body.resizing .resize-handle {
 
 /* ==== SEARCH INPUT ACTIONS ==== */
 /* Add icon to left side of <input> */
-.extra-network-pane .extra-network-control .extra-network-control--search::before {
+.extra-network-control .extra-network-control--search::before {
     content: "🔎︎";
     position: absolute;
     margin: 0.5rem;
@@ -1386,12 +1391,12 @@ body.resizing .resize-handle {
     color: var(--input-placeholder-color);
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--search {
+.extra-network-control .extra-network-control--search {
     display: inline-flex;
     position: relative;
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--search .extra-network-control--search-text {
+.extra-network-control .extra-network-control--search .extra-network-control--search-text {
     border: 1px solid var(--button-secondary-border-color);
     border-radius: 0.5rem;
     color: var(--button-secondary-text-color);
@@ -1402,7 +1407,7 @@ body.resizing .resize-handle {
 }
 
 /* <input> clear button (x on right side) styling */
-.extra-network-pane .extra-network-control .extra-network-control--search .extra-network-control--search-text::-webkit-search-cancel-button {
+.extra-network-control .extra-network-control--search .extra-network-control--search-text::-webkit-search-cancel-button {
     -webkit-appearance: none;
     appearance: none;
     cursor: pointer;
@@ -1416,7 +1421,7 @@ body.resizing .resize-handle {
 }
 
 /* ==== SORT ICON ACTIONS ==== */
-.extra-network-pane .extra-network-control .extra-network-control--sort {
+.extra-network-control .extra-network-control--sort {
     padding: 0.25rem;
     display: inline-flex;
     cursor: pointer;
@@ -1424,7 +1429,7 @@ body.resizing .resize-handle {
     align-self: center;
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--sort .extra-network-control--sort-icon {
+.extra-network-control .extra-network-control--sort .extra-network-control--sort-icon {
     height: 1.5rem;
     width: 1.5rem;
     mask-repeat: no-repeat;
@@ -1433,24 +1438,24 @@ body.resizing .resize-handle {
     background-color: var(--input-placeholder-color);
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--sort[data-sortmode="path"] .extra-network-control--sort-icon {
+.extra-network-control .extra-network-control--sort[data-sortmode="path"] .extra-network-control--sort-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 3.34315 2.34315 2 4 2H8.43845C9.81505 2 11.015 2.93689 11.3489 4.27239L11.7808 6H13.5H20C21.6569 6 23 7.34315 23 9V11C23 11.5523 22.5523 12 22 12C21.4477 12 21 11.5523 21 11V9C21 8.44772 20.5523 8 20 8H13.5H11.7808H4C3.44772 8 3 8.44772 3 9V10V19C3 19.5523 3.44772 20 4 20H9C9.55228 20 10 20.4477 10 21C10 21.5523 9.55228 22 9 22H4C2.34315 22 1 20.6569 1 19V10V9V5ZM3 6.17071C3.31278 6.06015 3.64936 6 4 6H9.71922L9.40859 4.75746C9.2973 4.3123 8.89732 4 8.43845 4H4C3.44772 4 3 4.44772 3 5V6.17071ZM20.1716 18.7574C20.6951 17.967 21 17.0191 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C17.0191 21 17.967 20.6951 18.7574 20.1716L21.2929 22.7071C21.6834 23.0976 22.3166 23.0976 22.7071 22.7071C23.0976 22.3166 23.0976 21.6834 22.7071 21.2929L20.1716 18.7574ZM13 16C13 14.3431 14.3431 13 16 13C17.6569 13 19 14.3431 19 16C19 17.6569 17.6569 19 16 19C14.3431 19 13 17.6569 13 16Z" fill="%23000000"></path></g></svg>');
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--sort[data-sortmode="name"] .extra-network-control--sort-icon {
+.extra-network-control .extra-network-control--sort[data-sortmode="name"] .extra-network-control--sort-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.1841 6.69223C17.063 6.42309 16.7953 6.25 16.5002 6.25C16.2051 6.25 15.9374 6.42309 15.8162 6.69223L11.3162 16.6922C11.1463 17.07 11.3147 17.514 11.6924 17.6839C12.0701 17.8539 12.5141 17.6855 12.6841 17.3078L14.1215 14.1136H18.8789L20.3162 17.3078C20.4862 17.6855 20.9302 17.8539 21.308 17.6839C21.6857 17.514 21.8541 17.07 21.6841 16.6922L17.1841 6.69223ZM16.5002 8.82764L14.7965 12.6136H18.2039L16.5002 8.82764Z" fill="%231C274C"></path><path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H13C13.4142 6.25 13.75 6.58579 13.75 7C13.75 7.41421 13.4142 7.75 13 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H10C10.4142 11.25 10.75 11.5858 10.75 12C10.75 12.4142 10.4142 12.75 10 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H8C8.41421 16.25 8.75 16.5858 8.75 17C8.75 17.4142 8.41421 17.75 8 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17Z" fill="%231C274C"></path></g></svg>');
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--sort[data-sortmode="date_created"] .extra-network-control--sort-icon {
+.extra-network-control .extra-network-control--sort[data-sortmode="date_created"] .extra-network-control--sort-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 11C14.2386 11 12 13.2386 12 16C12 18.7614 14.2386 21 17 21C19.7614 21 22 18.7614 22 16C22 13.2386 19.7614 11 17 11ZM17 11V9M2 9V15.8C2 16.9201 2 17.4802 2.21799 17.908C2.40973 18.2843 2.71569 18.5903 3.09202 18.782C3.51984 19 4.0799 19 5.2 19H13M2 9V8.2C2 7.0799 2 6.51984 2.21799 6.09202C2.40973 5.71569 2.71569 5.40973 3.09202 5.21799C3.51984 5 4.0799 5 5.2 5H13.8C14.9201 5 15.4802 5 15.908 5.21799C16.2843 5.40973 16.5903 5.71569 16.782 6.09202C17 6.51984 17 7.0799 17 8.2V9M2 9H17M5 3V5M14 3V5M15 16H17M17 16H19M17 16V14M17 16V18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--sort[data-sortmode="date_modified"] .extra-network-control--sort-icon {
+.extra-network-control .extra-network-control--sort[data-sortmode="date_modified"] .extra-network-control--sort-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M10 21H6.2C5.0799 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4802 3 18.9201 3 17.8V8.2C3 7.0799 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H17.8C18.9201 5 19.4802 5 19.908 5.21799C20.2843 5.40973 20.5903 5.71569 20.782 6.09202C21 6.51984 21 7.0799 21 8.2V10M7 3V5M17 3V5M3 9H21M13.5 13.0001L7 13M10 17.0001L7 17M14 21L16.025 20.595C16.2015 20.5597 16.2898 20.542 16.3721 20.5097C16.4452 20.4811 16.5147 20.4439 16.579 20.399C16.6516 20.3484 16.7152 20.2848 16.8426 20.1574L21 16C21.5523 15.4477 21.5523 14.5523 21 14C20.4477 13.4477 19.5523 13.4477 19 14L14.8426 18.1574C14.7152 18.2848 14.6516 18.3484 14.601 18.421C14.5561 18.4853 14.5189 18.5548 14.4903 18.6279C14.458 18.7102 14.4403 18.7985 14.405 18.975L14 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
 /* ==== SORT DIRECTION ICON ACTIONS ==== */
-.extra-network-pane .extra-network-control .extra-network-control--sort-dir {
+.extra-network-control .extra-network-control--sort-dir {
     padding: 0.25rem;
     display: inline-flex;
     cursor: pointer;
@@ -1458,7 +1463,7 @@ body.resizing .resize-handle {
     align-self: center;
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--sort-dir .extra-network-control--sort-dir-icon {
+.extra-network-control .extra-network-control--sort-dir .extra-network-control--sort-dir-icon {
     height: 1.5rem;
     width: 1.5rem;
     mask-repeat: no-repeat;
@@ -1467,16 +1472,16 @@ body.resizing .resize-handle {
     background-color: var(--input-placeholder-color);
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--sort-dir[data-sortdir="Ascending"] .extra-network-control--sort-dir-icon {
+.extra-network-control .extra-network-control--sort-dir[data-sortdir="Ascending"] .extra-network-control--sort-dir-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 7L3 10M6 7L9 10" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--sort-dir[data-sortdir="Descending"] .extra-network-control--sort-dir-icon {
+.extra-network-control .extra-network-control--sort-dir[data-sortdir="Descending"] .extra-network-control--sort-dir-icon {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 17L3 14M6 17L9 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
 }
 
 /* ==== TREE VIEW ICON ACTIONS ==== */
-.extra-network-pane .extra-network-control .extra-network-control--tree-view {
+.extra-network-control .extra-network-control--tree-view {
     padding: 0.25rem;
     display: inline-flex;
     cursor: pointer;
@@ -1484,7 +1489,7 @@ body.resizing .resize-handle {
     align-self: center;
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--tree-view .extra-network-control--tree-view-icon {
+.extra-network-control .extra-network-control--tree-view .extra-network-control--tree-view-icon {
     height: 1.5rem;
     width: 1.5rem;
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="black"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="black" d="M16 10v-4h-11v1h-2v-3h9v-4h-12v4h2v10h3v2h11v-4h-11v1h-2v-5h2v2z"></path></g></svg>');
@@ -1494,16 +1499,16 @@ body.resizing .resize-handle {
     background-color: var(--input-placeholder-color);
 }
 
-.dark .extra-network-pane .extra-network-control .extra-network-control--enabled {
+.dark .extra-network-control .extra-network-control--enabled {
     background-color: var(--neutral-700);
 }
 
-.dark .extra-network-pane .extra-network-control .extra-network-control--enabled {
+.dark .extra-network-control .extra-network-control--enabled {
     background-color: var(--neutral-300);
 }
 
 /* ==== REFRESH ICON ACTIONS ==== */
-.extra-network-pane .extra-network-control .extra-network-control--refresh {
+.extra-network-control .extra-network-control--refresh {
     padding: 0.25rem;
     display: inline-flex;
     cursor: pointer;
@@ -1511,7 +1516,7 @@ body.resizing .resize-handle {
     align-self: center;
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--refresh .extra-network-control--refresh-icon {
+.extra-network-control .extra-network-control--refresh .extra-network-control--refresh-icon {
     height: 1.5rem;
     width: 1.5rem;
     mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38"/></svg>');
@@ -1521,7 +1526,7 @@ body.resizing .resize-handle {
     background-color: var(--input-placeholder-color);
 }
 
-.extra-network-pane .extra-network-control .extra-network-control--refresh-icon:active {
+.extra-network-control .extra-network-control--refresh-icon:active {
     -ms-transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
-- 
cgit v1.2.3


From 9f3ba383143e117601666e4711ceeff2dfda2526 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Thu, 1 Feb 2024 22:34:29 +0300
Subject: Add "Interrupting..." placeholder.

---
 style.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 4352737e..04b0a2fa 100644
--- a/style.css
+++ b/style.css
@@ -331,17 +331,17 @@ input[type="checkbox"].input-accordion-checkbox{
 .generate-box{
     position: relative;
 }
-.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt{
+.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt, .gradio-button.generate-box-interrupting{
     position: absolute;
     width: 50%;
     height: 100%;
     display: none;
     background: #b4c0cc;
 }
-.gradio-button.generate-box-skip:hover, .gradio-button.generate-box-interrupt:hover{
+.gradio-button.generate-box-skip:hover, .gradio-button.generate-box-interrupt:hover, .gradio-button.generate-box-interrupting:hover{
     background: #c2cfdb;
 }
-.gradio-button.generate-box-interrupt{
+.gradio-button.generate-box-interrupt, .gradio-button.generate-box-interrupting{
     left: 0;
     border-radius: 0.5rem 0 0 0.5rem;
 }
-- 
cgit v1.2.3


From 75833517604964942b5ecaf83d9056efc01bd9d2 Mon Sep 17 00:00:00 2001
From: w-e-w <40751091+w-e-w@users.noreply.github.com>
Date: Sat, 10 Feb 2024 18:09:10 +0900
Subject: extensions tab table row hover highlight

---
 style.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 04b0a2fa..988c28c0 100644
--- a/style.css
+++ b/style.css
@@ -846,6 +846,20 @@ table.popup-table .link{
     display: inline-block;
 }
 
+/* extensions tab table row hover highlight */
+
+#extensions tr:hover td,
+#config_state_extensions tr:hover td,
+#available_extensions tr:hover td {
+    background: rgba(0, 0, 0, 0.15)
+}
+
+.dark #extensions tr:hover td ,
+.dark #config_state_extensions tr:hover td ,
+.dark #available_extensions tr:hover td {
+    background: rgba(255, 255, 255, 0.15)
+}
+
 /* replace original footer with ours */
 
 footer {
-- 
cgit v1.2.3


From 13fd466c181e9d4e29eaa2430749ea35d5265393 Mon Sep 17 00:00:00 2001
From: w-e-w <40751091+w-e-w@users.noreply.github.com>
Date: Mon, 12 Feb 2024 04:07:14 +0900
Subject: fix extra-network-control--enabled color

also add forgotten semicolon
---
 style.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 988c28c0..a6b287b9 100644
--- a/style.css
+++ b/style.css
@@ -851,13 +851,13 @@ table.popup-table .link{
 #extensions tr:hover td,
 #config_state_extensions tr:hover td,
 #available_extensions tr:hover td {
-    background: rgba(0, 0, 0, 0.15)
+    background: rgba(0, 0, 0, 0.15);
 }
 
 .dark #extensions tr:hover td ,
 .dark #config_state_extensions tr:hover td ,
 .dark #available_extensions tr:hover td {
-    background: rgba(255, 255, 255, 0.15)
+    background: rgba(255, 255, 255, 0.15);
 }
 
 /* replace original footer with ours */
@@ -1513,12 +1513,12 @@ body.resizing .resize-handle {
     background-color: var(--input-placeholder-color);
 }
 
-.dark .extra-network-control .extra-network-control--enabled {
-    background-color: var(--neutral-700);
+.extra-network-control .extra-network-control--enabled {
+    background-color: rgba(0, 0, 0, 0.15);
 }
 
 .dark .extra-network-control .extra-network-control--enabled {
-    background-color: var(--neutral-300);
+    background-color: rgba(255, 255, 255, 0.15);
 }
 
 /* ==== REFRESH ICON ACTIONS ==== */
-- 
cgit v1.2.3


From 1466daeafc1cc9dcf0319012a6ec6129d51ebd2c Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Sat, 17 Feb 2024 10:31:16 +0300
Subject: Disable prompt token counters option actually disables token counting
 rather than just hiding results. Disable prompt token counters option does
 not require reload UI. token counters do not become visible until they are
 positioned correctly.

---
 style.css | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'style.css')

diff --git a/style.css b/style.css
index a6b287b9..8ce78ff0 100644
--- a/style.css
+++ b/style.css
@@ -222,6 +222,10 @@ input[type="checkbox"].input-accordion-checkbox{
     top: -0.75em;
 }
 
+.block.token-counter-visible{
+    display: block !important;
+}
+
 .block.token-counter span{
     background: var(--input-background-fill) !important;
     box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075);
-- 
cgit v1.2.3