From 53c1562cc096e21b471993bd38bf9b10012ea433 Mon Sep 17 00:00:00 2001 From: maTh <1645099+math-GH@users.noreply.github.com> Date: Tue, 28 Oct 2025 19:09:29 +0100 Subject: Improve theme slider (#8152) Ref https://github.com/FreshRSS/FreshRSS/pull/8149 Ref https://github.com/FreshRSS/FreshRSS/issues/6577 Before grafik 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. grafik --- p/themes/Dark-pink/pinkdark.css | 4 +++ p/themes/Dark-pink/pinkdark.rtl.css | 4 +++ p/themes/Origine/origine.css | 4 ++- p/themes/Origine/origine.rtl.css | 4 ++- p/themes/base-theme/frss.css | 51 +++++++++++++++---------------------- p/themes/base-theme/frss.rtl.css | 51 +++++++++++++++---------------------- 6 files changed, 54 insertions(+), 64 deletions(-) (limited to 'p') 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; } -- cgit v1.2.3