mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-05-14 18:23:52 -04:00
8ca99ec114
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>