mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-02-15 07:51:14 -05:00
Improved: CSS classes for theme preview slider changed (#5303)
* CSS classes changed * fix
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user