mirrors/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-03-28 03:12:08 +00: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

6
web_src/css/base.css
View File

@@ -15,8 +15,8 @@
/* line-height: use the default value as "modules/normalize.css" */
--line-height-default: normal;
/* images */
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9"><path fill-rule="evenodd" d="M11.78.22a.75.75 0 0 1 0 1.061L4.52 8.541a.75.75 0 0 1-1.062 0L.202 5.285a.75.75 0 0 1 1.061-1.061l2.725 2.723L10.718.22a.75.75 0 0 1 1.062 0"/></svg>');
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" viewBox="0 0 10 2"><path fill-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>');
--octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
--select-arrows: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427m0-1.957L7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426"/></svg>');
/* other variables */
@@ -27,7 +27,7 @@
--height-loading: 16rem;
--min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
--tab-size: 4;
--checkbox-size: 15px; /* height and width of checkbox and radio inputs */
--checkbox-size: 14px; /* height and width of checkbox and radio inputs */
--page-spacing: 16px; /* space between page elements */
--page-margin-x: 32px; /* minimum space on left and right side of page */
--page-space-bottom: 64px; /* space between last page element and footer */

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,

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 {

1
web_src/css/modules/dropdown.css
View File

@@ -268,7 +268,6 @@ select.ui.dropdown {
}
.ui.selection.dropdown:hover {
border-color: var(--color-input-border-hover);
box-shadow: none;
}

22
web_src/css/modules/form.css
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 {

3
web_src/css/themes/theme-gitea-dark.css
View File

@@ -205,8 +205,7 @@ gitea-theme-meta-info {
--color-input-text: var(--color-text-dark);
--color-input-background: #171a1e;
--color-input-toggle-background: #2e353c;
--color-input-border: var(--color-secondary);
--color-input-border-hover: var(--color-secondary-dark-1);
--color-input-border: var(--color-secondary-dark-1);
--color-light: #00001728;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #e8f3ff28;

3
web_src/css/themes/theme-gitea-light.css
View File

@@ -205,8 +205,7 @@ gitea-theme-meta-info {
--color-input-text: var(--color-text-dark);
--color-input-background: #fff;
--color-input-toggle-background: #d0d7de;
--color-input-border: var(--color-secondary);
--color-input-border-hover: var(--color-secondary-dark-1);
--color-input-border: var(--color-secondary-dark-1);
--color-light: #00001706;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000171d;