Rework checkbox styling, remove input border hover effect (#36870)

- Rework all checkbox styling to be consistent inside and outside
markup.
- Remove `input` border hover effect. Was too subtle and honestly
unneeded, consistent with GitHub.
- Increase `input` border contrast slightly.
- Some small spacing fixes in Markup (nested tasklist and spacing after
checkbox).

<img width="221" height="222" alt="Screenshot 2026-03-09 at 08 18 19"
src="https://github.com/user-attachments/assets/9e66abee-7102-4abe-9b00-e3f9b24ed735"
/>
<img width="226" height="217" alt="Screenshot 2026-03-09 at 08 18 10"
src="https://github.com/user-attachments/assets/33cdac26-4479-41da-9488-e60d70c5c997"
/>
<img width="79" height="218" alt="Screenshot 2026-03-09 at 08 17 32"
src="https://github.com/user-attachments/assets/ae1064a2-2bb3-44e7-a00b-2f4f5aad4241"
/>
<img width="267" height="297" alt="Screenshot 2026-03-09 at 08 17 07"
src="https://github.com/user-attachments/assets/1237fa98-0d94-4023-a87d-190d89c57421"
/>
<img width="558" height="260" alt="Screenshot 2026-03-09 at 08 21 04"
src="https://github.com/user-attachments/assets/1908a794-3394-494c-b2d5-470c00c668d1"
/>

---------

Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
2026-03-23 18:41:04 +01:00
committed by GitHub
parent ef88cdb7e7
commit 788200de9f
7 changed files with 84 additions and 66 deletions

View File

@@ -43,7 +43,7 @@
height: 1.21428571em;
}
.ui.form input,
.ui.form input:not([type="checkbox"], [type="radio"]),
.ui.search > .prompt {
font-family: var(--fonts-regular);
margin: 0;
@@ -74,10 +74,10 @@
max-height: 24em;
}
input,
input:not([type="checkbox"], [type="radio"]),
textarea,
.ui.input > input,
.ui.form input,
.ui.form input:not([type="checkbox"], [type="radio"]),
.ui.form select,
.ui.form textarea,
.ui.selection.dropdown,
@@ -87,22 +87,10 @@ textarea,
color: var(--color-input-text);
}
input:hover,
textarea:hover,
.ui.input input:hover,
.ui.form input:hover,
.ui.form select:hover,
.ui.form textarea:hover,
.ui.search > .prompt:hover {
background: var(--color-input-background);
border: 1px solid var(--color-input-border-hover);
color: var(--color-input-text);
}
input:focus,
input:not([type="checkbox"], [type="radio"]):focus,
textarea:focus,
.ui.input input:focus,
.ui.form input:focus,
.ui.form input:not([type="checkbox"], [type="radio"]):focus,
.ui.form select:focus,
.ui.form textarea:focus,
.ui.search > .prompt:focus {