瀏覽代碼

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

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>
polybjorn 3 周之前
父節點
當前提交
26a311f8fc
共有 2 個文件被更改,包括 20 次插入22 次删除
  1. 10 11
      p/themes/Alternative-Dark/adark.css
  2. 10 11
      p/themes/Alternative-Dark/adark.rtl.css

+ 10 - 11
p/themes/Alternative-Dark/adark.css

@@ -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;
 }
 

+ 10 - 11
p/themes/Alternative-Dark/adark.rtl.css

@@ -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;
 }