Difference between revisions of "MediaWiki:Common.css"

From Bronies.wiki
Jump to navigation Jump to search
(Add flag template CSS)
m (Fix incorrect spritesheet URL)
Line 265: Line 265:
 
width: 16px;
 
width: 16px;
 
height: 11px;
 
height: 11px;
−
background-image: url(spritesheet.png);
+
background-image: url(/w/images/c/c7/Flag_sprite.png);
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
 
}
 
}

Revision as of 17:14, 8 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: small;
}
	.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;
	}

/* Boxes - Navboxes */

.box.navbox {
	padding: .25em;
	border-spacing: 0;
	font-size: small;
}
	.navbox a { white-space: nowrap; } 
	.navbox table { border-spacing: 0; } 
	.navbox th, .navbox td { padding: 0 .5em; } 
	.navbox .navbox__header {
		padding: .25em .5em;
		text-align: center;
	}
	.navbox .navbox__supplemental {
		text-align: center;
	}
	.navbox .navbox__groupname {
		width: 8em;
		padding: 0 .5em;
		border: none;
		text-align: left;
	}

/* Infobox chronology */
.chronology {
	width: 100%;
	table-layout: fixed;
}
	.chronology
	.chronology th, .chronology td {
		width: 33.333%;
		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 {
		padding-right: .5em;
		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-left: .5em;
		text-align: right;
	}
	.track-listing__length {
		width: 4em;
		text-align: right;
	}

/* Flags */

.flag { 
	display: inline-block;
	width: 16px;
	height: 11px;
	background-image: url(/w/images/c/c7/Flag_sprite.png);
	background-repeat: no-repeat;
}
.flag.flag-ad { background-position: -2px -2px; }
.flag.flag-ae { background-position: -22px -2px; }
.flag.flag-af { background-position: -42px -2px; }
.flag.flag-ag { background-position: -62px -2px; }
.flag.flag-ai { background-position: -82px -2px; }
.flag.flag-al { background-position: -102px -2px; }
.flag.flag-am { background-position: -122px -2px; }
.flag.flag-an { background-position: -142px -2px; }
.flag.flag-ao { background-position: -162px -2px; }
.flag.flag-ar { background-position: -182px -2px; }
.flag.flag-as { background-position: -202px -2px; }
.flag.flag-at { background-position: -222px -2px; }
.flag.flag-au { background-position: -242px -2px; }
.flag.flag-aw { background-position: -2px -17px; }
.flag.flag-ax { background-position: -22px -17px; }
.flag.flag-az { background-position: -42px -17px; }
.flag.flag-ba { background-position: -62px -17px; }
.flag.flag-bb { background-position: -82px -17px; }
.flag.flag-bd { background-position: -102px -17px; }
.flag.flag-be { background-position: -122px -17px; }
.flag.flag-bf { background-position: -142px -17px; }
.flag.flag-bg { background-position: -162px -17px; }
.flag.flag-bh { background-position: -182px -17px; }
.flag.flag-bi { background-position: -202px -17px; }
.flag.flag-bj { background-position: -222px -17px; }
.flag.flag-bm { background-position: -242px -17px; }
.flag.flag-bn { background-position: -2px -32px; }
.flag.flag-bo { background-position: -22px -32px; }
.flag.flag-br { background-position: -42px -32px; }
.flag.flag-bs { background-position: -62px -32px; }
.flag.flag-bt { background-position: -82px -32px; }
.flag.flag-bv { background-position: -102px -32px; }
.flag.flag-bw { background-position: -122px -32px; }
.flag.flag-by { background-position: -142px -32px; }
.flag.flag-bz { background-position: -162px -32px; }
.flag.flag-ca { background-position: -182px -32px; }
.flag.flag-cat { background-position: -202px -32px; }
.flag.flag-cc { background-position: -222px -32px; }
.flag.flag-cd { background-position: -242px -32px; }
.flag.flag-cf { background-position: -2px -47px; }
.flag.flag-cg { background-position: -22px -47px; }
.flag.flag-ch { width: 11px; background-position: -42px -47px; }
.flag.flag-ci { background-position: -57px -47px; }
.flag.flag-ck { background-position: -77px -47px; }
.flag.flag-cl { background-position: -97px -47px; }
.flag.flag-cm { background-position: -117px -47px; }
.flag.flag-cn { background-position: -137px -47px; }
.flag.flag-co { background-position: -157px -47px; }
.flag.flag-cr { background-position: -177px -47px; }
.flag.flag-cs { background-position: -197px -47px; }
.flag.flag-cu { background-position: -217px -47px; }
.flag.flag-cv { background-position: -237px -47px; }
.flag.flag-cx { background-position: -2px -62px; }
.flag.flag-cy { background-position: -22px -62px; }
.flag.flag-cz { background-position: -42px -62px; }
.flag.flag-de { background-position: -62px -62px; }
.flag.flag-dj { background-position: -82px -62px; }
.flag.flag-dk { background-position: -102px -62px; }
.flag.flag-dm { background-position: -122px -62px; }
.flag.flag-do { background-position: -142px -62px; }
.flag.flag-dz { background-position: -162px -62px; }
.flag.flag-ec { background-position: -182px -62px; }
.flag.flag-ee { background-position: -202px -62px; }
.flag.flag-eg { background-position: -222px -62px; }
.flag.flag-eh { background-position: -242px -62px; }
.flag.flag-er { background-position: -22px -77px; }
.flag.flag-es { background-position: -42px -77px; }
.flag.flag-et { background-position: -62px -77px; }
.flag.flag-eu { background-position: -82px -77px; }
.flag.flag-fi { background-position: -122px -77px; }
.flag.flag-fj { background-position: -142px -77px; }
.flag.flag-fk { background-position: -162px -77px; }
.flag.flag-fm { background-position: -182px -77px; }
.flag.flag-fo { background-position: -202px -77px; }
.flag.flag-fr { background-position: -222px -77px; }
.flag.flag-ga { background-position: -242px -77px; }
.flag.flag-gb { background-position: -2px -92px; }
.flag.flag-gb-england { background-position: -2px -77px; }
.flag.flag-gb-scotland { background-position: -222px -212px; }
.flag.flag-gb-wales { background-position: -262px -77px; }
.flag.flag-gd { background-position: -22px -92px; }
.flag.flag-ge { background-position: -42px -92px; }
.flag.flag-gf { background-position: -62px -92px; }
.flag.flag-gh { background-position: -82px -92px; }
.flag.flag-gi { background-position: -102px -92px; }
.flag.flag-gl { background-position: -122px -92px; }
.flag.flag-gm { background-position: -142px -92px; }
.flag.flag-gn { background-position: -162px -92px; }
.flag.flag-gp { background-position: -182px -92px; }
.flag.flag-gq { background-position: -202px -92px; }
.flag.flag-gr { background-position: -222px -92px; }
.flag.flag-gs { background-position: -242px -92px; }
.flag.flag-gt { background-position: -2px -107px; }
.flag.flag-gu { background-position: -22px -107px; }
.flag.flag-gw { background-position: -42px -107px; }
.flag.flag-gy { background-position: -62px -107px; }
.flag.flag-hk { background-position: -82px -107px; }
.flag.flag-hm { background-position: -102px -107px; }
.flag.flag-hn { background-position: -122px -107px; }
.flag.flag-hr { background-position: -142px -107px; }
.flag.flag-ht { background-position: -162px -107px; }
.flag.flag-hu { background-position: -182px -107px; }
.flag.flag-id { background-position: -202px -107px; }
.flag.flag-ie { background-position: -222px -107px; }
.flag.flag-il { background-position: -242px -107px; }
.flag.flag-in { background-position: -2px -122px; }
.flag.flag-io { background-position: -22px -122px; }
.flag.flag-iq { background-position: -42px -122px; }
.flag.flag-ir { background-position: -62px -122px; }
.flag.flag-is { background-position: -82px -122px; }
.flag.flag-it { background-position: -102px -122px; }
.flag.flag-jm { background-position: -122px -122px; }
.flag.flag-jo { background-position: -142px -122px; }
.flag.flag-jp { background-position: -162px -122px; }
.flag.flag-ke { background-position: -182px -122px; }
.flag.flag-kg { background-position: -202px -122px; }
.flag.flag-kh { background-position: -222px -122px; }
.flag.flag-ki { background-position: -242px -122px; }
.flag.flag-km { background-position: -2px -137px; }
.flag.flag-kn { background-position: -22px -137px; }
.flag.flag-kp { background-position: -42px -137px; }
.flag.flag-kr { background-position: -62px -137px; }
.flag.flag-kw { background-position: -82px -137px; }
.flag.flag-ky { background-position: -102px -137px; }
.flag.flag-kz { background-position: -122px -137px; }
.flag.flag-la { background-position: -142px -137px; }
.flag.flag-lb { background-position: -162px -137px; }
.flag.flag-lc { background-position: -182px -137px; }
.flag.flag-li { background-position: -202px -137px; }
.flag.flag-lk { background-position: -222px -137px; }
.flag.flag-lr { background-position: -242px -137px; }
.flag.flag-ls { background-position: -2px -152px; }
.flag.flag-lt { background-position: -22px -152px; }
.flag.flag-lu { background-position: -42px -152px; }
.flag.flag-lv { background-position: -62px -152px; }
.flag.flag-ly { background-position: -82px -152px; }
.flag.flag-ma { background-position: -102px -152px; }
.flag.flag-mc { background-position: -122px -152px; }
.flag.flag-md { background-position: -142px -152px; }
.flag.flag-me { height: 12px; background-position: -162px -152px; }
.flag.flag-mg { background-position: -182px -152px; }
.flag.flag-mh { background-position: -202px -152px; }
.flag.flag-mk { background-position: -222px -152px; }
.flag.flag-ml { background-position: -242px -152px; }
.flag.flag-mm { background-position: -2px -167px; }
.flag.flag-mn { background-position: -22px -167px; }
.flag.flag-mo { background-position: -42px -167px; }
.flag.flag-mp { background-position: -62px -167px; }
.flag.flag-mq { background-position: -82px -167px; }
.flag.flag-mr { background-position: -102px -167px; }
.flag.flag-ms { background-position: -122px -167px; }
.flag.flag-mt { background-position: -142px -167px; }
.flag.flag-mu { background-position: -182px -167px; }
.flag.flag-mv { background-position: -202px -167px; }
.flag.flag-mw { background-position: -222px -167px; }
.flag.flag-mx { background-position: -242px -167px; }
.flag.flag-my { background-position: -2px -182px; }
.flag.flag-mz { background-position: -22px -182px; }
.flag.flag-na { background-position: -42px -182px; }
.flag.flag-nc { background-position: -62px -182px; }
.flag.flag-ne { background-position: -82px -182px; }
.flag.flag-nf { background-position: -102px -182px; }
.flag.flag-ng { background-position: -122px -182px; }
.flag.flag-ni { background-position: -142px -182px; }
.flag.flag-nl { background-position: -162px -182px; }
.flag.flag-no { background-position: -182px -182px; }
.flag.flag-np { width: 9px; background-position: -257px -47px; }
.flag.flag-nr { background-position: -202px -182px; }
.flag.flag-nu { background-position: -222px -182px; }
.flag.flag-nz { background-position: -242px -182px; }
.flag.flag-om { background-position: -2px -197px; }
.flag.flag-pa { background-position: -22px -197px; }
.flag.flag-pe { background-position: -42px -197px; }
.flag.flag-pf { background-position: -62px -197px; }
.flag.flag-pg { background-position: -82px -197px; }
.flag.flag-ph { background-position: -102px -197px; }
.flag.flag-pk { background-position: -122px -197px; }
.flag.flag-pl { background-position: -142px -197px; }
.flag.flag-pm { background-position: -162px -197px; }
.flag.flag-pn { background-position: -182px -197px; }
.flag.flag-pr { background-position: -202px -197px; }
.flag.flag-ps { background-position: -222px -197px; }
.flag.flag-pt { background-position: -242px -197px; }
.flag.flag-pw { background-position: -2px -212px; }
.flag.flag-py { background-position: -22px -212px; }
.flag.flag-qa { background-position: -42px -212px; }
.flag.flag-re { background-position: -62px -212px; }
.flag.flag-ro { background-position: -82px -212px; }
.flag.flag-rs { background-position: -102px -212px; }
.flag.flag-ru { background-position: -122px -212px; }
.flag.flag-rw { background-position: -142px -212px; }
.flag.flag-sa { background-position: -162px -212px; }
.flag.flag-sb { background-position: -182px -212px; }
.flag.flag-sc { background-position: -202px -212px; }
.flag.flag-sd { background-position: -242px -212px; }
.flag.flag-se { background-position: -2px -227px; }
.flag.flag-sg { background-position: -22px -227px; }
.flag.flag-sh { background-position: -42px -227px; }
.flag.flag-si { background-position: -62px -227px; }
.flag.flag-sj { background-position: -82px -227px; }
.flag.flag-sk { background-position: -102px -227px; }
.flag.flag-sl { background-position: -122px -227px; }
.flag.flag-sm { background-position: -142px -227px; }
.flag.flag-sn { background-position: -162px -227px; }
.flag.flag-so { background-position: -182px -227px; }
.flag.flag-sr { background-position: -202px -227px; }
.flag.flag-st { background-position: -222px -227px; }
.flag.flag-sv { background-position: -242px -227px; }
.flag.flag-sy { background-position: -2px -242px; }
.flag.flag-sz { background-position: -22px -242px; }
.flag.flag-tc { background-position: -42px -242px; }
.flag.flag-td { background-position: -62px -242px; }
.flag.flag-tf { background-position: -82px -242px; }
.flag.flag-tg { background-position: -102px -242px; }
.flag.flag-th { background-position: -122px -242px; }
.flag.flag-tj { background-position: -142px -242px; }
.flag.flag-tk { background-position: -162px -242px; }
.flag.flag-tl { background-position: -182px -242px; }
.flag.flag-tm { background-position: -202px -242px; }
.flag.flag-tn { background-position: -222px -242px; }
.flag.flag-to { background-position: -242px -242px; }
.flag.flag-tr { background-position: -2px -257px; }
.flag.flag-tt { background-position: -22px -257px; }
.flag.flag-tv { background-position: -42px -257px; }
.flag.flag-tw { background-position: -62px -257px; }
.flag.flag-tz { background-position: -82px -257px; }
.flag.flag-ua { background-position: -102px -257px; }
.flag.flag-ug { background-position: -122px -257px; }
.flag.flag-um { background-position: -142px -257px; }
.flag.flag-us { background-position: -162px -257px; }
.flag.flag-uy { background-position: -182px -257px; }
.flag.flag-uz { background-position: -202px -257px; }
.flag.flag-va { background-position: -222px -257px; }
.flag.flag-vc { background-position: -242px -257px; }
.flag.flag-ve { background-position: -262px -2px; }
.flag.flag-vg { background-position: -262px -17px; }
.flag.flag-vi { background-position: -262px -32px; }
.flag.flag-vn { background-position: -270px -47px; }
.flag.flag-vu { background-position: -262px -62px; }
.flag.flag-wf { background-position: -262px -92px; }
.flag.flag-ws { background-position: -262px -107px; }
.flag.flag-ye { background-position: -262px -122px; }
.flag.flag-yt { background-position: -262px -137px; }
.flag.flag-za { background-position: -262px -152px; }
.flag.flag-zm { background-position: -262px -167px; }
.flag.flag-zw { background-position: -262px -182px; }
Retrieved from "https://bronies.wiki/w/index.php?title=MediaWiki:Common.css&oldid=389"