MediaWiki:Common.css: Difference between revisions

From TF2 Classified Wiki
Jump to navigation Jump to search
changed background colors for thumbnails, table of content (ultr4nima)
Can we fix the tabber active color issue?
 
(58 intermediate revisions by 3 users not shown)
Line 1: Line 1:
@font-face
@font-face {
{
font-family:"TF2C";
font-family: "TF2C";
src: url("/misc/TF2C.woff2") format("woff2"),
src: url("https://wiki.tf2classic.com/fonts/TF2C.woff2") format("woff2"),
url("/misc/TF2C.woff") format("woff"),
url("https://wiki.tf2classic.com/fonts/TF2C.woff") format("woff"),
url("/misc/TF2C.ttf") format("truetype");
url("https://wiki.tf2classic.com/fonts/TF2C.ttf") format("truetype");
}
}
@font-face
 
{
@font-face {
font-family: "TF2C Build";
font-family:"TF2C Build";
src: url("https://wiki.tf2classic.com/fonts/TF2CBuild.woff2") format("woff2"),
src: url("/misc/TF2CBuild.woff2") format("woff2"),
url("https://wiki.tf2classic.com/fonts/TF2CBuild.woff") format("woff"),
url("/misc/TF2CBuild.woff") format("woff"),
url("https://wiki.tf2classic.com/fonts/TF2CBuild.ttf") format("truetype");
url("/misc/TF2CBuild.ttf") format("truetype");
}
}
@font-face
 
{
@font-face {
font-family: "TF2C Professor";
font-family:"TF2C Professor";
src: url("https://wiki.tf2classic.com/fonts/TF2CProfessor.woff2") format("woff2"),
src: url(/misc/TF2CProfessor.woff2) format("woff2"),
url("https://wiki.tf2classic.com/fonts/TF2CProfessor.woff") format("woff"),
url("/misc/TF2CProfessor.woff") format("woff"),
url("https://wiki.tf2classic.com/fonts/TF2CProfessor.ttf") format("truetype");
url("/misc/TF2CProfessor.ttf") format("truetype");
}
}
@font-face
 
