MediaWiki:Common.css

MDFW - The Mystery Dungeon Tree of Information.
Revision as of 20:00, 12 April 2025 by Adkuate (talk | contribs)
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 */

/* Imports */
@import url("/wiki/Mediawiki:Templates.css?ctype=text/css&action=raw");
/* Sandbox */
/*@import url("/wiki/Mediawiki:Sandbox.css?ctype=text/css&action=raw");*/

/* Wiki theme */
:root {
	--mdwiki-primary-color: #D2DDE3;
	--mdwiki-secondary-color: #91C2EC;
	--mdwiki-tertiary-color: #21285A;
	--mdwiki-border-color: #275178;
}

/* Background image and color */
body {
	background: url(https://mysterydungeonwiki.com/w/images/2/26/Background.png);
	background-color: var(--mdwiki-tertiary-color);
}

/* Wiki theme */
table.wikitable {
	background-color: var(--mdwiki-tertiary-color);
	border: 3px solid var(--mdwiki-border-color);
}

table.wikitable {
	margin: auto;
	text-align: center;
}

table.wikitable > * > tr > td,
table.wikitable > * > tr > th {
	border: 3px solid var(--mdwiki-border-color);
}

table.wikitable > * > tr > th {
	background-color: var(--mdwiki-secondary-color);
}

table.wikitable > * > tr > td {
	background-color: var(--mdwiki-primary-color);
}

.filehistory tr td:last-of-type {
	word-break: break-word;
}

a > img {
	vertical-align: middle;
}

/* Site sub / Tagline settings */
#siteSub {
	display: block;
	text-align: center;
	font-size: calc(1em * 0.9);
}

/* 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;
}

/* This governs the page/section title placement */
h1, h2, h3, h4, h5, h6 {
	text-align: center
}

/* Template documentation styles
If modifying these styles, be sure to update the mobile skin! */
.doc {
	margin: 0 auto 1em;
	background-color: rgba(0, 0, 0, 0.1);
	border: 2px solid #BDCAC3;
	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;
	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;
}

.fp-section {
	display: flex;
	flex-wrap: wrap;
}

#fp-top {
	grid-template-areas: a;
}

#fp-flex {
	grid-template-areas: b;
}

#fp-bottom {
	grid-template-areas: c;
}

/* Main page */
.mainPageHeader {
	background: linear-gradient(to bottom, #00000000, var(--mdwiki-secondary-color));
	padding: 1rem;
	display: flex;
	justify-content: center;
}

.mainPageHead {
	font-size: 160%;
	text-shadow: 0.3rem 0.3rem 0.3rem #0000004D;
	text-align: center;
}

.mainPageBody {
	padding: 0.5rem;
	background-color: var(--mdwiki-secondary-color);
	text-align: center;
}

.mainPageFlex {
	display: flex;
}

.mainPageDiv {
	padding: 0.5rem;
	margin: 0.5rem;
	border: 5px solid var(--mdwiki-border-color);
	background-color: var(--mdwiki-primary-color);
	box-shadow: 0 0 0.5rem #000;
}

.mainPageDiv .gallery {
	margin: 0;
}

.mainPageContent {
	font-weight: bold;
	background-color: var(--mdwiki-secondary-color);
	font-size: 120%;
	border: 2px solid var(--mdwiki-border-color);
	padding: 0.5rem 0.4rem;
	margin-bottom: 0.5rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

.mainPageContent > a,
.gameReleaseCard a {
	color: black;
	text-decoration: underline;
}

.gameRelease {
	display: flex;
	flex-flow: row wrap;
}

.gameReleaseContent {
	flex: 1 1;
	padding: 1rem;
	text-align: center;
	max-width: -moz-available;
	max-width: -webkit-fill-available;
}

.gameReleaseCardsContent {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-end;
	font-family: monospace;
	font-weight: bold;
}

.gameReleaseCard {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	margin: 0.5rem;
}

.niwa {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: flex-start;
	width: 75%;
	margin: auto;
	text-align: center;
}
/* End Main page */

.w-100 {
	width: 100%;
}

.w-75 {
	width: 75%;
}

.w-67 {
	width: 67%;
}

.w-50 {
	width: 50%;
}

.w-33 {
	width: 33%;
}

.w-25 {
	width: 25%;
}

.explain {
	text-decoration: underline dotted;
}

/* If you want the tabs to be centered rather than left-justified with respect to the tab content */
.tabber__header {
	align-items: center;
}

.tabber__tabs {
	flex-flow: row wrap!important;
	justify-content: center!important;
}

.tabber__tabs:has(table) {
	width: 500px;
}

@media all and (max-width: 768px) {
	.tabber__tabs:has(table) {
		width: -moz-available!important;
		width: -webkit-fill-available!important;
	}
}

/* External links logos */
#content a[href^="https://www.youtube.com/"].external {
	background: url("https://upload.wikimedia.org/wikipedia/commons/f/fd/YouTube_full-color_icon_%282024%29.svg") center right no-repeat;
	background-size: 16px;
	padding-right: 18px;
}

#content a[href^="https://twitter.com/"].external {
	background: url("https://upload.wikimedia.org/wikipedia/commons/c/ce/X_logo_2023.svg") center right no-repeat;
	background-size: 16px;
	padding-right: 18px;
}

