fix(client-handover): CSS — kill checkbox overlap with adjacent inline elements
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:
parent
bfea74285b
commit
7db8f01074
@ -372,7 +372,6 @@ ul.task-list li {
|
|||||||
|
|
||||||
ul.checklist li::before,
|
ul.checklist li::before,
|
||||||
ul.task-list li::before,
|
ul.task-list li::before,
|
||||||
li input[type="checkbox"] + *,
|
|
||||||
li.task-list-item::before {
|
li.task-list-item::before {
|
||||||
content: "☐";
|
content: "☐";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -382,13 +381,28 @@ li.task-list-item::before {
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"] {
|
/* Pandoc GFM emits <li><input disabled type="checkbox"> text...</li> with
|
||||||
display: none;
|
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 {
|
li > input[type="checkbox"]:checked {
|
||||||
content: "☑";
|
background: var(--green-forest);
|
||||||
color: var(--green-forest);
|
border-color: var(--green-forest);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============ CALLOUTS ============ */
|
/* ============ CALLOUTS ============ */
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user