MediaWiki:Common.css
Jump to navigation
Jump to search
In other languages: Русский
CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will be applied to all skins */
/****************************
* Simple dark api.php pages *
*****************************/
@media (prefers-color-scheme: dark) {
body {
background-color:#20211f;
border-color: #7b7261;
color: #f6ecdb;
}
h1, h2, h3, h4, h5, h6 {
color: rgb(234, 224, 207);
border-color: rgb(83, 84, 81);
}
.mw-highlight .s2 {
color: rgb(206, 99, 91);
}
a {
color: rgb(133, 180, 221);
}
a:visited {
color: rgb(141, 127, 218);
}
pre, code, .mw-code {
background-color: rgb(34, 35, 33);
color: rgb(234, 224, 207);
border-color: rgb(63, 64, 62);
}
}
/***************
* End dark API *
****************/
/********************************
* Miscellaneous utility classes *
*********************************/
.responsive-image {
max-width:100%;
height:auto;
}
.theme-dark .invert-on-dark,
.theme-light .invert-on-light {
filter:invert(100%);
}
.pixelated {
image-rendering:pixelated;
}
@media screen and (min-width:720px){
.mobileonly {
display:none;
}
.desktopleft {
text-align: left;
}
.desktopcenter {
text-align: center;
}
.desktopright {
text-align: right;
}
}
@media screen and (max-width:720px) {
.nomobile {
display:none;
}
}
/***************************
* End misc utility classes *
****************************/
/* This governs the sections on the Community portal */
.cpbox {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.cpbox #admins {
box-sizing: border-box;
width: calc(33% - 10px);
margin: 5px;
flex-grow: 1;
min-width: 300px;
}
.cpbox #help {
box-sizing: border-box;
width: calc(67% - 10px);
margin: 5px;
flex-grow: 1;
}
/* Allow limiting of which header levels are shown in a TOC;
<div class="toclimit-3">, for instance, will limit to
showing ==headings== and ===headings=== but no further
(as long as there are no =headings= on the page, which
there shouldn't be according to the MoS).
*/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}
/********************
/* Notice templates *
/********************/
.topNotice {
border: 2px solid #ff9900;
background: #ffffff;
color: #333333;
margin: 0 0 10px 0;
padding: 3px 6px;
overflow: auto;
}
.topNotice .heading {
color: #222222;
font-size: 132%;
font-weight: bold;
margin: 0 0 8px 0;
padding: 0;
}
.topNotice.delete {
border: 2px solid #ff0000;
}
.topNotice.move, .topnotice.merge, .topnotice.split {
border: 2px solid #bb8800;
}
.topNotice.pagestub, .topNotice.imagerequest, .topNotice.nowalkthrough {
border: 2px solid #008000;
}
/**************************
* [[Template:Doc]] styles *
***************************/
.documentation {
margin: 0em auto 1em;
background-color: rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.1);
border: 2px solid var(--wiki-content-border-color);
border-radius: 1em;
padding: 1em;
}
.documentation-header {
padding-bottom: 3px;
border-bottom: 1px solid var(--wiki-content-border-color);
margin-bottom: 1ex;
}
/**************************
* End Template:Doc styles *
***************************/
/***********************
* [[Template:License]] *
************************/
.license {
display:flex;
flex-flow:row nowrap;
background-color:var(--wiki-content-background-color--secondary);
border:1px solid var(--wiki-content-border-color);
padding:0.1em;
margin:0.5em 0 0.5em 0;
}
.copyright-logo {
filter:var(--wiki-icon-general-filter);
}
/***********************
* End Template:License *
************************/
/********************************************
* Utility classes for standard MW galleries *
*********************************************/
/* it's important that spaced comes before centered in the sheet */
.gallery.spaced {
display:flex;
flex-flow:row wrap;
justify-content:space-evenly;
margin-left:unset;
}
.gallery.centered {
text-align:center;
margin-left:auto;
margin-right:auto;
}
/**********************
* End gallery classes *
***********************/
/************************
* Main page layout *
* [[Pathologic Wiki]] *
*************************/
#mp-welcome-box {grid-area:welcome;}
#mp-about-box {grid-area:about;}
#mp-characters-box {grid-area:characters;}
#mp-world-box {grid-area:world;}
#mp-featured-box {grid-area:featured;}
#mp-affiliated-box {grid-area:affiliated;}
#mp-community-box {grid-area:community;}
#mp-container {
display:grid;
grid-template-areas:"welcome" "about" "characters" "world" "featured" "social" "affiliated" "community";
grid-template-columns:100%;
gap:5px;
}
@media screen and (min-width:990px) {
#mp-container {
grid-template-areas:"welcome welcome" "about characters" "about world" "featured social" "community affiliated";
grid-template-columns:1fr 1fr;
}
}
@media screen and (min-width:1350px) {
#mp-container {
grid-template-areas:"welcome welcome welcome" "about characters featured" "about world featured" "about world social" "community community affiliated";
grid-template-columns:1fr 1fr 1fr;
}
}
.mp-box {
display:flex;
flex-flow:column nowrap;
width: calc(100% - 2px);
box-sizing: border-box;
background:rgba(var(--wiki-content-background-color--secondary--rgb), 0.25);
border:1px solid var(--wiki-content-border-color);
padding:5px;
}
.mp-box.centered-content .mp-body {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.mp-box.has-floating-image {
display:block;
}
.mp-box#mp-welcome-box {
text-align:center;
}
.mp-heading {
background-color:rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.5);
text-align:center;
text-transform:uppercase;
font-size: 150%;
font-family:Georgia, serif;
font-weight:bold;
color:var(--wiki-accent-color);
margin: 0 0 10px 0;
padding: 0 0 5px 0;
box-shadow:6px 6px 18px -10px #676767
}
.mp-box .welcome-message {
border-bottom: 1px solid var(--wiki-content-border-color);
font-family:var(--wiki-heading-font-family);
font-size: 150%;
font-weight:bold;
margin: 0 0 10px;
padding: 0 0 5px;
}
.mp-links > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin: 2px;
gap:5px;
}
.mp-links > ul > li {
display:flex;
flex-flow:column nowrap;
text-align: center;
padding: 2px;
border: 1px solid var(--wiki-content-link-color);
box-sizing:border-box;
background-color:rgba(var(--wiki-content-link-color--rgb), 0.05);
flex: max(calc(50% - 5px), 5em) 1 1;
}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - 5px), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc(33% - 5px), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - 5px), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - 5px), 5em) 1 1;}
.mp-links > ul > li:hover {
background-color:rgba(var(--wiki-content-link-color--rgb), 0.2);
}
.mp-links > ul > li > a {
display: flex;
height:100%;
align-items: center;
justify-content: center;
}
/***********************
* End main page layout *
************************/
/*****************************
* Used by [[Template:Ambox]] *
******************************/
.ambox {
background-color: var(--wiki-content-background-color--secondary);
border: 1px solid var(--wiki-content-border-color);
border-collapse: collapse;
font-size: 95%;
margin: 0 auto 2px auto;
width: 80%;
}
.ambox-gray {
border-left-color: #383838;
}
.ambox + .ambox {
margin-top: -2px;
}
.ambox-text {
padding: 0.25em 0.5em;
}
.ambox-image {
padding: 2px 0px 2px 0.5em;
text-align: center;
width: 60px;
}
.ambox-tiny .ambox-image {
padding: 2px 0.5em;
text-align: left;
width: auto;
}
/* Ambox colors */
.ambox-blue {
border-left: 10px solid #1e90ff;
}
.ambox-red {
border-left: 10px solid #b22222;
}
.ambox-orange {
border-left: 10px solid #f28500;
}
.ambox-yellow {
border-left: 10px solid #f4c430;
}
.ambox-purple {
border-left: 10px solid #9932cc;
}
.ambox-gray {
border-left: 10px solid #bba;
}
.ambox-green {
border-left: 10px solid #228b22;
}
/*********************
* End Template:Ambox *
**********************/
/****************************
* [[Template:Navbox]] style *
*****************************/
table.navbox {
border: 1px solid var(--wiki-content-border-color);
background:var(--wiki-content-background-color--secondary);
clear: both;
font-size: 88%;
margin: auto;
padding: 1px;
text-align: center;
width: 100%;
}
/* Border between adjacent navboxes */
table.navbox + table.navbox {
margin-top: -1px;
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
.navbox-group {
font-weight: bold;
padding-left: 1em;
padding-right: 1em;
white-space: nowrap;
width:15%;
}
.navbox-list {
border-color: transparent;
}
/* Level 1 color */
.navbox-title,
table.navbox th {
background: var(--wiki-navigation-background-color);
color:var(--wiki-navigation-text-color);
}
/* Level 2 styling */
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
background: rgba(var(--wiki-content-dynamic-color--rgb), 0.1);
}
/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: rgba(0, 0, 0, 0.05);
}
/* Even row striping */
.navbox-even {
background: rgba(var(--wiki-content-dynamic-color--rgb), 0.05);
}
/* Odd row striping */
.navbox-odd {
background: transparent;
}
.navbar {
font-size: 88%;
font-weight: normal;
}
.navbox .navbox-title a,
.navbox .navbox-title a:visited,
.navbox .navbox-title a.external,
.navbox .navbox-title a.external:visited {
color:var(--wiki-navigation-text-color)
}
.navbox-list.hlist ul {
margin:0;
}
.navbox-list.hlist li {
display:inline-block;
}
.navbox-list.hlist li:not(:first-child)::before {
content:'\2022\0020';
margin:0 0.2em;
}
/*********************
* End Navbox styling *
**********************/
/*****************
* Infobox styles *
******************/
.infoboxtable {
background-color: rgba(var(--wiki-content-background-color--secondary--rgb), 0.4);
border: 1px solid var(--wiki-content-border-color);
color: var(--wiki-content-text-color);
float: right;
font-size: 11px;
margin-bottom: 0.5em;
margin-left: 1em;
padding: 0.2em;
width: 300px;
border-radius: 3px;
}
.infoboxtable td {
vertical-align: top;
}
.infoboxtable td > div {
background-color: rgba(var(--wiki-content-background-color--rgb), 0.6);
border: 2px solid inherit;
border-radius: 5px;
font-weight: bold;
padding: 0.5px 7px;
text-align: right;
}
.infoboxname {
background-color: rgba(var(--wiki-content-background-color--rgb), 0.6);
color: var(--wiki-content-heading-color);
font-size: 110%;
font-weight: bold;
padding: 0.5em;
}
.infoboxdetails {
background-color: rgba(var(--wiki-content-background-color--rgb), 0.6);
color: var(--wiki-content-heading-color);
font-size: 13px;
font-style: italic;
padding: 0;
border-radius: 5px;
}
/*********************
* End infobox styles *
**********************/