#content a[href^="https://www.reddit.com/"].external {
	background: url("https://upload.wikimedia.org/wikipedia/en/b/bd/Reddit_Logo_Icon.svg") center right no-repeat;
	background-size: 16px;
	padding-right: 18px;
}

#content a[href^="https://bsky.app/"].external {
	background: url("https://upload.wikimedia.org/wikipedia/commons/7/7a/Bluesky_Logo.svg") center right no-repeat;
	background-size: 16px;
	padding-right: 18px;
}

#content a[href^="https://www.facebook.com/"].external {
	background: url("https://upload.wikimedia.org/wikipedia/commons/b/b9/2023_Facebook_icon.svg") center right no-repeat;
	background-size: 16px;
	padding-right: 18px;
}

/* hide potentially sensitive data on file pages */
#mw_metadata .exif-gpslatitude,
#mw_metadata .exif-gpslongitude,
#mw_metadata .exif-artist {
	display: none;
}

/* Sidebar Separator */
#n- {
	background: #a2a9b1;
	font-size: 2px;
	margin: 2.2em 0;
}

/* Discord */
#n-Discord a {
	background: url(https://discord.com/api/guilds/502973274125238284/embed.png) no-repeat;
	color: transparent !important;
	display: inline-block;
	height: 20px;
	width: 110px;
}

@media screen and (max-width: 550px) {
	.mainPageFlex {
		flex-flow: row wrap;
	}
	
	.mainPageDiv,
	.niwa {
		width: -webkit-fill-available!important;
		width: -moz-available!important;
		max-height: 100vh;
	}
	
	.gameRelease {
		flex-flow: column wrap;
	}
}

@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;
	}
}

@media screen and (max-width: 1439px) {
	.mainPageDiv {
		padding: 0.5rem;
	}
}

.mw-undelete-subtitle, /* Hide Undelete */
#mw-indicator-mw-helplink a /* Hide Help Link*/
{
	visibility: hidden;
}

.mw-body {
	padding: 1.25em 0em 0.5em 0em;
}

/* Fixes background of /w/api.php */
.mw-special-ApiHelp {
	background: white;
}

