Difference between revisions of "MediaWiki:Common.css"

Revision as of 18:25, 4 October 2020

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

/* Add spacing above documentation boxes. */
#template-documentation { margin-top: 1em; }

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

/* Licenses */

.box.license {
	border-width: 2px;
}

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