MediaWiki:Common.css: Difference between revisions

From TF2 Classified Wiki
Jump to navigation Jump to search
Trying to make it more compact
Can we fix the tabber active color issue?
 
(78 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
@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: 0.1em solid #7a7a7a;
float:right;
    float: right;
min-width:21em;
    width: 21em;
margin:0 0 1em 1em;
}
}
.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 {
    text-align: right;
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;
}
.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;
}
}
.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:" · ";
}