Difference between revisions of "MediaWiki:Nookipedia-timeless.css"

From Nookipedia, the Animal Crossing wiki
(One more try...)
m
Line 24: Line 24:
 
/* Correcting anchor location to account for header height */
 
/* Correcting anchor location to account for header height */
 
.anchor {
 
.anchor {
display: block;
 
 
position: relative;
 
position: relative;
 
visibility: hidden;
 
visibility: hidden;
top: -50px;
+
top: -90px;
 
}
 
}
  

Revision as of 12:09, June 17, 2022

/*
   CSS for Timeless is also loaded from the following gadgets:
     MediaWiki:Gadget-CollapsibleNav.css
     MediaWiki:Gadget-OneSidedTimeless.css
*/

/* Hotfix for left-ad colliding with mobile dropdown */
@media (max-width: 1099px) {
	#left-ad {
		display: none;
	}
}

/* Add hidden height before headers to correct anchor link positioning */
@media (min-width: 851px) {
	.mw-headline::before {
		content: '';
		display: block;
		height:      50px;
		margin-top: -50px;
	}
}

/* Correcting anchor location to account for header height */
.anchor {
	position: relative;
	visibility: hidden;
	top: -90px;
}

/* Fix Multiple Image template look on mobile */
@media (max-width: 850px) {
	div.thumb {
    	float: none;
    	margin: 1em auto;
	}
}
/* Fix image pages on smaller screeens */
@media (max-width: 850px) {
	.wikitable {
		border: solid #eeeeee !important;
    	display: block;
    	box-sizing: border-box;
    	width: 100% !important;
    	overflow-y: hidden;
    	overflow-x: auto;
    	padding: 0 !important;
	}
	.mw-body a > img {
    	max-width: 100% !important;
	}
	.mw_metadata {
    	overflow-y: hidden;
    	overflow-x: auto;
    	max-width: 90%;
	}
}

/* Limit mobile max-width image scaling to thumbnails */
.mw-body .thumb a > img {
	max-width: none !important;
}
@media (max-width: 850px) {
	.mw-body .thumb a > img {
		max-width: 100% !important;
	}
}
/* Backported width optimizations */
@media (max-width: 850px) {
	#mw-content { padding: 0.5em 0.5em 3em; }
	#firstHeading { width: 100%; }
	#mw-header-container { padding: 3.75em 0.5em 0.35em; }
	#site-navigation h2 { left: 0.5em; }
	#user-tools h2 { right: 1.2em; }
	#site-tools h2 { right: 4.2em; }
	#personal-extra { right: 7.5em; }
}

/* Backported header border fix */
.mw-body .mw-parser-output h1::after, .mw-body .mw-parser-output h2::after {
    content: '';
    display: block;
    border-bottom: solid 2px #A2A9B1;
    overflow: hidden;
}
.mw-body .mw-parser-output h1, .mw-body .mw-parser-output h2 {
    border-bottom: 0;
}

html {
	background: var(--th-color-tertiary);
}

body {
	font-family: sans-serif;
	font-size: 0.875em;
	line-height: 21px;
}

/*==================================================
  BACKGROUND
==================================================*/

#mw-content-container {
	background: url(https://dodo.ac/np/images/0/07/Nookipedia_-_Leaf_Background_Spring.jpg) #e9f5f2;
	border-bottom: 4px solid var(--th-color-primary);
}

/*==================================================
  SITE LOGO
==================================================*/

/* Style and hide plaintext site name */
#p-banner.mw-wiki-title {
	font-family: 'Coustard', sans-serif;
	font-weight: bold;
	color: transparent;
}

/* Show banner logo in place of plaintext site name */
#p-logo-text {
	background-image: url(data:image/png;base64,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);
	background-size: 141px auto;
	background-repeat: no-repeat;
	background-position: center center;
}
#p-logo-text a {
	padding: 0.1em 1em 0.2em;
}

/* Hide text logo on desktop */
@media screen and (min-width: 1100px) {
	#p-logo-text {
		opacity: 0;
		visibility: hidden;
	}
}
/* Reposition text logo on mobile */
@media (max-width: 832px) {
	#p-logo-text {
		position: absolute;
		top: 15px;
		left: 60px;
	}
}

/* Reduce text logo size on very narrow mobile widths */
@media screen and (max-width: 435px) {
	#p-logo-text {
		width: 28vw;
		background-size: 28vw auto;
	}
}

