Mirrors/gitea
0
0 Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-10-22 23:23:50 +02:00
Code Issues Activity

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

Browse Source 
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
This commit is contained in:
silverwind authored and GitHub committed 2026-10-20 19:29:38 +00:00
1 parent d7d658a8e9
commit 52eb515751
2 files changed
+17 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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
@@ -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 {