MediaWiki:Common.css
Jump to navigation
Jump to search
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: Clear the cache in Tools → Preferences
/* CSS placed here will be applied to all skins */
/* 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;
}
/* Template documentation styles */
/* If modifying these styles, be sure to update the mobile skin! */
.doc {
margin: 0em auto 1em;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #BDCAC3;
border-radius: 1em;
padding: 1em;
}
.doc-header {
padding-bottom: 3px;
border-bottom: 1px solid #BDCAC3;
margin-bottom: 1ex;
}
.doc-footer {
margin: 0;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #BDCAC3;
border-radius: 1em;
padding: 1em;
}
/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */
/* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */
.desktopleft {
text-align: left;
}
.desktopcenter {
text-align: center;
}
.desktopright {
text-align: right;
}
/* this CSS governs the responsive 2 column main page layout */
#fp-container {
display: grid;
grid-template-areas: "a" "b" "c";
grid-template-columns: 100%;
}
#fp-container main .columns .leftcol,
#fp-container .columns .rightcol {
width: 100%;
margin: 0;
padding: 0;
}
@media screen and (min-width:650px) {
#fp-container .columns .leftcol {
float: left;
width: 50%;
}
#fp-container .columns .rightcol {
float: right;
width: 50%;
}
}
@media screen and (min-width:990px) {
#fp-container {
grid-template-areas: "a b" "c c";
grid-template-columns: 50% 50%;
}
}
@media screen and (min-width:1350px) {
#fp-container {
grid-template-areas: "a b" "c b";
grid-template-columns: auto 520px;
}
}
.fp-section {
display: flex;
flex-wrap: wrap;
}
#fp-top {
grid-area: a;
}
#fp-flex {
grid-area: b;
}
#fp-bottom {
grid-area: c;
}
/* Sidebar Discord embed */
#mw-panel .portal .body ul {
min-width: calc(0.5em + 119px);
}
div#mw-panel div.portal li a[href="https://discord.gg/4dKnfpW"] {
display: inline-block;
position:relative;
height: 20px;
width: 119px;
}
div#mw-panel div.portal li a[href="https://discord.gg/4dKnfpW"]::before {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
content:"";
background:url(https://discordapp.com/api/guilds/502973274125238284/embed.png) no-repeat;
}
/* Template themes */
/* The following themes are applied to templates who are present in a huge amount of pages*/
/* Torneko 1 theme */
/* Torneko 2 theme */
/* Torneko 3 theme */
/* Young Yangus theme */
/* Shiren 1 theme */
/* Shiren 2 theme */
/* Shiren 3 theme */
/* Shiren 4 theme */
/* Shiren 5 theme */
.shiren5 {
border-radius: 10px;
border: 3px solid #451113;
background-color: #451113;
}
.shiren5 td {
background-color: #EFDCEC;
}
.shiren5 th {
background-color: #986AA2;
}
/* Shiren GB theme */
/* Shiren GB2 theme */
/* Shiren Gaiden theme */
/* Chocobo MD1 theme */
/* Chocobo MD2 theme */
/* Chocobo MD3 theme */
/* Red Rescue Team theme */
.rescueteam {
border-radius: 10px;
border: 3px solid #813d56;
background-color: #472e3c;
}
.rescueteam td {
background-color: #f9e7ef;
}
.rescueteam th {
background-color: #b2405f;
}
/* Blue Rescue Team theme */
.rescueteamb {
border-radius: 10px;
border: 3px solid #275178;
background-color: #21285a;
}
.rescueteamb td {
background-color: #e3ebf0;
}
.rescueteamb th {
background-color: #30afd9;
}
/* Rescue Team DX theme */
.rescueteamdx {
border-radius: 10px;
border: 3px solid #451113;
background-color: #451113;
}
.rescueteamdx td {
background-color: #F2EAED;
}
.rescueteamdx th {
background-color: #DE4030;
}
/* Explorers of Time theme */
.explorerstime {
border-radius: 10px;
border: 3px solid #2e77b1;
background-color: #0f2d68;
}
.explorerstime td {
background-color: #e1e9ec;
}
.explorerstime th {
background-color: #57aade;
}
/* Explorers of Darkness theme */
.explorersdark {
border-radius: 10px;
border: 3px solid #9c2922;
background-color: #221b1e;
}
.explorersdark td {
background-color: #ddd9dd;
}
.explorersdark th {
background-color: #b74454;
}
/* Explorers of Sky theme */
.explorerssky {
border-radius: 10px;
border: 3px solid #326d4c;
background-color: #292921;
}
.explorerssky td {
background-color: #e1e8e4;
}
.explorerssky th {
background-color: #50a559;
}
/* Gates theme */
/* Super theme */
/* Etrian MD1 theme */
/* Etrian MD2 theme */