bchanot/claude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(client-handover): CSS — kill checkbox overlap with adjacent inline elements

Browse Source 
Old rule `li input[type="checkbox"] + *` absolutely-positioned the first
element sibling after the checkbox (typically <a>, <code>, <strong>),
yanking links and code spans out of flow and overlapping adjacent
content in the rendered PDF.

Replace with a targeted rule that styles the native disabled checkbox
inline (small green box) and leaves siblings untouched. Pandoc GFM emits
`<li><input disabled type="checkbox"> text…</li>` with no wrapper class,
so we target `li > input[type="checkbox"]` directly.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
bastien 2026-05-11 16:09:12 +02:00
parent bfea74285b
commit 7db8f01074
1 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
skills/client-handover/resources/branding/zenquality.css
View File

@ -372,7 +372,6 @@ ul.task-list li {
ul.checklist li::before,
ul.task-list li::before,
li input[type="checkbox"] + *,
li.task-list-item::before {
content: "☐";
position: absolute;
@ -382,13 +381,28 @@ li.task-list-item::before {
line-height: 1;
}
input[type="checkbox"] {
display: none;
/* Pandoc GFM emits <li><input disabled type="checkbox"> text...</li> with
no wrapper class. Render the native checkbox inline (small, green) and
leave inline elements (<a>, <code>, <strong>) that follow it untouched.
Earlier rule `li input[type="checkbox"] + *` mistakenly absolutely-
positioned the first element sibling after the checkbox, yanking links
and code spans out of flow and overlapping adjacent content. */
li > input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
display: inline-block;
width: 3mm;
height: 3mm;
margin: 0 1.5mm 0 0;
border: 0.4mm solid var(--green-moss);
border-radius: 0.5mm;
vertical-align: middle;
background: transparent;
}
input[type="checkbox"]:checked + label::before {
content: "☑";
color: var(--green-forest);
li > input[type="checkbox"]:checked {
background: var(--green-forest);
border-color: var(--green-forest);
}
/* ============ CALLOUTS ============ */