MediaWiki:Common.css

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

/* 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;
	clear: both;
	border: 1px solid hsl(0, 0%, 89%);
	background-color: hsl(0, 0%, 100%);
}

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