fix(themes): restore radius on lone .group buttons in nav_menu (#8731)

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>
This commit is contained in:
polybjorn
2026-04-30 06:15:35 +00:00
committed by GitHub
parent 8b66f0f6cd
commit 8ca99ec114
14 changed files with 86 additions and 0 deletions

View File

@@ -178,6 +178,11 @@ th {
border-radius: 0 3px 3px 0;
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 3px;
}
.stick .btn + .btn,
.group .btn + .btn,
.stick .btn + input,

View File

@@ -178,6 +178,11 @@ th {
border-radius: 3px 0 0 3px;
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 3px;
}
.stick .btn + .btn,
.group .btn + .btn,
.stick .btn + input,

View File

@@ -126,6 +126,11 @@
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 5px;
}
.aside {
background: var(--sid-bg);

View File

@@ -126,6 +126,11 @@
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 5px;
}
.aside {
background: var(--sid-bg);

View File

@@ -198,6 +198,15 @@ button.as-link[disabled] {
border: 1px solid var(--dark-border-color0);
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 3px;
}
.group > .dropdown:only-child > .btn {
border-left: 1px solid var(--dark-border-color0);
}
.btn:hover {
background: linear-gradient(to top, var(--dark-background-color-button-hover-gradient1) 0%, var(--dark-background-color-button-hover-gradient2) 100%);
}

View File

@@ -198,6 +198,15 @@ button.as-link[disabled] {
border: 1px solid var(--dark-border-color0);
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 3px;
}
.group > .dropdown:only-child > .btn {
border-right: 1px solid var(--dark-border-color0);
}
.btn:hover {
background: linear-gradient(to top, var(--dark-background-color-button-hover-gradient1) 0%, var(--dark-background-color-button-hover-gradient2) 100%);
}

View File

@@ -149,6 +149,11 @@ th {
border-radius: 0 5px 5px 0;
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 5px;
}
.stick .btn + .btn,
.group .btn + .btn,
.stick .btn + input,

View File

@@ -149,6 +149,11 @@ th {
border-radius: 5px 0 0 5px;
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 5px;
}
.stick .btn + .btn,
.group .btn + .btn,
.stick .btn + input,

View File

@@ -126,6 +126,11 @@
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 5px;
}
.aside {
background: var(--sid-bg);

View File

@@ -126,6 +126,11 @@
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 5px;
}
.aside {
background: var(--sid-bg);

View File

@@ -261,6 +261,15 @@ th {
border-radius: 0 3px 3px 0;
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 3px;
}
.group > .dropdown:only-child > .btn {
border-left: 1px solid var(--border-color);
}
.btn {
margin: 0;
padding: 0.25rem 0.5rem;

View File

@@ -261,6 +261,15 @@ th {
border-radius: 3px 0 0 3px;
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 3px;
}
.group > .dropdown:only-child > .btn {
border-right: 1px solid var(--border-color);
}
.btn {
margin: 0;
padding: 0.25rem 0.5rem;

View File

@@ -200,6 +200,11 @@ th {
border-radius: 0 3px 3px 0;
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 3px;
}
.stick .btn + .btn,
.group .btn + .btn,
.stick .btn + input,

View File

@@ -200,6 +200,11 @@ th {
border-radius: 3px 0 0 3px;
}
.group > .btn:only-child,
.group > .dropdown:only-child > .btn {
border-radius: 3px;
}
.stick .btn + .btn,
.group .btn + .btn,
.stick .btn + input,