/* Use leaf in place of standard logo on desktop */
.mw-wiki-logo {
	background-image: url('https://dodo.ac/np/images/f/f2/Nookipedia_Logo_-_Leaf_and_Text.svg');
	background-size: 154px auto;
}

/*==================================================
  NAVIGATION ADJUSTMENTS
==================================================*/

/* Hide site tools by default; re-enabled for logged-in users via MediaWiki:Group-user.css */
#site-tools {
	display: none;
}

/* Hide navigation h3 */
#p-navigation-label {
	display: none;
}

/* Style section headers */
div[role=navigation] h3 {
	font-family: Coustard, Linux Libertine, Georgia, Times, serif;
	color: var(--th-color-primary);
}
#mw-content-container .sidebar-inner h3, #personal-inner h3 {
	background-color: var(--th-color-primary) !important;
	border: 0px !important;
	color: var(--th-color-tertiary) !important;
	padding: 7px 10px !important;
	margin: .5em 0 1em;
	text-align: center !important;
	border-radius: 5px !important;
	font-size: 1.2em;
}
#mw-content-container .sidebar-inner h3 a, #mw-content-container .sidebar-inner h3 a:visited {
	color: white;
	text-decoration: none;
}

/* Add leaf bullets */
#mw-site-navigation .sidebar-chunk ul, #mw-site-navigation .sidebar-chunk li, #personal .dropdown ul, #personal .dropdown li, #mw-related-navigation .sidebar-chunk ul, #mw-related-navigation .sidebar-chunk li {
    list-style: url(https://dodo.ac/np/images/1/1c/Leaf_Icon_%28Nookipedia_Green%29.png);
    list-style-position: inside;
}

/* Reduce bottom margin on lists */
#mw-site-navigation .sidebar-chunk ul, #mw-related-navigation .sidebar-chunk ul {
	margin-bottom: 1em;
}

/* Reduce margin on nav list items on mobile */
.sidebar-inner li, .dropdown li {
	margin: 0 0 .5em;
}

