Difference between revisions of "MediaWiki:Common.css"

Revision as of 20:10, 9 May 2018

/* CSS placed here will be applied to all skins */
/* infobox stuff ripped from https://en.wikipedia.org/wiki/MediaWiki:Common.css */
.infobox {
	border: 1px solid #a2a9b1;
	border-spacing: 3px;
	background-color: #f8f9fa;
	color: black;
	/* @noflip */
	margin: 0.5em 0 0.5em 1em;
	padding: 0.2em;
	/* @noflip */
	float: right;
	/* @noflip */
	clear: right;
	font-size: 88%;
	line-height: 1.5em;
}
.infobox .navbar {
	font-size: 100%;
}
.infobox caption {
	font-size: 125%;
	font-weight: bold;
	padding: 0.2em;
	text-align: center;
}
.infobox td,
.infobox th {
	vertical-align: top;
	/* @noflip */
	text-align: left;
}
.infobox.bordered {
	border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
	border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
	border: 0;
}
.infobox.sisterproject {
	width: 20em;
	font-size: 90%;
}
.infobox.standard-talk {
	border: 1px solid #c0c090;
	background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
	border: 1px solid #c0c090;
}
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
	border: 0;
	border-top: 1px solid #a2a9b1;
	/* @noflip */
	border-right: 1px solid #a2a9b1;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
	border: 0;
	/* @noflip */
	border-right: 1px solid #a2a9b1;
}
.infobox.geography {
	border-collapse: collapse;
	line-height: 1.2em;
	font-size: 90%;
}
.infobox.geography  td,
.infobox.geography  th {
	border-top: 1px solid #a2a9b1;
	padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
	border-top: 1px solid #a2a9b1;
	padding: 0.4em 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
	border: 0;
	padding: 0 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
	border-top: 0;
	border-bottom: 1px solid #a2a9b1;
	padding: 0 0.6em 0.4em 0.6em;
}
.infobox.geography .maptable td,
.infobox.geography .maptable th {
	border: 0;
	padding: 0;
}
table.mw-hiero-table td {
	vertical-align: middle;
}

/*hehehe*/
$lines: 16; // no of <li> elements, has to be an even number. Still learning how sass works, I'm getting a warning when an odd number is used.

$delayandduration: 3; // use this number to divide both animation duration for <ul> and animation delay for <li>. Controls the speed of the animation. Greater = faster.

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
body {
	background-color: hsl(0,67%,50%);
	color: hsl(60,80,60);
	// overflow: hidden;
	}
ul.irl {
	overflow: hidden;
	perspective: 900px;
	list-style: none;
	height: 100vh;
	max-height: 800px;
	min-height: 400px;
	text-align: center;

	// animation: 60s width-sway linear infinite;
	}
@keyframes width-sway {
	0%, 100% {
		width: 500px;
		// transform: rotate(10deg);
		}
	50% {
		width: 100%;
		// transform: rotate(-10deg);
		}
	}
li.irl {
	position: absolute;
	top: 0;
	width: 100%;
	
	transform: translateY(100vh);
	
	font-size: 1.5rem;
	font-family: sans-serif;
	font-weight: bold;

	animation: #{$lines/$delayandduration}s spiral-staircase linear infinite;
	}

@for $i from 1 through $lines {
	li:nth-child(#{$i}) {
		animation-delay: #{$i/$delayandduration}s;
		}
	}

@for $r from 1 through $lines/2 {
	li:nth-child(#{$r}) {
		right: #{$r}rem;
		}
	li:nth-last-child(#{$r}) {
		right: #{$r}rem;
		}
	}

@keyframes spiral-staircase {
	0% {
		transform: rotateY(90deg) translateY(105vh) rotate(0deg);
		}
	0%, 100% {
		// opacity: 0;
		}
	50% {
		transform: rotateY(0deg) translateY(50vh) rotate(0deg);
		// opacity: 1;
		}
	100% {
		transform: rotateY(-90deg) translateY(-5vh) rotate(0deg);
		}
	}