MediaWiki:Gadget-checkboxList.css
Jump to navigation
Jump to search
After saving, you may need to bypass your browser's cache to see the changes. For further information, see Wikipedia:Bypass your cache.
- In most Windows and Linux browsers: Hold down Ctrl and press F5.
- In Safari: Hold down ⇧ Shift and click the Reload button.
- In Chrome and Firefox for Mac: Hold down both ⌘ Cmd+⇧ Shift and press R.
/* 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 {{Quest details}} */
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 {
position: relative;
padding-left: 1.75em;
margin-bottom: .3em;
list-style: none;
cursor: pointer;
}
/* ---------------------------
unchecked state
--------------------------- */
.lighttable.checklist li::before {
content: '';
position: absolute;
height: 16px;
width: 16px;
top: 4px;
left: 3px;
opacity: .6;
background: url('filepath://Checkbox-unchecked-lightmode.svg') center/16px no-repeat;
}
body.wgl-theme-dark .lighttable.checklist li::before {
background-image: url('filepath://Checkbox-unchecked-darkmode.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 {
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 {
opacity: 1;
background-image: url('filepath://Checkbox-checked-lightmode.svg');
}
.lighttable.checklist .checked {
color: rgba(54, 65, 79, 0.5); /* #36414f in rgba */
}
body.wgl-theme-dark .lighttable.checklist .checked {
color: rgba(204, 217, 244, 0.5); /* #ccd9f4 in rgba */
}
body.wgl-theme-dark .lighttable.checklist .checked::before {
background-image: url('filepath://Checkbox-checked-darkmode.svg');
}