MediaWiki:Common.css: Difference between revisions

Revision as of 20:53, November 30, 2023

/* CSS placed here will be applied to all skins */

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

.TwoWorldsWiki,
.templateTheme {
	border: 3px solid var(--TwoWorldsWiki-border-color);
	background-color: var(--TwoWorldsWiki-tertiary-color);
}

.TwoWorldsWiki th,
.templatePrimary {
	background-color: var(--TwoWorldsWiki-secondary-color);
}

.TwoWorldsWiki td,
.templateSecondary {
	background-color: var(--TwoWorldsWiki-primary-color);
}

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

body.page-Mystery_Dungeon_Franchise_Wiki.action-view #siteSub,
body.page-Mystery_Dungeon_Franchise_Wiki.action-submit #siteSub {
	display: none;
}

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

/* Misc */

/* Main page */
.mainPageHeader {
	color: black;
	font-size: 160%;
	text-shadow: 0.3rem 0.3rem 0.3rem #0000004D;
}

.mainPageBody {
	background-color: var(--TwoWorldsWiki-secondary-color);
}

.mainPageFooter {
	font-size: 80%;
	padding: 0.5rem 0.4rem;
}

.mainPageFlex {
	display: flex;
}

.mainPageDiv {
	padding: 0.25rem;
	border: 5px solid var(--TwoWorldsWiki-border-color);
	background-color: var(--TwoWorldsWiki-primary-color);
	margin: 0.5rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 1);
}

.mainPageContent {
	font-weight: bold;
	text-align: center;
	color: black;
	background-color: var(--TwoWorldsWiki-secondary-color);
	font-size: 120%;
	border: 2px solid var(--TwoWorldsWiki-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,
.mainPageFooter > a,
.versiondiv > div > a {
	color: black;
	text-decoration: underline;
}

.versiondiv {
	background-color: var(--TwoWorldsWiki-secondary-color);
	border: solid 2px var(--TwoWorldsWiki-border-color);
	padding: 0.5rem;
	font-weight: normal;
	font-size: 80%;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}

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

/* End Main page */

.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__indicator {
	align-self: stretch;
}

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

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

@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 (max-width: 1023px) {
	.mainPageAbout {
		max-height: 100vh;
		overflow-y: scroll;
	}
}

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