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 */
-.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 {
}
/* 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,');
}
-.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,');
}
-.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,');
}
-.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,');
}
/* ==== 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,');
}
-.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,');
}
/* ==== 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,');
@@ -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,');
@@ -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