public/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-04-06 21:57:51 +09:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

67
web_src/css/modules/checkbox.css
View File

@@ -1,10 +1,75 @@
/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
unused rules here after refactoring, please remove them. */
input[type="checkbox"],
input[type="radio"] {
appearance: none;
width: var(--checkbox-size);
height: var(--checkbox-size);
border: 1px solid var(--color-input-border);
border-radius: 50%;
background: var(--color-input-background);
}
input[type="radio"]:checked {
background: var(--color-white);
border: 4px solid var(--color-primary);
}
input[type="checkbox"] {
appearance: none;
display: inline-grid;
place-content: center;
width: var(--checkbox-size);
height: var(--checkbox-size);
border: 1px solid var(--color-input-border);
border-radius: 3px;
background: var(--color-input-background);
overflow: hidden;
print-color-adjust: exact;
}
input[type="checkbox"]::before {
content: "";
background: var(--color-white);
width: var(--checkbox-size);
height: var(--checkbox-size);
clip-path: inset(var(--checkbox-size) 0 0 0);
mask-image: var(--checkbox-mask-checked);
-webkit-mask-image: var(--checkbox-mask-checked);
mask-size: 75%;
-webkit-mask-size: 75%;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
}
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
background: var(--color-primary);
border-color: var(--color-primary);
}
input[type="checkbox"]:checked::before {
clip-path: inset(0);
}
input[type="checkbox"]:disabled:checked,
input[type="checkbox"]:disabled:indeterminate {
background: var(--color-secondary-dark-4);
border-color: var(--color-secondary-dark-4);
}
input[type="radio"]:disabled:checked {
border-color: var(--color-secondary-dark-4);
}
input[type="checkbox"]:indeterminate::before {
clip-path: inset(0);
mask-image: var(--checkbox-mask-indeterminate);
-webkit-mask-image: var(--checkbox-mask-indeterminate);
mask-size: 75%;
-webkit-mask-size: 75%;
}
.ui.checkbox {