mirror/FreshRSS
0
0
Fork 0
mirror of https://github.com/FreshRSS/FreshRSS.git synced 2026-05-16 20:34:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(themes): cap narrow-viewport sidebar and restore aside selectors (#8749)

Browse Source 
* 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 <polybjorn@users.noreply.github.com>
This commit is contained in:
polybjorn
2026-05-01 13:27:08 +00:00
committed by GitHub
parent 4f250caa67
commit d7b6c5f418
10 changed files with 16 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
p/themes/Alternative-Dark/adark.css
View File

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

2
p/themes/Alternative-Dark/adark.rtl.css
View File

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

3
p/themes/Nord/nord.css
View File

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

3
p/themes/Nord/nord.rtl.css
View File

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

2
p/themes/Origine/origine.css
View File

@@ -1163,7 +1163,7 @@ button:hover .icon,
padding-bottom: 0;
}
.aside:target {
.aside.visible {
box-shadow: 3px 0 3px var(--text-shadow-color);
}

2
p/themes/Origine/origine.rtl.css
View File

@@ -1163,7 +1163,7 @@ button:hover .icon,
padding-bottom: 0;
}
.aside:target {
.aside.visible {
box-shadow: -3px 0 3px var(--text-shadow-color);
}

5
p/themes/Swage/swage.css
View File

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

5
p/themes/Swage/swage.rtl.css
View File

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

9
p/themes/base-theme/frss.css
View File

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

9
p/themes/base-theme/frss.rtl.css
View File

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