New links in transitions and jump to next transition (#8294)

Easier to explain graphically:

<img width="408" height="266" alt="image" src="https://github.com/user-attachments/assets/0e3724a1-155b-4a87-89b3-cfe8a18cb100" />

The jump to next section ⏭ works when the sorting criterion is a date.

Need https://github.com/FreshRSS/FreshRSS/pull/8293

2 files changed, 18 insertions, 0 deletions

diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 9d27c936b..b02ba9305 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1418,6 +1418,10 @@ input[type="search"] {
 	background: inherit;
 }
 
+.transition a, .transition a:hover {
+	color: inherit;
+}
+
 .transition .name {
 	position: absolute;
 	right: 0;
@@ -1427,6 +1431,11 @@ input[type="search"] {
 	text-overflow: ellipsis;
 }
 
+.transition-next {
+	margin-left: .5em;
+	opacity: 0.5;
+}
+
 /*=== Feed article header and footer */
 .flux_header {
 	background: inherit;
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 8a4d4da37..2a386588c 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1418,6 +1418,10 @@ input[type="search"] {
 	background: inherit;
 }
 
+.transition a, .transition a:hover {
+	color: inherit;
+}
+
 .transition .name {
 	position: absolute;
 	left: 0;
@@ -1427,6 +1431,11 @@ input[type="search"] {
 	text-overflow: ellipsis;
 }
 
+.transition-next {
+	margin-right: .5em;
+	opacity: 0.5;
+}
+
 /*=== Feed article header and footer */
 .flux_header {
 	background: inherit;