/* Social media icons */
#p-navigation #n-Discord, #p-navigation #n-Twitter, #p-navigation #n-Instagram, #p-navigation #n-Facebook {
	list-style: none;
	display: inline-block;
	width: 25%;
	height: 2em;
	padding: 0;
	margin: 5px 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#p-navigation #n-Discord a, #p-navigation #n-Twitter a, #p-navigation #n-Instagram a, #p-navigation #n-Facebook a {
	display: block;
	width: 100%;
	height: 100%;
}
/* Hide text links while keeping them accessible to screen readers */
#p-navigation #n-Discord span, #p-navigation #n-Twitter span, #p-navigation #n-Instagram span, #p-navigation #n-Facebook span {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
#p-navigation #n-Discord {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2367ad42" width="24" height="24" viewBox="0 0 24 24"><path d="M5 0a5 5 0 0 0-5 5v14a5 5 0 0 0 5 5h14a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5H5zm4.625 5.686c.022-.003.044.006.055.025a8.72 8.72 0 0 1 .428.861 12.62 12.62 0 0 1 3.789 0c.113-.266.274-.602.42-.861.011-.02.031-.029.053-.025 1.184.205 2.319.56 3.375 1.045.009.004.017.01.021.02 1.872 2.753 2.795 5.859 2.449 9.434-.001.015-.009.03-.021.039-1.418 1.041-2.79 1.673-4.145 2.092-.022.007-.046-.001-.059-.02-.313-.435-.597-.895-.846-1.377-.014-.028-.002-.063.027-.074.451-.17.882-.374 1.295-.615.033-.019.034-.066.004-.088l-.258-.201c-.016-.013-.037-.016-.055-.008-2.68 1.238-5.616 1.238-8.328 0a.05.05 0 0 0-.053.008l-.258.201c-.03.022-.027.069.006.088.413.237.842.444 1.293.615.029.011.042.046.027.074-.244.483-.527.942-.846 1.377-.014.018-.037.026-.059.02-1.348-.419-2.721-1.051-4.139-2.092-.012-.009-.02-.024-.021-.039-.289-3.092.301-6.224 2.449-9.434.005-.009.012-.016.021-.02 1.057-.485 2.189-.841 3.373-1.045zm-.373 5.273c-.83 0-1.49.751-1.49 1.672s.674 1.67 1.49 1.67c.83 0 1.488-.749 1.488-1.67.013-.914-.652-1.672-1.488-1.672zm5.506 0c-.83 0-1.488.751-1.488 1.672s.672 1.67 1.488 1.67c.836 0 1.49-.749 1.49-1.67.013-.914-.654-1.672-1.49-1.672z"/></svg>');
}
#p-navigation #n-Twitter {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2367ad42" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-.139 9.237c.209 4.617-3.234 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.08-4.03 3.199-4.03.943 0 1.797.398 2.395 1.037.748-.147 1.451-.42 2.086-.796-.246.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.439.656-.996 1.234-1.639 1.697z"/></svg>');
}
#p-navigation #n-Instagram {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2367ad42" width="24" height="24" viewBox="0 0 24 24"><path d="M15.233 5.488c-.843-.038-1.097-.046-3.233-.046s-2.389.008-3.232.046c-2.17.099-3.181 1.127-3.279 3.279-.039.844-.048 1.097-.048 3.233s.009 2.389.047 3.233c.099 2.148 1.106 3.18 3.279 3.279.843.038 1.097.047 3.233.047 2.137 0 2.39-.008 3.233-.046 2.17-.099 3.18-1.129 3.279-3.279.038-.844.046-1.097.046-3.233s-.008-2.389-.046-3.232c-.099-2.153-1.111-3.182-3.279-3.281zm-3.233 10.62c-2.269 0-4.108-1.839-4.108-4.108 0-2.269 1.84-4.108 4.108-4.108s4.108 1.839 4.108 4.108c0 2.269-1.839 4.108-4.108 4.108zm4.271-7.418c-.53 0-.96-.43-.96-.96s.43-.96.96-.96.96.43.96.96-.43.96-.96.96zm-1.604 3.31c0 1.473-1.194 2.667-2.667 2.667s-2.667-1.194-2.667-2.667c0-1.473 1.194-2.667 2.667-2.667s2.667 1.194 2.667 2.667zm4.333-12h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm.952 15.298c-.132 2.909-1.751 4.521-4.653 4.654-.854.039-1.126.048-3.299.048s-2.444-.009-3.298-.048c-2.908-.133-4.52-1.748-4.654-4.654-.039-.853-.048-1.125-.048-3.298 0-2.172.009-2.445.048-3.298.134-2.908 1.748-4.521 4.654-4.653.854-.04 1.125-.049 3.298-.049s2.445.009 3.299.048c2.908.133 4.523 1.751 4.653 4.653.039.854.048 1.127.048 3.299 0 2.173-.009 2.445-.048 3.298z"/></svg>');
}
#p-navigation #n-Facebook {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2367ad42" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3 7h-1.924c-.615 0-1.076.252-1.076.889v1.111h3l-.238 3h-2.762v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z"/></svg>');
}
/* Hide Discord link under community */
#p-Community-list #n-Discord-Server {
	display: none;
}
	
/*==================================================
  HEADER
==================================================*/

/* Header background color */
#mw-header-container, #mw-header-nav-hack {
	background: var(--th-color-secondary);
}

/* Ensure OOUI popups/dropdowns are at the top */
.mw-echo-ui-overlay {
	z-index: 999;
}

/* Fix search suggestions placement at small resolutions */
@media (max-width: 832px) {
	.suggestions {
		z-index: 100;
		margin-top: 50px;
	}
}

/* Search bar */
#p-search {
	border-radius: 5px;
	border: 2px solid #979a94;
}
#simpleSearch {
	border: 0px;
	border-radius: 5px;
}
/* Shorten and center search bar on desktop */
@media screen and (min-width: 1100px) {
	#mw-header #p-search {
		margin: 0 auto;
		width: 40%;
	}
}

/* Darken icons to contrast better with background */
@media (min-width: 851px) and (max-width: 1099px) {
	#mw-site-navigation h2::after, #mw-related-navigation h2::after {
		filter: brightness(60%);
	}
}
@media (max-width: 850px) {
	#site-tools h2, #site-navigation h2 {
		filter: brightness(60%);
	}
}
#mw-header h2 {
	filter: brightness(60%);
}

