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 { | ||
− | |||
position: relative; | position: relative; | ||
visibility: hidden; | visibility: hidden; | ||
− | top: - | + | 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);
}