feat(ui): implement hover for switch (#9057)

Followup to https://codeberg.org/forgejo/forgejo/issues/6459

Preview:
- https://codeberg.org/attachments/cc12a227-c6eb-4ab5-91ad-0ef967f88c7a
- https://codeberg.org/attachments/a13c8cb6-f654-430c-a6c6-990a2a7f0911

Changes:
- hovered items now have background painted with transition
- added E2E testing: mostly for CSS logic introduced in this PR but also a bit for existing functionality
- variable --color-active is now consistently non-transparent: it already was in forgejo-dark but is now in all themes
- some code improvements in switch.css

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9057
Reviewed-by: Beowulf <beowulf@beocode.eu>
This commit is contained in:
0ko 2025-08-30 18:54:11 +02:00
commit 18cd9b5efa
5 changed files with 113 additions and 13 deletions

View file

@ -240,7 +240,7 @@
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000001d;
--color-hover: #e4e4e4aa;
--color-active: #d4d4d8aa;
--color-active: #e2e2e5;
--color-menu: var(--zinc-100);
--color-card: var(--zinc-50);
--fancy-card-bg: var(--zinc-100);

View file

@ -205,7 +205,7 @@
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #e8e8ff28;
--color-hover: #e8e8ff19;
--color-active: #e8e8ff24;
--color-active: #393b43;
--color-menu: #151a1e;
--color-card: #151a1e;
--fancy-card-bg: #14171a;

View file

@ -205,7 +205,7 @@
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000171d;
--color-hover: #00001708;
--color-active: #00001714;
--color-active: #ebebed;
--color-menu: #f8f9fb;
--color-card: #f8f9fb;
--fancy-card-bg: #ffffff;