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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: 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.75em;
    margin-bottom: .3em;
    list-style: none;
    cursor: pointer;
    transition: color 0.25s ease-in-out;
}

/* 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('filepath://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 */
.lighttable.checklist .checked::before {
    background-image: url('filepath://Checkbox-checked.svg');
}
/* checked state - text line */
.lighttable.checklist .checked {
    opacity: .5;
}
/* cancel opacity at deeper levels */
.lighttable.checklist .checked .checked {
    opacity: 1;
}