MediaWiki:Gadget-checkboxList.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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);
}
/* No maximum within a table, since tables typically set their own dimensions */
td .lighttable.checklist {
max-width: none;
}
body.skin-minerva .lighttable.checklist,
.questdetails .lighttable.checklist {
max-width: 100%;
}
/* kill double margin if nested, when a small indent is specified */
.lighttable.checklist.smallindent ul ul {
margin: 0;
}
.lighttable.checklist li {
padding-left: 1.5rem;
margin-bottom: .3em;
list-style: none;
cursor: pointer;
}
/* unchecked state */
.lighttable.checklist li::before {
content: '';
display: inline-block;
height: 1rem;
width: 1rem;
margin-left: -0.25rem;
margin-right: -0.5rem;
margin-bottom: -0.15rem;
transform: translateX(-100%);
background: no-repeat center / 1rem url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" fill="white" stroke="currentColor" stroke-width="2" rx="2"/></svg>');
}
/* unchecked hover state */
.lighttable.checklist li:not(.checked):hover::before {
background-color: #e4eaee;
border-radius: .2rem;
}
body.wgl-theme-dark .lighttable.checklist li:not(.checked):hover::before,
body.wgl-theme-browntown .lighttable.checklist li:not(.checked):hover::before {
background-color: #444e5a;
}
/* checked state */
.lighttable.checklist .checked::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" fill="currentColor" stroke="currentColor" stroke-width="2" rx="2"/><path d="M4 8l3 3 5-5" stroke="white" stroke-width="2" fill="none"/></svg>');
}
/* checked state - text line */
.lighttable.checklist .checked {
opacity: .5;
}
/* cancel opacity at deeper levels */
.lighttable.checklist .checked .checked {
opacity: 1;
}