MediaWiki:Common.less/templates.less

/* ==================
       TEMPLATES
   ==================*/

:root {
	--fact-text-color: #15f;

	--production-selected-background: @caper;
	--production-selected-color: @black;

	--wikipedia-border: #e0e0e0;
	--wikipedia-background: #f8f8f8;

	--keypress-background: @gallery;
	--keypress-border: @silver;
	--keypress-color: @mineshaft;
	
	--tbz-unlocked-background: repeating-linear-gradient(-45deg, #bfffbd 0 20px,#4cf172 20px 30px);
	--tbz-unlocked-border-color: #012100;
	
	--tbz-locked-background-color: #ffc3c3;
	--tbz-locked-border-color: #df9090;
	
	--tbz-partial-unlock-background: #dae8d2;
	--tbz-partial-unlock-border-color: #aeaeae;
}

// Template:Archive list
.archivelist {
	background-color: @infobox-background;
	border: solid 1px @infobox-border-color;
	box-shadow: @box-shadow;
	float: right;
	margin: 5px;
	padding: 5px;
	text-align: center;
	width: 120px;
}

// Template:Collapsed section
.collapsed-sec {
	font-family: @serif-stack;
	font-weight: bold;
	text-shadow: 1px 1px @white;
}

// Template:CombatStyles
.combat-styles-icons a {
	display: inline-block;
	text-align: center;
	min-width: 26px;
}

.combat-styles-header a {
	color: var(--text-color);
}

// Direction, Fact, Sic templates
.fact-text {
	color: var(--fact-text-color);
	font-style: italic;
	cursor: help;
	border-bottom: dotted 1px;
}

// Template:Uses material list
.production-selected {
	background: var(--production-selected-background);
	color: var(--production-selected-color);
}

// Relative location
.relative-location {
	background: @infobox-background;
	border: 1px solid @infobox-border-color;
	border-spacing: 0;
	box-shadow: @box-shadow;
	margin: 5px;
	text-align: center;

	&-txt {
		color: var(--text-color);
	}

	&-header {
		background: @infobox-header-color;
	}
}

// Template:Music map
#musicMap data {
	display: none;
}

.musicMap-buttons {
	text-align: center;
	margin: 0.7em;
}

// Talkheader template
.talkheader {
	text-align: center;
	background-color: var(--body-dark);
}

// Template:Shortcut
.shortcut {
	border: 1px solid @infobox-border-color;
	background: @infobox-background;
	float: right;
	font-size: .8em;
	margin: 0.5em 0em 0.5em 1em;
	padding: 0.5em;
	text-align: center;
}

// Template:Succession
.succession {
	width: 50%;
	text-align: center;

	th {
		width: 33%;
		font-size: 90%;
		background: @BODY_MID;
	}

	td {
		background: @BODY_LIGHT;
	}
}

// Template:Update, PollNotice, etc
.update {
	border-radius: @border-radius;
	background: @BODY_MID;
	box-shadow: @box-shadow;
	margin: 1em 0;
	padding: .25em 1em;
	text-align: center;
}

// Template:PollWrapper
.pollwrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
	counter-reset: question;
}

// reused with both poll classes below
.pollbox {
	position: relative;
	padding: 1em 0.7em;
	margin: 0.7em;
	margin-bottom: 1.2em;
	width: 700px;
	font-size: 16px;
	border: 2px solid var(--body-border);
	background: @infobox-background;
	
	&::before {
		content: "Question " counter(question);
		counter-increment: question;
		position: absolute;
		font-size: 16px;
		font-weight: bold;
		top: -0.5em;
		margin-top: -2px;
		left: 0.6em;
		line-height: 1em;
		background: linear-gradient(0deg, @infobox-background, @infobox-background 50%, rgba(0, 0, 0, 0) 50%);
		padding: 0 0.6em;
	}
	
	table {
		width: 100%;
		border-collapse: collapse;
		font-size: 14px;
	}
	
	caption {
		text-align: left;
		margin-bottom: 4px;
	}
	
	td {
		padding: 0px;
	}
}

// Template:Poll
.pollquestion {
	td {
		
		&:first-child::before {
			content: "";
			background: url('filepath://Poll_shield.png');
			background-repeat: no-repeat;
			background-position: top;
			width: 10px;
			height: 14px;
			position: absolute;
			top: 4px;
			left: 0;
		}
		
		&:first-child {
			position: relative;
			width: 32%;
			padding-right: 0.7em;
			padding-left: 16px;
		}
		
		&.pollpercent {
			box-sizing: border-box;
			padding-left: 17px;
			padding-right: 8px;
		}
		
		&:last-child {
			width: 22%;
			padding-left: 0.7em;
		}
	}

	.pollnote td {
		width: 100%;
		padding: 20px 5px;
		padding-bottom: 5px;
		
		&::before {
			content: none;
		}
	}

	data {
		display: block;
		height: 15px;
		background-image: url('filepath://Poll_sword2.png');
		position: relative;
		
		&::before,
		&::after {
			content: "";
			height: inherit;
			position: absolute;
			height: 15px;
		}
		
		&::before {
			background: url('filepath://Poll_sword1.png');
			width: 17px;
			right: 100%;
		}
		&::after {
			background: url('filepath://Poll_sword3.png');
			width: 8px;
			left: 100%;
		}
	}
}

