jason/qotnews
1
0
Fork 0
forked from tanner/qotnews
Code Issues Pull Requests Releases Wiki Activity

fix: Implement custom transparent checkbox for dark mode visibility

Browse Source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Tanner Collin
2025-12-04 22:31:11 +00:00
parent 23b56b26b1
commit 1d019f880b
3 changed files with 43 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webclient/src/Feed.js
View File

@@ -123,7 +123,7 @@ function Feed({ updateCache }) {
<div style={{marginBottom: '1rem'}}> <div style={{marginBottom: '1rem'}}>
<input type="checkbox" id="filter-smallweb" className="checkbox" checked={filterSmallweb} onChange={handleFilterChange} /> <input type="checkbox" id="filter-smallweb" className="checkbox" checked={filterSmallweb} onChange={handleFilterChange} />
<label htmlFor="filter-smallweb" style={{paddingLeft: '0.5rem'}}>Filter Smallweb</label> <label htmlFor="filter-smallweb">Filter Smallweb</label>
</div> </div>
{error && {error &&

4
webclient/src/Style-dark.css
View File

@@ -62,3 +62,7 @@
.dark .comment.lined { .dark .comment.lined {
border-left: 1px solid #444444; border-left: 1px solid #444444;
} }
.dark .checkbox:checked + label::after {
border-color: #ddd;
}

39
webclient/src/Style-light.css
View File

@@ -312,5 +312,42 @@ button.comment {
} }
.checkbox { .checkbox {
background: transparent; -webkit-appearance: none;
appearance: none;
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkbox + label {
position: relative;
cursor: pointer;
padding-left: 1.75rem;
user-select: none;
}
.checkbox + label::before {
content: '';
position: absolute;
left: 0;
top: 0.1em;
width: 1rem;
height: 1rem;
border: 1px solid #828282;
background-color: transparent;
border-radius: 3px;
}
.checkbox:checked + label::after {
content: "";
position: absolute;
left: 0.35rem;
top: 0.2em;
width: 0.3rem;
height: 0.6rem;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
} }