MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
Technochips (talk | contribs) fixed weird width alignments |
Technochips (talk | contribs) good printing |
||
| Line 1: | Line 1: | ||
@font-face | @font-face | ||
{ | { | ||
font-family: "TF2C"; | font-family:"TF2C"; | ||
src: url( | 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-face | ||
{ | { | ||
font-family: "TF2C Build"; | font-family:"TF2C Build"; | ||
src: url( | 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-face | ||
{ | { | ||
font-family: "TF2C Professor"; | font-family:"TF2C Professor"; | ||
src: url( | 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-face | ||
{ | { | ||
font-family: "TF2C Secondary"; | font-family:"TF2C Secondary"; | ||
src: url( | 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 | |||
.infobox { | { | ||
float:right; | |||
float: right; | min-width:21em; | ||
width: 21em; | margin:0 0 1em 1em; | ||
margin: 0 0 1em 1em | |||
} | } | ||
.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 | ||
{ | |||
vertical-align: top | vertical-align:top; | ||
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; | ||
width:100%; | |||
} | } | ||
.killicon | .killicon | ||
{ | { | ||
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; | ||
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 | ||
} | } | ||
#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; | |||
} | } | ||
@media screen | |||
{ | { | ||
background-color: #583A31; | #firstHeading | ||
{ | |||
padding-left:0.3em; | |||
margin-left:0.1em; | |||
padding-top:0.4em; | |||
border-radius: | 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: # | background-color:#292526 | ||
} | |||
@media print | |||
{ | |||
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 | ||
} | } | ||
.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) | ||
} | } | ||
.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 | ||
{ | |||
.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% | |||
} | } | ||