MediaWiki:Gadget-checkboxList.css

/* CSS for MediaWiki:Gadget-checkboxList.js */ /* Use with Template:Checklist */

/* ===========================     lighttable checklists =========================== */

/* checklist will otherwise render anything floated to the right unclickable due to overlap; 300px is the width of infoboxes and default thumbnail size the first rule is the fallback for ancient browsers; the second rule keeps 350px space to the side, down to 1000px width of its container, after which it stops shrinking. */ .lighttable.checklist { max-width: calc(100% - 350px); max-width: max(calc(100% - 350px), 650px); }

/* mobile skin and */ body.skin-minerva .lighttable.checklist, .questdetails .lighttable.checklist { max-width: 100%; }

/* kill excessive margin if nested */ .lighttable.checklist ul ul { margin-left: .5em; }

.lighttable.checklist li { padding-left: 1.75em; margin-bottom: .3em; list-style: none; cursor: pointer; }

/* ---        unchecked state --- */

.lighttable.checklist li::before { content: ''; position: absolute; height: 1rem; width: 1rem; margin-left: -0.65rem; margin-top: 0.3rem; transform: translateX(-100%); background-image: url('https://static.miraheze.org/ruletheseaswiki/8/89/Checkbox-unchecked.svg'); background-size: 1rem; }

/* unchecked hover state */ .lighttable.checklist li:not(.checked):hover::before { background-color: #e4eaee; border-radius: .2rem; }

body.wgl-darkmode .lighttable.checklist li:not(.checked):hover::before { background-color: #313e59; }

/* ---         checked state --- */

/* only fade the text content, not the checkbox; exclude nested checklists and bold/italics, otherwise the fading gets applied twice */

.lighttable.checklist .checked > *:not(ul):not(i):not(b) { opacity: 0.5; }

.lighttable.checklist .checked::before { background-image: url('https://static.miraheze.org/ruletheseaswiki/1/19/Checkbox-checked.svg'); }

.lighttable.checklist .checked { color: rgba(54, 65, 79, 0.5); /* #36414f in rgba */ }

body.wgl-darkmode .lighttable.checklist .checked { color: rgba(204, 217, 244, 0.5); /* #ccd9f4 in rgba */ }