{
@font-face {
font-family: "TF2C Secondary";
font-family:"TF2C Secondary";
src: url("https://wiki.tf2classic.com/fonts/TF2CSecondary.woff2") format("woff2"),
src: url("/misc/TF2CSecondary.woff2") format("woff2"),
url("https://wiki.tf2classic.com/fonts/TF2CSecondary.woff") format("woff"),
url("/misc/TF2CSecondary.woff") format("woff"),
url("https://wiki.tf2classic.com/fonts/TF2CSecondary.ttf") format("truetype");
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;
text-align:center
}
}
.infobox th {
.infobox th {
background-color: #F9D483;
text-align:center;
vertical-align: top;
vertical-align:top;
width: 120px;
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;
}
}
.killicon
.ambox
{
{
background-color: #F1E9CB;
margin:0 10%;
vertical-align: middle;
padding-right:1em;
height: 40px;
color: #38361E;
font-family: "Verdana", serif;
font-weight: bold;
font-size: 17px;
}
}
.loadout-tooltip-container
.ambox-image, .ambox-empty-cell
{
{
padding: 10px;
border-left:10px solid #583A31;
background-image: linear-gradient(#38332D, #221E1A);
padding: 2px 0 2px 0.5em;
color: #221E1A;
}
text-align: center;
@media screen {
font-size: 21px;
.infobox, .ambox {
font-family: "TF2C Secondary", sans-serif;
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
 
{
.loadout-tooltip-container p {
margin: 0 !important;
margin:0 !important;
text-align:center;
line-height: 1.6em;
}
}
.loadout-tooltip-name
 
{
.loadout-tooltip-name {
font-family: "TF2C Build", sans-serif;
font-family:"TF2C Build","TF2 Build","Verdana",sans-serif;
font-size: 25px;
font-size:18px;
color: #B2B2B2;
color:#B2B2B2;
}
}
.loadout-tooltip-type
 
{
.loadout-tooltip-type {
color: #756B5E;
color:#756B5E;
}
}
.loadout-tooltip-neutral
 
{
.loadout-tooltip-neutral {
color: #EBE2CA;
color:#EBE2CA;
}
}
.loadout-tooltip-positive
.loadout-tooltip-positive
{
{
color: #99CCE1;
color:#99CCE1;
}
 
.loadout-tooltip-negative {
color:#FF4040;
}
}
.loadout-tooltip-negative
 
{
.tabber__tabs {
color: #FF4040;
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;
}
}
#firstHeading
 
{
.tabber__tab[title="GRN"] {
font-family: "TF2C", serif;
background-color:#3C9D46;
color: #D2CDC8;
font-size: 2.4em;
border-bottom: 0.2em dotted #D2CDC8;
padding-left: 0.3em;
margin-left: 0.1em;
padding-top: 0.4em;
}
}
#mw-indicator-mw-helplink a
 
{
.tabber__tab[title="YLW"] {
font-family:"TF2C",serif;
background-color:#DA9D28;
color:#D2CDC8 !important;
font-size:38px;
margin-top:0.4em;
padding-right:0.3em;
padding-left:0.8em;
height:auto;
line-height: 49.4px;
}
}
#content
 
{
@media print {
background-color: #583A31;
.tabber__tab {
color: #D2CDC8;
display: none;
padding: 0;
}
border: none;
box-shadow: 0 10px 10px rgba(0,0,0,0.5);
border-radius: 8px 0 0 8px;
}
}
#bodyContent
 
{
.tabber__panel {
background-color: #D2CDC8;
min-width: 0;
color: black;
padding: 0.25em 1em 1em 1em;
border-radius: 0 0 0 8px;
background-image: linear-gradient(rgba(0,0,0,0.5), transparent 10px);
}
}


.vector-menu-tabs ul
.tabber__tab[aria-selected="true"], .tabber__tab[aria-selected="true"]:visited {
{
color: #e8d18c;
margin-left:1em;
}
}
.vector-menu-tabs li
 
{
.quotation blockquote::before,.quotation blockquote::after {
background:none;
font-size:5em;
margin-right:0.25em;
line-height:0;
padding-top: 10px;
font-family:"Linux Libertine","Georgia","Times",serif;
top:0.4em;
position:relative;
color:#292526;
white-space:nowrap;
}
}
.vector-menu-tabs li a, .vector-menu-dropdown-noicon h3
 
{
.quotation blockquote::before {
font-family: "TF2C Build", sans-serif;
content:open-quote;
font-size: 16px;
height:29px;
padding: 6px 8px;
}
}
.vector-menu-tabs li a
 
{
.quotation blockquote::after {
background:#1F1B1A;
content:close-quote;
border-radius: 8px 8px 0 0;
}
}
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited
 
{
.quotation blockquote {
background:#583A31;
border:none;
color:#D2CDC8;
margin:0;
padding:0;
display:flex;
}
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3
 
{
.quotation blockquote p {
background:none;
margin:1em;
text-align:justify;
}
}
.vector-menu-tabs .mw-watchlink.icon a::before
 
{
.quotation {
top:0.3em;
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;
}
}
.vector-menu-dropdown
 
{
.quotation cite:before {
padding-top: 10px;
content:"— ";
}
}
#mw-head .vector-menu-dropdown h3
 
{
.quotation cite {
height: inherit;
text-align:right;
width:100%;
}
}
.vector-menu-dropdown h3::after
 
{
.page-Main_Page .external {
top: 0;
padding-right:0 !important;
background-image:unset !important;
}
}
.vector-menu-tabs .mw-watchlink.icon a
 
{
.mp-header {
padding-top: 29px;
font-family:"TF2C","TF2","Linux Libertine","Georgia","Times",serif !important;
text-transform:uppercase;
font-size:2.5em !important;
margin-top:10px !important;
}
}
body
 
.mp-topheader
{
{
background-color: #292526;
font-family: "TF2C","TF2","Linux Libertine","Georgia","Times",serif;
text-transform: uppercase;
text-align: center;
font-size: 38.4px;
}
}
.vector-menu-tabs .selected
 
.mp-description
{
{
background: none;
text-align: center;
}
}
#mw-page-base
 
.mp-classContainer
{
{
background: linear-gradient(rgba(0,0,0,0.5),transparent 75%, #292526),
border-radius: 8px;
repeating-linear-gradient(115deg,transparent,transparent 5px,#34312C 5px,#34312C 16px);
padding: 8px;
display: flex;
justify-content: space-around;
font-size: clamp(8px, 1vw, 20px);
text-align: center;
}
}
.vector-menu-portal h3
 
.mp-class a img
{
{
background:none;
max-width: 100%;
border-bottom: 0.2em dotted #D2CDC8;
width: 128px;
height: unset;
}
}
.vector-menu-portal .vector-menu-content li a, .mw-footer ul li a, #p-personal div ul li a
 
.mp-class a img:hover
{
{
color: #e8d18c;
filter: brightness(1.25);
}
}
.vector-menu-portal .vector-menu-content li a:visited, .mw-footer ul li a:visited, #p-personal div ul li a:visited
 
.crits
{
{
color: #ae9573;
background-image: url(/w/index.php?title=Special:Redirect/file/Killicon_crit.png);
background-size: 100% 100%;
}
}
#p-personal div ul li a.new
 
.minicrits
{
{
color: #dd3333;
background-image: url(/w/index.php?title=Special:Redirect/file/Killicon_minicrit.png);
background-size: 100% 100%;
}
}
#p-personal div ul li a.new:visited
 
.navbox ul, .navbox li
{
{
color: #a55858;
display:inline;
margin:0;
}
}
.mw-footer li, .vector-menu-portal h3, .vector-menu-tabs li a, .vector-menu-dropdown-noicon h3
 
.navbox li:not(:last-child):after
{
{
color: #D2CDC8;
content:" · ";
}
div.thumbinner {
border: 1px solid #a2a9b1;
padding: 3px;
background-color: #E5E0DC;
font-size: 94%;
text-align: center;
overflow: hidden;
}
.toc, .toccolours {
border: 1px solid #a2a9b1;
background-color: #E5E0DC;
padding: 5px;
font-size: 95%;
}
.catlinks {
border: 1px solid #a2a9b1;
background-color: #E5E0DC;
padding: 5px;
margin-top: 1em;
clear: both;
}
}

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