Add a :lang(ja)-scoped font-family in the shared frss.css so kanji/kana
render with Japanese glyphs on Japanese UIs, without affecting Chinese
(zh-CN/zh-TW) users. Revives the intent of PR #5671 with a
cross-platform font list. frss.rtl.css is regenerated via rtlcss.
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
* WebSub: ignore http/https scheme difference in Self URL comparison
The PubSubHubbub endpoint logged 'Self URL does not match registered
canonical URL' whenever a feed's self URL differed from the registered
canonical URL only by http vs https (common with http->https redirects),
spamming the log. Compare the URLs ignoring the http/https scheme while
still requiring host/path/query to match exactly.
Closes#3087
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* Stylistic preferences
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
* Generate new articles notification string in PHP
Closes#6470
Changes proposed in this pull request:
- Generate notifications string in PHP
- Use plurals support
* New articles notification: switch to plural forms
* README status
* fix paramInt invocation
* i18n
* make fix-all
* Apply suggestion from @Frenzie
---------
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
A failed Fever API auth returns {"auth":0} with HTTP 200, so from the web
server log a failure is indistinguishable from a success and fail2ban
cannot act. The failure was already logged to API_LOG, but without the
client IP. Append the remote IP (Minz_Request::connectionRemoteAddress())
so a fail2ban filter watching data/users/_/log_api.txt can ban repeated
attempts.
For https://github.com/FreshRSS/FreshRSS/issues/6814
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
"Follow-up" of https://github.com/FreshRSS/FreshRSS/pull/8612 (not fixing a regression, just a bug)
Some features like URL observers and custom favicon JS (e.g. *Reset to default* button) wouldn't work, due to `extra.js` not being loaded properly on pages where the slider content was already included in the HTML.
Fixes regression caused by https://github.com/FreshRSS/FreshRSS/pull/8335
To reproduce it, open any dropdown in the aside, reload the page, and try to open the same dropdown - it will disappear
To explain the issue more clearly, the dropdown menu wouldn't show because earlier its opacity is set to 0%, and after clicking the same dropdown after a page reload, the hashchange event wouldn't trigger to restore the previous opacity, and also the second listener would trigger to remove the dropdown if you opened it again.
Maybe https://github.com/FreshRSS/FreshRSS/issues/6156 is relevant here
Also a CSS change to stop showing the dropdown toggle icon of the previously opened dropdown after a page reload while the dropdown was open.
* Add SSRF mitigations using `filter_var` and `CURLOPT_RESOLVE`
The idea is to prevent FreshRSS from sending any HTTP requests to internal services, except for the ones that are explicitly allowed in the config.
Based on 6e82b46a48/lib/filelib.php (L3818) and https://github.com/symfony/symfony/blob/8.1/src/Symfony/Component/HttpClient/NoPrivateNetworkHttpClient.phphttps://github.com/FreshRSS/simplepie/pull/76https://github.com/FreshRSS/simplepie/pull/78
* Add allowlist setting in Web UI
* make readme
* Update app/i18n/fr/admin.php
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
* make readme again
* make readme
* Further work
Still WIP and needs testing etc.
* Readd previous if check for domain combination allowlist
* Turn POST to GET after redirect
* Improve
* Update config.default.php
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
* make readme
* Skip SSRF check if `CURLOPT_PROXY` is set
* make readme
* Fix `!empty()` mistake
* Respect max redirects feed option when fetching with `httpGet()`
* Respect max redirects during SimplePie fetching + fix bypass
bypass fix: `CURLOPT_FOLLOWLOCATION` was moved below so that emulated redirects are enforced.
* Avoid FreshRSS and Minz code in SimplePie
https://github.com/FreshRSS/FreshRSS/pull/8400#discussion_r2935375980
* Corrected hook code
* phpdoc wrong return type
* Add CIDR support in allowlist
* Implement simple DNS caching
* Suppress `dns_get_record()` warnings
* A bit of proof-reading
* Minor typo
* Fix proxy logic
* Fix HTTP POST redirect logic
* Proofread checkCIDR
Add fixes for several situations
* Remove credentials from URL in logs
* Ensure `CURLOPT_FOLLOWLOCATION` is `false` by setting it at the end
* Fix codesniffer long line
* Fix potential bypass due to wrong return value
If there were no records returned by `dns_get_record()`, no overrides to `CURLOPT_RESOLVE` would get passed,
and a potential bypass could occur, when cURL would try to resolve the domain by itself.
* Put the URL at the end in logs
* Add documentation and environment variable support
* make readme
* Fix wrong behavior in case of IP
* Fix duplicate selector in CSS
* Minor type check change
* i18n fr, en
* Minor type check change
* Fix whitespace i18n fr
* make fix-all
* Fix `$ips_ok` not being returned after domain records were cached
* make readme
* PHPStan fix
* make readme
* Minor syntax in SimplePie
* Only return `null` if no allowed IPs were found
* Add wildcard *, help message
* Consistent docs with help message
* i18n: pl
* SimplePie compatibility PHP 7.2
* make fix-all
* Sync SimplePie
* https://github.com/FreshRSS/simplepie/pull/76
* 💥 Breaking change in the Changelog
* Document `INTERNAL_HOST_ALLOWLIST` in Docker docs
* Remove `Cookie` and `Authorization` headers in `httpGet()` during cross-origin redirect
* Minor whitespace
And same comment convention than below
* Remove authentication headers and change POST to GET on redirect in SimplePie
* Remove .local in Docker example
* Fill in default ports when comparing URL origins
* Remove .local from other places than the Docker example
* Rewrite WebSub subscribe to use `httpGet()`
* make fix-all
* Also unset `CURLOPT_USERPWD` during redirects
* phpcs fix
* Always unset `CURLOPT_FOLLOWLOCATION`
* Bump SimplePie
https://github.com/FreshRSS/simplepie/pull/78
* Update logic for CURLOPT_FOLLOWLOCATION
* Fix PHPStan
* Changelog fix security section
* Update most common RSS Bridge case
https://hub.docker.com/r/rssbridge/rss-bridge
* Replace misleading 127.0.0.1:8080 example for Docker
This does not make sense for a Docker container
---------
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
I already changed some places that were using normal string comparison to hash_equals before, but didn't check other places.
Now the checks should be consistent.
This reverts commit 5c5b0b9e66 (PR #8933).
The `transform: translateZ(0)` added to #nav_entries promotes the element to
its own compositor layer, but a non-`none` transform also makes the element a
containing block for `position: fixed` descendants and establishes a new
stacking context. That side effect introduced a regression, so this restores
the previous behaviour while a less invasive fix for #8829 is worked out.
Reverting the whole PR (CSS + CREDITS.md) for a clean rollback.
* fix(themes): keep article nav bar pinned to bottom in iOS standalone PWAs
On iOS standalone PWAs, WebKit fails to repaint `position: fixed` elements
after a programmatic scroll, so the article navigation bar (#nav_entries)
drifts to the middle of the screen after tapping the prev/next buttons
(which scroll the article container in JS). This does not happen in regular
Safari, where the browser chrome provides repaint hooks the standalone shell
lacks.
Promote #nav_entries to its own compositor layer (transform: translateZ(0))
so WebKit keeps it pinned to the viewport across programmatic scrolls.
This supersedes #8833, whose `top: auto` was a no-op: nothing in the
stylesheet ever sets a `top` value on #nav_entries, so it could not affect
positioning.
Fixes#8829
* Add Antonio Santos to CREDITS.md
* fix(themes): drop redundant will-change on #nav_entries
The compositor layer that keeps #nav_entries pinned in iOS standalone PWAs
comes entirely from transform: translateZ(0). The accompanying
will-change: transform was redundant — it only hints at upcoming changes and
adds nothing to an element already promoted to its own layer.
Removing it leaves the bar pinned across programmatic scrolls (verified on an
iOS standalone PWA), with no behavioural change.
Based on maintainer feedback on #8933.
* Always jump article to top when header is offscreen
Closes#4069.
How to test the feature manually:
1. Disable 'Stick the article to the top when opened'
2. Open a very long article
3. No scrolling will occur if you close it again while the header is still onscreen
4. If the header left the screen, opening another article will scroll to it to top
5. Same for collapsing the current article, but then it'll put the current header at the top
* Compensate for layout shift
* Fix going back to previous article above viewport
* clarify variable name: header_off_screen → header_above_viewport
Replace absolute positioning inside `.titleAuthorSummaryDate` with CSS Grid. Title, date, and summary use `grid-area` instead of `position: absolute` + `margin-top: 2.25rem`.
Drops magic numbers that had to stay in sync:
- Three uses of `155px` (date width, title min, title padding) all describing the same column
- `2.25rem` margin-top on summary that had to clear the absolute title
- `90%` summary max-width to keep it off the date
Truncated-title hover-extend now uses `grid-column: 1 / -1` instead of `padding-right: 0.5rem`.
Depends on #8823: grid inside `display: table` mis-sizes in older Gecko, causing summary to misbehave. With the flex base from that PR, the grid sizes correctly in SeaMonkey 2.53.
## Test plan
- `make test-all` passes
- Verified in LibreWolf and SeaMonkey 2.53 with Nord and Origine themes
- Wide, narrow, and mobile viewports
- Toggle combinations: date on/off, summary on/off, hover-extend on truncated titles
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Convert `.horizontal-list` from `display: table` to `display: flex`. The title item gets `flex: 1; min-width: 0; align-self: stretch` to match the implicit sizing it got from table-cell.
Class name kept so `main.js` `.closest('.horizontal-list')` calls and theme overrides still match. No `gap` or logical properties, so it works back to Firefox 28 / SeaMonkey 2.53.
Prep for #8824 which converts article rows to CSS Grid (#6776). Grid inside `display: table` mis-sizes in older Gecko, so the outer table has to go first.
## Test plan
- `make test-all` passes
- Verified in LibreWolf and SeaMonkey 2.53 with Nord and Origine themes
- Wide, narrow, and mobile viewports
- Bundled themes (Ansum, Origine-compact, Mapco, Swage) checked: no overrides depend on `display: table`
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
* Add a warning message to the API password section, add a log warning when a client uses GET, use POST in sample curl API usage
References #8834.
* Apply suggestion from @Inverle
Co-authored-by: Inverle <inverle@proton.me>
* Apply suggestion from @Inverle (Polish translation)
Co-authored-by: Inverle <inverle@proton.me>
* French translation
* Dutch translation
* German
* Apply suggestion from @Inverle api via post
Co-authored-by: Inverle <inverle@proton.me>
* Apply suggestion from @Inverle via POST (French)
Co-authored-by: Inverle <inverle@proton.me>
* Add user-agent
* update translation info in README
* avoid phpcs line too long
* also trigger on email as suggested by @Inverle
* i18n: fr typography
* make fix-all
---------
Co-authored-by: Inverle <inverle@proton.me>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
Reader view sets .aside.visible { padding-top: 0 } (swage.css:1236), so when
the sidebar is open the absolute-positioned logo lands on the Subscription
management button. Extending the existing hide rule from #8739 to also
cover body.reader is the smallest fix; the logo isn't load-bearing in
reader view. Closes#8802.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
This keeps the mobile article navigation fixed to the bottom of the viewport by clearing any inherited top offset in the small-screen rule. It updates both LTR and RTL base theme CSS so the previous/next bar remains anchored while browsing on mobile Safari.
Verification: targeted CSS assertion for both base theme files; `git diff --check`.
Closes#8829
Co-authored-by: mzl2233 <mzl2233@users.noreply.github.com>
Reverts #8801 (keeping its incidental blank-line cleanups) and #8815, restoring icon-only feed column on mobile (#8814).
I filed the original PR thinking the icon-only behavior was an inconsistency bug versus the configurable `topline_website` setting, not realizing it was a deliberate mobile choice. The `clamp()` cap helped, but the column still takes space the title could use, and on phones icon-only is the better tradeoff.
A distinct narrow-viewport setting for `topline_website` was raised as a future improvement.
* Revert "fix(themes): cap website column at narrow when feed name is shown (#8815)"
This reverts commit af6a500638.
* Revert "fix(themes): show feed name at narrow widths when configured (#8801)"
This reverts commit 9ff4aec368.
---------
Co-authored-by: FreshRSS Pi <freshrss-pi@localhost>
#8747 (re?)introduced an animation I find unbearably slow. If it was always there I suppose I just got used to it.
How to test the feature manually:
1. Open and close the sidebar on a sufficiently small width.
Browsers don't inherit font-family on button, input, select, textarea by
default, so the rule on html, body in frss.css didn't reach the "Mark as
read" button or the search input. Add an inherit rule so all themes
extending base-theme pick up their configured font.
Reported and tested by @JerryCrazy.
FixesFreshRSS/FreshRSS#8803
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
#button-update-loading and the generic .loading class (used by
#first_load) painted loader.gif as a background. Both now use the
#load_more.loading::after border-rotation spinner from #8804. The
unused #slider-content .loader rule is also removed. Drops the
--frss-loading-image variable, all twelve loader.gif files, and
references in the theme contribution docs.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Replace four :has(~.date) selectors with a has-date modifier class
on .flux_header, mirroring the existing has-thumbnail and has-summary
classes. The condition (whether the date is rendered) is known
server-side and can be exposed on the parent <ul> directly. Same
elements matched in modern browsers. The rules now also apply in
browsers without :has() support, fixing the date column overlapping
the title in SeaMonkey (#6776).
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The :has(input[type="checkbox"]) check is redundant. Every <label>
inside .dropdown-menu .item already has a checkbox child (constructed
in main.js), so the selector matches the same set as :not(.noHover)
alone. Removing it makes the rule work in browsers without :has()
support (#6776).
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
#8801 dropped the unconditional 40px cap on .item.website at narrow widths so users with topline_website set to name/full would actually see the feed name on mobile. With the default 'full' mode, the column then inherited the 200px wide-width default, squashing the article title (#8814).
Re-introduce a cap for the name-bearing modes: max-width 30vw with width auto, so the favicon and name shrink to fit the viewport without overrunning the title cell.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
* fix(themes): replace #load_more loading-state GIF with a CSS spinner
In its `.loading` state, the "Load more" button kept its `.btn` frame and the spinner inside was hard to see or invisible across themes. Replaces the GIF with a base-theme CSS spinner inheriting `currentColor`, drops the button frame, respects `prefers-reduced-motion`, and renders crisply at any DPI. Per-theme `#load_more.loading` overrides in Nord, Flat, Mapco, Ansum and Swage become redundant and are removed; a now-redundant `font-size: 0` rule in `base.css` is also dropped.
* fix(themes): use border-rotation spinner for older-browser compat
Replaces conic-gradient + mask + aspect-ratio (Firefox 83+, Safari 15.4+) with border + rotate, supported in Gecko since Firefox 16 (2012) and Blink/WebKit since 2015. Visual difference: a ring with a rotating gap instead of a tapered arc. currentColor inheritance and prefers-reduced-motion handling are preserved.
* fix(themes): regenerate RTL spinner stylesheet
rtlcss flips border-right-color to border-left-color for RTL; the manual port of the spinner block missed it. Regenerated via npm run rtlcss.
Reworked the spinner with border + rotate instead of conic-gradient + mask + aspect-ratio.
<img width="35" height="36" alt="Screenshot 2026-05-11 at 11 05 43" src="https://github.com/user-attachments/assets/e065efc9-9d6c-4369-8390-f0e89db81952" />
Oldest browser versions still supported: Firefox 16 (2012), SeaMonkey 2.13 (2012), Chrome 43 (2015), Safari 9 (2015), Edge 12 (2015). Below those, `@keyframes` and `animation` would need `-webkit-` fallbacks.
Verified now working in SeaMonkey 2.53.23. Couldn't test feed clicks or page reload there because login itself hits a separate cookie issue.
---------
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The multiline class on the title <a> existed only so the parent <li>
could detect it via :has(.multiline). The condition (thumbnail or
summary enabled) is already exposed on the parent <ul> by the
has-thumbnail and has-summary classes, so keying the rule on those
directly removes the indirection. Same elements matched in modern
browsers. The rule now also applies where :has() isn't supported,
relevant to #6776.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Rename the Nord theme display name from "Nord theme" to "Nord". The upstream Nord palette project at https://www.nordtheme.com refers to itself consistently as "Nord" throughout its branding; the "theme" suffix is redundant. The rename also matches the other entries in the theme picker (Ansum, Dark, Mapco, Pafat, Swage), which all use a single short name.
The theme directory, file paths, and CSS class names are unchanged. Only the user-facing display name in the theme picker (and the corresponding rows in the user docs) is affected.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Two narrow @media rules in base-theme/frss.css predate the configurable topline_website modes from #4969 and force icon-only behavior regardless of the user's Website setting; #8631 partially papered over this for grid-layout entries. Drop the unconditional span-hide and its grid-layout exception, and scope the 40px width cap to .websiteicon (with a comment explaining why it stays at narrow).
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The internal search was shown in the UI as the user search.
This was due to the lazy nature of the Generator. Improve the try/catch behaviour at the same time.
How to test:
* Make a user query with a search parameter
* Share the user query as HTML
* Observe the search field (should be empty with this PR, while it contained the internal search before)
Alt-Dark, Dark, Origine, and Pafat use `border-bottom: 1px solid` on
`.header > .item`, making their wide-view header 57px tall (56px
content + 1px border). Other shipped themes have no such border and
render at 56px.
Replace `border-bottom` with `box-shadow: inset 0 -1px 0`. Visually
identical (same colour, same position at the bottom of each header
cell), but the shadow doesn't add to the box height. Wide-view
header outerHeight becomes 56px across themes, which lets the
shared `--height-header: 56px` token introduced in #8783 produce
pixel-perfect alignment between the wide header and the narrow
drawer X button. Without this PR, those four themes carry a 1px
residual offset under #8783's alignment fix.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Mapco and Ansum apply `transition: all 0.2s ease-in-out` to `.aside`
in their narrow `@media`. When the viewport crosses 840px with the
sidebar open, the resulting `.aside` position change (`static` to
`fixed`) gets animated alongside width, producing a visible artefact
where the X button slides down then scrolls back up before settling.
Limit the transition to the property that should actually animate
(`width`), matching base-theme's existing
`transition: width 200ms linear`.
The artefact only manifests when the drawer stays open across the
840px boundary, which is the behaviour introduced by #8775. On current
edge, `init_nav_menu`'s `media.onchange` toggles the aside off when
crossing the breakpoint, hiding the bug.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Nord was the only shipped theme applying a backdrop-filter to
.dropdown-close outside the narrow-viewport @media block, dimming the
page behind any open dropdown (Settings, mark-read menu, etc.) in wide
view.
Other themes leave the click-catcher transparent in wide view and only
apply a scrim in narrow view, where it doubles as the visual backdrop
for the slide-out aside. The wide-view darken in Nord read as
inconsistent against its own narrow-view treatment (grayscale + blur)
and against every other theme.
Click-outside-to-close still works; only the visual backdrop is removed.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Closes#8765
Changes proposed in this pull request:
- Add disabled-user CSS class to user rows in the management table when the account is disabled
- Add .disabled-user { opacity: 0.5; } style to base theme to visually dim disabled accounts
- Add entry to CREDITS.md
How to test the feature manually:
1. Go to Administration → User Management
2. Have at least one disabled user account in the list
3. Verify that disabled user rows appear dimmed (50% opacity) compared to active users, without any change in functionality
After #8747 the sidebar would re-open on its own when navigating
(e.g. clicking the logo) on sessions where sessionStorage said
the sidebar should be closed.
init_nav_menu() ran toggle_aside_click() to honour the stored
state, then gated a follow-up `.visible` re-add on
`getComputedStyle(aside).display !== 'none'`. Before #8747 that
gate worked because the close path set `aside.style.display =
'none'` inline; #8747 replaced that with an `is-hidden` class
applied only at wide viewports, so at narrow viewports the
computed display stays `table-cell` after closing and the gate
wrongly re-adds `.visible`, sliding the drawer open.
Gate on the toggle button's `.active` state instead. It's the
real source of truth for "should the sidebar be open" and is
already used elsewhere in the same function.
Fixes#8771
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
## Summary
`--width-aside` already existed in `base-theme/frss.css` but only as a fallback inside the narrow-viewport rule from #8749. Desktop `.aside`, `#nav_entries`, `.reader .aside.visible`, and `.header > .item.title` hardcoded `300px` independently. This PR makes `--width-aside` the canonical token for the navigation drawer / left column width, so theme overrides apply everywhere consistently.
## Changes
`p/themes/base-theme/frss.css`:
- Define `--width-aside: 300px` in `:root`.
- `.aside`, `#nav_entries`, `.reader .aside.visible`, `.header > .item.title`: replace hardcoded `300px` with `var(--width-aside)`.
- Narrow-viewport `.aside.visible`: drop the now-redundant `320px` fallback in `min(...)`.
`p/themes/Swage/swage.css`:
- Remove the now-redundant `width: var(--width-aside)` overrides on `.aside`, `#nav_entries`, and `.header > .item.title` (inherited from base now). Swage's `--width-aside: 231px` declaration stays in place, so `#nav_entries`, the header `.title` block, and the reader-view sidebar now resolve to 231 via the token (previously stuck at 300 from base hardcodes), aligning them with Swage's other column elements.
RTL mirrors regenerated via `npm run rtlcss`.
## Why 300px
300px is the existing FreshRSS desktop sidebar value, so default themes see no visible change. The narrow-viewport cap previously used 320 as a fallback, but on actual phones the `calc(100vw - 56px)` cap dominates, so the change has near-zero practical effect on phone UX. Tablet and narrow-desktop sidebars become slightly narrower, more in line with typical desktop conventions.
## Tested
- Origine, Flat, Swage at desktop widths
- Origine and Swage at narrow viewports: sidebar slide, open, close
- Reader view in Origine and Swage
- Header title block: Swage 231, default themes 300
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The `transition: width 200ms linear` rule on `.aside` in the narrow
`@media` block stopped firing after #8201 added inline `display: none`
toggling. Browsers don't interpolate width when an element flips to or
from `display: none`, so width snaps on open and the close transition
gets cut off before any frame renders.
Replace the inline `display` toggle with an `is-hidden` class, applied
only at wide viewports. At narrow viewports the existing `width: 0;
position: fixed; overflow: hidden` already hides the element, so
`display: none` is redundant there and was the only thing blocking the
transition.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
* 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>
Two narrow-viewport rules were duplicated across leaf themes: `.aside { transition: width 200ms linear }` and `.aside.aside_feed { padding: 0 }`. This PR lifts both into the existing `@media (max-width: 840px)` block in `base-theme/frss.css` and removes the duplicates from Alternative-Dark, Flat, Origine, Pafat, and Nord. Swage's redundant `transition` line is also dropped (its other `.aside` properties stay).
Verified visually across Alternative-Dark, Ansum, Flat, Mapco, Nord, Origine, and Pafat at narrow and wide viewports. No regressions. Ansum and Mapco keep their own `.aside { transition: all 0.2s ease-in-out }` via source-order. Themes that previously had no explicit `.aside` rule (Dark, Dark-pink, Origine-compact via inheritance) gain identical computed values to their parent themes.
Also adds top-of-file comments to `base-theme/base.css` and `base-theme/frss.css` clarifying that `base.css` is a scaffold loaded only for the unconfigured base-theme fallback, while `frss.css` is the real shared base loaded by every theme via the `_frss.css` prefix in `metadata.json`. Follow-up to #8743, which initially targeted the wrong file before being corrected.
Lift .aside { transition: width 200ms linear } and
.aside.aside_feed { padding: 0 } from leaf themes into the shared
@media (max-width: 840px) block in base-theme/frss.css. Delete the
duplicates from Alternative-Dark, Flat, Origine, Pafat, and Nord.
Drop the redundant transition line from Swage.
Add top-of-file comments to base-theme/base.css and base-theme/frss.css
clarifying that base.css is a scaffold for the base-theme fallback only,
while frss.css is the real shared base loaded by every theme via the
"_frss.css" prefix in metadata.json. Documents the structure that made
#8743 initially target the wrong file.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Four themes (Alternative-Dark, Origine, Flat, Pafat) define `.nav_menu .btn`, `.nav_menu .stick`, and `.nav_menu .group` margin rules only inside `@media (max-width: 840px)`. At wider viewports the spacing falls back to incidental inline-block whitespace, so narrow view has ~20px between nav-button groups while wide view has ~5px. This PR lifts those margin rules to base scope so both widths match. Narrow-only tweaks (`padding`, `min-height`, Pafat's `min-width`) stay inside @media. Nord is left untouched; it already handles wide-view spacing with its own rem-based values.
**Worth keeping?** I can't speak to whether the asymmetry was intentional. If maintainers prefer the tighter desktop density (closer to Nord's `.125rem`), happy to close or rework with smaller wide-view values.
Follow-up to #8738, which added the narrow-view rules for Pafat.
Wide view, before:
<img width="530" height="39" alt="wide viewport before" src="https://github.com/user-attachments/assets/a25310bd-1b6d-4966-ae4e-7812d73b45f9" />
Wide view, after:
<img width="632" height="40" alt="wide viewport after" src="https://github.com/user-attachments/assets/3c2db89c-0280-4baa-97aa-5ea83211771e" />
Narrow view (unchanged):
<img width="482" height="39" alt="narrow viewport" src="https://github.com/user-attachments/assets/97fc6b7f-9c17-4116-a64f-09255b9cc808" />
Lift .nav_menu .btn, .stick, and .group margin rules out of
@media (max-width: 840px) to base scope in Alternative-Dark,
Origine, Flat, and Pafat. Narrow-only padding and min-height
tweaks stay inside @media. Nord unchanged.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The nested rule `.content, .content_thin { ... .content hr { ... } }`
in Ansum/_layout.css and Mapco/_layout.css expands the inner selector
to `.content .content hr` / `.content_thin .content hr`, which never
matches any markup. <hr> separators in article bodies have fallen
back to browser defaults instead of the styled rule (light grey 1px
line with soft shadow). Dating back to the SCSS sources from 2019
and preserved verbatim through the native-CSS conversion in #8241.
Drop the `.content` prefix on the inner selector so the rule applies
as `.content hr, .content_thin hr`.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The narrow-viewport @media block in Pafat repeats the parent `.nav_menu`
class on its inner selectors (`.nav_menu .btn` etc. inside a `.nav_menu`
nesting block), which native CSS nesting expands to `.nav_menu .nav_menu
.btn` and never matches. Buttons and stick/group wrappers in the top nav
row at <=840px have therefore been falling back to default layout instead
of the intended margins.
Drop the redundant `.nav_menu` prefix on the inner selectors so the rules
apply as intended.
Activating the dormant rules also exposes an asymmetry in the base
`.nav_menu` padding (`5px 0 0 2.5rem`: 5px top, 0 bottom). Combined with
the now-active 5px button margin, buttons sit a few pixels below the
visual centre of the row. Add `padding-bottom: 5px` inside the @media
block to rebalance.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Fixes a cluster of bugs in the Swage theme. Most are nav-bar related and reproducible in narrow viewports (≤840px); one affects the article list at any viewport.
1. **Horizontal page overflow.** `.nav_menu` had `width: 100%` plus `padding-left: 2rem` with default `box-sizing: content-box`, making it 32px wider than the viewport. The whole page side-scrolled. Fixed with `box-sizing: border-box`.
2. **Article title jumps down on hover.** `.flux:not(.current):hover .item .title { top: auto !important }` overrode the base-theme `top: 0`, dropping the absolutely-positioned title to its in-flow position on hover. The override was added in #4671 (a broad font-size/line-height refactor) and looks like collateral; no other Swage rule depends on it. Removed.
3. **Settings/sort buttons drift on scroll.** Both used `position: fixed` without an explicit `top`, so they resolved to their static document position and drifted with scroll. Compounded by being inside `position: sticky` parents (Firefox bug). Fixed by:
- Making `.header` sticky so `.item.configure` (now `position: absolute; top: 0`) anchors to it.
- Splitting `#nav_menu_sort .dropdown-menu` from its siblings and making it `position: absolute` (the only one that needs to float when open).
4. **Logo hidden selector typo.** Narrow-view rule used `.item .title` (descendant) but the actual element is `.item.title` (combined class), so the logo was never hidden in narrow view. Fixed.
5. **Logo overlaps nav buttons when sidebar is collapsed.** At any viewport, collapsing the sidebar leaves the absolutely-positioned logo overlapping the now-wider nav. Added `body:has(.aside:not(.visible)) .header .item.title { display: none }` to hide the logo whenever the sidebar isn't expanded. Trade-off: the logo is no longer visible when the sidebar is collapsed at any width. Keeping it visible would require repositioning or resizing the logo itself, which is a redesign rather than a bug fix.
6. **Forced two-row nav at narrow widths even when one row would fit.** Narrow layout used absolute positioning to pin a second row of buttons at `top: 36px`. Replaced with `display: flex; flex-wrap: wrap`, scoped to article-list bodies (`body:is(.normal, .reader, .global)`) so the settings-page custom layout is untouched.
## Screenshots
**Wide viewport, before:**
<img width="950" height="32" alt="Screenshot 2026-04-30 at 18 26 49" src="https://github.com/user-attachments/assets/58635491-3d36-46af-b4ed-45ff8893bf5a" />
**Narrow viewport, before:**
<img width="738" height="72" alt="Screenshot 2026-04-30 at 18 31 02" src="https://github.com/user-attachments/assets/9b66df9e-8677-47f3-8dfe-011c070b0010" />
**Settings and sort buttons drift on scroll (before, any viewport):**
<img width="116" height="83" alt="Screenshot 2026-04-30 at 17 48 52" src="https://github.com/user-attachments/assets/27a5a2b6-3fe7-4ee8-8cfb-4f399937bedc" />
**Article title shifts down on hover (narrow viewport, before):**
<img width="287" height="43" alt="Screenshot 2026-04-30 at 19 31 53" src="https://github.com/user-attachments/assets/642be719-9f4f-4d83-9ba9-3f584fa7684d" />
**Narrow viewport, after:**
<img width="663" height="32" alt="Screenshot 2026-04-30 at 18 26 17" src="https://github.com/user-attachments/assets/9378fc68-9942-4b5e-af21-f10eb87c474b" />
## Related
- Possibly fixes#6977 (buttons squeezed together at mobile widths in Swage).
## Notes
- `swage.rtl.css` regenerated via `npm run rtlcss`.
- `npm run stylelint` passes.
- All six fixes are small CSS bugs in the Swage theme (most in narrow-viewport nav layout, one in article-list hover); bundled as one PR for that reason. Happy to split into separate PRs if reviewers prefer.
---
- box-sizing: border-box on .nav_menu to fix 32px horizontal overflow
caused by width: 100% + padding-left: 2rem.
- Remove .flux:not(.current):hover .item .title { top: auto !important }
override that dropped article titles to their in-flow position on
hover (introduced in #4671 as collateral from a wider refactor).
- Make .header position: sticky and switch .item.configure (and
#nav_menu_sort .dropdown-menu) to position: absolute with explicit
top: 0 so the cog and sort menu no longer drift when scrolling.
- Fix .item .title -> .item.title selector typo so the logo is
actually hidden in narrow view as intended.
- Hide the logo when the sidebar is collapsed
(body:has(.aside:not(.visible))) to avoid overlap with the now-wider
nav.
- Replace the two-row absolute-positioned narrow-view nav layout with
display: flex; flex-wrap: wrap, scoped to article-list bodies so
settings/admin pages keep their custom layout.
Regenerated swage.rtl.css via npm run rtlcss. npm run stylelint passes.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
In Alternative-Dark and Dark-pink, hovering a button that isn't first in its `.stick` or `.group` row produces a 3-sided highlight (top, right, bottom) instead of all four. The strip rule that visually joins adjacent buttons (`.stick .btn + .btn, ... { border-left: none }`) wins by specificity over `.btn:hover { border: 1px solid <hover-color> }`, so the left edge stays missing through the hover state.
The fix adds `:not(:hover)` to the `.btn` targets in the strip rules, so the join lifts on hover and `.btn:hover` paints the full border. The second strip rule's `border-radius` was hoisted into its own block to keep the radius applying in all states.
Dark-pink inherits the modified rules and needs no changes of its own. The other themes don't change border on hover, so they're unaffected.
References #7405
### Screenshots
#### Before: hovered button missing left border
<img width="171" height="40" alt="hover border before" src="https://github.com/user-attachments/assets/974bd250-e0bd-483c-85dc-f0777a38eb52" />
#### After: hover border on all four sides
<img width="173" height="40" alt="hover border after" src="https://github.com/user-attachments/assets/2bd5002c-f2cd-4ea6-9ae5-8c6caef8cf9f" />
### Notes
- `.rtl.css` regenerated via `make rtl`.
- `npm run stylelint` passes.
- Verified on Alternative-Dark and Dark-pink.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
