peezy-tech/jojo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-05-12 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): improve visibility of counters inside of switch items (#11472)

Browse source 
Apply the feature from https://codeberg.org/forgejo/forgejo/pulls/2935 on element from https://codeberg.org/forgejo/forgejo/pulls/6459 (which was applied to notifications page in https://codeberg.org/forgejo/forgejo/pulls/6542).

A few small semi-related refactors. One of them (nested CSS commit) actually revealed a hole in testing: there are no test cases for hover in `evaluateSwitchItem`. I would like to address this but this PR already conflicts with https://codeberg.org/forgejo/forgejo/pulls/11341, so I won't do that until either is merged to save on rebase work.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11472
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
0ko 2026-03-08 18:09:13 +01:00 • committed by Gusted
parent d442f83a09
commit d665904a22
3 changed files with 111 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

36
web_src/css/modules/switch.css
View file

@ -34,14 +34,26 @@
border-radius: var(--border-radius);
text-wrap: nowrap;
transition: background-color 0.1s ease;
&:hover {
background: var(--color-hover);
}
&.active {
z-index: 2;
padding-left: var(--switch-padding-inline);
background: var(--color-active);
outline: 1px solid var(--color-input-border);
}
/* Prevent default browser styling */
&button {
background: transparent;
}
}
.switch > .item:hover {
background: var(--color-hover);
}
/* Item that has to crawl under it's active neighbor, so when it is hovered,
there are no ugly unpainted v/^ shapes between them */
/* Corner rounding aid: item that has to crawl under it's active neighbor,
so when it is hovered, there are no ugly unpainted v/^ shapes between them */
.switch > .item:has(+ .active.item) { /* Active neighbor is next item */
margin-right: calc(-1 * var(--border-radius));
padding-right: calc(var(--switch-padding-inline) + var(--border-radius));
@ -51,13 +63,7 @@ there are no ugly unpainted v/^ shapes between them */
padding-left: calc(var(--switch-padding-inline) + var(--border-radius));
}
.switch > .active.item {
z-index: 2;
padding-left: var(--switch-padding-inline);
background: var(--color-active);
outline: 1px solid var(--color-input-border);
}
.switch > button.item {
background: transparent;
/* Make counters embedded into items more visible on brighter backgrounds */
.switch > .item:is(.active, :hover) > .ui.label {
background: var(--color-label-bg-alt, var(--color-label-bg));
}