ynkmr/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-10-23 11:34:01 +09:00
Code Issues Projects Releases Wiki Activity

enhance: improve hover border of colored button groups (#39861) (#39899)

Browse Source 
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>
This commit is contained in:
Giteabot
2026-10-21 04:03:35 +00:00
committed by GitHub
co-authored by silverwind
parent 290568a07b
commit 254e18107e
2 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/devtest/gitea-ui.tmpl
+3
View File
@@ -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>
web_src/css/modules/button.css
+14 -3
View File
@@ -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 {