More visible selected article (#8230)

There was not enough difference between selected and not-selected articles, especially not due to hovering using the same style.
Already relevant as is, and more relevant for a future feature depending on selected article.
Additional help welcome to further improve the styling, in this PR or a future one, also for the other themes.

In this example, the third article is the one selected:

<img width="443" height="189" alt="image" src="https://github.com/user-attachments/assets/06168e9f-1b91-47e2-9b64-4fd8ca6c7186" />

* Compensate the increased border-left-width

* Implement in Pafat

* Implement in Nord

* Shorten comment

* Implement in Alternative Dark

* Implement for Flat

* Implement for Swage

* Implement in Ansum and Mapco

* Call stylelint_fix before rtlcss
So that RTLCSS includes the fixes from previous step

2 files changed, 28 insertions, 4 deletions

diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 4d03c5955..592f49167 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -995,8 +995,7 @@ main.post .drop-section li.item.feed a:hover .icon {
 		clear: both;
 	}
 
-	.flux_header:hover,
-	.current {
+	.flux_header:hover {
 		background-color: var(--color-background-hover);
 
 		&:not(.current):hover .item .title {
@@ -1004,6 +1003,19 @@ main.post .drop-section li.item.feed a:hover .icon {
 		}
 	}
 
+	&.current {
+		border-left: 2px solid var(--color-background-alert-darker);
+
+		.flux_header {
+			background-color: unset;
+			margin-left: -2px; /* Compensate increased border-left-width */
+		}
+
+		.flux_header:hover {
+			background: linear-gradient(to right, transparent 0, transparent 2px, var(--color-background-hover) 2px);
+		}
+	}
+
 	&.favorite:not(.current) {
 		background-color: var(--color-background-stared);
 
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index f6b55232a..345622b82 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -995,8 +995,7 @@ main.post .drop-section li.item.feed a:hover .icon {
 		clear: both;
 	}
 
-	.flux_header:hover,
-	.current {
+	.flux_header:hover {
 		background-color: var(--color-background-hover);
 
 		&:not(.current):hover .item .title {
@@ -1004,6 +1003,19 @@ main.post .drop-section li.item.feed a:hover .icon {
 		}
 	}
 
+	&.current {
+		border-right: 2px solid var(--color-background-alert-darker);
+
+		.flux_header {
+			background-color: unset;
+			margin-right: -2px; /* Compensate increased border-left-width */
+		}
+
+		.flux_header:hover {
+			background: linear-gradient(to left, transparent 0, transparent 2px, var(--color-background-hover) 2px);
+		}
+	}
+
 	&.favorite:not(.current) {
 		background-color: var(--color-background-stared);