Difference between revisions of "MediaWiki:Common.css"

From Nookipedia, the Animal Crossing wiki
(Merging two selectors)
(Adjust navbox CSS to apply to th)
Line 501: Line 501:
 
border-radius: 0px !important;
 
border-radius: 0px !important;
 
}
 
}
.nav-inner > tbody > tr:first-child td:first-child {
+
.nav-inner > tbody > tr:first-child td:first-child, .nav-inner > tbody > tr:first-child th:first-child {
 
border-radius: 9px 9px 0px 0px !important;
 
border-radius: 9px 9px 0px 0px !important;
 
}
 
}

Revision as of 03:21, April 7, 2021

/* CSS placed here will be applied to all skins */
/* Note that Common.css does not load in Mobile View. Copy any CSS that you want to also work on mobile into Mobile.css.  */

/* Causes [[MediaWiki:Tagline]] to display */
	#siteSub { display:block; font-weight:normal; font-size:small;}

/* Top icons */
.topicon {
	position: absolute;
	top: -3.8em;
	margin-right: -10px;
	display: block !important;
}

/* Prevent list items in columns from breaking into the next column */
.list-columns li {
	page-break-inside: avoid;
}

/* Allow limiting of which header levels are shown in a TOC.
   <div class="toclimit-3">, for instance, will limit to showing ==headings== and ===headings=== but no further. */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul {
	display: none;
}

/* Hide content that should only appear on mobile */
.onlymobile {
	display:none;
}

/* No margin */
.no-margin {
	margin: 0;
}
.no-margin p {
	margin: 0;
}

/*==================================================
  BRAND
==================================================*/