/* Account dropdown stylings */
#personal-inner {
	padding: 5px !important;
	background-color: var(--th-color-tertiary) !important;
	border: solid var(--th-color-primary) 2px !important;
	border-radius: 10px !important;
}
@media screen and (min-width: 833px) {
	#personal h2 {
		font-family: Coustard, Linux Libertine, Georgia, Times, serif;
		color: #424f57;
	}
}
.mw-portlet-body {
	padding: 0px 10px !important;
}

/* Hide default lines under header */
.color-left, .color-right, .color-middle {
	height: 0em;
}

/* Add color outline */
#mw-header-container {
	outline: 4px solid var(--th-color-primary);
	margin-bottom: 3px;
}

/* Dropdown stylings on tablet */
.sidebar-chunk h2 span {
	color: #424f57 !important;
	filter: brightness(0.6);
}
#mw-related-navigation .sidebar-chunk h2, #mw-site-navigation .sidebar-chunk h2 {
	font-family: Coustard, Linux Libertine, Georgia, Times, serif;
	font-weight: 200;
	color: #3e6828;
}
/* Dropdown stylings on mobile and tablet */
@media screen and (max-width: 1099px) {
	.sidebar-inner {
		padding: 5px !important;
		background-color: var(--th-color-tertiary) !important;
		border: solid var(--th-color-primary) 2px !important;
		border-radius: 10px !important;
		min-width: 175px !important;
	}
}

#mw-header-hack {
	position: absolute;
}
#mw-header-hack, #mw-header-nav-hack {
	box-shadow: none !important;
}
#mw-header-nav-hack > .color-bar {
	margin-top: 3em;
}
/* Add image decoration underneath header */
#mw-header-hack.color-bar {
	background-image: url(https://dodo.ac/np/images/3/3e/Nookipedia_-_Grass_Banner_-_Spring.png);
	background-color: transparent;
	background-repeat: repeat-x;
	height: 50px;
}
/* Tablet adjustments for image decoration */
@media screen and (min-width: 850px) and (max-width: 1099px) {
	#mw-header-hack {
		background-position: 0px 39px;
		height: 90px !important;
	}
}

/*==================================================
  DESKTOP SIDEBAR
==================================================*/

/* Clear background and border */
#mw-site-navigation {
	background: none;
	border: none;
	box-shadow: none;
}

@media screen and (min-width: 1100px) {
	/* Sidebar padding on desktop */
	#mw-site-navigation {
		padding-top: 35px;
	}
	/* Style sidebar chunks on desktop */
	.sidebar-chunk {
		padding: 5px !important;
		background-color: var(--th-color-tertiary) !important;
		border: solid var(--th-color-primary) 2px !important;
		border-radius: 10px !important;
	}
}

@media screen and (min-width: 1340px) {
	/* Move related-nav down 50px in right sidebar */
	#mw-related-navigation {
		padding-top: 50px;
	}
	/* Fix for margin issue caused by merging right sidebar with left */
	.sidebar-chunk {
		margin-bottom: 0 !important;
	}
}

/*==================================================
  CONTENT
==================================================*/

#mw-content {
	background-color: var(--th-color-tertiary);
	padding-top: 60px;
	border: 0;
	box-shadow: none;
}

/* Font spacing adjustment to match Vector */
.mw-body-content {
	line-height: 1.6;
}

/* Page title line color and thickness */
#firstHeading {
	border-bottom: solid 2px #A2A9B1;
}

/* Adjust font family on headers and lists */
.mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
	font-weight: bold;
	font-family: sans-serif;
}
.mw-body h3 {
	font-size: 1.2em;
}
.mw-body h4, .mw-body h5, .mw-body h6 {
    font-size: 1.0em;
}
.mw-body dt {
	font-family: sans-serif;
}
.mw-body dd {
    margin-bottom: 0.01em;
}

/* Hide "From Nookipedia" subline */
#siteSub {
	display: none;
}

/* Set section header line color and thickness */
.mw-parser-output h2 {
	border-bottom: solid 2px #A2A9B1;
}

/* Background color for code text box */
pre, .mw-code {
	background-color: #F8F9FA;
}

/* Border collapse to separate (Timeless sets this to collapse by default) */
table {
	border-collapse: separate;
	border-spacing: revert;
}

/* Remove background, border and shadows for SiteNotice container */
.mw-dismissable-notice, #localNotice {
	background: none;
	border-style: none;
	box-shadow: none;
}

/* Fonts for page and section headings */
.mw-body h1, .mw-body h2 {
	font-family: Coustard, Linux Libertine, Georgia, Times, serif;
	text-shadow: 0 1px var(--th-color-shadow);
	color: var(--th-color-primary);
	overflow: visible;
}