/* Hides the title and tagline on the given pages */
.page-Mystery_Dungeon_Franchise_Wiki.action-view h1,
.page-Mystery_Dungeon_Franchise_Wiki.action-view #siteSub,
.page-Mystery_Dungeon_Franchise_Wiki.action-submit h1,
.page-Mystery_Dungeon_Franchise_Wiki.action-submit #siteSub,
.page-Meta_Torneko_s_Great_Adventure_Mystery_Dungeon h1,
.page-Meta_Torneko_s_Great_Adventure_Mystery_Dungeon #siteSub,
.page-Meta_World_of_Dragon_Warrior_Torneko_The_Last_Hope h1,
.page-Meta_World_of_Dragon_Warrior_Torneko_The_Last_Hope #siteSub,
.page-Meta_Dragon_Quest_Characters_Torneko_s_Great_Adventure_2_Advance_Mystery_Dungeon h1,
.page-Meta_Dragon_Quest_Characters_Torneko_s_Great_Adventure_2_Advance_Mystery_Dungeon #siteSub,
.page-Meta_Dragon_Quest_Characters_Torneko_s_Great_Adventure_3_Mystery_Dungeon h1,
.page-Meta_Dragon_Quest_Characters_Torneko_s_Great_Adventure_3_Mystery_Dungeon #siteSub,
.page-Meta_Dragon_Quest_Characters_Torneko_s_Great_Adventure_3_Advance_Mystery_Dungeon h1,
.page-Meta_Dragon_Quest_Characters_Torneko_s_Great_Adventure_3_Advance_Mystery_Dungeon #siteSub,
.page-Meta_Dragon_Quest_Young_Yangus_and_the_Mystery_Dungeon h1,
.page-Meta_Dragon_Quest_Young_Yangus_and_the_Mystery_Dungeon #siteSub,
.page-Meta_Mystery_Dungeon_2_Shiren_the_Wanderer h1,
.page-Meta_Mystery_Dungeon_2_Shiren_the_Wanderer #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_SP h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_SP #siteSub,
.page-Meta_BS_Shiren_the_Wanderer_Save_Surala h1,
.page-Meta_BS_Shiren_the_Wanderer_Save_Surala #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_GB_-_Monster_of_Moonlight_Village h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_GB_-_Monster_of_Moonlight_Village #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_-_Monster_of_Moonlight_Village_PC_Internet_Version h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_-_Monster_of_Moonlight_Village_PC_Internet_Version #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_-_Monster_of_Moonlight_Village_for_Android h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_-_Monster_of_Moonlight_Village_for_Android #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_2_-_Shiren_s_Castle_and_the_Oni_Invasion h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_2_-_Shiren_s_Castle_and_the_Oni_Invasion #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_GB2_-_Magic_Castle_of_the_Desert h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_GB2_-_Magic_Castle_of_the_Desert #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_DS2_-_Magic_Castle_of_the_Desert h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_DS2_-_Magic_Castle_of_the_Desert #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_Gaiden_-_Asuka_the_Swordswoman h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_Gaiden_-_Asuka_the_Swordswoman #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_Gaiden_-_Asuka_the_Swordswoman_for_Windows h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_Gaiden_-_Asuka_the_Swordswoman_for_Windows #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_3_-_The_Sleeping_Princess_and_the_Karakuri_Mansion h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_3_-_The_Sleeping_Princess_and_the_Karakuri_Mansion #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_3_Portable h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_3_Portable #siteSub,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_4_-_The_Eye_of_God_and_the_Devil_s_Navel h1,
.page-Meta_Mystery_Dungeon_Shiren_the_Wanderer_4_-_The_Eye_of_God_and_the_Devil_s_Navel #siteSub,
.page-Meta_Shiren_the_Wanderer_4_Plus_The_Eye_of_God_and_the_Devil_s_Navel h1,
.page-Meta_Shiren_the_Wanderer_4_Plus_The_Eye_of_God_and_the_Devil_s_Navel #siteSub,
.page-Meta_Shiren_the_Wanderer_5_The_Tower_of_Fortune_and_the_Dice_of_Fate h1,
.page-Meta_Shiren_the_Wanderer_5_The_Tower_of_Fortune_and_the_Dice_of_Fate #siteSub,
.page-Meta_Shiren_the_Wanderer_The_Tower_of_Fortune_and_the_Dice_of_Fate h1,
.page-Meta_Shiren_the_Wanderer_The_Tower_of_Fortune_and_the_Dice_of_Fate #siteSub,
.page-Meta_Shiren_the_Wanderer_The_Tower_of_Fortune_and_the_Dice_of_Fate_2020 h1,
.page-Meta_Shiren_the_Wanderer_The_Tower_of_Fortune_and_the_Dice_of_Fate_2020 #siteSub,
.page-Meta_Shiren_the_Wanderer_The_Tower_of_Fortune_and_the_Dice_of_Fate_SP h1,
.page-Meta_Shiren_the_Wanderer_The_Tower_of_Fortune_and_the_Dice_of_Fate_SP #siteSub,
.page-Meta_CR_Mystery_Dungeon_Shiren_the_Wanderer_Princess_Suzune_and_the_Tower_of_Slumber h1,
.page-Meta_CR_Mystery_Dungeon_Shiren_the_Wanderer_Princess_Suzune_and_the_Tower_of_Slumber #siteSub,
.page-Meta_Shiren_the_Wanderer_The_Mystery_Dungeon_of_Serpentcoil_Island h1,
.page-Meta_Shiren_the_Wanderer_The_Mystery_Dungeon_of_Serpentcoil_Island #siteSub,
.page-Meta_Chocobo_s_Mystery_Dungeon h1,
.page-Meta_Chocobo_s_Mystery_Dungeon #siteSub,
.page-Meta_Chocobo_s_Mystery_Dungeon_for_WonderSwan h1,
.page-Meta_Chocobo_s_Mystery_Dungeon_for_WonderSwan #siteSub,
.page-Meta_Chocobo_s_Dungeon_2 h1,
.page-Meta_Chocobo_s_Dungeon_2 #siteSub,
.page-Meta_Final_Fantasy_Fables_Chocobo_s_Dungeon h1,
.page-Meta_Final_Fantasy_Fables_Chocobo_s_Dungeon #siteSub,
.page-Meta_Cid_and_Chocobo_s_Mystery_Dungeon_Labyrinth_of_Forgotten_Time_DS h1,
.page-Meta_Cid_and_Chocobo_s_Mystery_Dungeon_Labyrinth_of_Forgotten_Time_DS > #siteSub,
.page-Meta_Chocobo_s_Mystery_Dungeon_Every_Buddy h1,
.page-Meta_Chocobo_s_Mystery_Dungeon_Every_Buddy #siteSub,
.page-Meta_Pokémon_Mystery_Dungeon_Red_and_Blue_Rescue_Team h1,
.page-Meta_Pokémon_Mystery_Dungeon_Red_and_Blue_Rescue_Team #siteSub,
.page-Meta_Pokémon_Mystery_Dungeon_Rescue_Team_DX h1,
.page-Meta_Pokémon_Mystery_Dungeon_Rescue_Team_DX #siteSub,
.page-Meta_Pokémon_Mystery_Dungeon_Explorers_of_Time_and_Darkness h1,
.page-Meta_Pokémon_Mystery_Dungeon_Explorers_of_Time_and_Darkness #siteSub,
.page-Meta_Pokémon_Mystery_Dungeon_Explorers_of_Sky h1,
.page-Meta_Pokémon_Mystery_Dungeon_Explorers_of_Sky #siteSub,
.page-Meta_Pokémon_Mystery_Dungeon_Blazing_Light_and_Stormy_Adventure_Squad h1,
.page-Meta_Pokémon_Mystery_Dungeon_Blazing_Light_and_Stormy_Adventure_Squad #siteSub,
.page-Meta_Pokémon_Mystery_Dungeon_Gates_to_Infinity h1,
.page-Meta_Pokémon_Mystery_Dungeon_Gates_to_Infinity #siteSub,
.page-Meta_Pokémon_Super_Mystery_Dungeon h1,
.page-Meta_Pokémon_Super_Mystery_Dungeon #siteSub,
.page-Meta_Etrian_Mystery_Dungeon h1,
.page-Meta_Etrian_Mystery_Dungeon #siteSub,
.page-Meta_Etrian_Mystery_2_Dungeon h1,
.page-Meta_Etrian_Mystery_2_Dungeon #siteSub,
.page-Mystery_Dungeon_Franchise_Wiki_News_Archive h1,
.page-Mystery_Dungeon_Franchise_Wiki_News_Archive #siteSub,
.page-Mystery_Dungeon_Franchise_Wiki_Twitter_Archive h1,
.page-Mystery_Dungeon_Franchise_Wiki_Twitter_Archive #siteSub
{
	display: none;
}

.page-Special_PopularPages h1 {
	text-transform: capitalize;
}

/* Makes the image fit the window size, so it stays at a good size even when resizing the window */
/* Example: [[File:Shiren 6 Official Website - Background.png|frameless|class=fitscreen|]] */
.fitscreen {
	width: 100%;
	height: auto;
}

.fitscreen85 {
	width: 85%;
	height: auto;
}

.fitscreen70 {
	width: 70%;
	height: auto;
}

.Shiren3Wii-Characters {
	background: url(https://mysterydungeonwiki.com/w/images/8/86/Shiren_3_Wii_Official_Website_-_Banner_1.png), linear-gradient(to right,#d2dde3,#f1fbfc,#eaf4f5);
	height: auto;
	background-repeat: no-repeat;
	background-position: right top;
}
Retrieved from "https://mysterydungeonwiki.com/index.php?title=MediaWiki:Common.css&oldid=912395"