Themes fix CSS .as-link (#7526)

* Themes fix CSS .as-link
Add missing rules.
fix https://github.com/FreshRSS/FreshRSS/pull/7489#issuecomment-2781146577

* More fixes

27 files changed, 135 insertions, 67 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 5f3b468dd..fa0b45dec 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -295,25 +295,30 @@ th {
 	line-height: 2.5;
 }
 
-.nav-list .item a {
+.nav-list .item a,
+.nav-list .item .as-link {
 	color: var(--font-color-middle);
 }
 
-.nav-list .item a:hover {
+.nav-list .item a:hover,
+.nav-list .item .as-link:hover {
 	background-color: var(--background-color-hover);
 	color: var(--font-color-light);
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	background-color: var(--background-color-dark);
 	color: var(--font-color-light);
 }
 
-.nav-list .item > a {
+.nav-list .item > a,
+.nav-list .item > .as-link {
 	padding: 0 1rem;
 }
 
-.nav-list a:hover {
+.nav-list a:hover,
+.nav-list .as-link:hover {
 	text-decoration: none;
 }
 
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 7be9f71a5..5cabd1f24 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -295,25 +295,30 @@ th {
 	line-height: 2.5;
 }
 
-.nav-list .item a {
+.nav-list .item a,
+.nav-list .item .as-link {
 	color: var(--font-color-middle);
 }
 
-.nav-list .item a:hover {
+.nav-list .item a:hover,
+.nav-list .item .as-link:hover {
 	background-color: var(--background-color-hover);
 	color: var(--font-color-light);
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	background-color: var(--background-color-dark);
 	color: var(--font-color-light);
 }
 
-.nav-list .item > a {
+.nav-list .item > a,
+.nav-list .item > .as-link {
 	padding: 0 1rem;
 }
 
-.nav-list a:hover {
+.nav-list a:hover,
+.nav-list .as-link:hover {
 	text-decoration: none;
 }
 
diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.scss
index 96554fdbf..0f060e399 100644
--- a/p/themes/Ansum/_sidebar.scss
+++ b/p/themes/Ansum/_sidebar.scss
@@ -203,7 +203,8 @@
 			background: variables.$main-first;
 			color: variables.$white;
 
-			a {
+			a,
+			.as-link {
 				background: variables.$main-first;
 				color: variables.$white;
 				text-decoration: none;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index adf93cb19..6c90e7b4c 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -614,7 +614,8 @@ th {
 	background: #ca7227;
 	color: #fff;
 }
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	background: #ca7227;
 	color: #fff;
 	text-decoration: none;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 89e6146c0..dd7fb6158 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -614,7 +614,8 @@ th {
 	background: #ca7227;
 	color: #fff;
 }
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	background: #ca7227;
 	color: #fff;
 	text-decoration: none;
diff --git a/p/themes/Dark-pink/pinkdark.css b/p/themes/Dark-pink/pinkdark.css
index 8df5a7f23..ae02a8a51 100644
--- a/p/themes/Dark-pink/pinkdark.css
+++ b/p/themes/Dark-pink/pinkdark.css
@@ -23,7 +23,8 @@
 	background-color: #ffb6c1;
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: #ffb6c1;
 }
 
diff --git a/p/themes/Dark-pink/pinkdark.rtl.css b/p/themes/Dark-pink/pinkdark.rtl.css
index 9a790cf68..1f4b31ff8 100644
--- a/p/themes/Dark-pink/pinkdark.rtl.css
+++ b/p/themes/Dark-pink/pinkdark.rtl.css
@@ -23,7 +23,8 @@
 	background-color: #ffb6c1;
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: #ffb6c1;
 }
 
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 9ba1bb5a1..412ff9cd4 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -259,12 +259,14 @@ button.as-link[disabled] {
 }
 
 .nav-list .nav-section .item.active:hover a,
+.nav-list .nav-section .item.active:hover .as-link,
 .nav-list .item.active {
 	color: var(--font-color-link-hover);
 	background-color: var(--background-color-hover);
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: var(--font-color-link-hover);
 }
 
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 7bba4c43e..aead74393 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -259,12 +259,14 @@ button.as-link[disabled] {
 }
 
 .nav-list .nav-section .item.active:hover a,
+.nav-list .nav-section .item.active:hover .as-link,
 .nav-list .item.active {
 	color: var(--font-color-link-hover);
 	background-color: var(--background-color-hover);
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: var(--font-color-link-hover);
 }
 
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 0e110ba35..ecacf749e 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -257,12 +257,14 @@ th {
 }
 
 .nav-list .item a:hover,
+.nav-list .item .as-link:hover,
 .nav-list .item.active {
 	background: #2980b9;
 	color: #fff;
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: #fff;
 }
 
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 6407ff47a..fcac93e01 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -257,12 +257,14 @@ th {
 }
 
 .nav-list .item a:hover,
+.nav-list .item .as-link:hover,
 .nav-list .item.active {
 	background: #2980b9;
 	color: #fff;
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: #fff;
 }
 
diff --git a/p/themes/Mapco/_sidebar.scss b/p/themes/Mapco/_sidebar.scss
index 514f81fb1..c6588d235 100644
--- a/p/themes/Mapco/_sidebar.scss
+++ b/p/themes/Mapco/_sidebar.scss
@@ -200,7 +200,7 @@
 			background: variables.$main-first;
 			color: variables.$white;
 
-			a {
+			a, .as-link {
 				background: variables.$main-first;
 				color: variables.$white;
 				text-decoration: none;
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 090d7caad..007fcb510 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -626,7 +626,7 @@ th {
 	background: #36c;
 	color: #fff;
 }
-.nav-list .item.active a {
+.nav-list .item.active a, .nav-list .item.active .as-link {
 	background: #36c;
 	color: #fff;
 	text-decoration: none;
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 52a953317..ebd8e42f7 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -626,7 +626,7 @@ th {
 	background: #36c;
 	color: #fff;
 }
-.nav-list .item.active a {
+.nav-list .item.active a, .nav-list .item.active .as-link {
 	background: #36c;
 	color: #fff;
 	text-decoration: none;
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index fe56f5bff..f6f6ebdfa 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -86,11 +86,11 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, .as-link, button.as-link {
 	color: var(--accent);
 }
 
-a:hover {
+a:hover, .as-link:hover, button.as-link:hover {
 	color: var(--highlight);
 }
 
@@ -652,12 +652,14 @@ img.favicon {
 	text-align: center;
 }
 
-.aside.nav-list .nav-section .item.active a {
+.aside.nav-list .nav-section .item.active a,
+.aside.nav-list .nav-section .item.active .as-link {
 	color: var(--highlight);
 	font-weight: bold;
 }
 
-.aside.nav-list .nav-section .item a:hover {
+.aside.nav-list .nav-section .item a:hover,
+.aside.nav-list .nav-section .item .as-link:hover {
 	background-color: var(--main-background);
 	color: var(--text-default);
 	transition: .2s;
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 5ef30aac1..1822a48b6 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -86,11 +86,11 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, .as-link, button.as-link {
 	color: var(--accent);
 }
 
-a:hover {
+a:hover, .as-link:hover, button.as-link:hover {
 	color: var(--highlight);
 }
 
@@ -652,12 +652,14 @@ img.favicon {
 	text-align: center;
 }
 
-.aside.nav-list .nav-section .item.active a {
+.aside.nav-list .nav-section .item.active a,
+.aside.nav-list .nav-section .item.active .as-link {
 	color: var(--highlight);
 	font-weight: bold;
 }
 
-.aside.nav-list .nav-section .item a:hover {
+.aside.nav-list .nav-section .item a:hover,
+.aside.nav-list .nav-section .item .as-link:hover {
 	background-color: var(--main-background);
 	color: var(--text-default);
 	transition: .2s;
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 79266987c..8f405ea19 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -373,18 +373,21 @@ a:hover .icon {
 	line-height: 2.5;
 }
 
-.nav-list .nav-section .item:hover a {
+.nav-list .nav-section .item:hover a,
+.nav-list .nav-section .item:hover .as-link {
 	background-color: var(--background-color-hover);
 	color: var(--font-color-link-hover);
 }
 
 .nav-list .nav-section .item.active:hover a,
+.nav-list .nav-section .item.active:hover .as-link,
 .nav-list .item.active {
 	background-color: var(--contrast-background-color-active);
 	color: var(--font-color-light);
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: var(--font-color-light);
 }
 
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index a745c388d..4f5f3bc45 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -373,18 +373,21 @@ a:hover .icon {
 	line-height: 2.5;
 }
 
-.nav-list .nav-section .item:hover a {
+.nav-list .nav-section .item:hover a,
+.nav-list .nav-section .item:hover .as-link {
 	background-color: var(--background-color-hover);
 	color: var(--font-color-link-hover);
 }
 
 .nav-list .nav-section .item.active:hover a,
+.nav-list .nav-section .item.active:hover .as-link,
 .nav-list .item.active {
 	background-color: var(--contrast-background-color-active);
 	color: var(--font-color-light);
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: var(--font-color-light);
 }
 
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 19cc016fb..ffaff8cf8 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -95,7 +95,7 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, .as-link, button.as-link {
 	color: var(--font-color-link-general);
 	outline: none;
 }
@@ -302,18 +302,21 @@ th {
 	line-height: 2.5;
 }
 
-.nav-list .item a:hover {
+.nav-list .item a:hover,
+.nav-list .item .as-link:hover {
 	color: var(--font-color-link-general-hover);
 	background-color: var(--background-color-grey-hover);
 }
 
 .nav-list .item.active,
-.nav-list .item.active a:hover {
+.nav-list .item.active a:hover,
+.nav-list .item.active .as-link:hover {
 	background-color: var(--background-color-navlist-active);
 	color: var(--font-color-white);
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: var(--font-color-white);
 }
 
@@ -322,7 +325,8 @@ th {
 	padding: 0 1rem;
 }
 
-.nav-list a:hover {
+.nav-list a:hover,
+.nav-list .as-link:hover {
 	text-decoration: none;
 }
 
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index d3ec1a1ce..1c2e2a299 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -95,7 +95,7 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, .as-link, button.as-link {
 	color: var(--font-color-link-general);
 	outline: none;
 }
@@ -302,18 +302,21 @@ th {
 	line-height: 2.5;
 }
 
-.nav-list .item a:hover {
+.nav-list .item a:hover,
+.nav-list .item .as-link:hover {
 	color: var(--font-color-link-general-hover);
 	background-color: var(--background-color-grey-hover);
 }
 
 .nav-list .item.active,
-.nav-list .item.active a:hover {
+.nav-list .item.active a:hover,
+.nav-list .item.active .as-link:hover {
 	background-color: var(--background-color-navlist-active);
 	color: var(--font-color-white);
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: var(--font-color-white);
 }
 
@@ -322,7 +325,8 @@ th {
 	padding: 0 1rem;
 }
 
-.nav-list a:hover {
+.nav-list a:hover,
+.nav-list .as-link:hover {
 	text-decoration: none;
 }
 
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 302659e00..1d42e9160 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -269,7 +269,8 @@ form th {
 	background: var(--color-background-nav-darker);
 	color: var(--color-text-light);
 }
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: var(--color-text-light);
 }
 .nav-list .item > a,
@@ -283,7 +284,8 @@ form th {
 	padding: 3px;
 	text-align: center;
 }
-.nav-list a:hover {
+.nav-list a:hover,
+.nav-list .as-link:hover {
 	text-decoration: none;
 }
 
@@ -300,12 +302,14 @@ form th {
 	font-weight: bold;
 	color: var(--color-text-light);
 }
-.dropdown-menu .dropdown-header a {
+.dropdown-menu .dropdown-header a,
+.dropdown-menu .dropdown-header .as-link {
 	padding: 0 5px;
 	position: absolute;
 	right: 5px;
 }
-.dropdown-menu .dropdown-header a:hover {
+.dropdown-menu .dropdown-header a:hover,
+.dropdown-menu .dropdown-header .as-link:hover {
 	background-color: var(--color-background-nav);
 }
 .dropdown-menu .dropdown-section .dropdown-section-title {
@@ -314,10 +318,12 @@ form th {
 	font-weight: bold;
 	color: var(--color-text-light);
 }
-.dropdown-menu .dropdown-section .item a {
+.dropdown-menu .dropdown-section .item a,
+.dropdown-menu .dropdown-section .item .as-link {
 	padding: 0 22px;
 }
-.dropdown-menu .dropdown-section .item a:hover {
+.dropdown-menu .dropdown-section .item a:hover,
+.dropdown-menu .dropdown-section .item .as-link:hover {
 	background-color: var(--color-background-nav);
 }
 .dropdown-menu > .item {
@@ -706,7 +712,8 @@ form th {
 	display: none;
 }
 
-.nav a {
+.nav a,
+.nav .as-link {
 	color: var(--color-text-light);
 }
 
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index fd5559149..261c3b197 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -269,7 +269,8 @@ form th {
 	background: var(--color-background-nav-darker);
 	color: var(--color-text-light);
 }
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 	color: var(--color-text-light);
 }
 .nav-list .item > a,
@@ -283,7 +284,8 @@ form th {
 	padding: 3px;
 	text-align: center;
 }
-.nav-list a:hover {
+.nav-list a:hover,
+.nav-list .as-link:hover {
 	text-decoration: none;
 }
 
@@ -300,12 +302,14 @@ form th {
 	font-weight: bold;
 	color: var(--color-text-light);
 }
-.dropdown-menu .dropdown-header a {
+.dropdown-menu .dropdown-header a,
+.dropdown-menu .dropdown-header .as-link {
 	padding: 0 5px;
 	position: absolute;
 	left: 5px;
 }
-.dropdown-menu .dropdown-header a:hover {
+.dropdown-menu .dropdown-header a:hover,
+.dropdown-menu .dropdown-header .as-link:hover {
 	background-color: var(--color-background-nav);
 }
 .dropdown-menu .dropdown-section .dropdown-section-title {
@@ -314,10 +318,12 @@ form th {
 	font-weight: bold;
 	color: var(--color-text-light);
 }
-.dropdown-menu .dropdown-section .item a {
+.dropdown-menu .dropdown-section .item a,
+.dropdown-menu .dropdown-section .item .as-link {
 	padding: 0 22px;
 }
-.dropdown-menu .dropdown-section .item a:hover {
+.dropdown-menu .dropdown-section .item a:hover,
+.dropdown-menu .dropdown-section .item .as-link:hover {
 	background-color: var(--color-background-nav);
 }
 .dropdown-menu > .item {
@@ -706,7 +712,8 @@ form th {
 	display: none;
 }
 
-.nav a {
+.nav a,
+.nav .as-link {
 	color: var(--color-text-light);
 }
 
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index c6917c0f2..52987664d 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -348,7 +348,8 @@ form {
 			background: var(--color-background-nav-darker);
 			color: var(--color-text-light);
 
-			a {
+			a,
+			.as-link {
 				color: var(--color-text-light);
 			}
 		}
@@ -368,7 +369,8 @@ form {
 		text-align: center;
 	}
 
-	a:hover {
+	a:hover,
+	.as-link:hover {
 		text-decoration: none;
 	}
 }
@@ -386,7 +388,8 @@ form {
 		font-weight: bold;
 		color: var(--color-text-light);
 
-		a {
+		a,
+		.as-link {
 			padding: 0 5px;
 			position: absolute;
 			right: 5px;
@@ -406,7 +409,8 @@ form {
 		}
 
 		.item {
-			a {
+			a,
+			.as-link {
 				padding: 0 22px;
 
 				&:hover {
@@ -915,7 +919,8 @@ form {
 }
 
 .nav {
-	a {
+	a,
+	.as-link {
 		color: var(--color-text-light);
 	}
 }
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index a19fd86b7..68e4f34a7 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -171,13 +171,15 @@ th {
 .nav-list .item:hover {
 }
 
-.nav-list .item:hover a {
+.nav-list .item:hover a,
+.nav-list .item:hover .as-link {
 }
 
 .nav-list .item.active {
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 }
 
 .nav-list .item > a,
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index 869e2f5fe..9b2880bd5 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -171,13 +171,15 @@ th {
 .nav-list .item:hover {
 }
 
-.nav-list .item:hover a {
+.nav-list .item:hover a,
+.nav-list .item:hover .as-link {
 }
 
 .nav-list .item.active {
 }
 
-.nav-list .item.active a {
+.nav-list .item.active a,
+.nav-list .item.active .as-link {
 }
 
 .nav-list .item > a,
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 8d8b48bfb..4e6a1d4fc 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -400,6 +400,7 @@ button.as-link:active {
 	border: none;
 	cursor: pointer;
 	text-align: left;
+	line-height: inherit;
 }
 
 button.as-link[disabled] {
@@ -678,6 +679,7 @@ input[type="checkbox"]:focus-visible {
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	width: 100%;
 }
 
 .nav-list .item.nav-section > ul {
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index ba33893be..67c247b62 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -400,6 +400,7 @@ button.as-link:active {
 	border: none;
 	cursor: pointer;
 	text-align: right;
+	line-height: inherit;
 }
 
 button.as-link[disabled] {
@@ -678,6 +679,7 @@ input[type="checkbox"]:focus-visible {
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	width: 100%;
 }
 
 .nav-list .item.nav-section > ul {