/* TOC adjustments */
.mw-body .mw-parser-output h2 {
    border-bottom: 0;
    font-family: 'Coustard';
}

.toc {
	background-color: var(--th-img-thumbnail);
	border: none;
	border-radius: 10px;
	box-shadow: none;
}

/* Image thumbnail adjustments */
.thumbinner {
	background-color: var(--th-img-thumbnail);
	border: none;
	border-radius: 10px;
	box-shadow: none;
}

.thumbinner .thumbimage {
	border: none;
	border-radius: 5px;
}

.topicon {
	right:30px;
	position: absolute;
	top: 6em;
	display: block !important;
}

/*==================================================
  FOOTER
==================================================*/

#mw-footer-container {
	background-color: var(--th-color-tertiary);
	background-image: var(--th-nookipedia-footer);
	background-position: left bottom;
	background-repeat: var(--th-nookipedia-footer-repeat, repeat-x);
	color: black;
	padding: 10px 20px 120px;
	margin: 0;
	box-shadow: none;
	border: none;
}

/* Change footer text color from default white */
#mw-footer-container a, #mw-footer-container a:visited {
	color: #0088dd;
}
#mw-footer-container a:hover {
	color: #006699;
}

/* Footer adjustments on mobile */
@media (max-width: 832px) {
	/* Hide "Creative Commons" and "Powered by MediaWiki" icons */		
	#f-copyrightico, #f-poweredbyico {
		display: none;
	}
}
@media (max-width: 406px) {
	/* Block display on very narrow screens */
    #mw-footer .footer-places li {
        display: block;
        padding-right: 1em;
    }
}

/*==================================================
  MOVE CATEGORIES TO BOTTOM
==================================================*/

#catlinks-sidebar { display: none; }

#catlinks {
	display: inherit !important;
	border-top: 3px solid #cccccc;
	padding-bottom: 2em;
    margin: 0 2em;
    padding: 1em 0 1em;
}
#catlinks.catlinks-allhidden {
	border-top: 0;
}

#content-bottom-stuff {
		background-color: var(--th-color-tertiary);
}
@media screen and (min-width: 1100px) {
	#content-bottom-stuff {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
}

/* Adjust padding and borders on mobile/tablet */
@media screen and (max-width: 1099px) {
	.catlinks li {
		border-left: 1px solid #a2a9b1 !important;
	}
	.catlinks li:first-child {
		padding-left: 0.25em !important;
		border-left: 0 !important;
	}
}

/*==================================================
  SPECIAL PAGE ADJUSTMENTS
==================================================*/

.mw-changeslist-line {
	padding: 2px 0px;
}

.mw-notification-area {
	padding-top: 46px;
}

/*==================================================
  SEASONAL THEME ADJUSTMENTS
==================================================*/

#mw-header-hack.color-bar {
    background-image: var(--th-leaves);
}

#mw-content-container {
    background: var(--th-background);
}

.mw-wiki-logo {
    background-image: var(--th-logo);
    background-size: 154px auto;
}

#mw-site-navigation .sidebar-chunk ul, #mw-site-navigation .sidebar-chunk li, #personal .dropdown ul, #personal .dropdown li, #mw-related-navigation .sidebar-chunk ul, #mw-related-navigation .sidebar-chunk li {
    list-style: var(--th-list);
    list-style-position: inside;
}

#p-navigation #n-Discord {
	background-image: var(--th-discord-sidebar);
}
#p-navigation #n-Twitter {
	background-image: var(--th-twitter-sidebar);
}
#p-navigation #n-Instagram {
	background-image: var(--th-instagram-sidebar);
}
#p-navigation #n-Facebook {
	background-image: var(--th-facebook-sidebar);
}

#p-logo-text {
	background-image: var(--th-nookipedia-text);
}

.nookipedia-logo {
    background-image: var(--th-nookipedia-text-main-page);
}

.mw-body li.gallerybox div.thumb {
	background-color: var(--th-img-thumbnail);
}

.social-icon-discord {
    background-image: var(--th-discord);
}

.social-icon-twitter {
    background-image: var(--th-twitter);
}

.social-icon-instagram {
    background-image: var(--th-instagram);
}

.social-icon-facebook {
    background-image: var(--th-facebook);
}