Rework checkbox styling, remove input border hover effect#36870
Merged
silverwind merged 11 commits intogo-gitea:mainfrom Mar 23, 2026
Merged
Rework checkbox styling, remove input border hover effect#36870silverwind merged 11 commits intogo-gitea:mainfrom
input border hover effect#36870silverwind merged 11 commits intogo-gitea:mainfrom
Conversation
Remove custom checkbox CSS in markup that used appearance: none with SVG mask images for check/indeterminate states. Markup checkboxes now render with native browser styling, consistent with the rest of the app. Also remove the now-unused --checkbox-mask-checked and --checkbox-mask-indeterminate CSS variables from base.css. Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>
GiteaBot
added
the
lgtm/need 2
silverwind
commented
Mar 8, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR removes the custom “masked SVG” checkbox styling from rendered markup content so task list checkboxes use native browser rendering, and cleans up the related now-unused CSS variables.
Changes:
- Removed custom
.markup input[type="checkbox"]styling that forcedappearance: noneand used SVG mask images for checked/indeterminate states. - Adjusted task list checkbox margins in markup rendering.
- Removed unused
--checkbox-mask-checked/--checkbox-mask-indeterminateCSS variables frombase.css.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| web_src/css/markup/content.css | Drops custom checkbox rendering in markup and tweaks task-list checkbox layout. |
| web_src/css/base.css | Removes unused checkbox mask CSS variables after markup styling removal. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
lunny
approved these changes
Mar 9, 2026
GiteaBot
added
lgtm/need 1
Member
Author
|
Comparing GitHub's implementation, they do some color alterations, I will check what can be done. Especially the disabled style of native checkboxes needs some tuning as browsers often render those with too-low contrast. |
Replace Fomantic UI checkbox/radio with custom appearance:none styling using CSS mask-image for the checkmark, matching GitHub Primer approach. - Add global checkbox styling with inline-grid layout and clip-path checkmark animation via ::before pseudo-element - Add global radio styling with thick-border checked state - Add disabled state with monochrome colors - Exclude checkbox/radio from generic form input styling rules - Remove unused --color-input-border-hover variable - Slightly increase --color-input-border contrast - Reduce checkbox size from 15px to 14px - Add spacing for nested task lists in markup Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>
silverwind
changed the title
silverwind
changed the title
GiteaBot
added
lgtm/need 2
Member
Author
|
This is now a more comprehensive rework of the checkbox styling. PR description updated. |
lunny
reviewed
Mar 9, 2026
GiteaBot
added
lgtm/need 1
Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>
silverwind
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Add -webkit-mask-image, -webkit-mask-size, -webkit-mask-repeat, and -webkit-mask-position to checkbox ::before pseudo-elements, matching the existing pattern used elsewhere in the codebase (e.g. base.css native select arrow). Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>
silverwind
changed the title
input border hover effect
Member
|
last call @go-gitea/technical-oversight-committee |
TheFox0x7
approved these changes
Mar 23, 2026
GiteaBot
added
lgtm/done
lunny
added
the
reviewed/wait-merge
GiteaBot
removed
the
reviewed/wait-merge
zjjhot
added a commit
to zjjhot/gitea
that referenced
this pull request
Mar 24, 2026
* giteaofficial/main: [skip ci] Updated translations via Crowdin Make PUBLIC_URL_DETECTION default to "auto" (go-gitea#36955) Fix user settings sidebar showing disabled features on some pages (go-gitea#36958) Update GitHub Actions to latest major versions (go-gitea#36964) Fix various trivial problems (go-gitea#36953) Rework checkbox styling, remove `input` border hover effect (go-gitea#36870) Add `DEFAULT_DELETE_BRANCH_AFTER_MERGE` setting (go-gitea#36917) Update Nix flake (go-gitea#36943) Update to eslint 10 (go-gitea#36925)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
inputborder hover effect. Was too subtle and honestly unneeded, consistent with GitHub.inputborder contrast slightly.