.archivepollq {
	th {
		text-align: left;
		font-weight: normal;
		padding: 15px 0 0 0;
	}

	td {
		&:first-child {
			position: relative;
			width: 80%;
			padding-right: 0.7em;
			padding-left: 16px;
		}

		&.archivepollpercent {
			box-sizing: border-box;
			padding: 2px;
			border: 1px solid var(--body-border);
		}

		&:last-child {
			text-align: right;
			padding-left: 0.7em;
		}
	}

	.archivepollnote > td {
		text-align: left;
		width: 100%;
		padding: 20px 5px;
		padding-bottom: 5px;
	}

	data {
		display: block;
		height: 25px;
		background: var(--body-border);
		position: relative;
	}

	&.e {
		border: 2px solid var(--errorbox-border);
		background: var(--errorbox-bg);

		&::before {
			content: "Error";
			background: linear-gradient(0deg, var(--errorbox-bg), var(--errorbox-bg) 50%,rgba(0,0,0,0) 50%);
		}
	}
}

// Template:Wikipedia
.wikipedia {
	border: 1px solid var(--wikipedia-border);
	background-color: var(--wikipedia-background);
}

// Hatnotes: [[Module:Hatnote]]
.hatnote,
.seealso {
	font-style: italic;

	i {
		font-style: normal;
	}
}

// two classes - hatnote gets much customisation in minerva but seealso doesnt
div.hatnote,
div.seealso {
	// 0.5em is <p>'s top and bottom margin
	// 1.6em to match <dd>/<ul> indent
	margin: .5em 1.6em;

	& + & {
		margin-top: -0.5em;
	}
}

// Allowing [[Template:Extimage]] to resize images properly
.extimage div,
.extimage a,
.extimage img {
	width: inherit;
	height: inherit;
}

// Template:TB
.tbz-region {
	background-color: var(--table-na-background);
	display: inline-block;
	white-space: nowrap;
	border: 1px solid @BODY_BORDER;
	border-radius: 6px;
	width: 110px;
	padding: .35em .45em .25em;
	margin: 1px;
}

.tbz-check {
	display: none;
}

.tbz-badge {
	background-color: var(--table-na-background);
	display: inline-block;
	border: 1px solid @BODY_BORDER;
	border-radius: 6px;
	padding: 0.3em 0.35em .2em;
	
	&+.tbz-badge {
		margin-left: 1px;
	}
}

.tbz-badge.tbz-badge-wrapper {
    padding: 0.2em;
}

.tbz-check {
    display: none;
}

.tbz-unlocked {
	background: var(--tbz-unlocked-background);
	border-color: var(--tbz-unlocked-border-color);
	
	a {
		color: var(--text-color);
	}
	
	.tbz-check {
    	display: inline-block;
    	padding-left: 5px;
	}
}

.tbz-locked {
	background-color: var(--tbz-locked-background-color);
	border-color: var(--tbz-locked-border-color);
	
	a {
		color: var(--text-color);
	}
	
	.tbz-unlocked {
		background: var(--tbz-partial-unlock-background);	
		border-color: var(--tbz-partial-unlock-border-color);
	}
}

/* [[Template:Combat]] */
.combatinfo {
	width: 160px;
	text-align: center;
	float: right;
	clear: right;

	&.combatinfo-left {
		float: left;
		clear: left;
	}

	td {
		width: 25%;
	}
}

.wikitable.combatinfo > caption {
	font-weight: normal;
}

// Growth stages template
.growth-stage-table {
	td.growth-stage {
		text-align: center;
		vertical-align: bottom;
	}
}

// Template:Key press
.keypress {
	background: var(--keypress-background);
	color: var(--keypress-color);
	font-family: inherit;
	border: 1px solid var(--keypress-border);
	border-radius: @border-radius;
	font-size: 0.9em;
	margin: 0 0.1em;
	padding: 0.1em 0.4em;
	white-space: nowrap;
}

// Music player
.rsw-music-player {
	height: 2em;
	vertical-align: middle;
}

// [[Template:Drop sources]], [[Template:Store locations list]]
.item-drops .beast-version,
.store-locations-list .shop-version {
	font-size: smaller;
	font-style: italic;
}

// Proper styling for block cells in [[Template:Family tree]]
td {
	&.famtreesub {
		margin: 0;
		padding: 0;

		table {
			border-spacing: 0;
			margin: 0;
			padding: 0;

			td {
				height: 1em;
				width: 1em;
			}
		}
	}

	&.famtreeleaf {
		background: var(--body-light);
		border: 1px solid var(--body-border);
		padding: .2em;
	}
}

// [[Template:SCP]]
.scp {
	display: inline-block;
	height: 1em;
	position: relative;

	img {
		height: auto;
		image-rendering: pixelated;
		image-rendering: crisp-edges;
		max-width: 32px;
	}
}