/* Display Nookipedia text logo */
.nookipedia-logo {
	background-image: url(https://dodo.ac/np/images/1/1e/Nookipedia_Logo_Outlined.png);
	background-size: cover;
}

/* Social media icons */
.social-icon-facebook {
	background-image: url(https://dodo.ac/np/images/5/59/Facebook_Icon_Stylized.png);
	background-size: cover;
}
.social-icon-twitter {
	background-image: url(https://dodo.ac/np/images/4/4a/Twitter_Icon_Stylized.png);
	background-size: cover;
}
.social-icon-instagram {
	background-image: url(https://dodo.ac/np/images/2/25/Instagram_Icon_Stylized.png);
	background-size: cover;
}
.social-icon-discord {
	background-image: url(https://dodo.ac/np/images/e/eb/Discord_Icon_Stylized.png);
	background-size: cover;
}

/*==================================================
  MAIN PAGE
==================================================*/

/* Prevents some things from displaying on the main page */
body.page-Main_Page #ca-delete, body.page-Main_Page #ca-move, body.page-Main_Page #deleteconfirm, body.page-Main_Page #siteSub, body.page-Main_Page #contentSub, body.page-Main_Page .firstHeading {
	display: none !important;
}

/* Main page header images */
.main-page-header {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/*==================================================
  LINKS
==================================================*/

/* Styling links to ARMS Institute */
#bodyContent a[href="https://armswiki.org"].extiw {
	background: url("https://dodo.ac/np/images/1/1c/NIWA_Arms.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Bulbapedia */
#bodyContent a[href^="https://bulbapedia.bulbagarden.net/wiki"].extiw {
	background: url("https://dodo.ac/np/images/8/8a/NIWA_Pokemon.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Dragon Quest Wiki*/
#bodyContent a[href^="https://dragon-quest.org/wiki"].extiw {
	background: url("https://dodo.ac/np/images/3/31/NIWA_DQ.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Fire Emblem Wiki */
#bodyContent a[href^="https://fireemblemwiki.org"].extiw {
	background: url("https://dodo.ac/np/images/a/a1/NIWA_Fire_Emblem.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to F-Zero Wiki */
#bodyContent a[href^="https://mutecity.org/wiki"].extiw {
	background: url("https://dodo.ac/np/images/7/78/NIWA_F-Zero.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Golden Sun Universe */
#bodyContent a[href^="https://goldensunwiki.net/wiki"].extiw {
	background: url("https://dodo.ac/np/images/0/05/NIWA_Golden_Sun.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Hard Drop Wiki */
#bodyContent a[href^="https://harddrop.com/wiki"].extiw {
	background: url("https://dodo.ac/np/images/8/8b/NIWA_Hard_Drop.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Icaruspedia */
#bodyContent a[href^="https://www.kidicaruswiki.org/"].extiw {
	background: url("https://dodo.ac/np/images/4/45/NIWA_Icarus.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Inkipedia */
#bodyContent a[href^="https://splatoonwiki.org"].extiw {
	background: url("https://dodo.ac/np/images/8/89/NIWA_Splatoon.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Lylat Wiki */
#bodyContent a[href^="https://starfoxwiki.info/"].extiw {
	background: url("https://dodo.ac/np/images/9/96/NIWA_Star_Fox.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Metroid Wiki */
#bodyContent a[href^="https://metroidwiki.org/wiki/"].extiw {
	background: url("https://dodo.ac/np/images/5/50/NIWA_Metroid.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to NintendoWiki */
#bodyContent a[href^="http://niwanetwork.org/wiki"].extiw {
	background: url("https://dodo.ac/np/images/3/3d/NIWA_Nintendo.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Pikipedia */
#bodyContent a[href^="https://www.pikminwiki.com"].extiw {
	background: url("https://dodo.ac/np/images/0/05/NIWA_Pikmin.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Pikmin Fanon */
#bodyContent a[href^="https://www.pikminfanon.com/"].extiw {
	background: url("https://dodo.ac/np/images/1/16/NIWA_Pikmin_Fanon.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to SmashWiki */
#bodyContent a[href^="https://www.ssbwiki.com"].extiw {
	background: url("https://dodo.ac/np/images/b/b7/NIWA_Super_Smash_Bros.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Starfy Wiki */
#bodyContent a[href^="https://starfywiki.org"].extiw {
	background: url("https://dodo.ac/np/images/c/c0/NIWA_Starfy.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to StrategyWiki */
#bodyContent a[href^="https://strategywiki.org"].extiw {
	background: url("https://dodo.ac/np/images/f/f2/NIWA_Strategy.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Super Mario Wiki */
#bodyContent a[href^="https://www.mariowiki.com"].extiw {
	background: url("https://dodo.ac/np/images/0/0e/NIWA_Mario.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Wars Wiki */
#bodyContent a[href^="https://warswiki.org/wiki"].extiw {
	background: url("https://dodo.ac/np/images/a/a1/NIWA_Wars.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to WikiBound */
#bodyContent a[href^="https://wikibound.info/wiki"].extiw {
	background: url("https://dodo.ac/np/images/d/dd/NIWA_EarthBound.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to WiKirby */
#bodyContent a[href^="https://wikirby.com/wiki"].extiw {
	background: url("https://dodo.ac/np/images/c/c0/NIWA_Kirby.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Xeno Series Wiki */
#bodyContent a[href^="https://www.xenoserieswiki.org"].extiw {
	background: url("https://dodo.ac/np/images/2/24/NIWA_Xeno_Series_Wiki.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/* Styling links to Zelda Wiki */
#bodyContent a[href^="https://zelda.gamepedia.com"].extiw {
	background: url("https://dodo.ac/np/images/0/0e/NIWA_Zelda.png") no-repeat scroll right center transparent;
	padding-right: 18px;
}

/*==================================================
  FONTS
==================================================*/

/* Coustard font */
@font-face {
	font-display: swap;
	font-family: 'Coustard';
	font-style: normal;
	font-weight: 400;
	src: local('Coustard Regular'), local('Coustard-Regular'), url(https://fonts.gstatic.com/s/coustard/v11/3XFpErgg3YsZ5fqUU-UIt2TMR_Tc.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*==================================================
  IMAGES
==================================================*/

/* Galleries */
.gallery.mw-gallery-traditional {
	text-align: center;
}

/* Thumbnails */
.thumbinner {
	min-width: 100px;
	text-align: center;
}

/* Try to use nearest neighbor scaling for pixelated images */
.sprite {
	image-rendering: optimizeSpeed;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

/* Rounded images */
.roundyimage {
	border-radius: 5px;
}

/*==================================================
  TABLES
==================================================*/

/* Tables */
.table-items {
	background: #FFDD66;
}
.table-items tr {
	border-bottom: 4px solid #FFDD66;
}
.table-items td {
	padding: 8px 0;
}
.table-items th {
	padding: 8px 0;
}
.table-fish {
	background: #4F9FC6;
}
.table-fish tr {
	border-bottom: 4px solid #4F9FC6;
}
.table-fish td {
	padding: 8px 0;
}
.table-fish th {
	padding: 8px 0;
}
.table-bugs {
	background: #77AC3F;
}
.table-bugs tr {
	border-bottom: 4px solid #77AC3F;
}
.table-bugs td {
	padding: 8px 0;
}
.table-bugs th {
	padding: 8px 0;
}
.table-villagers {
	background: #8CBCD1;
}
.table-villagers tr {
	border-bottom: 4px solid #8CBCD1;
}
.table-villagers td {
	padding: 8px 0;
}
.table-villagers th {
	padding: 8px 0;
}
.table-music {
	background: #E08585;
}
.table-music tr {
	border-bottom: 4px solid #E08585;
}
.table-music td {
	padding: 8px 0;
}
.table-music th {
	padding: 8px 0;
}

/* Style tables with 'styled' class */
table.styled {
	margin: 10px;
	background: #66A6FF;
	border: 4px solid #66A6FF;
	border-radius: 14px;
}
table.styled td {
	background: #FFFFFF;
}
table.styled th {
	background: #CCE0FF;
}
table.styled tr:first-child th {
	font-weight: normal;
	font-family: Coustard;
	font-size: 1.0em;
	padding: 0 5px;
	text-align: center;
	background-color: #b3d2ff;
}
table.styled tr:first-child th:first-child {
	border-top-left-radius: 9px;
}
table.styled tr:first-child th:last-child {
	border-top-right-radius: 9px;
}
table.styled tr:last-child > :first-child {
	border-bottom-left-radius: 9px;
}
table.styled tr:last-child > :last-child {
	border-bottom-right-radius: 9px;
}

/* Palette table cells */
.palette td {
	height: 22px;
	width: 22px; 
	border-radius: 30px;
}

/* Table column coloring for Guide: Coffee Preferences */
.coffee td:nth-child(1), .coffee td:nth-child(5) { 
	background-color: #dcf6d3; 
}

/* Column text alignment for villager ideal gift tables */
.idealgifts td { 
	text-align: center; 
}
.idealgifts td:nth-child(1) { 
	text-align: left; 
}

/*==================================================
  BACKGROUNDS
==================================================*/

/* Grass backgrounds */
.grassSpring {
	background: url(https://dodo.ac/np/images/c/ce/MainPageGrass-Spring.png) repeat;
}

.grassSummer {
	background: url(https://dodo.ac/np/skins/nookipedia/summer/water-summer.png) repeat;
}

.grassFall {
	background: url(https://dodo.ac/np/images/4/4a/MainPageGrass-Fall.png) repeat;
}

.grassWinter {
	background: url(https://dodo.ac/np/images/5/5e/MainPageGrass-Winter.png) repeat;
}

.grassBirthday {
	background: url(https://dodo.ac/np/images/b/b0/MainPageGrass-Birthday.png) repeat;
}

/*==================================================
  BORDERS
==================================================*/

/* Rounded corners */
.roundy { 
	border-radius: 20px;
}
.roundytl { 
	border-top-left-radius: 20px;
}
.roundytr { 
	border-top-right-radius: 20px;
}
.roundybl { 
	border-bottom-left-radius: 20px;
}
.roundybr { 
	border-bottom-right-radius: 20px;
}
.roundybottom { 
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
.roundytop { 
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
.roundyleft { 
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}
.roundyright { 
	border-bottom-right-radius: 20px;
	border-top-right-radius: 20px;
}

table.roundlast tr:last-child td:last-child { 
	border-bottom-right-radius: 16px;
}

table.roundCorners tr:first-child td:first-child { 
	border-top-left-radius: 10px;
}
table.roundCorners tr:first-child td:last-child { 
	border-top-right-radius: 10px; 
}
table.roundCorners tr:last-child td:first-child { 
	border-bottom-left-radius: 10px; 
}
table.roundCorners tr:last-child td:last-child { 
	border-bottom-right-radius: 10px;
}

/*==================================================
  BOXES
==================================================*/

/* Themed divs */
.theme-background {
	background-color: #D1E6C6;
}
.theme-border {
	border: 3px solid #67AD42;
}
.theme-text {
	color: #67AD42;
}
.theme-hr {
	background-color: #67AD42;
}

/* Navboxes */
/* On narrow widths, convert multi-column navboxes to single vertical row */
@media (max-width: 1000px) {
	.nav-inner > tbody > tr > td, .nav-inner > tbody > tr > th {
		display: block;
		text-align: center;
		width: auto;
		border-radius: 0px !important;
	}
	.nav-inner > tbody > tr:first-child td:first-child, .nav-inner > tbody > tr:first-child th:first-child {
		border-radius: 9px 9px 0px 0px !important;
	}
	.nav-inner > tbody > tr:last-child td:last-child {
		border-radius: 0px 0px 9px 9px !important;
	}
	.nav-image {
		display: none !important;
	}
}

/* Infoboxes */
.infobox {
    table-layout: fixed; 
    border-radius: 15px;
    border-spacing: 2px;
    margin-left: 10px; 
    margin-bottom: 10px; 
    width: 320px; 
    padding: 5px; 
    float:right;
}

/* Gridding */
.grid-container-2-col {
	display: grid;
	grid-template-columns: auto auto;
}
.grid-item {
	border: 0 solid;
	padding: 1px 0;
}

/* Flex boxes */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}
.flex-item {
	flex: 1;
}
@media (max-width: 1000px) {
	.flex-container {
		display: block;
	}
}

/* PC villager info flex boxes */
.pc-villager-flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.pc-villager-flex-item {
	margin: 0 auto;
}
.pc-villager-left {
	flex: 1;
}
.pc-villager-right {
	flex: 4;
}
.pc-villager-data {
	text-align: left;
}
@media (max-width: 800px) {
	.pc-villager-flex-container {
		display: block;
	}
	.pc-villager-data {
  		text-align: center;
	}
}

/* Villager house flex boxes */
.house-flex-container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
}
.house-flex-item {
	flex: 1;
	margin: 0 auto;
}
.house-img {
	width: 360px;
	max-height: 275px;
}
.house-img img {
	max-width: 100%;
	width: 360px;
	max-height: 275px;
	height: auto;
	object-fit: contain;
}
@media (max-width: 1500px) {
	.house-flex-container {
    	display: block;
	}
	.house-img {
		 max-height: none;
	}
	.house-img img {
		 width: 360px;
		 max-height: none;
    		height: auto;
	}
}

/* NH items */
.nh_item-flex-container {
	display: flex;
	flex-wrap: wrap;
}
.nh_item-flex-item {
	flex-grow: 1;
}
.nh_item-var {
	flex-grow: 0;
	width: 36px;
}
.nh_item-var-img {
	display: inline-block;
	vertical-align: top;
	padding:12px 0 0 0;
}
.nh_item-var-title {
	line-height: 1.4em;
	max-height: 2.8em;
	overflow: hidden;
	word-wrap: break-word;
}
.nh_item-var-data {
	display: inline-block;
	font-size: .9em;
	vertical-align: top;
	padding: 12px 0 0 0;
	width: 90px;
}
.nh_item-lang {
	overflow: hidden;
	word-wrap: anywhere;
	margin: 0 3px;
	width: 30%;
}
.nh_item-divider {
	background-color: transparent;
	border-bottom: 1px solid #efba00;
}

/*==================================================
  TABS
==================================================*/

/* Tabs */
.tab-article {
	-moz-border-radius: 7px 7px 0 0;
	-webkit-border-radius: 7px 7px 0 0;
	-khtml-border-radius: 7px 7px 0 0;
	-icab-border-radius: 7px 7px 0 0;
	-o-border-radius: 7px 7px 0 0;
	border-radius: 7px 7px 0 0;
	text-align:center;
	padding: 3px 5px;
	margin: 0;
	border: 2px solid #78AB46;
	background-color: #A5D97B;
	white-space: nowrap;
	cursor:pointer;
}
span.tab-article:hover, div.tab:hover, td.tab:hover {
	background-color:#B1E48C;
}
.tabselected {
	background-color:#9ACE74 !important;
	border-bottom: 2px solid #9ACE74;
}
.tabcontainer p {
	margin:0;
}

/* CSS fallback for tabber when JS is unavailable */
.nookipedia-tabber {
	border: 1px solid #a2a9b1;
	padding: 1em;
}
.nookipedia-tab-header {
	font-size: larger;
	font-weight: bold;
	border-bottom: 2px solid #666;
	margin-bottom: 1em;
}
.client-js .nookipedia-tabber {
	display: none
}

/*==================================================
  LETTER TEMPLATE
==================================================*/
.quotebox {
	background-color: #F9F9F9;
	border: 1px solid #aaa;
	box-sizing: border-box;
	padding: 10px;
	font-size: 88%;
	max-width: 100%;
}
.quotebox.floatleft {
	margin: 0.5em 1.4em 0.8em 0;
}
.quotebox.floatright {
	margin: 0.5em 0 0.8em 1.4em;
}
.quotebox.centered {
	margin: 0.5em auto 0.8em auto;
}
.quotebox.floatleft p,
.quotebox.floatright p {
	font-style: inherit;	
}
.quotebox-title {
	background-color: #F9F9F9;
    font-size: larger;
}
.quotebox-quote.quoted:before {
    font-family:'Times New Roman',serif;
    font-weight:bold;
    font-size: large;
    color: gray;
    content: ' “ ';
    vertical-align: -45%;
	line-height: 0;
}
.quotebox-quote.quoted:after {
    font-family:'Times New Roman',serif;
    font-weight:bold;
    font-size: large;
    color: gray;
	content: ' ” ';
	line-height: 0;
}
.quotebox .left-aligned {
	text-align: left;
}
.quotebox .right-aligned {
	text-align: right;
}
.quotebox .center-aligned {
	text-align: center;
}
.quotebox cite {
	display:block;
	font-style:normal;
}

@media screen and (max-width:640px) {
	.quotebox {
		/*override inline styles */
		width: 100% !important;
		margin: 0 0 0.8em !important;
		float: none !important;
	}
}