MediaWiki:Mobile.css

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
/********** 
Note that this loads before skin CSS, so selectors need to be more specific than the skin to override it.
**********/

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

:root {
	--mdwiki-primary-color: #D2DDE3;
	--mdwiki-secondary-color: #5BB2FF;
	--mdwiki-tertiary-color: #21285A;
	--mdwiki-border-color: #275178;
}

/* Accessibility (a11y) */
a {
	color: #214282!important;
}

a:visited {
	color: #4F3776!important;
}

.footer-info a,
.footer-places a {
	color: black!important;
}
/* end a11y */

/* 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,
table.MDWiki {
	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,
table.MDWiki > * > tr > th {
	background-color: var(--mdwiki-secondary-color);
}

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

/* 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/0/09/YouTube_full-color_icon_%282017%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/commons/1/14/Ionicons_logo-reddit.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;
}

/*** mobile-specific style classes ***/
.overlay-enabled,
.mw-body,
#mw-mf-page-left {
	background: url(https://mysterydungeonwiki.com/w/images/thumb/2/26/Background.png/800px-Background.png?20240203093037);
}

.header-container.header-chrome,
#mw-mf-page-left ul li {
	background-color: var(--mdwiki-primary-color);
}

.minerva-footer {
	background-color: var(--mdwiki-secondary-color);
}

.minerva-footer > div > ul > li > a,
#mw-mf-page-left > ul.hlist > li > a {
	color: white;
	text-decoration: underline;
}

.last-modified-bar__text > span {
	color: black;
}

#bodyContent,
.heading-holder {
	background-color: var(--mdwiki-primary-color);
	padding: 1rem;
}

.mw-first-heading,
.mw-parser-output > h1,
.mw-parser-output > h2 {
	background: linear-gradient(to bottom, #00000000, var(--mdwiki-secondary-color));
	border-bottom: 1px solid var(--mdwiki-border-color);
}

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

.toc {
	background-color: var(--mdwiki-primary-color);
	border: 3px solid var(--mdwiki-border-color);
}

li.gallerybox div.thumb {
	border: 3px solid var(--mdwiki-border-color);
}

/*** Infoboxes - Mobile ***/

/* Interwiki */
.interwiki {
	clear: right;
	margin: 1rem;
	padding: 0.5rem;
	font-size: 90%;
	width: -webkit-fill-available;
	text-align: left;
	float: right;
	font-style: italic;
	box-shadow: 0.5rem 0.5rem #00000055;
}

/* 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;
	max-height: 100vh;
	overflow-y: scroll;
}

.mainPageDiv .gallery {
	margin-right: 1.5rem;
}

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

@media all and (max-width: 550px) {
	.mainPageFlex {
		flex-flow: row wrap;
	}
	
	.mainPageDiv {
		width: -webkit-fill-available!important;
		width: -moz-available!important;
	}
	
	.gameRelease {
		flex-flow: column wrap;
	}
}
/* End Main page */

/* Images should be responsive */
img {
	max-width: 100%;
	height: auto;
}

@media screen and (min-width: 720px) {
	.pre-content {
		padding: 1rem;
	}
}

@media screen and (max-width: 720px) {
	.content table {
		display: inline-table;
	}

	#languages {
		display: table;
		width: 50vw !important;
		margin: 0.5em auto !important;
	}
}

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

Navigation menu

Search
