MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anta&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
body, .vector-feature-zebra-design-disabled body {
font-family: Rubik, system-ui, Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5rem;
color: #cbcbcb;
background-color: rgb(17, 18, 22);
margin: 10px;
background-image: url(/backline_teal.png), url(/backline_teal_top.png);
background-size: auto;
background-repeat: no-repeat, no-repeat;
background-position: center bottom 400px, center 2%;
}
#mw-page-base, .vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu {
background-color: transparent;
background-image: none;
}
.mw-logo {
min-width: auto;
}
.vector-feature-zebra-design-disabled .vector-header-container {
background-color: rgba(7, 8, 10, 0.49);
backdrop-filter: blur(2px);
border-radius: 30px;
color: #cbcbcb;
margin-bottom: 10px;
border: 0px solid #000;
position: relative;
z-index: 1;
}
.vector-feature-zebra-design-disabled .mw-page-container {
background-color: rgba(7, 8, 10, 0.49);
backdrop-filter: blur(2px);
border-radius: 10px;
color: #cbcbcb;
margin-bottom: 10px;
border: 0px solid #000;
z-index: 0;
position: relative;
}
.vector-feature-zebra-design-disabled .vector-dropdown .vector-dropdown-content {
background-color: rgba(7, 8, 10, 0.95);
backdrop-filter: blur(2px);
border-radius: 10px;
color: #cbcbcb;
margin-bottom: 10px;
border: 0px solid #000;
padding: 5px;
}
.vector-menu-tabs-legacy .selected {
background-color: transparent;
}
.vector-menu-tabs-legacy .selected a {
background-image: none;
color: #56bbd2 !important;
}
.vector-menu-tabs-legacy li {
background-image: none;
height: 100%;
margin: 0;
padding: 0;
line-height: 1.125em;
white-space: nowrap;
}
.vector-menu-tabs-legacy li a {
transition: .5s;
color: #baf2ff;
height: auto;
background-color: #3C8FA240;
cursor: pointer;
border: 1px solid #baf2ff;
border-radius: 10px;
padding: 0.4rem;
line-height: normal;
text-shadow: black 0px 1px 1px;
font-family: Anta, monospace;
text-transform: uppercase;
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: none;
}
.mw-logo-icon {
margin-left: -2.8em
}
.vector-feature-main-menu-pinned-disabled .mw-logo {
margin-left: -30px;
}
.vector-main-menu-landmark {
margin-left: 10px;
}
.mw-logo-container, .cdx-button:enabled, #simpleSearch > .cdx-button.cdx-button--fake-button--enabled {
display: none;
}
.mw-header .vector-typeahead-search-container {
float: right;
min-width: 290px
}
h1, h2, h3, h4, h5, h6, .mw-body h1, .mw-body-content h1, .mw-body-content h2 {
font-family: Anta, monospace;
color: #cbcbcb;
}
a, .vector-feature-zebra-design-disabled .vector-toc .vector-toc-link, .vector-feature-zebra-design-disabled .vector-pinnable-header-toggle-button, #pt-userpage-2 a:not(.mw-selflink), .vector-menu-tabs .mw-list-item a, .vector-feature-zebra-design-disabled .vector-pinnable-element .mw-list-item a, .vector-feature-zebra-design-disabled .vector-dropdown-content .mw-list-item a, .vector-feature-zebra-design-disabled .vector-dropdown .mw-list-item a:not(.mw-selflink), .vector-menu-tabs .mw-list-item.selected a, .vector-menu-tabs .mw-list-item.selected a:visited {
color: #3C8FA2;
text-decoration: none;
font-weight: bold;
transition: .5s;
}
a:hover, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover, .vector-menu-dropdown .mw-list-item a:hover, .cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled, .vector-feature-zebra-design-disabled .vector-toc .vector-toc-link, .vector-feature-zebra-design-disabled .vector-pinnable-header-toggle-button:hover, #pt-userpage-2 a:not(.mw-selflink):hover, .vector-menu-tabs .mw-list-item a:hover, .vector-feature-zebra-design-disabled .vector-pinnable-element .mw-list-item a:hover, .vector-feature-zebra-design-disabled .vector-dropdown-content .mw-list-item a:hover, .vector-feature-zebra-design-disabled .vector-dropdown .mw-list-item a:not(.mw-selflink):hover {
color: #1a5765;
text-decoration: none;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a, .vector-menu-dropdown .mw-list-item a, .toctogglelabel {
color: #3C8FA2;
text-decoration: none;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited, a:visited, .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited, .vector-feature-zebra-design-disabled .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, .vector-feature-zebra-design-disabled .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited {
color: #3C8FA2;
text-decoration: none;
}
.vector-menu-dropdown .vector-menu-heading {
color: #3C8FA2;
padding: 0.5em 8px 6px;
}
.vector-menu-tabs .mw-watchlink.icon a {
padding: 2.2em 0 0 0;
}
.vector-menu-tabs .mw-watchlink.icon a::before {
top: .48em;
}
.vector-menu-dropdown .vector-menu-content {
background-color: rgba(30, 30, 34, .6);
backdrop-filter: blur(3px);
border-radius: 0 0 10px 10px;
border-color: #baf2ff;
}
.vector-search-box-input, .cdx-typeahead-search .cdx-text-input--has-start-icon .cdx-text-input__input, .cdx-search-input--has-end-button {
background-color: #131315;
border: 2px solid transparent;
border-radius: 10px;
}
.searchButton[name="go"], .cdx-search-input .cdx-text-input__icon.cdx-text-input__start-icon, .vector-icon {
filter: invert(80%);
}
.editOptions {
background-color: #131315;
color: #cbcbcb;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
transition: .5s;
color: #baf2ff;
background-color: #3C8FA240;
cursor: pointer;
border: 1px solid #baf2ff;
border-radius: 10px;
padding: 6px;
padding: 0.428571429rem;
line-height: normal;
text-shadow: black 0px 1px 1px;
font-family: Anta, monospace;
text-transform: uppercase;
}
#left-navigation {
margin-left: 11.5em;
}
.mw-editform #wpTextbox1 {
background-color: rgb(30, 30, 34);
color:#fff;
border-radius: 10px 10px 0 0;
border: 1px solid transparent;
padding: 10px;
}
.toc, .toccolours, .vector-feature-zebra-design-disabled .vector-toc {
background-color: rgb(30, 30, 34);
border-radius: 10px;
border: 1px solid #000;
padding: 10px;
}
figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] {
background-color: rgb(30, 30, 34);
border-radius: 10px 10px 0 0;
border: 0px solid #000;
padding: 0px;
}
figure[typeof~="mw:File/Thumb"] > figcaption, figure[typeof~="mw:File/Frame"] > figcaption {
background-color: rgb(30, 30, 34);
border-radius: 0 0 10px 10px;
border-top: 1px solid #000;
border-bottom: 0;
border-left: 0;
border-right: 0;
box-shadow: rgba(0, 0, 0, 0.8) 0 0 10px;
}
figure[typeof~="mw:File/Thumb"] > a:first-child > :first-child:not(.mw-broken-media), figure[typeof~="mw:File/Frame"] > a:first-child > :first-child:not(.mw-broken-media), figure[typeof~="mw:File/Thumb"] > span:first-child > :first-child:not(.mw-broken-media), figure[typeof~="mw:File/Frame"] > span:first-child > :first-child:not(.mw-broken-media) {
background-color: rgb(30, 30, 34);
border-radius: 10px;
border: 0px solid transparent;
box-shadow: rgba(0, 0, 0, 0.8) 0 0 3px;
}
.mw-footer li {
color: #586068;
}
.wikitable {
background-color: rgb(30, 30, 34);
border-radius: 10px;
border: 1px solid #000;
padding: 10px;
color: #cbcbcb;
}
.wikitable > tr > th, .wikitable > * > tr > th {
background-color: rgb(23, 23, 28);
}
pre, code, .mw-code {
background-color: rgb(20, 20, 24);
border: 0;
color: #fff;
padding: 5px;
}
.vector-feature-zebra-design-disabled .vector-toc .vector-toc-list-item-active > .vector-toc-link, .vector-feature-zebra-design-disabled .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link, .vector-feature-zebra-design-disabled .vector-toc .vector-toc-list-item-active.vector-toc-level-1-active > .vector-toc-link {
color: inherit;
}
.vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools::after, .vector-feature-zebra-design-disabled #vector-toc-pinned-container .vector-toc::after {
background-image: none;
}
.infobox {
background-color: rgb(30, 30, 34);
border-radius: 10px;
border: 1px solid #000;
padding: 10px;
color:#cbcbcb;
margin:0.5em 0 0.5em 1em;
padding:10px;
float:right;
clear:right;
text-align:left;
font-size:88%;
line-height:1.5em
}
li.gallerybox div.thumb {
border: 1px solid #000;
background-color: rgb(23, 23, 28);
}
.catlinks {
border: 1px solid #000;
background-color: rgb(23, 23, 28);
padding: 8px;
}
.details {
text-align: center;
font-weight: bold;
background: #14141a;
}
.tocnumber {
color: #cbcbcb;
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background-color: rgb(30, 30, 34);
border-radius: 10px;
border: 1px solid #000;
padding: 10px;
color:#cbcbcb;
}
.oo-ui-popupWidget-popup {
background-color: rgba(7, 8, 10, 0.95);
backdrop-filter: blur(2px);
border-radius: 10px;
color: #cbcbcb;
border: 0px solid #000;
padding: 5px;
}
/* Infobox template style */
/* mrwonko: I omitted some unnecessary classes, see https://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=edit for the full file. */
/*.infobox {
border: 1px solid #aaa;
background-color: #f9f9f9;
color: black;
/* @noflip */
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
/* @noflip */
text-align: left;
font-size: 88%;
line-height: 1.5em;
}*/
.infobox caption {
font-size: 125%;
font-weight: bold;
}
.infobox td,
.infobox th {
vertical-align: top;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
.details {
text-align: center;
font-weight: bold;
background: #14141a;
}
@media (max-width: 600px) {
.vector-feature-zebra-design-disabled .vector-header-container {
min-width: unset;
}
img.mw-file-element {
max-width: 210px;
height: auto;
}
}