MediaWiki:Common.css: Difference between revisions

/* ======================== */
/* FONT DEFINITIONS         */
/* ======================== */

@font-face {
	font-weight:normal;
	src:url("/w/images/0/06/Dejavu-sans.woff2") format("woff2");
	font-family:"DejaVu Sans";
}

@font-face {
	font-weight:bold;
	src:url("/w/images/d/d1/Dejavu-sans-bold.woff2") format("woff2");
	font-family:"DejaVu Sans";
}

@font-face {
	src:url("/w/images/a/a2/Inconsolata.woff2") format("woff2");
	font-family:"Inconsolata";
}

@font-face {
	src:url("/w/images/d/d2/Tf2c.woff2") format("woff2");
	font-family:"TF2C";
}

@font-face {
	src:url("/w/images/2/20/Tf2c-secondary.woff2") format("woff2");
	font-family:"TF2C Secondary";
}

@font-face {
	src:url("/w/images/f/f8/Tf2c-build.woff2") format("woff2");
	font-family:"TF2C Build";
}

@font-face {
	src:url("/w/images/2/20/Tf2c-professor.woff2") format("woff2");
	font-family:"TF2C Professor";
}

/* ======================== */
/* GENERIC STYLING          */
/* ======================== */

:root {
	--fontGeneric:"DejaVu Sans", sans-serif;
	--fontCode:"Inconsolata", monospace;
	--fontPrimary:"TF2C", serif;
	--fontSecondary:"TF2C Secondary", sans-serif;
	--fontBuild:"TF2C Build", serif;

	--colPrimaryLighter:#D8CCC0;
	--colPrimaryLight:#C4B9AE;
	--colPrimaryMid:#A69A92;
	--colPrimaryDark:#8A7D78;
	--colPrimaryDarker:#71625F;

	--colSecondaryLighter:#594747;
	--colSecondaryLight:#3F3333;
	--colSecondaryMid:#332929;
	--colSecondaryDark:#282020;
	--colSecondaryDarker:#140F0F;

	--colTFLighter:#ECE3CB;
	--colTFLight:#9E9684;
	--colTFMid:#51493E;
	--colTFDark:#3B352D;
	--colTFDarker:#2A2725;

	--colOrangeLighter:#FFAA6E;
	--colOrangeLight:#FF7C44;
	--colOrangeMid:#CC592C;
	--colOrangeDark:#A54624;
	--colOrangeDarker:#70321A;
}

/* ================================ */
/* STAFF MEMBERS                    */
/* ================================ */

a[class="mw-userlink"][title="User:Admin"],
a[class="mw-userlink"][title="User:Azzy"],
a[class="mw-userlink"][title="User:Benjamoose"],
a[class="mw-userlink"][title="User:Boba"],
a[class="mw-userlink"][title="User:Hunterbunney"],
a[class="mw-userlink"][title="User:Technochips"],
a[class="mw-userlink"][title="User:Tkain"],
a[class="mw-userlink"][title="User:Ultr4nima"],
a[class="mw-userlink"][title="User:Waugh101"] {
	border-radius:3px;
	background:rgba(0, 0, 0, 0.15);
	padding:1px 3px;
	color:var(--colOrangeDark);
	font-weight:bold;
}

/* ================================ */
/* MAIN PAGE                        */
/* ================================ */

.page-Main_Page .external {
	background-image:unset !important;
	padding-right:0 !important;
}

.mp-header {
	margin-top:10px !important;
	font-size:2.5em !important;
	font-family:"TF2C","TF2","Linux Libertine","Georgia","Times",serif !important;
	text-transform:uppercase;
}

.mp-topheader
{
	font-size:38.4px;
	font-family:"TF2C","TF2","Linux Libertine","Georgia","Times",serif;
	text-align:center;
	text-transform:uppercase;
}

.mp-description
{
	text-align:center;
}

.mp-classContainer
{
	display:flex;
	justify-content:space-around;
	border-radius:8px;
	padding:8px;
	font-size:clamp(8px, 1vw, 20px);
	text-align:center;
}

.mp-class a img
{
	width:128px;
	max-width:100%;
	height:unset;
}

.mp-class a img:hover
{
	filter:brightness(1.25);
}

.page-Main_Page .firstHeading
{
	display:none;
}
.page-Main_Page .mp-topheader
{
	margin:-19.7px -14px 0 -14px;
	background-color:#583A31;
	padding-bottom:5px;
	color:#D2CDC8;
}
.page-Main_Page .mp-topheader p
{
	margin:0;
}
.page-Main_Page .mp-topheader p:first-child
{
	margin-top:0.5em;
}
.page-Main_Page .mp-topheader p:last-child
{
	margin-bottom:5px;
	border-bottom:0.2em dotted;
}

.mp-container
{
	display:inline-block;
	border-radius:8px;
	background-color:#B3A9A2;
	padding:8px;
	font-size:16px;
}

