MediaWiki:Common.css: Difference between revisions

From TF2 Classified Wiki
Jump to navigation Jump to search
fixed infoboxes. temporary color scheme taken from tf2 wiki
Can we fix the tabber active color issue?
 
(72 intermediate revisions by 3 users not shown)
Line 1: Line 1:
@font-face {
font-family:"TF2C";
src: url("/misc/TF2C.woff2") format("woff2"),
url("/misc/TF2C.woff") format("woff"),
url("/misc/TF2C.ttf") format("truetype");
}
@font-face {
font-family:"TF2C Build";
src: url("/misc/TF2CBuild.woff2") format("woff2"),
url("/misc/TF2CBuild.woff") format("woff"),
url("/misc/TF2CBuild.ttf") format("truetype");
}
@font-face {
font-family:"TF2C Professor";
src: url(/misc/TF2CProfessor.woff2) format("woff2"),
url("/misc/TF2CProfessor.woff") format("woff"),
url("/misc/TF2CProfessor.ttf") format("truetype");
}
@font-face {
font-family:"TF2C Secondary";
src: url("/misc/TF2CSecondary.woff2") format("woff2"),
url("/misc/TF2CSecondary.woff") format("woff"),
url("/misc/TF2CSecondary.ttf") format("truetype");
}
.infobox {
.infobox {
border: 1px solid #79542B;
float:right;
float: right;
min-width:21em;
width: 21em;
margin:0 0 1em 1em;
margin: 0 0 1em 1em;
background-color: #FFFCF7;
}
}
.infobox-title {
.infobox-title {
font-size: 2em;
font-size:21px;
text-align: center
text-align:center  
}
}
.infobox-image {
.infobox-image {
text-align:center
}
.infobox th {
text-align:center;
vertical-align:top;
font-family:"TF2C Build","TF2 Build",sans-serif;
text-transform:uppercase;
font-weight:normal;
width:100%;
}
.killicon {
vertical-align:middle;
height:40px;
color:#38361E;
font-family:"Verdana",serif;
font-weight:bold;
font-size:17px;
}
.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 {
background-color:#F1E9CB;
color:#38361E;
border-radius:5px;
}
}
@media print {
.infobox th {
background-color:#8E8E8E;
}
.infobox, .ambox {
border: 1px black solid;
}
.infobox, .ambox {
border-color:black;
}
}
.loadout-tooltip-container {
padding:10px;
background-image:linear-gradient(#38332D,#221E1A);
color:#221E1A;
font-size:15px;
font-family:"TF2C Secondary","TF2 Secondary","Verdana",sans-serif;
border-radius:5px;
}
.loadout-tooltip-container p {
margin:0 !important;
text-align:center;
line-height: 1.6em;
}
.loadout-tooltip-name {
font-family:"TF2C Build","TF2 Build","Verdana",sans-serif;
font-size:18px;
color:#B2B2B2;
}
.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 {
background-color:#583A31;
font-family:"TF2C Build","TF2 Build",sans-serif;
text-transform: uppercase;
box-shadow:none;
font-weight:normal;
margin:1px;
}
.tabber__tab,.tabber__tab:visited {
color:#E5E0DC;
box-shadow:none;
}
.tabber__tab--active,.tabber__tab:hover,.tabber__tab--active:visited {
color:#e8d18c;
box-shadow:none;
}
.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 {
font-size:5em;
line-height:0;
font-family:"Linux Libertine","Georgia","Times",serif;
top:0.4em;
position:relative;
color:#292526;
white-space:nowrap;
}
.quotation blockquote::before {
content:open-quote;
}
.quotation blockquote::after {
content:close-quote;
}
.quotation blockquote {
border:none;
margin:0;
padding:0;
display:flex;
}
.quotation blockquote p {
margin:1em;
text-align:justify;
}
.quotation {
width:auto;
border-left:2px #292526 solid;
border-right:2px #292526 solid;
padding:0 16px;
margin-left:32px;
max-width:50em;
display:flex;
flex-direction:column;
}
.quotation cite:before {
content:"— ";
}
.quotation cite {
text-align:right;
width:100%;
}
.page-Main_Page .external {
padding-right:0 !important;
background-image:unset !important;
}
.mp-header {
font-family:"TF2C","TF2","Linux Libertine","Georgia","Times",serif !important;
text-transform:uppercase;
font-size:2.5em !important;
margin-top:10px !important;
}
.mp-topheader
{
font-family: "TF2C","TF2","Linux Libertine","Georgia","Times",serif;
text-transform: uppercase;
text-align: center;
font-size: 38.4px;
}
.mp-description
{
text-align: center;
}
.mp-classContainer
{
border-radius: 8px;
padding: 8px;
display: flex;
justify-content: space-around;
font-size: clamp(8px, 1vw, 20px);
text-align: center;
text-align: center;
}
}
.infobox th {
 
background-color: #F9D483;
.mp-class a img
vertical-align: top;
{
width: 120px;
max-width: 100%;
width: 128px;
height: unset;
}
 
.mp-class a img:hover
{
filter: brightness(1.25);
}
 
.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;
}
}
.infobox td {
 
vertical-align: top
.navbox li:not(:last-child):after
{
content:" · ";
}
}

Latest revision as of 06:59, 24 July 2025

@font-face {
	font-family:"TF2C";
	src: url("/misc/TF2C.woff2") format("woff2"),
	url("/misc/TF2C.woff") format("woff"),
	url("/misc/TF2C.ttf") format("truetype");
}

@font-face {
	font-family:"TF2C Build";
	src: url("/misc/TF2CBuild.woff2") format("woff2"),
	url("/misc/TF2CBuild.woff") format("woff"),
	url("/misc/TF2CBuild.ttf") format("truetype");
}

@font-face {
	font-family:"TF2C Professor";
	src: url(/misc/TF2CProfessor.woff2) format("woff2"),
	url("/misc/TF2CProfessor.woff") format("woff"),
	url("/misc/TF2CProfessor.ttf") format("truetype");
}

@font-face {
	font-family:"TF2C Secondary";
	src: url("/misc/TF2CSecondary.woff2") format("woff2"),
	url("/misc/TF2CSecondary.woff") format("woff"),
	url("/misc/TF2CSecondary.ttf") format("truetype");
}

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

.infobox-image {
	text-align:center
}

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

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

.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 {
		background-color:#F1E9CB;
		color:#38361E;
		border-radius:5px;
	}
}
@media print {
	.infobox th {
		background-color:#8E8E8E;
	}

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

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

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

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

.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 {
	background-color:#583A31;
	font-family:"TF2C Build","TF2 Build",sans-serif;
	text-transform: uppercase;
	box-shadow:none;
	font-weight:normal;
	margin:1px;
}

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

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

.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 {
	font-size:5em;
	line-height:0;
	font-family:"Linux Libertine","Georgia","Times",serif;
	top:0.4em;
	position:relative;
	color:#292526;
	white-space:nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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:" · ";
}