#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>
At `max-width: 840px`, base-theme hides the "Mark as read" text button via `.no-mobile`. Each affected theme strips the toggle's left border and radius so it visually joins the text button at wider widths. With the text button hidden, the toggle is left with a flat left edge.
The fix restores rounded left corners (and, where the theme has visible borders, the left border itself) on the lone toggle inside each theme's `@media (max-width: 840px)` block, matching #8711. Affected: Alternative-Dark, Ansum, Dark, Flat, Mapco, Pafat. Dark-pink inherits via its `../Alternative-Dark/adark.css` import.
Alternative-Dark and Dark-pink also need a hover override on the same selector, since their `.btn:hover` rules replace the border color and would otherwise mismatch the static left border. The other themes don't change border on hover.
References #7405
### Screenshots
#### Before, narrow Alt-Dark: lone toggle with flat left edge
<img width="485" height="41" alt="alt-dark before" src="https://github.com/user-attachments/assets/de11b717-2e4d-4d8b-9ccf-0ed894ac9c95" />
#### After, narrow Alt-Dark: restored left edge, with matching hover border
<img width="487" height="41" alt="alt-dark after hover" src="https://github.com/user-attachments/assets/6c2270d8-aafe-4203-8f27-5c9dc66d88ab" />
### Notes
- `.rtl.css` regenerated via `make rtl`.
- `npm run stylelint` passes.
- Verified at narrow width on FreshRSS 1.28.2-dev.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
In Pafat at narrow widths, the User queries dropdown inside `#nav_menu_actions.group` is visually disconnected from its sibling buttons: its right edge looks rounded but with a gap to its left neighbor (the search dropdown), so it doesn't visually cap the group cleanly. The cause is Pafat's existing rule
```css
.stick .btn + .dropdown > .btn,
.group .btn + .dropdown > .btn,
.group .dropdown + .dropdown > .btn {
border-left: none;
border-radius: 0 3px 3px 0;
}
```
which right-rounds **every** group dropdown that follows a button or another dropdown, not only the trailing one. When two group dropdowns sit side by side (the search dropdown followed by the queries dropdown), both end up right-rounded and look disconnected.
The fix adds `:last-child` to the two `.group` selectors so the right-radius only applies when the dropdown is the trailing element. Non-trailing group dropdowns then fall through to the base `.group .btn { border-radius: 0 }` rule and render with square corners, joining cleanly. A lone group dropdown (where `.dropdown` is `:only-child` of `.group`) is untouched, because it has no preceding sibling for the `+` combinator to match.
### Screenshots
#### Before, narrow Pafat: queries' right edge disconnected from search
<img width="316" height="179" alt="pafat before" src="https://github.com/user-attachments/assets/f5a5558f-e036-4cb6-8a6c-b33534de0ee1" />
#### After, narrow Pafat: queries joined to search and right-rounded as group cap
<img width="304" height="176" alt="pafat after" src="https://github.com/user-attachments/assets/65c371a0-f578-4a45-b797-5c669c8b293a" />
### Notes
- `.rtl.css` regenerated via `make rtl`.
- `npm run stylelint` passes.
- Verified at narrow width on FreshRSS 1.28.2-dev.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
At max-width: 840px, the existing rules only adjusted .stick wrappers
and their child buttons. .group elements were missing from the
selector list, so their child buttons kept the default 10px horizontal
margin from the .nav_menu .btn rule, breaking the visual joining of
multi-button groups (e.g. Views) at narrow widths.
Add .nav_menu .group to both existing selectors so .group is treated
the same as .stick — the wrapper gets outer margin, child buttons get
zero horizontal margin.
Same pattern already used by Alt-Dark and Pafat at narrow widths.
.rtl.css regenerated via make rtl. npm run stylelint passes.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Fixes#7405
Several themes inherit the same button-radius cascade bug: a single button inside a `.group` element ends up right-rounded only because the `.btn` matches both `:first-child` and `:last-child`, and the right-radius rule wins by source order. Visible on:
- The **Update feeds** button (lone `.btn` in `#nav_menu_actualize`)
- The **Toggle sidebar** button at narrow width (`#nav_menu_toggle_aside`)
- The **Sorting** button (`.btn` inside a lone `.dropdown` in `#nav_menu_sort`)
The fix uses targeted `:only-child` rules that give full radius to lone `.group` children, with selector form `.group > .btn:only-child, .group > .dropdown:only-child > .btn`.
In **Dark** and **Origine**, the Sorting button also needs an explicit `border-left` restored on the dropdown branch. Origine's `.group .dropdown:last-child > .btn { border-left: none }` strips the left border from a lone dropdown's button. Dark inherits this strip rule via its `../Origine/origine.css` import, so the same fix is applied in both themes, each re-asserting the border in its own variable (`--border-color` for Origine, `--dark-border-color0` for Dark). The radius rule and the border-left re-assertion are kept as separate blocks so the border-left only applies to the dropdown case, not to lone `.btn` children.
Themes affected directly: Alternative-Dark, Ansum, Dark, Flat, Mapco, Origine, Pafat. Dark-pink inherits via its `../Alternative-Dark/adark.css` import; Origine-compact inherits via its `../Origine/origine.css` import.
The same restore-radius / restore-border approach was approved in #8711 for Nord's mark-read toggle.
### Out of scope
The mark-read dropdown (`#nav_menu_read_all`) at narrow widths looks similar but is not fixed here. The dropdown is not a CSS `:only-child` of `.group` (its sibling `.read_all` button is still in the DOM, even when it visually wraps to a new row), so the rules in this PR do not match it. That case is handled in a separate upcoming PR with `@media` rules per theme.
### Screenshots
#### Sorting button (visible-border theme)
Before:
<img width="494" height="41" alt="origine visible-border original" src="https://github.com/user-attachments/assets/d8edfc7b-06b1-4156-911b-e559c2b2c278" />
After:
<img width="494" height="42" alt="origine visible-border fixed" src="https://github.com/user-attachments/assets/8540c0e1-dbe1-46a9-adec-b0e822e7860d" />
#### Update feeds button (lone .btn case)
Before:
<img width="680" height="123" alt="mapco lone btn original" src="https://github.com/user-attachments/assets/21acac15-2c48-40f2-b8e7-9bcd39ab29e8" />
After:
<img width="692" height="123" alt="mapco lone btn fixed" src="https://github.com/user-attachments/assets/6bd1c59d-5039-44cc-9a8d-eecf86e5df68" />
### Notes
- `.rtl.css` regenerated via `make rtl`.
- `npm run stylelint` passes.
- Tested locally on FreshRSS 1.28.2-dev across all affected themes.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
In Alternative-Dark and Flat (and Dark-pink via its `../Alternative-Dark/adark.css` import), the sidebar toggle button (`#nav_menu_toggle_aside`) overlaps the next button.
Base-theme positions the toggle absolutely (`position: absolute; left: 0.5rem`) and reserves space for it via `.nav_menu { padding-left: 3rem }`. Each affected theme overrides `.nav_menu` with `padding: 5px 0`, explicitly setting no horizontal padding. With no reserved space and the toggle still absolute, the toggle floats over the start of `#nav_menu_actions`.
The fix sets `#nav_menu_toggle_aside { position: static }` per theme, so the toggle flows inline at the start of `.nav_menu` alongside the action buttons. This respects each theme's stated layout choice (no horizontal padding) rather than overriding it to restore base's reservation. The same `position: static` approach was previously approved for Nord in #8711.
Themes that explicitly reserve horizontal space (Ansum, Mapco, Pafat) or preserve base's reservation (Dark, Origine, Origine-compact) are unaffected. Dark-pink needs no changes of its own; it inherits the fix via Alt-Dark.
### Screenshot
#### Bug, wide width: toggle overlapping next button
<img width="62" height="47" alt="alt-dark overlap before fix" src="https://github.com/user-attachments/assets/ae33a9c1-5abb-40d4-b17d-9288c355a86c" />
### Notes
- `.rtl.css` regenerated via `make rtl`.
- `npm run stylelint` passes.
- Verified on Alternative-Dark, Dark-pink, Flat.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Closes FreshRSS/FreshRSS#6522.
Refresh of FreshRSS/FreshRSS#6590 by @sgzmd, which has been stalled with merge
conflicts since 2024. All original commits are preserved as-is in the history
(authorship intact); this PR adds a merge with current `edge` plus minor fixes.
## Summary
Adds a user setting `show_title_unread` (default `true`, so existing behavior
is preserved) that hides the unread article counter from both the tab title
and the favicon overlay. A single toggle controls both, matching the request
in #6522.
## Screenshots
Toggle in display settings:
<img width="320" height="127" alt="Display settings with new toggle" src="https://github.com/user-attachments/assets/fc78f825-161d-4b47-9b85-08e39554a4b1" />
Tab title and favicon when **enabled** (current behavior):
<img width="253" height="42" alt="Tab title and favicon with unread counter" src="https://github.com/user-attachments/assets/57387600-72e0-4b22-b059-04b5bfea673a" />
Tab title and favicon when **disabled** (new behavior):
<img width="254" height="40" alt="Tab title and favicon without unread counter" src="https://github.com/user-attachments/assets/93ac7997-dd4e-49bc-ab4a-74e4f0d2db1b" />
## Changes on top of #6590
- Resolved merge conflicts with current `edge` (controllers, model, view,
`config.default.php`, ~25 i18n files, plus the `zh-tw` -> `zh-TW` rename).
- Replaced Czech text mistakenly placed in `de/conf.php` with an English
`// TODO` marker so a German speaker can translate later.
- Renamed JS context key `show_unread_favicon` -> `show_title_unread` to
match the backend property and avoid a confusing dual-name for one setting.
- Removed an unused duplicate of `show_title_unread` from `config.default.php`
(the setting is read via `userConf()`, never `systemConf()`).
- Gated the dynamic title rewrite in `incUnreadsFeed` (`p/scripts/main.js`)
on the setting. Without this, marking an article read while the setting
was off would re-add the `(N)` prefix to the tab title.
- Escaped a stray apostrophe in the Occitan translation that broke parsing.
- `make fix-all` re-sorted i18n keys and added `// TODO` placeholders for
`fi`, `pt-PT`, `uk` (untranslated by the original PR).
## Test plan
- [x] `make test-all` passes (620/620 PHPUnit, phpstan, phpcs, eslint,
stylelint, markdownlint clean; `bin/typos` failed locally with a binary
arch mismatch on macOS arm64 - unrelated to this change).
- [x] Manually tested on a real instance: default behavior unchanged;
toggling the setting hides both the tab title `(N) ` prefix and the
favicon overlay; toggling back restores both; marking articles read
while the setting is off does not bring the counter back; opening and
closing an article preserves the user's choice.
* Make showing the number of unread items in the title configurable.
* Proposed approach to passing show_unread_favicon setting down to client-side code
* Fixes and refactoring
* Updating default config for the user.
When user's config wasn't initialised we are copying it from `config-user.default.php` - if `show_title_unread` is not there, it is assumed to be false, whereas in `config.default.php` it's true by default. This results in inconsistency until user changes the field for the first time in Config->Display.
* Adding translations.
* fix: gate JS title rewrite + drop dead system config entry
The original PR added show_title_unread to both config-user.default.php
(read by userConf, the right place) and config.default.php (read by
systemConf, never used here). Drop the system-level entry.
Also: incUnreadsFeed dynamically rewrites document.title when articles
are marked read/unread. That code path was not gated by the setting, so
toggling the setting off and then marking an article read would re-add
the (N) prefix to the tab title. Skip the document.title / prevTitle
write when context.show_title_unread is false.
* fix: drop README pollution from local make fix-all
`make fix-all` regenerated the README translation tables on macOS, where the
case-insensitive filesystem and an untracked local `app/i18n/nb/` directory
caused the generator to emit `zh-tw` (lowercase) and an `nb` entry. Reset
both README files to upstream/edge so CI can regenerate them cleanly.
* fix: restore zh-TW/conf.php from edge (case-insensitive FS damage)
The macOS case-insensitive filesystem caused the merge to overwrite
upstream/edge's properly-translated zh-TW/conf.php with the older
zh-tw/conf.php content from the PR side, regressing translation
coverage from 94% to 71%. Reset the file to edge's content and re-add
the show_title_unread Traditional Chinese translation.
---------
Co-authored-by: sgzmd <sigizmund@gmail.com>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
* fix(Nord): nav_menu sidebar toggle overlap and mark-read dropdown edge
Two small layout issues in the Nord theme's top button row.
1. #nav_menu_toggle_aside is absolute-positioned by base-theme/frss.css,
which expects .nav_menu to reserve space via padding-left. Nord's
.nav_menu rule replaces that padding, so at narrow widths the toggle
overlaps the first button in the row. Setting position: static lets
the toggle flow inline with the other buttons.
2. At viewport widths where base-theme hides the 'Mark as read' text
button (max-width: 840px), only the dropdown toggle remains. Nord
strips the toggle's left border and radius so it visually joins the
text button, but once the text button is hidden the toggle is left
with a flat, borderless left edge. Restore the border and radius
inside the same media query.
nord.rtl.css regenerated with 'make rtl'.
Fixes#8707
* fix(Nord): consolidate mark-read toggle rule into existing media block
Move the max-width: 840px rule added in the previous commit into the
existing @media block further down the file, as requested in review.
No behavioural change; regenerated nord.rtl.css via make rtl.
---------
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
### Motivation
- The GReader API enabled `JSON_THROW_ON_ERROR` globally and streams items with `json_encode()` without catching `JsonException`, so malformed UTF-8 in feed-derived fields could trigger an uncaught exception and abort streaming responses (resulting in 500/partial responses).
### Description
- Add `JSON_INVALID_UTF8_SUBSTITUTE` to `JSON_OPTIONS` in `p/api/greader.php` so `json_encode()` substitutes invalid UTF-8 bytes instead of failing while keeping `JSON_THROW_ON_ERROR` and other flags unchanged.
### Testing
- Ran a syntax check with `php -l p/api/greader.php`, which completed successfully.
------
[Codex Task](https://chatgpt.com/codex/cloud/tasks/task_e_69b8831ec0c48324810ea9ec05c16493)
* prefer feed.icon
Closes#5518
Changes proposed in this pull request:
- When a feed provides an icon URL (<image><url> in RSS 2.0/1.0, <atom:icon>/<atom:logo> in Atom, icon/favicon fields in JSON Feed), that URL is stored as a feedIconUrl attribute on the feed and used as the primary source for favicon downloads, instead of scraping the feed's website for <link rel="icon"> tags.
- If the feed-provided icon URL fails to return a valid image, the existing fallback chain (website HTML favicon search → /favicon.ico) is preserved.
Custom favicons uploaded by users always take priority and are never overridden.
How to test the feature manually:
1. Add an RSS feed that includes a <image><url> element (e.g. an RSSHub feed: `https://rsshub.app/youtube/channel/UC2cRwTuSWxxEtrRnT4lrlQA`). After actualization, confirm the feed's favicon matches the avatar image from the feed, not the Bilibili site favicon.
2. Add an Atom feed containing <atom:icon> or <atom:logo> Confirm the feed icon is used.
3. Add a JSON Feed (spec: icon field). Confirm icon is preferred over favicon when both are present.
4. Temporarily point a feed's <image><url> to a broken URL. Confirm FreshRSS falls back to the website favicon silently.
5. Upload a custom favicon for a feed, then actualize it. Confirm the custom favicon is not replaced.
<img width="470" height="317" alt="image" src="https://github.com/user-attachments/assets/17445154-d94c-44d6-b7e7-019bf24c5767" />
* fix(favicon): use htmlspecialchars_decode for feed image URL
* Decode quotes as well
* New function in our SimplePie fork
https://github.com/FreshRSS/simplepie/pull/73
---------
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
* Convert feed view into grid where appropriate
This makes the feed view prettier on mobile, if thumbnails and summary are shown, as discussed in https://github.com/FreshRSS/FreshRSS/discussions/8629
**Changes proposed in this pull request:**
- Converts Feed Item list into multiple lines
- But only if both thumbnails and summaries are shown
The code is quite different from what I had done in my own hack: There I had used `display: flex` and then counted items, but that only works for my own hack: here we don't know how many items a given user may have, so we use `display:grid` instead with name grid areas.
**How to test the feature manually:**
1. Ensure you enable both thumbnails and summaries
2. Check out the feed view on mobile
3. Play around with enabling and disabling bookmarks, share button, etc.
**Pull request checklist:**
- [x] clear commit messages
- [x] code manually tested
- [ ] unit tests written (optional if too hard)
- [ ] documentation updated
**Screenshots:**
<img width="458" height="1173" alt="SCR-20260324-jnte" src="https://github.com/user-attachments/assets/1d5c1615-961a-4953-8157-f9f8a5470545" />
<img width="459" height="1172" alt="SCR-20260324-jnwf" src="https://github.com/user-attachments/assets/96ffcea3-384f-4de9-9c50-3366022713d8" />
* remove gap
* fix lint errors
* fix style errors
* remove whitespaces
* Reduce use of slow `:has()` CSS selector
---------
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
* New SQL wrapper function `fetchInt()`
* Favour use of `fetchAssoc()`, `fetchInt()`, `fetchColumn()`
* Favour Nowdoc / Heredoc syntax for SQL
* Update indenting to PHP 8.1+ convention
* Favour `bindValue()` instead of position `?` when possible
* Favour `bindValue()` over `bindParam()`
* More uniform and robust syntax when using `bindValue()`, checking return code
* Add option to hide sidebar by default (#8515)
Closes https://github.com/FreshRSS/FreshRSS/issues/8515
Changes proposed in this pull request:
- Add `sidebar_hidden_by_default` user preference (default: `false`)
- Add a checkbox in the Display settings page to toggle this preference
- Hide the sidebar on page load in `normal` and `reader` views when the preference is enabled and no session state exists
- Add English translation key; mark all other languages as `TODO` for translators
How to test the feature manually:
1. Go to Settings → Display, tick "Hide sidebar by default", save
2. Go back to the main view (normal or reader): the sidebar should be hidden on load
3. Toggle the sidebar manually — it should open/stay open for the rest of the session
4. Open a new tab: the sidebar should be hidden again
5. Go to Settings → Display, untick the option, save: the sidebar should now be visible on load as usual
6. Check that the sidebar is always visible on Settings pages regardless of the preference
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* fix: PR comment
* Update app/i18n/pl/conf.php
* i18n: fr
* make fix-all
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Inverle <inverle@proton.me>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
* Implement filter on last modified date by server
Especially relevant for API, to get the modified changes: the API will now return the articles that are new or which content has been modified since `ot`:
fix https://github.com/FreshRSS/FreshRSS/issues/7304
fix https://github.com/FreshRSS/FreshRSS/issues/2566https://github.com/jocmp/capyreader/discussions/533#discussioncomment-11341808
New corresponding search operator `mdate:` and new UI:
<img width="650" height="627" alt="image" src="https://github.com/user-attachments/assets/8ba02937-abc7-44bf-b718-cf269cc37caf" />
* Migration from existing id column
* Fix auto-update
* Index after update for performance
* Minor comment
* Minor whitespace
* Fix regex
* Minor .gitignore
* Changelog and warning
* Update app/i18n/pl/gen.php
Co-authored-by: Inverle <inverle@proton.me>
* make fix-all
* Optimise SQL auto-update
For speed and resilience
* Minor SQLite change of sequence
* Changelog
* Speed optimisation: No DEFAULT 0
* Better migration
* Revert small bug
* Prepare filtering on multiple dates for API
* make fix-all
* Update tests
* Remaining manual merge
* Update versions
* Remove warnings no longer relevant in changelog
* Implement in API, and COALESCE
* No lastModified when adding new article
* Rework logic
* Sort IS NOT NULL
* Remove forgotten lastModified
---------
Co-authored-by: Inverle <inverle@proton.me>
