Improve theme slider (#8152)

Ref https://github.com/FreshRSS/FreshRSS/pull/8149
Ref https://github.com/FreshRSS/FreshRSS/issues/6577

Before
<img width="969" height="582" alt="grafik" src="https://github.com/user-attachments/assets/5e1e5e9a-31de-4327-a639-6327d602cf8a" />

After
Buttons as navigation elements. Not it is crystal clear that the themes can be changed.
The theme counter is a bit more prominent to show the big amount of shipped themes.
<img width="1041" height="575" alt="grafik" src="https://github.com/user-attachments/assets/b498e74f-1284-40ad-b871-41ce238a49ff" />

6 files changed, 54 insertions, 64 deletions

diff --git a/p/themes/Dark-pink/pinkdark.css b/p/themes/Dark-pink/pinkdark.css
index da7ef0c36..922d427a8 100644
--- a/p/themes/Dark-pink/pinkdark.css
+++ b/p/themes/Dark-pink/pinkdark.css
@@ -160,3 +160,7 @@ input:focus {
 #btn-add > img {
 	filter: brightness(0.75);
 }
+
+.theme-preview-list .nav label.btn:hover {
+	background-color: var(--background-color-hover);
+}
diff --git a/p/themes/Dark-pink/pinkdark.rtl.css b/p/themes/Dark-pink/pinkdark.rtl.css
index 6426b2f9a..670bacbb8 100644
--- a/p/themes/Dark-pink/pinkdark.rtl.css
+++ b/p/themes/Dark-pink/pinkdark.rtl.css
@@ -160,3 +160,7 @@ input:focus {
 #btn-add > img {
 	filter: brightness(0.75);
 }
+
+.theme-preview-list .nav label.btn:hover {
+	background-color: var(--background-color-hover);
+}
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 98fb576b1..665bc08b7 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -290,7 +290,9 @@ th {
 	text-decoration: none;
 }
 
-a:hover .icon {
+a:hover .icon,
+button:hover .icon,
+.btn:hover .icon {
 	filter: brightness(1.5);
 	transition: 0.1s linear;
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index ca3faf02d..d4d84d70a 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -290,7 +290,9 @@ th {
 	text-decoration: none;
 }
 
-a:hover .icon {
+a:hover .icon,
+button:hover .icon,
+.btn:hover .icon {
 	filter: brightness(1.5);
 	transition: 0.1s linear;
 }
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index d645536fc..d7e48d3f3 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -2093,6 +2093,7 @@ html.slider-active {
 /*=== SLIDESHOW Theme Preview */
 /*==============*/
 .theme-preview-list {
+	margin: 0.5rem 1rem 2rem 1rem;
 	padding: 0;
 	display: block;
 	max-width: 640px;
@@ -2100,7 +2101,6 @@ html.slider-active {
 	border: 1px solid var(--frss-border-color);
 	position: relative;
 	min-width: 260px;
-	margin-bottom: 30px;
 }
 
 .theme-preview-list input {
@@ -2118,8 +2118,6 @@ html.slider-active {
 	top: 0;
 	opacity: 0;
 	position: absolute;
-	transform: scale(0);
-	transition: all .7s ease-in-out;
 }
 
 .theme-preview-list .preview img {
@@ -2130,22 +2128,16 @@ html.slider-active {
 .theme-preview-list .nav label {
 	padding: 0;
 	display: none;
-	width: 65px;
-	height: 100%;
-	color: var(--frss-font-color-light);
-	font-family: "Varela Round", sans-serif;
-	font-size: 9rem;
+	min-width: 50px;
+	min-height: 5rem;
 	position: absolute;
-	opacity: 0;
+	top: 34%;
 	z-index: 9;
-	cursor: pointer;
-	transition: opacity .2s;
 	text-align: center;
-	line-height: 2;
-	background-color: var(--frss-background-color-transparent);
-	text-shadow: 0px 0px 15px #000;
+	line-height: 5;
 }
 
+
 .theme-preview-list .properties {
 	padding: 5px;
 	background-color: var(--frss-background-color-transparent);
@@ -2158,35 +2150,32 @@ html.slider-active {
 	backdrop-filter: blur(3px);
 }
 
-.theme-preview-list .properties .page-number {
-	right: 5px;
-	top: 0;
+.theme-preview-list .page-number {
+	bottom: -1.5rem;
 	position: absolute;
+	display: none;
+	left: 0;
+	right: 0;
+	text-align: center;
 }
 
-.theme-preview-list .preview + .nav label {
-	opacity: 0.8;
-}
-
-.theme-preview-list .nav label:hover {
-	opacity: 1;
+.theme-preview-list .nav label.prev {
+	left: -1rem;
 }
 
-.theme-preview-list .nav .next {
-	right: 0;
+.theme-preview-list .nav label.next {
+	right: -1rem;
 }
 
 .theme-preview-list input:checked + .preview-container .preview {
 	opacity: 1;
 	transform: scale(1);
-	transition: opacity 1s ease-in-out;
-}
-
-.theme-preview-list input:checked + .preview-container .nav label {
-	display: block;
+	transition: opacity .5s ease-in-out;
 }
 
-.theme-preview-list input:checked + .preview-container .properties {
+.theme-preview-list input:checked + .preview-container .nav label,
+.theme-preview-list input:checked + .preview-container .properties,
+.theme-preview-list input:checked + .preview-container .page-number {
 	display: block;
 }
 
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 247a31e75..95e9704e7 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -2093,6 +2093,7 @@ html.slider-active {
 /*=== SLIDESHOW Theme Preview */
 /*==============*/
 .theme-preview-list {
+	margin: 0.5rem 1rem 2rem 1rem;
 	padding: 0;
 	display: block;
 	max-width: 640px;
@@ -2100,7 +2101,6 @@ html.slider-active {
 	border: 1px solid var(--frss-border-color);
 	position: relative;
 	min-width: 260px;
-	margin-bottom: 30px;
 }
 
 .theme-preview-list input {
@@ -2118,8 +2118,6 @@ html.slider-active {
 	top: 0;
 	opacity: 0;
 	position: absolute;
-	transform: scale(0);
-	transition: all .7s ease-in-out;
 }
 
 .theme-preview-list .preview img {
@@ -2130,22 +2128,16 @@ html.slider-active {
 .theme-preview-list .nav label {
 	padding: 0;
 	display: none;
-	width: 65px;
-	height: 100%;
-	color: var(--frss-font-color-light);
-	font-family: "Varela Round", sans-serif;
-	font-size: 9rem;
+	min-width: 50px;
+	min-height: 5rem;
 	position: absolute;
-	opacity: 0;
+	top: 34%;
 	z-index: 9;
-	cursor: pointer;
-	transition: opacity .2s;
 	text-align: center;
-	line-height: 2;
-	background-color: var(--frss-background-color-transparent);
-	text-shadow: 0px 0px 15px #000;
+	line-height: 5;
 }
 
+
 .theme-preview-list .properties {
 	padding: 5px;
 	background-color: var(--frss-background-color-transparent);
@@ -2158,35 +2150,32 @@ html.slider-active {
 	backdrop-filter: blur(3px);
 }
 
-.theme-preview-list .properties .page-number {
-	left: 5px;
-	top: 0;
+.theme-preview-list .page-number {
+	bottom: -1.5rem;
 	position: absolute;
+	display: none;
+	right: 0;
+	left: 0;
+	text-align: center;
 }
 
-.theme-preview-list .preview + .nav label {
-	opacity: 0.8;
-}
-
-.theme-preview-list .nav label:hover {
-	opacity: 1;
+.theme-preview-list .nav label.prev {
+	right: -1rem;
 }
 
-.theme-preview-list .nav .next {
-	left: 0;
+.theme-preview-list .nav label.next {
+	left: -1rem;
 }
 
 .theme-preview-list input:checked + .preview-container .preview {
 	opacity: 1;
 	transform: scale(1);
-	transition: opacity 1s ease-in-out;
-}
-
-.theme-preview-list input:checked + .preview-container .nav label {
-	display: block;
+	transition: opacity .5s ease-in-out;
 }
 
-.theme-preview-list input:checked + .preview-container .properties {
+.theme-preview-list input:checked + .preview-container .nav label,
+.theme-preview-list input:checked + .preview-container .properties,
+.theme-preview-list input:checked + .preview-container .page-number {
 	display: block;
 }