MediaWiki:Common.css: Difference between revisions

From TF2 Classified Wiki
Jump to navigation Jump to search
fixed weird width alignments
good printing
Line 1: Line 1:
@font-face
@font-face
{
{
font-family: "TF2C";
font-family:"TF2C";
src: url("https://wiki.tf2classic.com/fonts/TF2C.woff2") format("woff2"),
src:url(https://wiki.tf2classic.com/fonts/TF2C.woff2) format("woff2"),
url("https://wiki.tf2classic.com/fonts/TF2C.woff") format("woff"),
url(https://wiki.tf2classic.com/fonts/TF2C.woff) format("woff"),
url("https://wiki.tf2classic.com/fonts/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(https://wiki.tf2classic.com/fonts/TF2CBuild.woff2) format("woff2"),
url("https://wiki.tf2classic.com/fonts/TF2CBuild.woff") format("woff"),
url(https://wiki.tf2classic.com/fonts/TF2CBuild.woff) format("woff"),
url("https://wiki.tf2classic.com/fonts/TF2CBuild.ttf") format("truetype");
url(https://wiki.tf2classic.com/fonts/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(https://wiki.tf2classic.com/fonts/TF2CProfessor.woff2) format("woff2"),
url("https://wiki.tf2classic.com/fonts/TF2CProfessor.woff") format("woff"),
url(https://wiki.tf2classic.com/fonts/TF2CProfessor.woff) format("woff"),
url("https://wiki.tf2classic.com/fonts/TF2CProfessor.ttf") format("truetype");
url(https://wiki.tf2classic.com/fonts/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(https://wiki.tf2classic.com/fonts/TF2CSecondary.woff2) format("woff2"),
url("https://wiki.tf2classic.com/fonts/TF2CSecondary.woff") format("woff"),
url(https://wiki.tf2classic.com/fonts/TF2CSecondary.woff) format("woff"),
url("https://wiki.tf2classic.com/fonts/TF2CSecondary.ttf") format("truetype");
url(https://wiki.tf2classic.com/fonts/TF2CSecondary.ttf) format("truetype")
}
}
 
.infobox
.infobox {
{
border: 1px solid #583A31;
float:right;
float: right;
min-width:21em;
width: 21em;
margin:0 0 1em 1em;
margin: 0 0 1em 1em;
background-color: #E5E0DC;
}
}
.infobox-title {
.infobox-title
font-size: 21px;
{
text-align: center
font-size:21px;
text-align:center  
}
}
.infobox-image {
.infobox-image
text-align: center;
{
text-align:center
}
}
.infobox th {
.infobox th
background-color: #583A31;
{
vertical-align: top;
vertical-align:top;
width: 120px;
vertical-align:top;
font-family: "TF2C Build", "TF2 Build", sans-serif;
font-family:"TF2C Build","TF2 Build",sans-serif;
font-weight: normal;
font-weight:normal;
color: #D2CDC8;
width:100%;
}
}
.killicon
.killicon
{
{
background-color: #F1E9CB;
vertical-align:middle;
vertical-align: middle;
height:40px;
height: 40px;
color:#38361E;
color: #38361E;
font-family:"Verdana",serif;
font-family: "Verdana", serif;
font-weight:bold;
font-weight: bold;
font-size:17px
font-size: 17px;
}
border-radius: 5px;
@media screen
{
.infobox
{
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
{
border: 1px black solid;
}
}
}
.loadout-tooltip-container
.loadout-tooltip-container
{
{
padding: 10px;
padding:10px;
background-image: linear-gradient(#38332D, #221E1A);
background-image:linear-gradient(#38332D,#221E1A);
color: #221E1A;
color:#221E1A;
text-align: center;
font-size:15px;
font-size: 15px;
font-family:"TF2C Secondary","TF2 Secondary",sans-serif;
font-family: "TF2C Secondary", "TF2 Secondary", sans-serif;
border-radius:5px
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", "TF2 Build", sans-serif;
font-family:"TF2C Build","TF2 Build",sans-serif;
font-size: 18px;
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
.loadout-tooltip-negative
{
{
color: #FF4040;
color:#FF4040
}
#firstHeading
{
font-family: "TF2C","TF2","Linux Libertine","Georgia","Times",serif;
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
#mw-indicator-mw-helplink a
Line 116: Line 135:
padding-left:0.8em;
padding-left:0.8em;
height:auto;
height:auto;
line-height: 49.4px;
line-height:49.4px
}
#firstHeading
{
font-family:"TF2C","TF2","Linux Libertine","Georgia","Times",serif;
font-size:2.4em;
border-bottom:0.2em dotted;
}
}
#content
@media screen
{
{
background-color: #583A31;
#firstHeading
color: #D2CDC8;
{
padding: 0;
padding-left:0.3em;
border: none;
margin-left:0.1em;
box-shadow: 0 10px 10px rgba(0,0,0,0.5);
padding-top:0.4em;
border-radius: 8px 0 0 8px;
color: #D2CDC8;
}
#content
{
background-color:#583A31;
color:#D2CDC8;
padding:0;
border:none;
box-shadow:0 10px 10px rgba(0,0,0,0.5);
border-radius:8px 0 0 8px
}
#bodyContent
{
background-color:#D2CDC8;
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)
}
}
}
#bodyContent
body
{
{
background-color: #D2CDC8;
background-color:#292526
color: black;
}
padding: 0.25em 1em 1em 1em;
@media print
border-radius: 0 0 0 8px;
{
background-image: linear-gradient(rgba(0,0,0,0.5), transparent 10px);
body, #content
{
background-color: white;
color: black;
}
}
}
.vector-menu-tabs ul
.vector-menu-tabs ul
{
{
margin-left:1em;
margin-left:1em
}
}
.vector-menu-tabs li
.vector-menu-tabs li
Line 144: Line 190:
background:none;
background:none;
margin-right:0.25em;
margin-right:0.25em;
padding-top: 10px;
padding-top:10px
}
}
.vector-menu-tabs li a, .vector-menu-dropdown-noicon h3
.vector-menu-tabs li a,
.vector-menu-dropdown-noicon h3
{
{
font-family: "TF2C Build", "TF2 Build", sans-serif;
font-family:"TF2C Build","TF2 Build",sans-serif;
font-size: 16px;
font-size:16px;
height:29px;
height:29px;
padding: 6px 8px;
padding:6px 8px
}
}
.vector-menu-tabs li a
.vector-menu-tabs li a
{
{
background:#1F1B1A;
background:#1F1B1A;
border-radius: 8px 8px 0 0;
border-radius:8px 8px 0 0
}
}
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited
{
{
background:#583A31;
background:#583A31;
color:#D2CDC8;
color:#D2CDC8
}
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown h3
{
{
background:none;
background:none
}
}
.vector-menu-tabs .mw-watchlink.icon a::before
.vector-menu-tabs .mw-watchlink.icon a::before
{
{
top:0.3em;
top:0.3em
}
}
.vector-menu-dropdown
.vector-menu-dropdown
{
{
padding-top: 10px;
padding-top:10px
}
}
#mw-head .vector-menu-dropdown h3
#mw-head .vector-menu-dropdown h3
{
{
height: inherit;
height:inherit
}
}
.vector-menu-dropdown h3::after
.vector-menu-dropdown h3::after
{
{
top: 0;
top:0
}
}
.vector-menu-tabs .mw-watchlink.icon a
.vector-menu-tabs .mw-watchlink.icon a
{
{
padding-top: 29px;
padding-top:29px
}
body
{
background-color: #292526;
}
}
.vector-menu-tabs .selected
.vector-menu-tabs .selected
{
{
background: none;
background:none
}
}
#mw-page-base  
#mw-page-base
{
{
background: linear-gradient(rgba(0,0,0,0.5),transparent 75%, #292526),
background:linear-gradient(rgba(0,0,0,0.5),transparent 75%,#292526),repeating-linear-gradient(115deg,transparent,transparent 5px,#34312C 5px,#34312C 16px)
repeating-linear-gradient(115deg,transparent,transparent 5px,#34312C 5px,#34312C 16px);
}
}
.vector-menu-portal h3
.vector-menu-portal h3
{
{
background:none;
background:none;
border-bottom: 0.2em dotted #D2CDC8;
border-bottom:0.2em dotted #D2CDC8
}
}
.vector-menu-portal .vector-menu-content li a, .mw-footer ul li a, #p-personal div ul li a
.vector-menu-portal .vector-menu-content li a,
.mw-footer ul li a,
#p-personal div ul li a
{
{
color: #e8d18c;
color:#e8d18c
}
}
.vector-menu-portal .vector-menu-content li a:visited, .mw-footer ul li a:visited, #p-personal div ul li a:visited
.vector-menu-portal .vector-menu-content li a:visited,
.mw-footer ul li a:visited,
#p-personal div ul li a:visited
{
{
color: #ae9573;
color:#ae9573
}
}
#p-personal div ul li a.new
#p-personal div ul li a.new
{
{
color: #dd3333;
color:#dd3333
}
}
#p-personal div ul li a.new:visited
#p-personal div ul li a.new:visited
{
{
color: #a55858;
color:#a55858
}
}
.mw-footer li, .vector-menu-portal h3, .vector-menu-tabs li a, .vector-menu-dropdown-noicon h3
.mw-footer li,
.vector-menu-portal h3,
.vector-menu-tabs li a,
.vector-menu-dropdown-noicon h3
{
{
color: #D2CDC8;
color:#D2CDC8
}
}
.toc, .toccolours, .catlinks, div.thumbinner {
@media screen
background-color: #E5E0DC;
{
.toc,
.toccolours,
.catlinks,
div.thumbinner
{
background-color:#E5E0DC
}
}
}
.tabber__tabs
.tabber__tabs
{
{
margin:auto;
margin:auto;
box-shadow:none;
box-shadow:none
}
}
.tabber__tab
.tabber__tab
{
{
background-color:#583A31;
background-color:#583A31;
font-family: "TF2C Build", "TF2 Build";
font-family:"TF2C Build","TF2 Build";
box-shadow:none;
box-shadow:none;
font-weight:normal;
font-weight:normal;
margin:1px;
margin:1px
}
}
.tabber__tab, .tabber__tab:visited
.tabber__tab,
.tabber__tab:visited
{
{
color: #E5E0DC;
color:#E5E0DC;
box-shadow:none;
box-shadow:none
}
}
.tabber__tab--active, .tabber__tab:hover, .tabber__tab--active:visited
.tabber__tab--active,
.tabber__tab:hover,
.tabber__tab--active:visited
{
{
color: #e8d18c;
color:#e8d18c;
box-shadow:none;
box-shadow:none
}
}
.tabber__tab[title="RED"]
.tabber__tab[title="RED"]
{
{
background-color: #C63E3E;
background-color:#C63E3E
}
}
.tabber__tab[title="BLU"]
.tabber__tab[title="BLU"]
{
{
background-color: #59788C;
background-color:#59788C
}
}
.tabber__tab[title="GRN"]
.tabber__tab[title="GRN"]
{
{
background-color: #3C9D46;
background-color:#3C9D46
}
}
.tabber__tab[title="YLW"]
.tabber__tab[title="YLW"]
{
{
background-color: #DA9D28;
background-color:#DA9D28
}
@media print
{
.tabber__tab
{
display: none;
}
}
}
.quotation blockquote::before, .quotation blockquote::after {
.quotation blockquote::before,
.quotation blockquote::after
{
font-size:5em;
font-size:5em;
line-height:0;
line-height:0;
Line 274: Line 345:
position:relative;
position:relative;
color:#292526;
color:#292526;
white-space:nowrap;
white-space:nowrap
}
}
.quotation blockquote::before {
.quotation blockquote::before
content:"“"
{
content:"“"  
}
}
.quotation blockquote::after {
.quotation blockquote::after
content:"”"
{
content:"”"  
}
}
.quotation blockquote {
.quotation blockquote
{
border:none;
border:none;
margin:0;
margin:0;
padding:0;
padding:0;
display:flex;
display:flex
}
}
.quotation blockquote p {
.quotation blockquote p
{
margin:1em;
margin:1em;
text-align:justify
text-align:justify  
}
}
.quotation {
.quotation
{
width:auto;
width:auto;
border-left:2px #292526 solid;
border-left:2px #292526 solid;
Line 299: Line 375:
margin-left:32px;
margin-left:32px;
max-width:50em;
max-width:50em;
display: flex;
display:flex;
flex-direction: column;
flex-direction:column
}
}
.quotation cite:before {
.quotation cite:before
content:"— "
{
content:"— "  
}
}
.quotation cite {
.quotation cite
text-align: right;
{
width: 100%;
text-align:right;
width:100%
}
}

Revision as of 17:56, 5 May 2022

@font-face
{
	font-family:"TF2C";
	src:url(https://wiki.tf2classic.com/fonts/TF2C.woff2) format("woff2"),
	url(https://wiki.tf2classic.com/fonts/TF2C.woff) format("woff"),
	url(https://wiki.tf2classic.com/fonts/TF2C.ttf) format("truetype")
}
@font-face
{
	font-family:"TF2C Build";
	src:url(https://wiki.tf2classic.com/fonts/TF2CBuild.woff2) format("woff2"),
	url(https://wiki.tf2classic.com/fonts/TF2CBuild.woff) format("woff"),
	url(https://wiki.tf2classic.com/fonts/TF2CBuild.ttf) format("truetype")
}
@font-face
{
	font-family:"TF2C Professor";
	src:url(https://wiki.tf2classic.com/fonts/TF2CProfessor.woff2) format("woff2"),
	url(https://wiki.tf2classic.com/fonts/TF2CProfessor.woff) format("woff"),
	url(https://wiki.tf2classic.com/fonts/TF2CProfessor.ttf) format("truetype")
}
@font-face
{
	font-family:"TF2C Secondary";
	src:url(https://wiki.tf2classic.com/fonts/TF2CSecondary.woff2) format("woff2"),
	url(https://wiki.tf2classic.com/fonts/TF2CSecondary.woff) format("woff"),
	url(https://wiki.tf2classic.com/fonts/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
{
	vertical-align:top;
	vertical-align:top;
	font-family:"TF2C Build","TF2 Build",sans-serif;
	font-weight:normal;
	width:100%;
}
.killicon
{
	vertical-align:middle;
	height:40px;
	color:#38361E;
	font-family:"Verdana",serif;
	font-weight:bold;
	font-size:17px
}
@media screen
{
	.infobox
	{
		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
	{
		border: 1px black solid;
	}
}
.loadout-tooltip-container
{
	padding:10px;
	background-image:linear-gradient(#38332D,#221E1A);
	color:#221E1A;
	font-size:15px;
	font-family:"TF2C Secondary","TF2 Secondary",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",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
}
#mw-indicator-mw-helplink a
{
	font-family:"TF2C","TF2","Linux Libertine","Georgia","Times",serif;
	color:#D2CDC8 !important;
	font-size:38px;
	margin-top:0.4em;
	padding-right:0.3em;
	padding-left:0.8em;
	height:auto;
	line-height:49.4px
}
#firstHeading
{
	font-family:"TF2C","TF2","Linux Libertine","Georgia","Times",serif;
	font-size:2.4em;
	border-bottom:0.2em dotted;
}
@media screen
{
	#firstHeading
	{
		padding-left:0.3em;
		margin-left:0.1em;
		padding-top:0.4em;
		color: #D2CDC8;
	}
	#content
	{
		background-color:#583A31;
		color:#D2CDC8;
		padding:0;
		border:none;
		box-shadow:0 10px 10px rgba(0,0,0,0.5);
		border-radius:8px 0 0 8px
	}
	#bodyContent
	{
		background-color:#D2CDC8;
		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)
	}
}
body
{
	background-color:#292526
}
@media print
{
	body, #content
	{
		background-color: white;
		color: black;
	}
}
.vector-menu-tabs ul
{
	margin-left:1em
}
.vector-menu-tabs li
{
	background:none;
	margin-right:0.25em;
	padding-top:10px
}
.vector-menu-tabs li a,
.vector-menu-dropdown-noicon h3
{
	font-family:"TF2C Build","TF2 Build",sans-serif;
	font-size:16px;
	height:29px;
	padding:6px 8px
}
.vector-menu-tabs li a
{
	background:#1F1B1A;
	border-radius:8px 8px 0 0
}
.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited
{
	background:#583A31;
	color:#D2CDC8
}
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown h3
{
	background:none
}
.vector-menu-tabs .mw-watchlink.icon a::before
{
	top:0.3em
}
.vector-menu-dropdown
{
	padding-top:10px
}
#mw-head .vector-menu-dropdown h3
{
	height:inherit
}
.vector-menu-dropdown h3::after
{
	top:0
}
.vector-menu-tabs .mw-watchlink.icon a
{
	padding-top:29px
}
.vector-menu-tabs .selected
{
	background:none
}
#mw-page-base
{
	background:linear-gradient(rgba(0,0,0,0.5),transparent 75%,#292526),repeating-linear-gradient(115deg,transparent,transparent 5px,#34312C 5px,#34312C 16px)
}
.vector-menu-portal h3
{
	background:none;
	border-bottom:0.2em dotted #D2CDC8
}
.vector-menu-portal .vector-menu-content li a,
.mw-footer ul li a,
#p-personal div ul li a
{
	color:#e8d18c
}
.vector-menu-portal .vector-menu-content li a:visited,
.mw-footer ul li a:visited,
#p-personal div ul li a:visited
{
	color:#ae9573
}
#p-personal div ul li a.new
{
	color:#dd3333
}
#p-personal div ul li a.new:visited
{
	color:#a55858
}
.mw-footer li,
.vector-menu-portal h3,
.vector-menu-tabs li a,
.vector-menu-dropdown-noicon h3
{
	color:#D2CDC8
}
@media screen
{
	.toc,
	.toccolours,
	.catlinks,
	div.thumbinner
	{
		background-color:#E5E0DC
	}
}
.tabber__tabs
{
	margin:auto;
	box-shadow:none
}
.tabber__tab
{
	background-color:#583A31;
	font-family:"TF2C Build","TF2 Build";
	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;
	}
}
.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:"“" 
}
.quotation blockquote::after
{
	content:"”" 
}
.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:0px 16px;
	margin-left:32px;
	max-width:50em;
	display:flex;
	flex-direction:column
}
.quotation cite:before
{
	content:"— " 
}
.quotation cite
{
	text-align:right;
	width:100%
}