MediaWiki:Common.css: Difference between revisions

From TF2 Classified Wiki
Jump to navigation Jump to search
Some CSS for infoboxes
 
Can we fix the tabber active color issue?
 
(80 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 {
    background: #eee;
float:right;
    border: 1px solid #aaa;
min-width:21em;
    float: right;
margin:0 0 1em 1em;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
}
.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:" · ";
}