fix: highlight next/prev article while using shortcuts (#5211)

* fix

* Update p/themes/Ansum/ansum.css

Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>

* fix

---------

Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>

9 files changed, 46 insertions, 22 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 6b5d2a0d9..3f920ca02 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -42,6 +42,8 @@
 	--notification-bad-background-color: #fdd;
 	--notification-bad-font-color: #912621;
 	--notification-bad-border-color: #ecc;
+
+	--frss-box-shadow-color-transparent: #bbb3;
 }
 
 html, body {
@@ -755,6 +757,10 @@ kbd {
 	background: var(--background-color-hover);
 }
 
+.flux.current:not(.active) {
+	background: var(--background-color-hover);
+}
+
 .flux .item.title a {
 	color: var(--font-color-light);
 }
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 0f24a580b..5f6ef31b9 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -42,6 +42,8 @@
 	--notification-bad-background-color: #fdd;
 	--notification-bad-font-color: #912621;
 	--notification-bad-border-color: #ecc;
+
+	--frss-box-shadow-color-transparent: #bbb3;
 }
 
 html, body {
@@ -755,6 +757,10 @@ kbd {
 	background: var(--background-color-hover);
 }
 
+.flux.current:not(.active) {
+	background: var(--background-color-hover);
+}
+
 .flux .item.title a {
 	color: var(--font-color-light);
 }
diff --git a/p/themes/Ansum/_list-view.scss b/p/themes/Ansum/_list-view.scss
index 1ffd68dc7..ed24e8675 100644
--- a/p/themes/Ansum/_list-view.scss
+++ b/p/themes/Ansum/_list-view.scss
@@ -24,6 +24,10 @@
 	&.current {
 		background: variables.$white;
 		border-left-color: variables.$main-first;
+
+		&:not(.active) {
+			background: variables.$grey-lighter;
+		}
 	}
 
 	&.not_read:not(.current) {
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 709861e18..ad73eb7f1 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -980,6 +980,9 @@ main.prompt {
 	background: #fff;
 	border-left-color: #ca7227;
 }
+.flux.current:not(.active) {
+	background: #fcfaf8;
+}
 .flux.not_read:not(.current) {
 	background: #f2f6f8;
 }
@@ -1309,5 +1312,3 @@ a, button.as-link {
 	outline: none;
 	color: #ca7227;
 }
-
-/*# sourceMappingURL=ansum.css.map */
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index ad480c952..2e961a911 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -980,6 +980,9 @@ main.prompt {
 	background: #fff;
 	border-right-color: #ca7227;
 }
+.flux.current:not(.active) {
+	background: #fcfaf8;
+}
 .flux.not_read:not(.current) {
 	background: #f2f6f8;
 }
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index f66188b35..3d0ab4827 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -835,13 +835,12 @@ a.btn-attention:hover {
 	border-left: 2px solid var(--contrast-border-color-active);
 }
 
-.flux .flux_header:hover,
-.flux .flux_header:hover .item {
+.flux .flux_header:hover {
 	background-color: var(--background-color-hover);
 }
 
 .flux .flux_header:not(.current):hover .flux_header,
-.flux .flux_header:not(.current):hover .flux_header .item {
+.flux.current .flux_header {
 	background-color: var(--background-color-hover);
 }
 
@@ -849,12 +848,12 @@ a.btn-attention:hover {
 	border-left: 2px solid var(--unread-article-border-color);
 }
 
-.flux.not_read .flux_header .item {
+.flux.not_read .flux_header {
 	background-color: var(--unread-article-background-color);
 }
 
 .flux.not_read:not(.current):hover .flux_header,
-.flux.not_read:not(.current):hover .flux_header .item {
+.flux.not_read.current .flux_header {
 	background-color: var(--unread-article-background-color-hover);
 }
 
@@ -862,12 +861,12 @@ a.btn-attention:hover {
 	border-left: 2px solid var(--favorite-article-border-color);
 }
 
-.flux.favorite:not(.current) .flux_header .item {
+.flux.favorite:not(.current) .flux_header {
 	background-color: var(--favorite-article-background-color);
 }
 
 .flux.favorite:not(.current):hover .flux_header,
-.flux.favorite:not(.current):hover .flux_header .item {
+.flux.favorite.current .flux_header {
 	background-color: var(--favorite-article-background-color-hover);
 }
 
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index ae4006517..0996c4f1c 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -835,13 +835,12 @@ a.btn-attention:hover {
 	border-right: 2px solid var(--contrast-border-color-active);
 }
 
-.flux .flux_header:hover,
-.flux .flux_header:hover .item {
+.flux .flux_header:hover {
 	background-color: var(--background-color-hover);
 }
 
 .flux .flux_header:not(.current):hover .flux_header,
-.flux .flux_header:not(.current):hover .flux_header .item {
+.flux.current .flux_header {
 	background-color: var(--background-color-hover);
 }
 
@@ -849,12 +848,12 @@ a.btn-attention:hover {
 	border-right: 2px solid var(--unread-article-border-color);
 }
 
-.flux.not_read .flux_header .item {
+.flux.not_read .flux_header {
 	background-color: var(--unread-article-background-color);
 }
 
 .flux.not_read:not(.current):hover .flux_header,
-.flux.not_read:not(.current):hover .flux_header .item {
+.flux.not_read.current .flux_header {
 	background-color: var(--unread-article-background-color-hover);
 }
 
@@ -862,12 +861,12 @@ a.btn-attention:hover {
 	border-right: 2px solid var(--favorite-article-border-color);
 }
 
-.flux.favorite:not(.current) .flux_header .item {
+.flux.favorite:not(.current) .flux_header {
 	background-color: var(--favorite-article-background-color);
 }
 
 .flux.favorite:not(.current):hover .flux_header,
-.flux.favorite:not(.current):hover .flux_header .item {
+.flux.favorite.current .flux_header {
 	background-color: var(--favorite-article-background-color-hover);
 }
 
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 4ff9d2812..5962d2bb6 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -810,7 +810,8 @@ a.signin {
 	border-left: 2px solid var(--border-left-article);
 }
 
-.flux .flux_header:hover {
+.flux .flux_header:hover,
+.flux.current .flux_header {
 	background-color: var(--background-color-grey-hover);
 }
 
@@ -827,7 +828,8 @@ a.signin {
 	border-left: 2px solid var(--border-left-article-unread);
 }
 
-.flux .item.title a, .flux.not_read:not(.current):hover .item.title {
+.flux .item.title a,
+.flux.not_read:not(.current):hover .item.title {
 	color: var(--font-color-link-title);
 }
 
@@ -839,7 +841,8 @@ a.signin {
 	background-color: var(--background-color-favorite);
 }
 
-.flux.favorite:not(.current) .flux_header:hover {
+.flux.favorite:not(.current) .flux_header:hover,
+.flux.favorite.current .flux_header {
 	background-color: var(--background-color-favorite-hover);
 }
 
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 8a71232bb..f9af832cd 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -810,7 +810,8 @@ a.signin {
 	border-right: 2px solid var(--border-left-article);
 }
 
-.flux .flux_header:hover {
+.flux .flux_header:hover,
+.flux.current .flux_header {
 	background-color: var(--background-color-grey-hover);
 }
 
@@ -827,7 +828,8 @@ a.signin {
 	border-right: 2px solid var(--border-left-article-unread);
 }
 
-.flux .item.title a, .flux.not_read:not(.current):hover .item.title {
+.flux .item.title a,
+.flux.not_read:not(.current):hover .item.title {
 	color: var(--font-color-link-title);
 }
 
@@ -839,7 +841,8 @@ a.signin {
 	background-color: var(--background-color-favorite);
 }
 
-.flux.favorite:not(.current) .flux_header:hover {
+.flux.favorite:not(.current) .flux_header:hover,
+.flux.favorite.current .flux_header {
 	background-color: var(--background-color-favorite-hover);
 }