soaska/my-sd
soaska/my-sd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

fix bugs. introduce new ones.

Browse Source
This commit is contained in:
Sj-Si 2024-01-15 13:40:47 -05:00
parent 019f6e3c5a
commit d88424ef2a
4 changed files with 209 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
html/extra-networks-tree-button.html
View File

@ -1,11 +1,22 @@
<span data-filterable-item-text hidden>{search_terms}</span>
<button class="action-list-content action-list-content-file"
<button class="tree-list-content {subclass}"
expanded="false"
type="button"
onclick="extraNetworksTreeOnClick(event, '{tabname}', '{tab_id}');"
onclick="extraNetworksTreeOnClick(event, '{tabname}', '{tab_id}');{onclick_extra}"
>
<span class="action-list-item-visual action-list-item-visual--leading">🗎</span>
<span class="action-list-item-label action-list-item-label--truncate">{name}</span>
<span class="action-list-item-action action-list-item-action--trailing">
<div class="button-row">{copy_path_button}{metadata_button}{edit_button}</div>
<span class='tree-list-item-action tree-list-item-action--leading'>
{action_list_item_action_leading}
</span>
<span class="tree-list-item-visual tree-list-item-visual--leading">
{action_list_item_visual_leading}
</span>
<span class="tree-list-item-label tree-list-item-label--truncate">
{action_list_item_label}
</span>
<span class="tree-list-item-visual tree-list-item-visual--trailing">
{action_list_item_visual_trailing}
</span>
<span class="tree-list-item-action tree-list-item-action--trailing">
{action_list_item_action_trailing}
</span>
</button>

10
javascript/extraNetworks.js
View File

