MediaWiki:Common.css: Difference between revisions

From TF2 Classified Wiki
Jump to navigation Jump to search
m small gradient fix
Can we fix the tabber active color issue?
 
(61 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
 
.killicon {
vertical-align:middle;
height:40px;
color:#38361E;
font-family:"Verdana",serif;
font-weight:bold;
font-size:17px;
}
 
.content .infobox caption {
padding: 0;
}
.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;
}
 
.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;
}
}
.loadout-tooltip-negative
 
{
.tabber__tab[title="GRN"] {
color: #FF4040;
background-color:#3C9D46;
}
}
#firstHeading
 
{
.tabber__tab[title="YLW"] {
font-family: "TF2C", serif;
background-color:#DA9D28;
color: #D2CDC8;
font-size: 2.4em;
border-bottom: 0.2em dotted #D2CDC8;
padding-left: 0.3em;
margin-left: 0.1em;
padding-top: 0.4em;
}
}
#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;
}
}


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

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