From 41fa4e746df8c2e2399ed753b4994ca85cb21358 Mon Sep 17 00:00:00 2001 From: maTh Date: Sun, 16 Apr 2023 15:30:33 +0200 Subject: [PATCH] Improved: CSS classes for theme preview slider changed (#5303) * CSS classes changed * fix --- app/views/configure/display.phtml | 10 ++++---- p/themes/Alternative-Dark/adark.css | 4 +-- p/themes/Alternative-Dark/adark.rtl.css | 4 +-- p/themes/Ansum/_configuration.scss | 20 ++++++++------- p/themes/Ansum/ansum.css | 4 +-- p/themes/Ansum/ansum.rtl.css | 4 +-- p/themes/Dark/dark.css | 4 +-- p/themes/Dark/dark.rtl.css | 4 +-- p/themes/Mapco/_configuration.scss | 20 ++++++++------- p/themes/Mapco/mapco.css | 4 +-- p/themes/Mapco/mapco.rtl.css | 4 +-- p/themes/base-theme/frss.css | 34 ++++++++++++------------- p/themes/base-theme/frss.rtl.css | 34 ++++++++++++------------- 13 files changed, 77 insertions(+), 73 deletions(-) diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml index 1c415390a..adb305147 100644 --- a/app/views/configure/display.phtml +++ b/app/views/configure/display.phtml @@ -47,7 +47,7 @@
-
    +
      themes); $i = 1; $themeAvailable = false; ?> themes as $theme) { ?> @@ -59,8 +59,8 @@ } ?> value="" data-leave-validation="theme === $theme['id']) ? 1 : 0 ?>" /> -
    • -
      +
    • +
      @@ -91,8 +91,8 @@ -
    • -
      +
    • +
      diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css index eaa91fe97..524721ab3 100644 --- a/p/themes/Alternative-Dark/adark.css +++ b/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); diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css index 3fdd66121..a75638393 100644 --- a/p/themes/Alternative-Dark/adark.rtl.css +++ b/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); diff --git a/p/themes/Ansum/_configuration.scss b/p/themes/Ansum/_configuration.scss index 585ff94c0..8f77cc5c3 100644 --- a/p/themes/Ansum/_configuration.scss +++ b/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; + } } } } diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css index 73a26eb3d..06f241ef2 100644 --- a/p/themes/Ansum/ansum.css +++ b/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; } diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css index 18a185287..76b7654a9 100644 --- a/p/themes/Ansum/ansum.rtl.css +++ b/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; } diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css index 781ae2daa..4d24db465 100644 --- a/p/themes/Dark/dark.css +++ b/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); } diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css index 6d77428f6..0e6dbda33 100644 --- a/p/themes/Dark/dark.rtl.css +++ b/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); } diff --git a/p/themes/Mapco/_configuration.scss b/p/themes/Mapco/_configuration.scss index c9168e385..995cd9bff 100644 --- a/p/themes/Mapco/_configuration.scss +++ b/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; +.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; + } } } } diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css index 3a862b4a1..678f59e51 100644 --- a/p/themes/Mapco/mapco.css +++ b/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; } diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css index 03f8b71b2..5ea646d10 100644 --- a/p/themes/Mapco/mapco.rtl.css +++ b/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; } diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css index 7ec6207c6..ec293b975 100644 --- a/p/themes/base-theme/frss.css +++ b/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; } } diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css index 08f56ba20..cc9ee8534 100644 --- a/p/themes/base-theme/frss.rtl.css +++ b/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; } }