MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Technochips (talk | contribs) fixed pixel gap |
Can we fix the tabber active color issue? |
||
| (43 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
@font-face | @font-face { | ||
{ | |||
font-family:"TF2C"; | font-family:"TF2C"; | ||
src:url(/ | src: url("/misc/TF2C.woff2") format("woff2"), | ||
url(/misc/TF2C.woff) format("woff"), | url("/misc/TF2C.woff") format("woff"), | ||
url(/misc/TF2C.ttf) format("truetype") | url("/misc/TF2C.ttf") format("truetype"); | ||
} | } | ||
@font-face | |||
{ | @font-face { | ||
font-family:"TF2C Build"; | font-family:"TF2C Build"; | ||
src:url(/misc/TF2CBuild.woff2) format("woff2"), | src: url("/misc/TF2CBuild.woff2") format("woff2"), | ||
url(/misc/TF2CBuild.woff) format("woff"), | url("/misc/TF2CBuild.woff") format("woff"), | ||
url(/misc/TF2CBuild.ttf) format("truetype") | url("/misc/TF2CBuild.ttf") format("truetype"); | ||
} | } | ||
@font-face | |||
{ | @font-face { | ||
font-family:"TF2C Professor"; | font-family:"TF2C Professor"; | ||
src:url(/misc/TF2CProfessor.woff2) format("woff2"), | src: url(/misc/TF2CProfessor.woff2) format("woff2"), | ||
url(/misc/TF2CProfessor.woff) format("woff"), | url("/misc/TF2CProfessor.woff") format("woff"), | ||
url(/misc/TF2CProfessor.ttf) format("truetype") | url("/misc/TF2CProfessor.ttf") format("truetype"); | ||
} | } | ||
@font-face | |||
{ | @font-face { | ||
font-family:"TF2C Secondary"; | font-family:"TF2C Secondary"; | ||
src:url(/misc/TF2CSecondary.woff2) format("woff2"), | src: url("/misc/TF2CSecondary.woff2") format("woff2"), | ||
url(/misc/TF2CSecondary.woff) format("woff"), | url("/misc/TF2CSecondary.woff") format("woff"), | ||
url(/misc/TF2CSecondary.ttf) format("truetype") | url("/misc/TF2CSecondary.ttf") format("truetype"); | ||
} | } | ||
.infobox | |||
{ | .infobox { | ||
float:right; | float:right; | ||
min-width:21em; | min-width:21em; | ||
margin:0 0 1em 1em; | margin:0 0 1em 1em; | ||
} | } | ||
.infobox-title | .infobox-title { | ||
{ | |||
font-size:21px; | 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:center; | |||
vertical-align:top; | vertical-align:top; | ||
font-family:"TF2C Build","TF2 Build",sans-serif; | font-family:"TF2C Build","TF2 Build",sans-serif; | ||
text-transform:uppercase; | |||
font-weight:normal; | font-weight:normal; | ||
width:100%; | width:100%; | ||
} | } | ||
.killicon | |||
{ | .killicon { | ||
vertical-align:middle; | vertical-align:middle; | ||
height:40px; | height:40px; | ||
| Line 57: | Line 56: | ||
font-family:"Verdana",serif; | font-family:"Verdana",serif; | ||
font-weight:bold; | font-weight:bold; | ||
font-size:17px | 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; | border:1px solid #583A31; | ||
background-color:#E5E0DC | background-color:#E5E0DC; | ||
} | } | ||
.infobox th | |||
.infobox th { | |||
background-color:#583A31; | background-color:#583A31; | ||
color:#D2CDC8 | color:#D2CDC8; | ||
} | } | ||
.killicon | |||
.killicon { | |||
background-color:#F1E9CB; | background-color:#F1E9CB; | ||
color:#38361E; | color:#38361E; | ||
border-radius:5px | border-radius:5px; | ||
} | } | ||
} | } | ||
@media print | @media print { | ||
{ | .infobox th { | ||
.infobox th | |||
background-color:#8E8E8E; | background-color:#8E8E8E; | ||
} | } | ||
.infobox | |||
.infobox, .ambox { | |||
border: 1px black solid; | border: 1px black solid; | ||
} | |||
.infobox, .ambox { | |||
border-color:black; | |||
} | } | ||
} | } | ||
.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","Verdana",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; | text-align:center; | ||
line-height: 1.6em; | line-height: 1.6em; | ||
} | } | ||
.loadout-tooltip-name | |||
{ | .loadout-tooltip-name { | ||
font-family:"TF2C Build","TF2 Build",sans-serif; | font-family:"TF2C Build","TF2 Build","Verdana",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 { | ||
color:#FF4040; | |||
} | } | ||
.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",sans-serif; | ||
text-transform: uppercase; | |||
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,.tabber__tab:hover,.tabber__tab--active:visited { | ||
.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 | |||
{ | @media print { | ||
.tabber__tab | .tabber__tab { | ||
display: none; | display: none; | ||
} | } | ||
} | } | ||
.tabber__panel | |||
{ | .tabber__panel { | ||
min-width: 0; | min-width: 0; | ||
} | } | ||
.quotation blockquote::before, | |||
.quotation blockquote::after | .tabber__tab[aria-selected="true"], .tabber__tab[aria-selected="true"]:visited { | ||
{ | color: #e8d18c; | ||
} | |||
.quotation blockquote::before,.quotation blockquote::after { | |||
font-size:5em; | font-size:5em; | ||
line-height:0; | line-height:0; | ||
| Line 376: | Line 201: | ||
position:relative; | position:relative; | ||
color:#292526; | color:#292526; | ||
white-space:nowrap | white-space:nowrap; | ||
} | } | ||
.quotation blockquote::before | |||
{ | .quotation blockquote::before { | ||
content: | content:open-quote; | ||
} | } | ||
.quotation blockquote::after | |||
{ | .quotation blockquote::after { | ||
content: | content:close-quote; | ||
} | } | ||
.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; | ||
border-right:2px #292526 solid; | border-right:2px #292526 solid; | ||
padding: | padding:0 16px; | ||
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 { | |||
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: | text-align: center; | ||
width:100% | } | ||
.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:" · "; | |||
} | } | ||
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:" · ";
}