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

* CSS classes changed

* fix
This commit is contained in:
maTh
2023-04-16 15:30:33 +02:00
committed by GitHub
parent 52cde870e2
commit 41fa4e746d
13 changed files with 77 additions and 73 deletions

View File

@@ -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>

View File

@@ -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);

View File

@@ -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);

View File

@@ -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;
}
}
}
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -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;
.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;
}
}
}
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}
}

View File

@@ -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;
}
}