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

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;
 }
 

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;
 }
 

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;

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;

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;

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;
 }
 

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;
 }
 

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);
 }
 

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);
 }
 

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;
 }
 

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;
 }
 

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;

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;

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;

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;

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;

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);
 }
 

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);
 }
 

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;
 }
 

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;
 }
 

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);
 }
 

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);
 }
 

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);
 	}
 }

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,

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,

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 {

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 {