MediaWiki:Gadget-checkboxList.css - Revision history

Alex at 16:14, 17 October 2024

2024-10-17T16:14:50Z

← Older revision		Revision as of 18:14, 17 October 2024
Line 1:		Line 1:
			/* CSS for [[MediaWiki:Gadget-checkboxList.js]] */
	/* 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('/images/rss/Checkbox-unchecked.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('/images/rss/Checkbox-checked.svg');}/ checked state - text line /.lighttable.checklist .checked { opacity: .5;}/ cancel opacity at deeper levels */.lighttable.checklist .checked .checked { opacity: 1;}
			/* 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('/images/rss/Checkbox-unchecked.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('/images/rss/Checkbox-checked.svg');
			}

			/* checked state - text line */
			.lighttable.checklist .checked {
			opacity: .5;
			}

			/* cancel opacity at deeper levels */
			.lighttable.checklist .checked .checked {
			opacity: 1;
			}

Alex at 16:12, 17 October 2024

2024-10-17T16:12:30Z

← Older revision		Revision as of 18:12, 17 October 2024
Line 1:		Line 1:
			/* 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('/images/rss/Checkbox-unchecked.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('/images/rss/Checkbox-checked.svg');}/ checked state - text line /.lighttable.checklist .checked { opacity: .5;}/ cancel opacity at deeper levels */.lighttable.checklist .checked .checked { opacity: 1;}
	/* 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('filepath://Checkbox-unchecked.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('filepath://Checkbox-checked.svg');
	}

	/* checked state - text line */
	.lighttable.checklist .checked {
	opacity: .5;
	}

	/* cancel opacity at deeper levels */
	.lighttable.checklist .checked .checked {
	opacity: 1;
	}

Alex: Created page with "/* 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 co..."

2024-10-13T00:26:16Z

Created page with "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 co..."

New page

/* 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('filepath://Checkbox-unchecked.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('filepath://Checkbox-checked.svg');
}

/* checked state - text line */
.lighttable.checklist .checked {
opacity: .5;
}

/* cancel opacity at deeper levels */
.lighttable.checklist .checked .checked {
opacity: 1;
}