Improved: CSS classes for theme preview slider changed (#5303)

* CSS classes changed

* fix

app/views/configure/display.phtml

@@ -47,7 +47,7 @@
 		<div class="form-group">
 			<label class="group-name" for="theme"><?= _t('conf.display.theme') ?></label>
 			<div class="group-controls">
-				<ul class="slides">
+				<ul class="theme-preview-list">
 					<?php $slides = count($this->themes); $i = 1; $themeAvailable = false; ?>
 					<?php  /** @var array{'id':string, 'deprecated':bool, 'author':string, 'name':string, 'description':string} $theme */
 						foreach($this->themes as $theme) { ?>
@@ -59,8 +59,8 @@
 						} ?>
 						<input type="radio" name="theme" id="img-<?= $i ?>" <?= $checked ?> value="<?= $theme['id'] ?>"
 							data-leave-validation="<?= (FreshRSS_Context::$user_conf->theme === $theme['id']) ? 1 : 0 ?>" />
-						<li class="slide-container">
-							<div class="slide">
+						<li class="preview-container">
+							<div class="preview">
 								<img src="<?= Minz_Url::display('/themes/' . $theme['id'] . '/thumbs/original.png') ?>" loading="lazy" />
 							</div>
 							<div class="nav">
@@ -91,8 +91,8 @@
 					<?php } ?>
 					<?php if (!$themeAvailable) {?>
 						<input type="radio" name="theme" checked="checked" value="Origine" data-leave-validation="0" />
-						<li class="slide-container">
-							<div class="slide">
+						<li class="preview-container">
+							<div class="preview">
 							</div>
 							<div class="nav">
 								<label for="img-<?= $i - 1 ?>" class="prev">‹</label>

p/themes/Alternative-Dark/adark.css

@@ -621,11 +621,11 @@ kbd {
 	left: 2px;
 }
 
-.slides {
+.theme-preview-list {
 	border-color: var(--border-color-middle);
 }
 
-.properties {
+.theme-preview-list .properties {
 	background-color: var(--background-color-light);
 	color: var(--font-color-middle);
 	border-color: var(--border-color-middle);

p/themes/Alternative-Dark/adark.rtl.css

@@ -621,11 +621,11 @@ kbd {
 	right: 2px;
 }
 
-.slides {
+.theme-preview-list {
 	border-color: var(--border-color-middle);
 }
 
-.properties {
+.theme-preview-list .properties {
 	background-color: var(--background-color-light);
 	color: var(--font-color-middle);
 	border-color: var(--border-color-middle);

p/themes/Ansum/_configuration.scss

@@ -49,16 +49,18 @@
 	box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35);
 }
 
-.slide-container {
-	.properties {
-		padding: 1rem;
-		background: rgba(0, 0, 0, 0.75);
-		color: white;
-		border: 0;
+.theme-preview-list {
+	.preview-container {
+		.properties {
+			padding: 1rem;
+			background: rgba(0, 0, 0, 0.75);
+			color: white;
+			border: 0;
 
-		.page-number {
-			right: 1rem;
-			top: 1rem;
+			.page-number {
+				right: 1rem;
+				top: 1rem;
+			}
 		}
 	}
 }

p/themes/Ansum/ansum.css

@@ -1141,13 +1141,13 @@ main.prompt {
 	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
 }
 
-.slide-container .properties {
+.theme-preview-list .preview-container .properties {
 	padding: 1rem;
 	background: rgba(0, 0, 0, 0.75);
 	color: white;
 	border: 0;
 }
-.slide-container .properties .page-number {
+.theme-preview-list .preview-container .properties .page-number {
 	right: 1rem;
 	top: 1rem;
 }

p/themes/Ansum/ansum.rtl.css

@@ -1141,13 +1141,13 @@ main.prompt {
 	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
 }
 
-.slide-container .properties {
+.theme-preview-list .preview-container .properties {
 	padding: 1rem;
 	background: rgba(0, 0, 0, 0.75);
 	color: white;
 	border: 0;
 }
-.slide-container .properties .page-number {
+.theme-preview-list .preview-container .properties .page-number {
 	left: 1rem;
 	top: 1rem;
 }

p/themes/Dark/dark.css

@@ -582,11 +582,11 @@ button.as-link[disabled] {
 	border-left: 1px solid var(--dark-border-color6);
 }
 
-.slides {
+.theme-preview-list {
 	border-color: var(--dark-border-color0);
 }
 
-.properties {
+.theme-preview-list .properties {
 	border-color: var(--dark-border-color0);
 	color: var(--dark-font-colorA);
 }

p/themes/Dark/dark.rtl.css

@@ -582,11 +582,11 @@ button.as-link[disabled] {
 	border-right: 1px solid var(--dark-border-color6);
 }
 
-.slides {
+.theme-preview-list {
 	border-color: var(--dark-border-color0);
 }
 
-.properties {
+.theme-preview-list .properties {
 	border-color: var(--dark-border-color0);
 	color: var(--dark-font-colorA);
 }

p/themes/Mapco/_configuration.scss

@@ -48,16 +48,18 @@
 	box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35);
 }
 
-.slide-container {
-	.properties {
-		padding: 1rem;
-		background: rgba(0, 0, 0, 0.75);
-		color: white;
-		border: 0;
-
-		.page-number {
-			right: 1rem;
-			top: 1rem;
+.theme-preview-list {
+	.preview-container {
+		.properties {
+			padding: 1rem;
+			background: rgba(0, 0, 0, 0.75);
+			color: white;
+			border: 0;
+
+			.page-number {
+				right: 1rem;
+				top: 1rem;
+			}
 		}
 	}
 }

p/themes/Mapco/mapco.css

@@ -1155,13 +1155,13 @@ main.prompt {
 	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
 }
 
-.slide-container .properties {
+.theme-preview-list .preview-container .properties {
 	padding: 1rem;
 	background: rgba(0, 0, 0, 0.75);
 	color: white;
 	border: 0;
 }
-.slide-container .properties .page-number {
+.theme-preview-list .preview-container .properties .page-number {
 	right: 1rem;
 	top: 1rem;
 }

p/themes/Mapco/mapco.rtl.css

@@ -1155,13 +1155,13 @@ main.prompt {
 	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.35);
 }
 
-.slide-container .properties {
+.theme-preview-list .preview-container .properties {
 	padding: 1rem;
 	background: rgba(0, 0, 0, 0.75);
 	color: white;
 	border: 0;
 }
-.slide-container .properties .page-number {
+.theme-preview-list .preview-container .properties .page-number {
 	left: 1rem;
 	top: 1rem;
 }

p/themes/base-theme/frss.css

@@ -1773,9 +1773,9 @@ html.slider-active {
 	max-width: 550px;
 }
 
-/*=== SLIDESHOW */
+/*=== SLIDESHOW Theme Preview */
 /*==============*/
-.slides {
+.theme-preview-list {
 	padding: 0;
 	display: block;
 	max-width: 640px;
@@ -1786,15 +1786,15 @@ html.slider-active {
 	margin-bottom: 30px;
 }
 
-.slides input {
+.theme-preview-list input {
 	display: none;
 }
 
-.slide-container {
+.theme-preview-list .preview-container {
 	display: block;
 }
 
-.slide {
+.theme-preview-list .preview {
 	display: block;
 	width: 100%;
 	height: 100%;
@@ -1805,12 +1805,12 @@ html.slider-active {
 	transition: all .7s ease-in-out;
 }
 
-.slide img {
+.theme-preview-list .preview img {
 	width: 100%;
 	height: 100%;
 }
 
-.nav label {
+.theme-preview-list .nav label {
 	padding: 0;
 	display: none;
 	width: 65px;
@@ -1829,7 +1829,7 @@ html.slider-active {
 	text-shadow: 0px 0px 15px rgb(119, 119, 119);
 }
 
-.properties {
+.theme-preview-list .properties {
 	padding: 5px;
 	background-color: var(--frss-background-color-transparent);
 	display: none;
@@ -1841,35 +1841,35 @@ html.slider-active {
 	backdrop-filter: blur(3px);
 }
 
-.properties .page-number {
+.theme-preview-list .properties .page-number {
 	right: 5px;
 	top: 0;
 	position: absolute;
 }
 
-.slide:hover + .nav label {
+.theme-preview-list .preview:hover + .nav label {
 	opacity: 0.5;
 }
 
-.nav label:hover {
+.theme-preview-list .nav label:hover {
 	opacity: 1;
 }
 
-.nav .next {
+.theme-preview-list .nav .next {
 	right: 0;
 }
 
-input:checked + .slide-container .slide {
+.theme-preview-list input:checked + .preview-container .preview {
 	opacity: 1;
 	transform: scale(1);
 	transition: opacity 1s ease-in-out;
 }
 
-input:checked + .slide-container .nav label {
+.theme-preview-list input:checked + .preview-container .nav label {
 	display: block;
 }
 
-input:checked + .slide-container .properties {
+.theme-preview-list input:checked + .preview-container .properties {
 	display: block;
 }
 
@@ -1886,7 +1886,7 @@ input:checked + .slide-container .properties {
 .item.share.error a::after,
 .category .title.error::before,
 .item.feed.error .item-title::before,
-.properties .error::before {
+.theme-preview-list .properties .error::before {
 	content: " ⚠ ";
 	color: var(--frss-font-color-error);
 }
@@ -2373,7 +2373,7 @@ input:checked + .slide-container .properties {
 		grid-column: 1 / span 2;
 	}
 
-	.slide + .nav label {
+	.theme-preview-list .preview + .nav label {
 		opacity: 0.5;
 	}
 }

p/themes/base-theme/frss.rtl.css

@@ -1773,9 +1773,9 @@ html.slider-active {
 	max-width: 550px;
 }
 
-/*=== SLIDESHOW */
+/*=== SLIDESHOW Theme Preview */
 /*==============*/
-.slides {
+.theme-preview-list {
 	padding: 0;
 	display: block;
 	max-width: 640px;
@@ -1786,15 +1786,15 @@ html.slider-active {
 	margin-bottom: 30px;
 }
 
-.slides input {
+.theme-preview-list input {
 	display: none;
 }
 
-.slide-container {
+.theme-preview-list .preview-container {
 	display: block;
 }
 
-.slide {
+.theme-preview-list .preview {
 	display: block;
 	width: 100%;
 	height: 100%;
@@ -1805,12 +1805,12 @@ html.slider-active {
 	transition: all .7s ease-in-out;
 }
 
-.slide img {
+.theme-preview-list .preview img {
 	width: 100%;
 	height: 100%;
 }
 
-.nav label {
+.theme-preview-list .nav label {
 	padding: 0;
 	display: none;
 	width: 65px;
@@ -1829,7 +1829,7 @@ html.slider-active {
 	text-shadow: 0px 0px 15px rgb(119, 119, 119);
 }
 
-.properties {
+.theme-preview-list .properties {
 	padding: 5px;
 	background-color: var(--frss-background-color-transparent);
 	display: none;
@@ -1841,35 +1841,35 @@ html.slider-active {
 	backdrop-filter: blur(3px);
 }
 
-.properties .page-number {
+.theme-preview-list .properties .page-number {
 	left: 5px;
 	top: 0;
 	position: absolute;
 }
 
-.slide:hover + .nav label {
+.theme-preview-list .preview:hover + .nav label {
 	opacity: 0.5;
 }
 
-.nav label:hover {
+.theme-preview-list .nav label:hover {
 	opacity: 1;
 }
 
-.nav .next {
+.theme-preview-list .nav .next {
 	left: 0;
 }
 
-input:checked + .slide-container .slide {
+.theme-preview-list input:checked + .preview-container .preview {
 	opacity: 1;
 	transform: scale(1);
 	transition: opacity 1s ease-in-out;
 }
 
-input:checked + .slide-container .nav label {
+.theme-preview-list input:checked + .preview-container .nav label {
 	display: block;
 }
 
-input:checked + .slide-container .properties {
+.theme-preview-list input:checked + .preview-container .properties {
 	display: block;
 }
 
@@ -1886,7 +1886,7 @@ input:checked + .slide-container .properties {
 .item.share.error a::after,
 .category .title.error::before,
 .item.feed.error .item-title::before,
-.properties .error::before {
+.theme-preview-list .properties .error::before {
 	content: " ⚠ ";
 	color: var(--frss-font-color-error);
 }
@@ -2373,7 +2373,7 @@ input:checked + .slide-container .properties {
 		grid-column: 1 / span 2;
 	}
 
-	.slide + .nav label {
+	.theme-preview-list .preview + .nav label {
 		opacity: 0.5;
 	}
 }