mirror/FreshRSS
0
0
Fork 0
mirror of https://github.com/FreshRSS/FreshRSS.git synced 2026-05-19 05:44:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(themes): match hover border on adjacent .group/.stick buttons (#8735)

Browse Source 
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>
This commit is contained in:
polybjorn
2026-04-30 07:07:11 +00:00
committed by GitHub
parent 60678c51a3
commit 26a311f8fc
2 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
p/themes/Alternative-Dark/adark.css
View File

@@ -183,25 +183,24 @@ th {
border-radius: 3px;
}
.stick .btn + .btn,
.group .btn + .btn,
.stick .btn + .btn:not(:hover),
.group .btn + .btn:not(:hover),
.stick .btn + input,
.stick .btn + .dropdown > .btn,
.group .btn + .dropdown > .btn,
.stick input + .btn,
.stick .btn + .dropdown > .btn:not(:hover),
.group .btn + .dropdown > .btn:not(:hover),
.stick input + .btn:not(:hover),
.stick input + input,
.stick input + .dropdown > .btn,
.stick .dropdown + .btn,
.group .dropdown + .btn,
.stick input + .dropdown > .btn:not(:hover),
.stick .dropdown + .btn:not(:hover),
.group .dropdown + .btn:not(:hover),
.stick .dropdown + input,
.stick .dropdown + .dropdown > .btn,
.group .dropdown + .dropdown > .btn {
.stick .dropdown + .dropdown > .btn:not(:hover),
.group .dropdown + .dropdown > .btn:not(:hover) {
border-left: none;
}
.stick .btn + .dropdown > .btn,
.group .dropdown + .dropdown > .btn {
border-left: none;
border-radius: 0 3px 3px 0;
}

21
p/themes/Alternative-Dark/adark.rtl.css
View File

@@ -183,25 +183,24 @@ th {
border-radius: 3px;
}
.stick .btn + .btn,
.group .btn + .btn,
.stick .btn + .btn:not(:hover),
.group .btn + .btn:not(:hover),
.stick .btn + input,
.stick .btn + .dropdown > .btn,
.group .btn + .dropdown > .btn,
.stick input + .btn,
.stick .btn + .dropdown > .btn:not(:hover),
.group .btn + .dropdown > .btn:not(:hover),
.stick input + .btn:not(:hover),
.stick input + input,
.stick input + .dropdown > .btn,
.stick .dropdown + .btn,
.group .dropdown + .btn,
.stick input + .dropdown > .btn:not(:hover),
.stick .dropdown + .btn:not(:hover),
.group .dropdown + .btn:not(:hover),
.stick .dropdown + input,
.stick .dropdown + .dropdown > .btn,
.group .dropdown + .dropdown > .btn {
.stick .dropdown + .dropdown > .btn:not(:hover),
.group .dropdown + .dropdown > .btn:not(:hover) {
border-right: none;
}
.stick .btn + .dropdown > .btn,
.group .dropdown + .dropdown > .btn {
border-right: none;
border-radius: 3px 0 0 3px;
}