Improved: Feed aside bar more improvements (#6746)

* fix background color of category toggler

* nord theme

* adark theme

* dark pink theme

8 files changed, 70 insertions, 2 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 1d7c53c62..8ee148c47 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -503,6 +503,14 @@ kbd {
 	filter: brightness(2);
 }
 
+.tree-folder-title:hover button.dropdown-toggle .icon {
+	filter: inherit;
+}
+
+.tree-folder-title button.dropdown-toggle:hover .icon {
+	filter: brightness(2);
+}
+
 .tree-folder-title .title {
 	background: inherit;
 	color: var(--font-color-middle);
@@ -604,6 +612,11 @@ kbd {
 	color: var(--font-color-light);
 }
 
+.aside_feed .tree-folder-title button.dropdown-toggle {
+	margin: -0.75rem 0 -0.75rem -0.75rem;
+	padding: 0.75rem 0 0.75rem 0.75rem;
+}
+
 /*=== Aside main page (feeds) */
 .feed.item.empty.active,
 .feed.item.empty.active > a {
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 08de1ba86..c6ce1fd1f 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -503,6 +503,14 @@ kbd {
 	filter: brightness(2);
 }
 
+.tree-folder-title:hover button.dropdown-toggle .icon {
+	filter: inherit;
+}
+
+.tree-folder-title button.dropdown-toggle:hover .icon {
+	filter: brightness(2);
+}
+
 .tree-folder-title .title {
 	background: inherit;
 	color: var(--font-color-middle);
@@ -604,6 +612,11 @@ kbd {
 	color: var(--font-color-light);
 }
 
+.aside_feed .tree-folder-title button.dropdown-toggle {
+	margin: -0.75rem -0.75rem -0.75rem 0;
+	padding: 0.75rem 0.75rem 0.75rem 0;
+}
+
 /*=== Aside main page (feeds) */
 .feed.item.empty.active,
 .feed.item.empty.active > a {
diff --git a/p/themes/Dark-pink/pinkdark.css b/p/themes/Dark-pink/pinkdark.css
index 1d8e6e855..e73bbebac 100644
--- a/p/themes/Dark-pink/pinkdark.css
+++ b/p/themes/Dark-pink/pinkdark.css
@@ -31,6 +31,14 @@
 	color: #ffb6c1;
 }
 
+.tree-folder-title:hover button.dropdown-toggle .icon {
+	filter: sepia(21%) brightness(44%) hue-rotate(112deg) saturate(1000%) contrast(132%) invert(100%);
+}
+
+.tree-folder-title button.dropdown-toggle:hover .icon {
+	filter: sepia(21%) brightness(94%) hue-rotate(112deg) saturate(1000%) contrast(132%) invert(100%)
+}
+
 .aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
 .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
 	background-color: #000;
diff --git a/p/themes/Dark-pink/pinkdark.rtl.css b/p/themes/Dark-pink/pinkdark.rtl.css
index 03161d0b0..43e1ee485 100644
--- a/p/themes/Dark-pink/pinkdark.rtl.css
+++ b/p/themes/Dark-pink/pinkdark.rtl.css
@@ -31,6 +31,14 @@
 	color: #ffb6c1;
 }
 
+.tree-folder-title:hover button.dropdown-toggle .icon {
+	filter: sepia(21%) brightness(44%) hue-rotate(112deg) saturate(1000%) contrast(132%) invert(100%);
+}
+
+.tree-folder-title button.dropdown-toggle:hover .icon {
+	filter: sepia(21%) brightness(94%) hue-rotate(112deg) saturate(1000%) contrast(132%) invert(100%)
+}
+
 .aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
 .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
 	background-color: #000;
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 2d0cd16e0..1a7143eaf 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -559,6 +559,14 @@ img.favicon {
 	background: inherit;
 }
 
+.tree-folder-title:hover button.dropdown-toggle .icon {
+	filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%);
+}
+
+.tree-folder-title button.dropdown-toggle:hover .icon {
+	filter: invert(86%) sepia(8%) saturate(1976%) hue-rotate(159deg) brightness(180%) contrast(100%);
+}
+
 .tree-folder.category {
 	border-bottom: 1px solid var(--main-background);
 }
@@ -680,6 +688,11 @@ img.favicon {
 	right: 33px;
 }
 
+.aside_feed .tree-folder-title button.dropdown-toggle {
+	margin: -0.5rem 0 -0.5rem -0.75rem;
+	padding: 0.5rem 0 0.5rem 0.75rem;
+}
+
 .aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
 .aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
 .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 6786097d5..fd78bb277 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -559,6 +559,14 @@ img.favicon {
 	background: inherit;
 }
 
+.tree-folder-title:hover button.dropdown-toggle .icon {
+	filter: invert(74%) sepia(29%) saturate(411%) hue-rotate(171deg) brightness(130%) contrast(85%);
+}
+
+.tree-folder-title button.dropdown-toggle:hover .icon {
+	filter: invert(86%) sepia(8%) saturate(1976%) hue-rotate(159deg) brightness(180%) contrast(100%);
+}
+
 .tree-folder.category {
 	border-bottom: 1px solid var(--main-background);
 }
@@ -680,6 +688,11 @@ img.favicon {
 	left: 33px;
 }
 
+.aside_feed .tree-folder-title button.dropdown-toggle {
+	margin: -0.5rem -0.75rem -0.5rem 0;
+	padding: 0.5rem 0.75rem 0.5rem 0;
+}
+
 .aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
 .aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
 .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index fa2fa8146..2ac7dae9c 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1173,7 +1173,7 @@ input[type="search"] {
 .aside_feed .tree-folder-title button.dropdown-toggle {
 	padding: 0;
 	border: 0;
-	background-color: inherit;
+	background-color: transparent;
 	cursor: pointer;
 }
 
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 0a7d94fd1..b1ad5b7f6 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1173,7 +1173,7 @@ input[type="search"] {
 .aside_feed .tree-folder-title button.dropdown-toggle {
 	padding: 0;
 	border: 0;
-	background-color: inherit;
+	background-color: transparent;
 	cursor: pointer;
 }