mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-05-14 10:13:52 -04:00
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:
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -126,6 +126,11 @@
|
||||
|
||||
}
|
||||
|
||||
.group > .btn:only-child,
|
||||
.group > .dropdown:only-child > .btn {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.aside {
|
||||
background: var(--sid-bg);
|
||||
|
||||
|
||||
@@ -126,6 +126,11 @@
|
||||
|
||||
}
|
||||
|
||||
.group > .btn:only-child,
|
||||
.group > .dropdown:only-child > .btn {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.aside {
|
||||
background: var(--sid-bg);
|
||||
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -126,6 +126,11 @@
|
||||
|
||||
}
|
||||
|
||||
.group > .btn:only-child,
|
||||
.group > .dropdown:only-child > .btn {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.aside {
|
||||
background: var(--sid-bg);
|
||||
|
||||
|
||||
@@ -126,6 +126,11 @@
|
||||
|
||||
}
|
||||
|
||||
.group > .btn:only-child,
|
||||
.group > .dropdown:only-child > .btn {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.aside {
|
||||
background: var(--sid-bg);
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user