Difference between revisions of "MediaWiki:Common.css"

Revision as of 18:57, 6 October 2020

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

/* Make reference lists smaller. */
.mw-references-wrap { font-size: small; } 

/* 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 {
	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%, 80%); }

.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 .header { background-color: hsl(354, 71.5%, 80%); }


.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 .header { background-color: hsl(39, 71.5%, 80%); }

.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 .header { background-color: hsl(55, 71.5%, 80%); }

.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 .header { background-color: hsl(73, 71.5%, 80%); }

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

.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%, 80%); }


.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%, 80%); }


.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%, 80%); }

/* 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; }

/* Boxes - Licenses */
.box.license {
	border-width: 2px;
}

/* Boxes - Documentation */
#template-documentation { margin-top: 1em; }
#template-documentation.box {
	border-width: 3px;
	border-style: dashed;
}

/* Boxes - Infoboxes. */

.box.infobox {
	width: 100%;
	max-width: 320px;
	margin-left: 1em;
	margin-bottom: 1em;
	padding: .5em;
	float: right;
	clear: right;
	font-size: .9em;
}
	.infobox th, .infobox td {
		text-align: left;
		vertical-align: top;
	}
	.infobox .infobox__image {
		text-align: center;
	}
	.infobox .infobox__caption {
		text-align: center;
	}
	.infobox .infobox__title {
		font-size: 1.6em;
		font-weight: bold;
		text-align: center;
	}
	.infobox .infobox__heading {
		padding: .125em .5em; 
		font-weight: bold;
		text-align: center;
	}

/* Infobox chronology */
.chronology {
	width: 100%;
	table-layout: fixed;
}
	.chronology
	.chronology th, .chronology td {
		padding: 0 .125em;
		text-align: center;
	}


/* Homepage specific styles */
.mp-layout {
	
}

.mp-topbanner {
	display: flex;
	flex-direction: row;
	align-items: center;
}
	.mp-topbanner .mp-topbanner__categories {
		width: 50%;
		margin-left: auto;
	}
		.mp-topbanner .mp-topbanner__categories ul {
			column-width: 8em;
			column-gap: 2em;
		}

.mp-box {

}
	.mp-box .mp-box__heading {
		margin: 0;
		padding: .125em .5em;
	}
	.mp-box .mp-box__body {
		margin-top: 1em;
		margin-bottom: 2em;
	}
	.mp-box .mp-box__footer {
		text-align: right;
	}

/* Hide something from view whilst keeping it accessible to screen readers. */
.visuallyhidden {
	width: 1px;
	height: 1px; 
	margin: -1px;
	padding: 0;
	border: 0; 
	position: absolute; 
	overflow: hidden; 
	clip: rect(0 0 0 0); 
}

/* Track listing tables */

.track-listing {
	border-spacing: 0;
}
	.track-listing th, .track-listing td { vertical-align: top; }
	.track-listing tr:nth-child(odd) { background-color: #f7f7f7; } 
	.track-listing caption {
		font-weight: bold;
		text-align: left;
	}
	.track-listing__heading {
		text-align: left;
		background-color: #eee;
	}
	.track-listing__no {
		width: 2em;
		padding-right: .5em;
		padding-left: .5em;
		text-align: right;
	}
	.track-listing__length {
		width: 4em;
		padding-right: .5em;
		text-align: right;
	}