forgejo/web_src/css/markup
0ko 373c876db6 feat: improve checkboxes (#13016)
Reviewing https://codeberg.org/forgejo/forgejo/pulls/12928 inspired me to bridge the gap between our highly advanced markup checkboxes and our other inconsistent UI checkboxes.

This PR does exactly that: it re-uses most of already developed code from markup in our regular UI checkboxes.

This not only makes them look much better but also brings us closer to getting rid of Fomantic checkboxes. In fact, removing `ui checkbox` from such checkboxes keeps them looking well, and only breaks Fomantic scripts related to them.

Some notable changes:
- Better vertical alignment
- More consistent gap distance between the box and the text
- Removed obsolete vendor prefixes in properties
- In UI, everything is actually styled by Forgejo now instead of being a mismatch with browser's default styling. Dark theme + Firefox looks a lot better now
- In UI, checkmarks are now consistent across browsers

## Preview

|Before|After|
|-|-|
|Markup|Slightly increased gap|
|![](/attachments/c6bc8a0a-77f2-499a-b419-ac00036d2657)|![](/attachments/b1c878c8-40ba-4c16-9cc0-706106991cec)|
|UI|Fixed vert. alignment|
|![](/attachments/60aab39d-04f6-4087-95cf-25cf5bf6363b)|![](/attachments/2d89b19a-79cb-4c89-adff-8981920aea24)|
|![](/attachments/28a82b54-3fa0-458e-95e4-135341439256)|![](/attachments/e1fc8e66-ca09-4b51-95fa-276faa8edf1c)|
|UI dark|Properly styled now|
|![](/attachments/10afe019-761e-4fc2-b680-ad9e2fde55bc)|![](/attachments/caf9b8f9-4640-4a50-97c1-50832a0aec39)|

## Testing

No bugs found to fix and automated testing for yet. I went manually through many areas and found none.

There's one bad margin in Migrate repo - LFS advanced settings, but it's consistent with mainline.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/13016
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
2026-06-10 07:54:38 +02:00
..
asciicast.css Fix UI regression of asciinema player (#26159) 2023-07-26 09:46:59 +00:00
codecopy.css chore: enforce RTL-friendly logical CSS properties with a linter (#12491) 2026-05-11 00:20:45 +02:00
content.css feat: improve checkboxes (#13016) 2026-06-10 07:54:38 +02:00
dark.css [FEAT] Adds x-mode-only anchor styles to display images based if the theme is light or dark mode. (#3985) 2024-06-09 10:50:53 +00:00
filepreview.css chore: enforce RTL-friendly logical CSS properties with a linter (#12491) 2026-05-11 00:20:45 +02:00
light.css [FEAT] Adds x-mode-only anchor styles to display images based if the theme is light or dark mode. (#3985) 2024-06-09 10:50:53 +00:00