.mp-classContainer
{
	display:flex;
	justify-content:space-around;
	border-radius:8px;
	background-color:#B3A9A2;
	padding:8px;
	font-size:clamp(8px, 1vw, 20px);
	text-align:center;
}

/* ================================ */
/* EVERYTHING ELSE TODO CLEANUP     */
/* ================================ */

.infobox {
	float:right;
	margin:0 0 1em 1em;
	min-width:21em;
}
.infobox-title {
	font-size:21px;
	text-align:center 
}

.infobox-image {
	text-align:center
}

.infobox th {
	vertical-align:top;
	width:100%;
	font-weight:normal;
	font-family:"TF2C Build","TF2 Build",sans-serif;
	text-align:center;
	text-transform:uppercase;
}

.killicon {
	vertical-align:middle;
	height:40px;
	color:#38361E;
	font-weight:bold;
	font-size:17px;
	font-family:"Verdana",serif;
}

.content .infobox caption {
	padding:0;
}
.ambox
{
	margin:0 10%;
	padding-right:1em;
}
.ambox-image, .ambox-empty-cell
{
	border-left:10px solid #583A31;
	padding:2px 0 2px 0.5em;
}
@media screen {
	.infobox, .ambox {
		border:1px solid #583A31;
		background-color:#E5E0DC;
	}

	.infobox th {
		background-color:#583A31;
		color:#D2CDC8;
	}

	.killicon {
		border-radius:5px;
		background-color:#F1E9CB;
		color:#38361E;
	}
}
@media print {
	.infobox th {
		background-color:#8E8E8E;
	}

	.infobox, .ambox {
		border:1px black solid;
	}
	.infobox, .ambox {
		border-color:black;
	}
}

.loadout-tooltip-container {
	border-radius:5px;
	background-image:linear-gradient(#38332D,#221E1A);
	padding:10px;
	color:#221E1A;
	font-size:15px;
	font-family:"TF2C Secondary","TF2 Secondary","Verdana",sans-serif;
}

.loadout-tooltip-container p {
	margin:0 !important;
	line-height:1.6em;
	text-align:center;
}

.loadout-tooltip-name {
	color:#B2B2B2;
	font-size:18px;
	font-family:"TF2C Build","TF2 Build","Verdana",sans-serif;
}

.loadout-tooltip-type {
	color:#756B5E;
}

.loadout-tooltip-neutral {
	color:#EBE2CA;
}

.loadout-tooltip-positive
{
	color:#99CCE1;
}

.loadout-tooltip-negative {
	color:#FF4040;
}

.tabber__tabs {
	margin:auto;
	box-shadow:none;
}

.tabber__tab {
	margin:1px;
	box-shadow:none;
	background-color:#583A31;
	font-weight:normal;
	font-family:"TF2C Build","TF2 Build",sans-serif;
	text-transform:uppercase;
}

.tabber__tab,.tabber__tab:visited {
	box-shadow:none;
	color:#E5E0DC;
}

.tabber__tab--active,.tabber__tab:hover,.tabber__tab--active:visited {
	box-shadow:none;
	color:#e8d18c;
}

.tabber__tab[title="RED"] {
	background-color:#C63E3E;
}

.tabber__tab[title="BLU"] {
	background-color:#59788C;
}

.tabber__tab[title="GRN"] {
	background-color:#3C9D46;
}

.tabber__tab[title="YLW"] {
	background-color:#DA9D28;
}

@media print {
	.tabber__tab {
		display:none;
	}
}

.tabber__panel {
	min-width:0;
}

.tabber__tab[aria-selected="true"], .tabber__tab[aria-selected="true"]:visited {
	color:#e8d18c;
}

.quotation blockquote::before,.quotation blockquote::after {
	position:relative;
	top:0.4em;
	color:#292526;
	font-size:5em;
	line-height:0;
	font-family:"Linux Libertine","Georgia","Times",serif;
	white-space:nowrap;
}

.quotation blockquote::before {
	content:open-quote;
}

.quotation blockquote::after {
	content:close-quote;
}

.quotation blockquote {
	display:flex;
	margin:0;
	border:none;
	padding:0;
}

.quotation blockquote p {
	margin:1em;
	text-align:justify;
}

.quotation {
	display:flex;
	flex-direction:column;
	margin-left:32px;
	border-right:2px #292526 solid;
	border-left:2px #292526 solid;
	padding:0 16px;
	width:auto;
	max-width:50em;
}

.quotation cite:before {
	content:"— ";
}

.quotation cite {
	width:100%;
	text-align:right;
}

.crits
{
	background-image:url(/w/index.php?title=Special:Redirect/file/Killicon_crit.png);
	background-size:100% 100%;
}

.minicrits
{
	background-image:url(/w/index.php?title=Special:Redirect/file/Killicon_minicrit.png);
	background-size:100% 100%;
}

.navbox ul, .navbox li
{
	display:inline;
	margin:0;
}

.navbox li:not(:last-child):after
{
	content:" · ";
}