Gitea/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-04-18 15:57:15 +01: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

48
web_src/css/markup/content.css
View File

@@ -164,12 +164,16 @@ In markup content, we always use bottom margin for all elements */
list-style-type: none;
}
.markup .task-list-item > ul {
margin-top: 4px;
}
.markup .task-list-item p + ul {
margin-top: 16px;
}
.markup .task-list-item input[type="checkbox"] {
margin: 0 .3em .25em -1.4em;
margin: 0 .6em .25em -1.4em;
vertical-align: middle;
padding: 0;
}
@@ -188,48 +192,12 @@ In markup content, we always use bottom margin for all elements */
}
.markup input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
background: var(--color-input-background);
height: 14px;
width: 14px;
margin-right: .25em;
margin-bottom: .25em;
cursor: default;
opacity: 1 !important; /* override fomantic on edit preview */
pointer-events: auto !important; /* override fomantic on edit preview */
vertical-align: middle !important; /* override fomantic on edit preview */
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
.markup input[type="checkbox"]:not([disabled]):hover,
.markup input[type="checkbox"]:not([disabled]):active {
border-color: var(--color-primary);
}
.markup input[type="checkbox"]::after {
position: absolute;
inset: 0;
pointer-events: none;
background: var(--color-text);
mask-size: cover;
-webkit-mask-size: cover;
}
.markup input[type="checkbox"]:checked::after {
content: "";
mask-image: var(--checkbox-mask-checked);
-webkit-mask-image: var(--checkbox-mask-checked);
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
.markup input[type="checkbox"]:indeterminate::after {
content: "";
mask-image: var(--checkbox-mask-indeterminate);
-webkit-mask-image: var(--checkbox-mask-indeterminate);
}
.markup ul ul,