From 254e18107e8bd8dd5f6163522860b9acec74eb89 Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Tue, 20 Oct 2026 21:03:35 -0700
Subject: [PATCH] enhance: improve hover border of colored button groups
 (#39861) (#39899)

Backport #39861 by @silverwind

Hovering a button in a primary or red button group showed a grey frame,
because the generic group hover border applied to colored groups too.
Green groups had no colors at all.

Colored groups now let the hover background fill the border, and green
groups get the same colors as primary and red. The devtest page shows
all three.

<img width="569" height="304" alt="Hovered buttons in uncolored,
primary, red and green button groups, before and after"
src="https://github.com/user-attachments/assets/e0fb6b16-f1f1-459b-9848-9386cd9453c9"
/>

Extracted from https://github.com/go-gitea/gitea/pull/38404

Co-authored-by: silverwind <me@silverwind.io>
---
 templates/devtest/gitea-ui.tmpl |  3 +++
 web_src/css/modules/button.css  | 17 ++++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 6c29d9e33e8..ab7d00972c9 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -54,6 +54,9 @@
 		<div class="ui buttons"><button type="button" class="ui button active">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
 		<div class="ui buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button active">2</button><button type="button" class="ui button">3</button></div>
 		<div class="ui buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button active">3</button></div>
+		<div class="ui primary buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
+		<div class="ui red buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
+		<div class="ui green buttons"><button type="button" class="ui button">1</button><button type="button" class="ui button">2</button><button type="button" class="ui button">3</button></div>
 	</div>
 
 	<div>
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 4efbe538e18..7802d343bd9 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -245,16 +245,19 @@
   border-color: var(--color-red-dark-2);
 }
 
-.ui.green.button {
+.ui.green.button,
+.ui.green.buttons .button {
   color: var(--color-white);
   background: var(--color-green);
 }
 
-.ui.green.button:hover {
+.ui.green.button:hover,
+.ui.green.buttons .button:hover {
   background: var(--color-green-dark-1);
 }
 
-.ui.green.button:active {
+.ui.green.button:active,
+.ui.green.buttons .button:active {
   background: var(--color-green-dark-2);
 }
 
@@ -337,6 +340,14 @@ It needs some tricks to tweak the left/right borders with active state */
   border-left: 1px solid var(--color-secondary-dark-2);
 }
 
+.ui:is(.primary, .red, .green).buttons .button:hover {
+  border-color: transparent; /* let the colored hover background fill the border */
+}
+
+.ui:is(.primary, .red, .green).buttons .button:hover + .button {
+  border-left-color: transparent;
+}
+
 /* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
 .ui.buttons .button:first-child,
 .ui.buttons .button.tw-hidden:first-child + .button {