MediaWiki:Common.css

MDFW - The Mystery Dungeon Tree of Information.
Revision as of 12:29, 19 October 2020 by wikia:mysterydungeon>Prolyfic8 (Undo revision 93249 by Prolyfic8 (talk) Adding "table" breaks the cell's borders in templates.)
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 */
.shiren1 {
	border-radius: 10px;
	border: 3px solid #31427b;
	background-color: #31427b;
}

.shiren1 td {
	background-color: #e7e7c6;
}

.shiren1 th {
	background-color: #7b8cc6;
}

/* Shiren 2 theme */

/* Shiren 3 theme */

/* Shiren 4 theme */

/* Shiren 5 theme */
.shiren5 {
	border-radius: 10px;
	border: 3px solid #785894;
	background-color: #372a2d;
}

.shiren5 td {
	background-color: #ebe2d6;
}

.shiren5 th {
	background-color: #c191b7;
}

/* 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 */
.gates {
    border-radius: 10px;
    border: 3px solid #0036a5;
    background-color: #0036a5;
}

.gates td {
    background-color: #d8d8c0;
}

.gates th {
    background-color: #606060;
}

/* Super theme */

/* Etrian MD1 theme */

/* Etrian MD2 theme */