Difference between revisions of "MediaWiki:Common.css"

Revision as of 14:51, 3 October 2020

/* CSS placed here will be applied to all skins */

/* Boxes, boxes everywhere */
/* These colors are purposefully a bit washed out. We want to provide a hint that's distinctive enough to imply a new section or element, whilst not overpowering everything else or creating undue emphasis. Could be done way easier with CSS Custom Properties. Boo IE! Boo! */

.box {
	display: block;
	padding: 1em;
	border: 1px solid hsl(0, 0%, 89%);
	background-color: hsl(0, 0%, 100%);
	clear: both;
	overflow: hidden;
}

/* Box color variants. */

.box.gray {
	border-color: hsl(0, 0%, 87%);
	background-color: hsl(0, 0%, 98%);
}
	.box.gray .box { background-color: hsl(0, 0%, 93%); }
	.box.gray .header { background-color: hsl(0, 0%, 50%); }

.box.red {
	border-color: hsl(354, 71.5%, 87%);
	background-color: hsl(354, 71.5%, 98%);
}
	.box.red .box { background-color: hsl(354, 71.5%, 93%); }
	.box.red .box { background-color: hsl(354, 71.5%, 50%); }


.box.orange {
	border-color: hsl(39, 71.5%, 87%);
	background-color: hsl(39, 71.5%, 98%);
}
	.box.orange .box { background-color: hsl(39, 71.5%, 93%); }
	.box.orange .box { background-color: hsl(39, 71.5%, 50%); }

.box.yellow {
	border-color: hsl(55, 71.5%, 87%);
	background-color: hsl(55, 71.5%, 98%);
}
	.box.yellow .box { background-color: hsl(55, 71.5%, 93%); }
	.box.yellow .box { background-color: hsl(55, 71.5%, 50%); }

.box.green {
	border-color: hsl(73, 71.5%, 87%);
	background-color: hsl(73, 71.5%, 98%);
}
	.box.green .box { background-color: hsl(73, 71.5%, 93%); }
	.box.green .box { background-color: hsl(73, 71.5%, 50%); }

.box.cerulean {
	border-color: hsl(259, 71.5%, 87%);
	background-color: hsl(259, 71.5%, 98%);
}
	.box.cerulean .box { background-color: hsl(259, 71.5%, 93%); }
	.box.cerulean .box { background-color: hsl(259, 71.5%, 50%); }

.box.blue {
	border-color: hsl(225, 71.5%, 87%);
	background-color: hsl(225, 71.5%, 98%);
}
	.box.blue .box { background-color: hsl(225, 71.5%, 93%); }
	.box.blue .header { background-color: hsl(225, 71.5%, 50%); }


.box.purple {
	border-color: hsl(259, 71.5%, 87%);
	background-color: hsl(259, 71.5%, 98%);
}
	.box.purple .box { background-color: hsl(259, 71.5%, 93%); }
	.box.purple .header { background-color: hsl(259, 71.5%, 50%); }


.box.pink {
	border-color: hsl(334, 71.5%, 87%);
	background-color: hsl(334, 71.5%, 98%);
}
	.box.pink .box { background-color: hsl(334, 71.5%, 93%); }
	.box.pink .header { background-color: hsl(334, 71.5%, 50%); }

/* Amboxes (article message box) */

.box.ambox {
	max-width: 50em;
	margin-right: auto;
	margin-left: auto;
	padding: .5em 1em;
	border-left-width: 10px;
	line-height: 1.25;
}
	.box.ambox + .box.ambox { margin-top: -1px; }
	.box.ambox .ambox__icon { padding-right: 1em; }
	.box.ambox.section { /* Smaller, section-specific variant */
		max-width: 20em;
		margin-left: 0;
		padding: .5em;
		font-size: smaller;
	}
		.box.ambox.section .ambox__icon { padding-right: .5em; }