From 52eb515751f6d4f83f7c475ab4b1d7ea7c3fb7b9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 20 Oct 2026 21:29:38 +0200
Subject: [PATCH] enhance: improve hover border of colored button groups
 (#39861)

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
---
 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 558a575cab0..811dc14f503 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -244,16 +244,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);
 }
 
@@ -336,6 +339,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 {