MediaWiki:Gadget-NavboxStyle.css

/* Navbox template CSS */

/* Site styles */
.navbox {
	width: 100%;
	color: var(--color);
	clear: both;
	font-size: 88%;
	background: var(--bg);
	border: 1px solid var(--outline);
	margin-top: 15px;
}
.nav-right {
	color: #000;
	clear: right;
	float: right;
	width: 265px;
	font-size: 90%;
	box-sizing: border-box;
	margin: 0 0 10px 1em !important;
}
.content-table-wrapper + .content-table-wrapper .navbox,
.navbox + .navbox,
.navbox .navbox {
	margin-top: 0 !important;
}
.navbox .navbox {
	font-size: 100%;
}
.navbox:not(.multi) .navbox {
	border: 0;
}
.navbox .footer sup[id^="footnote"] + small {
	font-size: 100% !important;
}
.mobile .navbox > * > tr:nth-of-type(2) > td:first-child {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.navbox:not(.multi) .mw-collapsible > tbody > tr:first-child > th {
	padding-left: 4.1em;
}
.navbox:not(.multi) .navbox > * > tr > th {
	background-image: none !important;
}
.navbox > * > tr:first-child > th {
	font-size: 108%;
}
.navbox > * > tr:not(:first-child, :has(+ tr > td)) > th:only-child {
	font-weight: normal;
}
.navbox > * > tr > td:only-child:not(:has(.navbox)) {
	text-align: center;
}
.navbox > * > tr > td:only-child:has(.navbox) {
	padding: 0;
}
.client-nojs .navspace {
	display: none;
}
@media print {
	.navbox {
		display: none;
	}
}

/* Link colors */
.navbox td a { color: #00F; }
.navbox td a:visited { color: #00C; }
.navbox td a.new { color: #C20; }
.navbox td a.new:visited { color: #A55858; }
.navbox th a:not(.new) { color: inherit !important; }

/* Navbox coloration */
.navbox > * > tr:first-child > th:only-child {
	color: var(--bannercolor);
	background-color: var(--bannerbg);
}
.navbox > * > tr:not(:first-child) > th:only-child {
	color: var(--subbannercolor);
	background: var(--subbannerbg);
}
.navbox > * > tr:not(:first-child) > th:not(:only-child) {
	color: var(--headercolor);
	background: var(--headerbg);
}
.navbox:has(> * > tr > th[rowspan]) > * > tr:not(:first-child) > th:is(.subheader, :not(:has(+ th), [rowspan], [colspan], :only-child)) {
	color: var(--subheadercolor);
	background: var(--subheaderbg);
}
.navbox > * > tr:nth-child(2n) {
	background: var(--evenbg);
}
.navbox > * > tr:nth-child(2n+1) {
	background: var(--oddbg);
}

/* Defaults */
.navbox {
	--color: #000;
	--outline: #808080;
	--bannercolor: #FFF;
	--bannerbg: #999;
	--subbannercolor: var(--bannercolor);
	--subbannerbg: #9F9F9F;
	--headercolor: inherit;
	--headerbg: #CCC;
	--subheadercolor: var(--headercolor);
	--subheaderbg: #DDD;
	--evenbg: #F5F5F5;
	--oddbg: #FCFCFC;
	--bg: #FFF;
}

/* General */
table.light { --bannercolor: #000; }
table.dark { --headercolor: #FFF; }

/* Mario */
table.mario {
	--border: #000;
	--bannerbg: #C00;
	--subbannerbg: #D33;
	--headerbg: #F43;
	--subheaderbg: coral;
	--evenbg: bisque;
	--oddbg: #FFF5EE;

	--darkborder: #000;
	--darkbannerbg: #800;
	--darksubbannerbg: #711;
	--darkheaderbg: #661107;
	--darksubheaderbg: #550703;
	--darkevenbg: #441711;
	--darkoddbg: #311;
}
table.mario.sm {
	--bannerbg: #FF2400;
	--subbannerbg: #F40;
	--headerbg: #F73;
	--subheaderbg: #FFAA50;

	--darkbannerbg: #820;
	--darksubbannerbg: #721;
	--darkheaderbg: #661707;
	--darksubheaderbg: #551103;
}

/* Donkey Kong */
table.dk {
	--border: #000;
	--bannerbg: #9C6936;
	--subbannerbg: #A74;
	--headerbg: #BE9966;
	--subheaderbg: #CFBB88;
	--evenbg: wheat;
	--oddbg: #FFF8DC;

	--darkborder: #000;
	--darkbannerbg: #82562D;
	--darksubbannerbg: #774B22;
	--darkheaderbg: #641;
	--darksubheaderbg: #531;
	--darkevenbg: #332207;
	--darkoddbg: #221703;
}
table.dk.dkc {
	--bannerbg: saddlebrown;
	--subbannerbg: #AB6543;
	--headerbg: #BB8855;
	--subheaderbg: burlywood;

	--darkbannerbg: #741;
	--darksubbannerbg: #631;
	--darkheaderbg: #552C0C;
	--darksubheaderbg: #4C2707;
}
table.dk.mvdk {
	--bannerbg: chocolate;
	--subbannerbg: #E4843F;
	--headerbg: #E9904A;
	--subheaderbg: #F6B377;

	--darkbannerbg: #851;
	--darksubbannerbg: #775011;
	--darkheaderbg: #60470C;
	--darksubheaderbg: #4F3907;
}
table.dk.arcade {
	--bannerbg: #BB882A;
	--subbannerbg: #CC981B;
	--headerbg: #EAB500;
	--subheaderbg: #EB4;

	--darkbannerbg: #972;
	--darksubbannerbg: #862;
	--darkheaderbg: #705517;
	--darksubheaderbg: #504710;
}

/* Wario */
table.wario {
	--border: #000;
	--bannerbg: #901090;
	--subbannerbg: #A42AA3;
	--headerbg: orchid;
	--subheaderbg: #E58DE2;
	--evenbg: #F8BFF8;
	--oddbg: #F8DFF8;

	--darkborder: #000;
	--darkbannerbg: #800780;
	--darksubbannerbg: #700570;
	--darkheaderbg: #600460;
	--darksubheaderbg: #470347;
	--darkevenbg: #330233;
	--darkoddbg: #202;
}
table.wario.ww {
	--bannerbg: darkorchid;
	--subbannerbg: #A44CD1;
	--headerbg: #C090DD;
	--subheaderbg: #D89FE8;

	--darkbannerbg: #80A;
	--darksubbannerbg: #6C00A0;
	--darkheaderbg: #500077;
	--darksubheaderbg: #430057;
}
table.wario.wl {
	--bannerbg: #DF00DF;
	--subbannerbg: #E323E3;
	--headerbg: violet;
	--subheaderbg: #FE92FE;

	--darkbannerbg: #A0A;
	--darksubbannerbg: #808;
	--darkheaderbg: #707;
	--darksubheaderbg: #505;
}

/* Yoshi */
table.yoshi {
	--border: #000;
	--bannerbg: #00B200;
	--subbannerbg: #00C600;
	--headerbg: lime;
	--subheaderbg: #83FF50;
	--evenbg: #AFFFAA;
	--oddbg: #ECFFEC;

	--darkborder: #000;
	--darkbannerbg: #080;
	--darksubbannerbg: #171;
	--darkheaderbg: #161;
	--darksubheaderbg: #0C550C;
	--darkevenbg: #074407;
	--darkoddbg: #033303;
}
table.yoshi.yi {
	--bannerbg: forestgreen;
	--subbannerbg: #26A526;
	--headerbg: limegreen;
	--subheaderbg: #8D7;

	--darkbannerbg: #177717;
	--darksubbannerbg: #136613;
	--darkheaderbg: #105510;
	--darksubheaderbg: #0C4A0C;
}

/* Luigi's Mansion */
table.lm {
	--border: #000;
	--bannerbg: darkgreen;
	--subbannerbg: #007E00;
	--headerbg: #09A709;
	--subheaderbg: #32CD32;
	--evenbg: #BF9;
	--oddbg: #EFC;

	--darkborder: #000;
	--darkbannerbg: #060;
	--darksubbannerbg: #005A00;
	--darkheaderbg: #004D00;
	--darksubheaderbg: #030;
	--darkevenbg: #002600;
	--darkoddbg: #000D00;
}

/* Peach games */
table.peach {
	--border: #000;
	--bannerbg: #FF3EAF;
	--subbannerbg: #FF54B8;
	--headerbg: #FF89CD;
	--subheaderbg: #FFAEDD;
	--evenbg: pink;
	--oddbg: mistyrose;

	--darkborder: #000;
	--darkbannerbg: #A27;
	--darksubbannerbg: #901766;
	--darkheaderbg: #771150;
	--darksubheaderbg: #500C44;
	--darkevenbg: #440733;
	--darkoddbg: #33032C;
}

/* Sports games */
table.sport {
	--border: #000;
	--bannercolor: #000;
	--bannerbg: yellowgreen;
	--subbannerbg: #AED75B;
	--headerbg: greenyellow;
	--subheaderbg: #DDFF2F;
	--evenbg: #EFFF9F;
	--oddbg: #FFC;

	--darkborder: #000;
	--darkbannerbg: #681;
	--darksubbannerbg: #571;
	--darkheaderbg: #446607;
	--darksubheaderbg: #335507;
	--darkevenbg: #223303;
	--darkoddbg: #0C2202;
}

/* Spinoffs */
table.spinoff {
	--border: #000;
	--bannercolor: #000;
	--evenbg: #FFB;
	--oddbg: #FFD;

	--darkborder: #000;
	--darkevenbg: #332700;
	--darkoddbg: #221C00;
}
table.spinoff.mk {
	--bannerbg: gold;
	--subbannerbg: #FFDF33;
	--headerbg: #FE0;
	--subheaderbg: yellow;

	--darkbannerbg: #AA9000;
	--darksubbannerbg: #887000;
	--darkheaderbg: #665000;
	--darksubheaderbg: #504000;
}
table.spinoff.mp {
	--bannerbg: #FAFA00;
	--subbannerbg: #FFFF48;
	--headerbg: #FF3;
	--subheaderbg: #FF8;

	--darkbannerbg: #A90;
	--darksubbannerbg: #887C00;
	--darkheaderbg: #665D00;
	--darksubheaderbg: #504E00;
}
table.spinoff.dm {
	--bannerbg: #D0CC00;
	--subbannerbg: #D6D500;
	--headerbg: #E0E600;
	--subheaderbg: #E9F600;

	--darkbannerbg: #880;
	--darksubbannerbg: #771;
	--darkheaderbg: #661;
	--darksubheaderbg: #551;
}

/* RPGs */
table.rpg {
	--border: #000;
	--evenbg: #CFEEFF;
	--oddbg: aliceblue;

	--darkborder: #000;
	--darkevenbg: #114;
	--darkoddbg: #113;
}
table.rpg.pm {
	--bannerbg: #00C;
	--subbannerbg: #202DD5;
	--headerbg: #6996EA;
	--subheaderbg: #8DBBF6;

	--darkbannerbg: #00A;
	--darksubbannerbg: #009;
	--darkheaderbg: #070777;
	--darksubheaderbg: #070766;
}
table.rpg.ml {
	--bannercolor: #000;
	--bannerbg: #0DF;
	--subbannerbg: #66EAFF;
	--headerbg: aqua;
	--subheaderbg: #9FF;

	--darkbannerbg: #079;
	--darksubbannerbg: #058;
	--darkheaderbg: #073366;
	--darksubheaderbg: #072255;
}
table.rpg.smrpg {
	--bannerbg: dodgerblue;
	--subbannerbg: #389DFF;
	--headerbg: #76C4EE;
	--subheaderbg: #9DD8F2;

	--darkbannerbg: #159;
	--darksubbannerbg: #148;
	--darkheaderbg: #137;
	--darksubheaderbg: #112755;
}

/* Crossovers */
table.crossover {
	--border: #000;
	--bannerbg: #3A7;
	--subbannerbg: #43BB99;
	--headerbg: #66CDAA;
	--subheaderbg: #80E8C4;
	--evenbg: #E0FFE0;
	--oddbg: #EDFFFF;

	--darkborder: #000;
	--darkbannerbg: #296;
	--darksubbannerbg: #275;
	--darkheaderbg: #196640;
	--darksubheaderbg: #195538;
	--darkevenbg: #114430;
	--darkoddbg: #132;
}
table.crossover.ssb {
	--bannercolor: #000;
	--bannerbg: #1FFFB9;
	--subbannerbg: #4BFFC5;
	--headerbg: aquamarine;
	--subheaderbg: #9FFFEE;

	--darkbannerbg: #298;
	--darksubbannerbg: #227770;
	--darkheaderbg: #196655;
	--darksubheaderbg: #195550;
}

/* Alternate media */
table.media {
	--border: #000;
	--bannercolor: #000;
	--bannerbg: #FB0;
	--subbannerbg: #FFC300;
	--headerbg: gold;
	--subheaderbg: #FE0;
	--evenbg: #FFEAAA;
	--oddbg: #FFFFC0;

	--darkborder: #000;
	--darkbannerbg: #A72;
	--darksubbannerbg: #962;
	--darkheaderbg: #775517;
	--darksubheaderbg: #554017;
	--darkevenbg: #3A2211;
	--darkoddbg: #291907;
}

/* Former subpages */
table.subpage {
	--border: #000;
	--bannerbg: #6B8CFF;
	--subbannerbg: #8B8CFF;
	--headerbg: lightblue;
	--subheaderbg: #BBDDFA;
	--evenbg: lavender;
	--oddbg: ghostwhite;

	--darkborder: #000;
	--darkbannerbg: #459;
	--darksubbannerbg: #348;
	--darkheaderbg: #237;
	--darksubheaderbg: #192966;
	--darkevenbg: #151544;
	--darkoddbg: #131333;
}
.navbox.subpage > * > tr:first-child > th:only-child {
	background-repeat: no-repeat, no-repeat;
	background-position: left center, right center;
	background-image: url(https://mario.wiki.gallery/images/1/1a/Temp_SMB_a.png), url(https://mario.wiki.gallery/images/1/1d/Temp_SMB_b.png);
}

/* Consoles */
table.console {
	--border: #000;
	--bannercolor: #000;
	--bannerbg: #BBB;
	--subbannerbg: #C5C5C5;
	--headerbg: #CCC;
	--evenbg: #F5F5F5;
	--oddbg: #FCFCFC;

	--darkborder: #000;
	--darkbannerbg: #666;
	--darksubbannerbg: #555;
	--darkheaderbg: #2A2A2A;
	--darkevenbg: #1A1A1A;
	--darkoddbg: #111;
}