From 1a3565f26c84ed82ef191effc70c5fa6e054e094 Mon Sep 17 00:00:00 2001
From: Alexandre Alapetite <alexandre@alapetite.fr>
Date: Tue, 25 Nov 2025 23:27:43 +0100
Subject: 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
---
 p/themes/Nord/nord.css     | 6 ++++++
 p/themes/Nord/nord.rtl.css | 6 ++++++
 2 files changed, 12 insertions(+)

(limited to 'p/themes/Nord')

diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 47769c786..7419de8ea 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -809,6 +809,12 @@ li.item.active {
 
 .flux.current {
 	background: var(--accent-bg);
+	border-left: 1px solid var(--highlight);
+}
+
+.flux.current > .flux_header {
+	background: linear-gradient(to right, transparent 0, transparent 1px, var(--accent-bg) 1px);
+	margin-left: -1px; /* Compensate increased border-left-width */
 }
 
 .flux:not(.current):hover .item .title {
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 5820aebdc..9b3232c79 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -809,6 +809,12 @@ li.item.active {
 
 .flux.current {
 	background: var(--accent-bg);
+	border-right: 1px solid var(--highlight);
+}
+
+.flux.current > .flux_header {
+	background: linear-gradient(to left, transparent 0, transparent 1px, var(--accent-bg) 1px);
+	margin-right: -1px; /* Compensate increased border-left-width */
 }
 
 .flux:not(.current):hover .item .title {
-- 
cgit v1.2.3