@ -267,7 +267,7 @@ function extraNetworksTreeProcessFileClick(event, btn, tabname, tab_id) {
* Processes `onclick` events when user clicks on files in tree.
*
* @param event The generated event.
* @param btn The clicked `action-list-item` button.
* @param btn The clicked `tree-list-item` button.
* @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
* @param tab_id The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
*/
@ -288,7 +288,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
* chevron is clicked: Directory is expanded or collapsed. Selected state unchanged.
*
* @param event The generated event.
* @param btn The clicked `action-list-item` button.
* @param btn The clicked `tree-list-item` button.
* @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
* @param tab_id The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
*/
@ -310,7 +310,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
function _remove_selected_from_all() {
// Removes the `selected` attribute from all buttons.
var sels = document.querySelectorAll("button.action-list-content");
var sels = document.querySelectorAll("button.tree-list-content");
[...sels].forEach(el => {
el.removeAttribute("selected");
});
@ -331,7 +331,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
// If user clicks on the chevron, then we do not select the folder.
if (true_targ.matches(".action-list-item-action--leading, .action-list-item-action-chevron")) {
if (true_targ.matches(".tree-list-item-action--leading, .tree-list-item-action-chevron")) {
_expand_or_collapse(ul, btn);
} else {
// User clicked anywhere else on the button.
@ -356,7 +356,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
function extraNetworksTreeOnClick(event, tabname, tab_id) {
/**
* Handles `onclick` events for buttons within an `extra-network-tree .action-list--tree`.
* Handles `onclick` events for buttons within an `extra-network-tree .tree-list--tree`.
*
* Determines whether the clicked button in the tree is for a file entry or a directory
* then calls the appropriate function.

187
modules/ui_extra_networks.py
View File

@ -20,28 +20,28 @@ allowed_dirs = set()
default_allowed_preview_extensions = ["png", "jpg", "jpeg", "webp", "gif"]
tree_tpl = (
"<div class='action-list-search'>"
"<div class='tree-list-search'>"
"<input "
"id='{tabname}_{tab_id}_extra_search' "
"class='action-list-search-text' "
"class='tree-list-search-text' "
"type='search' "
"placeholder='Filter files'"
">"
"</div>"
"<ul class='action-list action-list--tree'>"
"<ul class='tree-list tree-list--tree'>"
"{content}"
"</ul>"
)
tree_ul_tpl = (
"<ul class='action-list action-list--subgroup' data-hidden>"
"<ul class='tree-list tree-list--subgroup' data-hidden>"
"{content}"
"</ul>"
)
tree_li_dir_tpl = (
"<li "
"class='action-list-item action-list-item--has-subitem' "
"class='tree-list-item tree-list-item--has-subitem' "
"data-path='{path}' "
"data-tree-entry-type='dir'>"
"{content}"
@ -50,59 +50,19 @@ tree_li_dir_tpl = (
tree_li_file_tpl = (
"<li "
"id='file-tree-item-{hash}' "
"class='action-list-item action-list-item--subitem' "
"class='tree-list-item tree-list-item--subitem' "
"data-path='{path}' "
"data-tree-entry-type='file'>"
"{content}"
"</li>"
)
tree_btn_dir_tpl = (
"<button "
"class='action-list-content action-list-content-dir' "
"type='button' "
"expanded='false' "
"onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
"<span class='action-list-item-action action-list-item-action--leading'>"
"<i class='action-list-item-action-chevron'></i>"
action_list_item_action_leading = (
"<span class='tree-list-item-action tree-list-item-action--leading'>"
"<i class='tree-list-item-action-chevron'></i>"
"</span>"
"<span class='action-list-item-visual action-list-item-visual--leading'>🗀</span>"
"<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
"</button>"
)
tree_btn_file_action_buttons_tpl = (
"<div "
"class='copy-path-button card-button' "
"title='Copy path to clipboard' "
"onclick='extraNetworksCopyCardPath(event, {path})' "
"data-clipboard-text={path}>"
"</div>"
"<div "
"class='metadata-button card-button' "
"title='Show internal metadata' "
"onclick='extraNetworksRequestMetadata(event, {tab_id}, {filename})'>"
"</div>"
"<div "
"class='edit-button card-button' "
"title='Edit metadata' "
"onclick='extraNetworksEditUserMetadata(event, {tabname}, {tab_id}, {filename})'>"
"</div>"
)
tree_btn_file_tpl = (
"<span data-filterable-item-text hidden>{filter}</span>"
"<button "
"class='action-list-content action-list-content-file' "
"type='button' "
"onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
"<span class='action-list-item-visual action-list-item-visual--leading'>🗎</span>"
"<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
"<span class='action-list-item-action action-list-item-action--trailing'>{buttons}</span>"
"</button>"
)
@functools.cache
def allowed_preview_extensions_with_extra(extra_extensions=None):
return set(default_allowed_preview_extensions) | set(extra_extensions or [])
@ -243,7 +203,6 @@ class ExtraNetworksPage:
self.id_page = self.name.replace(" ", "_")
self.extra_networks_pane_template = shared.html("extra-networks-pane.html")
self.card_page_template = shared.html("extra-networks-card.html")
self.card_page_minimal_template = shared.html("extra-networks-card-minimal.html")
self.tree_button_template = shared.html("extra-networks-tree-button.html")
self.allow_prompt = True
self.allow_negative_prompt = False
@ -278,7 +237,12 @@ class ExtraNetworksPage:
return ""
def create_item_html(self, tabname: str, item: dict, template: Optional[str] = None) -> str:
def create_item_html(
self,
tabname: str,
item: dict,
template: Optional[str] = None,
) -> Union[str, dict]:
"""Generates HTML for a single ExtraNetworks Item
Args:
@ -301,19 +265,32 @@ class ExtraNetworksPage:
width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
onclick = item.get("onclick", None)
if onclick is None:
if "negative_prompt" in item:
onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {item["negative_prompt"]}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
else:
onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {'""'}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
print("HERE")
print("TABNAME:", tabname)
print("PROMPT:", item["prompt"])
print("NEG_PROMPT:", item.get("negative_prompt", ""))
print("ALLOW_NEG:", self.allow_negative_prompt)
onclick_js_tpl = "cardClicked('{tabname}', '{prompt}', '{neg_prompt}', '{allow_neg}');"
onclick = onclick_js_tpl.format(
**{
"tabname": tabname,
"prompt": item["prompt"],
"neg_prompt": item.get("negative_prompt", ""),
"allow_neg": "true" if self.allow_negative_prompt else "false"
}
)
onclick = html.escape(onclick)
copy_path_button = f"<div class='copy-path-button card-button' title='Copy path to clipboard' onclick='extraNetworksCopyCardPath(event, {quote_js(item['filename'])})' data-clipboard-text='{quote_js(item['filename'])}'></div>"
metadata_button = ""
metadata = item.get("metadata")
if metadata:
metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.name)}, {quote_js(html.escape(item['name']))})'></div>"
metadata_button = f"<div class='metadata-button card-button' title='Show internal metadata' onclick='extraNetworksRequestMetadata(event, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
edit_button = f"<div class='edit-button card-button' title='Edit metadata' onclick='extraNetworksEditUserMetadata(event, {quote_js(tabname)}, {quote_js(self.id_page)}, {quote_js(html.escape(item['name']))})'></div>"
@ -335,7 +312,12 @@ class ExtraNetworksPage:
if search_only and shared.opts.extra_networks_hidden_models == "Never":
return ""
sort_keys = " ".join([f'data-sort-{k}="{html.escape(str(v))}"' for k, v in item.get("sort_keys", {}).items()]).strip()
sort_keys = " ".join(
[
f'data-sort-{k}="{html.escape(str(v))}"'
for k, v in item.get("sort_keys", {}).items()
]
).strip()
search_terms_html = ""
search_term_template = "<span style='{style}' class='{class}'>{search_term}</span>"
@ -366,13 +348,12 @@ class ExtraNetworksPage:
"style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
"tabname": tabname,
"tab_id": self.id_page,
}
if template:
return template.format(**args)
else:
return self.card_page.format(**args)
return args
def create_tree_view_html(self, tabname: str) -> str:
"""Generates HTML for displaying folders in a tree view.
@ -393,73 +374,94 @@ class ExtraNetworksPage:
if not tree:
return res
def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> Optional[str]:
"""Recursively builds HTML for a tree."""
_res = ""
if not data:
return (
"<details open disabled class='folder-item-empty'>"
"<summary class='folder-item-summary-empty'>Directory is empty</summary>"
"</details>"
)
return None
# Lists for storing <li> items html for directories and files separately.
_dir_li = []
_file_li = []
for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
if isinstance(v, (ExtraNetworksItem,)):
_action_buttons = tree_btn_file_action_buttons_tpl.format(
**{
"path": quote_js(k),
"filename": quote_js(v.item["name"]),
"tabname": quote_js(tabname),
"tab_id": quote_js(self.id_page),
}
_item_html_args = self.create_item_html(tabname, v.item)
_action_buttons = "".join(
[
_item_html_args["copy_path_button"],
_item_html_args["metadata_button"],
_item_html_args["edit_button"],
]
)
_btn = tree_btn_file_tpl.format(
_action_buttons = f"<div class=\"button-row\">{_action_buttons}</div>"
_btn = self.tree_button_template.format(
**{
"label": v.item["name"],
"filter": v.item["search_terms"],
"search_terms": "",
"subclass": "tree-list-content-file",
"tabname": tabname,
"tab_id": self.id_page,
"buttons": _action_buttons,
"onclick_extra": _item_html_args["card_clicked"],
"action_list_item_action_leading": action_list_item_action_leading,
"action_list_item_visual_leading": "🗎",
"action_list_item_label": v.item["name"],
"action_list_item_visual_trailing": "",
"action_list_item_action_trailing": _action_buttons,
}
)
_li = tree_li_file_tpl.format(
**{
"hash": v.item["shorthash"],
"path": k,
"type": "file",
#"content": _btn,
"content": self.create_item_html(tabname, v.item, self.tree_button_template),
"content": _btn,
}
)
_res += _li
#item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
#_res += file_template.format(**{"card": item_html})
_file_li.append(_li)
else:
_btn = tree_btn_dir_tpl.format(
_btn = self.tree_button_template.format(
**{
"label": os.path.basename(k),
"search_terms": "",
"subclass": "tree-list-content-dir",
"tabname": tabname,
"tab_id": self.id_page,
"onclick_extra": "",
"action_list_item_action_leading": action_list_item_action_leading,
"action_list_item_visual_leading": "🗀",
"action_list_item_label": os.path.basename(k),
"action_list_item_visual_trailing": "",
"action_list_item_action_trailing": "",
}
)
_ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
_li = tree_li_dir_tpl.format(**{"content": _btn + _ul, "path": k})
_res += _li
return _res
_dir_li.append(_li)
# Directories should always be displayed before files.
return "".join(_dir_li) + "".join(_file_li)
# Add each root directory to the tree.
for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
# If root is empty, append the "disabled" attribute to the template details tag.
btn = tree_btn_dir_tpl.format(
btn = self.tree_button_template.format(
**{
"label": os.path.basename(k),
"search_terms": "",
"subclass": "tree-list-content-dir",
"tabname": tabname,
"tab_id": self.id_page,
"onclick_extra": "",
"action_list_item_action_leading": action_list_item_action_leading,
"action_list_item_visual_leading": "🗀",
"action_list_item_label": os.path.basename(k),
"action_list_item_visual_trailing": "",
"action_list_item_action_trailing": "",
}
)
ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
res += li
subtree = _build_tree(v)
if subtree:
ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
res += li
return tree_tpl.format(
**{
@ -473,6 +475,7 @@ class ExtraNetworksPage:
res = ""
self.items = {x["name"]: x for x in self.list_items()}
for item in self.items.values():
print("HEEEERRE:", item)
res += self.create_item_html(tabname, item, self.card_page_template)
if res == "":

185
style.css
View File

@ -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 {}
.dark .extra-network-tree button.action-list-content:hover {
/* 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.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;
}
.extra-network-tree .action-list-item-action .button-row {
display: flex;
flex-grow: 1;
}
.extra-network-tree .action-list-content .button-row {
display: inline-flex;
visibility: hidden !important;
color: white;
}
.extra-network-tree .action-list-content:hover .button-row {
.extra-network-tree .tree-list-content .button-row {
display: inline-flex;
visibility: hidden;
color: var(--button-secondary-text-color);
}
.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;