From d7b6c5f418f302abb971f773e40b97afa5a73539 Mon Sep 17 00:00:00 2001 From: polybjorn Date: Fri, 1 May 2026 13:27:08 +0000 Subject: [PATCH] fix(themes): cap narrow-viewport sidebar and restore aside selectors (#8749) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(themes): tighten narrow-viewport sidebar with Material drawer cap Cap `.aside.visible` width at `min(var(--width-aside, 320px), calc(100vw - 56px))` instead of 90%. Themes that define `--width-aside` (Swage) keep their existing value; others get a 320px cap with a 56px touch peek of the underlying view. Also restores aside selectors dropped by recent refactors: - #8201 renamed `.aside:target` to `.aside.visible` in base-theme; this fix applies the same rename in Swage, Nord, Origine, and Alternative-Dark - #8200 dropped Swage's narrow-viewport sidebar width override; the new base cap covers that case for Swage and the other themes equally - Nord's `max-width: 300px` aside override is now redundant with the base cap and is removed * fix(themes): merge duplicate .aside.visible rule --------- Co-authored-by: Bjørn A. Andersen --- p/themes/Alternative-Dark/adark.css | 2 +- p/themes/Alternative-Dark/adark.rtl.css | 2 +- p/themes/Nord/nord.css | 3 +-- p/themes/Nord/nord.rtl.css | 3 +-- p/themes/Origine/origine.css | 2 +- p/themes/Origine/origine.rtl.css | 2 +- p/themes/Swage/swage.css | 5 ++--- p/themes/Swage/swage.rtl.css | 5 ++--- p/themes/base-theme/frss.css | 9 +++------ p/themes/base-theme/frss.rtl.css | 9 +++------ 10 files changed, 16 insertions(+), 26 deletions(-) diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css index 083eaf5a4..a94115f4e 100644 --- a/p/themes/Alternative-Dark/adark.css +++ b/p/themes/Alternative-Dark/adark.css @@ -1139,7 +1139,7 @@ kbd { filter: brightness(2); } - .aside:target + .close-aside, .configure .dropdown-target:target ~ .dropdown-close { + .aside.visible + .close-aside, .configure .dropdown-target:target ~ .dropdown-close { background-color: var(--background-color-slider-shadow); } diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css index 8485edfe1..8fc02c820 100644 --- a/p/themes/Alternative-Dark/adark.rtl.css +++ b/p/themes/Alternative-Dark/adark.rtl.css @@ -1139,7 +1139,7 @@ kbd { filter: brightness(2); } - .aside:target + .close-aside, .configure .dropdown-target:target ~ .dropdown-close { + .aside.visible + .close-aside, .configure .dropdown-target:target ~ .dropdown-close { background-color: var(--background-color-slider-shadow); } diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css index fa98d03dd..0571bccdc 100644 --- a/p/themes/Nord/nord.css +++ b/p/themes/Nord/nord.css @@ -1233,7 +1233,7 @@ optgroup::before { /*===========*/ @media (max-width: 840px) { - .aside:target + .close-aside, + .aside.visible + .close-aside, .configure .dropdown-target:target ~ .dropdown-close { backdrop-filter: grayscale(60%) blur(1px); } @@ -1243,7 +1243,6 @@ optgroup::before { } .nav.aside { - max-width: 300px; border-radius: 0; } diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css index 2cb718065..1fe06a375 100644 --- a/p/themes/Nord/nord.rtl.css +++ b/p/themes/Nord/nord.rtl.css @@ -1233,7 +1233,7 @@ optgroup::before { /*===========*/ @media (max-width: 840px) { - .aside:target + .close-aside, + .aside.visible + .close-aside, .configure .dropdown-target:target ~ .dropdown-close { backdrop-filter: grayscale(60%) blur(1px); } @@ -1243,7 +1243,6 @@ optgroup::before { } .nav.aside { - max-width: 300px; border-radius: 0; } diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index dddcdb97d..42414e3d1 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -1163,7 +1163,7 @@ button:hover .icon, padding-bottom: 0; } - .aside:target { + .aside.visible { box-shadow: 3px 0 3px var(--text-shadow-color); } diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css index 8c55aeda8..aaac338b1 100644 --- a/p/themes/Origine/origine.rtl.css +++ b/p/themes/Origine/origine.rtl.css @@ -1163,7 +1163,7 @@ button:hover .icon, padding-bottom: 0; } - .aside:target { + .aside.visible { box-shadow: -3px 0 3px var(--text-shadow-color); } diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index 5f78483b0..c972e4785 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -880,7 +880,7 @@ main.post .drop-section li.item.feed a:hover .icon { margin-bottom: 1rem; } -.aside:target .toggle_aside { +.aside.visible .toggle_aside { border-bottom: 1px solid var(--frss-border-color); } @@ -1243,8 +1243,7 @@ body.reader { text-align: center; } - .aside:target { - width: var(--width-aside); + .aside.visible { padding-top: 0; } } diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css index f1ed8fa0b..2e2c64191 100644 --- a/p/themes/Swage/swage.rtl.css +++ b/p/themes/Swage/swage.rtl.css @@ -880,7 +880,7 @@ main.post .drop-section li.item.feed a:hover .icon { margin-bottom: 1rem; } -.aside:target .toggle_aside { +.aside.visible .toggle_aside { border-bottom: 1px solid var(--frss-border-color); } @@ -1243,8 +1243,7 @@ body.reader { text-align: center; } - .aside:target { - width: var(--width-aside); + .aside.visible { padding-top: 0; } } diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css index 8c7021687..036840d42 100644 --- a/p/themes/base-theme/frss.css +++ b/p/themes/base-theme/frss.css @@ -2495,7 +2495,10 @@ html.slider-active { display: none; } + /* Material navigation drawer: theme override or 320px cap, with 56px touch-peek */ .aside.visible { + width: min(var(--width-aside, 320px), calc(100vw - 56px)); + height: 100vh; box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent); } @@ -2774,12 +2777,6 @@ html.slider-active { transition: width 200ms linear; } - .aside.visible, - .reader .aside.visible { - width: 90%; - height: 100vh; - } - .aside.aside_feed { padding: 0; } diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css index a77d7a02c..b30f29e45 100644 --- a/p/themes/base-theme/frss.rtl.css +++ b/p/themes/base-theme/frss.rtl.css @@ -2495,7 +2495,10 @@ html.slider-active { display: none; } + /* Material navigation drawer: theme override or 320px cap, with 56px touch-peek */ .aside.visible { + width: min(var(--width-aside, 320px), calc(100vw - 56px)); + height: 100vh; box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent); } @@ -2774,12 +2777,6 @@ html.slider-active { transition: width 200ms linear; } - .aside.visible, - .reader .aside.visible { - width: 90%; - height: 100vh; - } - .aside.aside_feed { padding: 0; }