MediaWiki:Common.css

/* CSS placed here will be applied to the all skins NOTE: Common.css only affects desktop, and not mobile, as a separate one exists at FandomMobile.css */

/* Imports */ @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:InterlanguageIcons.css|MediaWiki:Infobox.css|MediaWiki:Themes.css|MediaWiki:Highlights.css|MediaWiki:Mainpage.css");

/* Color presets (Current theme: Default blue) LIGHT THEME Body background color / var(--theme-body-background-color)                       #2d36ea Page background color / var(--theme-page-background-color)                       #ffffff Secondary page background color / var(--theme-page-background-color--secondary)  #f2f2f2 Border color / var(--theme-border-color)                                         #cecece Link color / var(--theme-link-color)                                             #2d36ea Accent color / var(--theme-accent-color)                                         #2d36ea Sticky nav / var(--theme-sticky-nav-background-color)                            #2d36ea -  DARK THEME Body background color / var(--theme-body-background-color)                       #1d2288 Page background color / var(--theme-page-background-color)                       #0c0f4b Secondary page background color / var(--theme-page-background-color--secondary)  #303366 Border color / var(--theme-border-color)                                         #434572 Link color / var(--theme-link-color)                                             #6ec1f0 Accent color / var(--theme-accent-color)                                         #4951ed Sticky nav / var(--theme-sticky-nav-background-color)                            #2d36ea */

/* Variables by skin */ .theme-fandomdesktop-light { /* Light theme only */ --general-bg-color: #f9f9f9; --border-color: #aaa; --border-color--rgb: 170, 170, 170; --theme-infobox-background-color--1: #f9f9f9; --theme-infobox-background-color--2: #f0f0f0; --navbox-bg-color: white; --navbox-title-color: #CCF; --navbox-header-color: #DDF; --navbox-alt-color: #F7F7F7; --navbox-border-color: #AAA; } .theme-fandomdesktop-dark { /* Dark theme only */ --general-bg-color: var(--theme-page-background-color--secondary); --border-color: var(--theme-border-color); --border-color--rgb: var(--theme-border-color--rgb); --theme-infobox-background-color--1: #25275e; --theme-infobox-background-color--2: #3c3f70; --navbox-bg-color: var(--theme-page-background-color); --navbox-title-color: rgba(var(--theme-accent-color--rgb, rgb(102, 102, 102)), 0.5); --navbox-header-color: rgba(var(--theme-accent-color--rgb, rgb(102, 102, 102)), 0.3); --navbox-alt-color: rgba(var(--theme-accent-color--rgb, rgb(85, 85, 85)), 0.1); --navbox-border-color: var(--theme-border-color); }

/* Mark redirects in Special:Allpages and Special:Watchlist */ .allpagesredirect { font-style: italic; } .allpagesredirect:after { color: #808080; content: " (redirect)" } .watchlistredir { font-style: italic; }

/******************* * Navboxes *******************/ .navbox { width: 100%; background: var(--navbox-bg-color, white); margin: 1em auto; font-size: 84%; clear: both; padding: 2px; border-spacing: 0; border: 1px solid var(--navbox-border-color, #AAA); }

/* Merges navboxes that are directly under eachother */ .navbox + .navbox { margin-top: -11px; }

.navbox .navbox-title { background: var(--navbox-title-color, #CCF); font-weight: bold; }

.navbox .navbox-vde { float:left; width:65px; }

.navbox .navbox-title-padright { padding-right: 65px; }

.navbox .navbox-title-padleft { padding-left: 65px; }

.navbox .navbox-subgroup { border-spacing: 0; width: 100%; }

.navbox .navbox-gutter { height: 2px; }

.navbox .navbox-subgroup .navbox-gutter { background: var(--navbox-bg-color, white); }

.navbox .navbox-section-row > td { padding: 0; height: 100%; }

.navbox .navbox-section { width: 100%; border-spacing: 0; }

.navbox .navbox-above, .navbox .navbox-below { background: var(--navbox-header-color, #DDF); text-align: center; }

.navbox .navbox-image { background: var(--navbox-bg-color, white); text-align: center; }

.navbox .navbox-group, .navbox .navbox-header { background: var(--navbox-header-color, #DDF); font-weight: bold; height: 100%; padding: 2px 4px; }

.navbox .navbox-header-collapsible { padding-left: 65px; }

.navbox .navbox-group { text-align: right; padding-left: 1em; padding-right: 1em; white-space: nowrap; }

.navbox .navbox-group, .navbox .navbox-image-left { border-right: 2px solid var(--navbox-bg-color, white); }

.navbox .navbox-image-right { border-left: 2px solid var(--navbox-bg-color, white); }

.navbox .navbox-list { background: var(--navbox-bg-color, white); width: 100%; height: 100%; padding: 0; }

.navbox .alt > .navbox-list { background: var(--navbox-alt-color, #F7F7F7); }

.navbox .navbox-list div { padding: 0px 4px; }

.navbox .navbox-list.no-group { text-align: center; padding-top: 2px; padding-bottom: 2px; }

.navbox .mw-collapsible-toggle { width: 65px; }

/* Make links colored when custom colored links is turned on (via "|bodyclass=navbox-colored-links") */ .navbox.navbox-colored-links .mw-collapsible-toggle a, .navbox.navbox-colored-links .navbox-vde a, .navbox.navbox-colored-links .navbox-title a, .navbox.navbox-colored-links .navbox-group a, .navbox.navbox-colored-links .navbox-header a, .navbox.navbox-colored-links .navbox-above a, .navbox.navbox-colored-links .navbox-below a, /* Make sure that the colored links also apply when such classes are only applied to elements) */ .navbox .navbox-title.navbox-colored-links a, .navbox .navbox-title.navbox-colored-links .navbox-vde a, .navbox .navbox-title.navbox-colored-links .mw-collapsible-toggle a, .navbox .navbox-group.navbox-colored-links a, .navbox .navbox-header.navbox-colored-links a, .navbox .navbox-above.navbox-colored-links a, .navbox .navbox-below.navbox-colored-links a {   color: inherit; }

/* hlist */ .hlist ul { margin: 0; list-style: none; }

.hlist li, .hlist ul ul { display: inline; }

.hlist li a { white-space: nowrap; }

.hlist ul ul:before { content: "(" }

.hlist ul ul:after { content: ")" }

.hlist li:after { content: " • "; }

.hlist ul ul li:after { content: " • "; }

.hlist li:last-child:after, .hlist ul ul li:last-child:after { content: none; }

/* plainlist */ .plainlist ol, .plainlist ul { line-height: inherit; list-style: none; margin: 0; padding: 0; /* Reset Minerva default */ }

.plainlist ol li, .plainlist ul li { margin-bottom: 0; }

/* Make the list of references smaller */ ol.references { font-size: 90%; margin-bottom: 0.5em; }

/* Hatnotes and disambiguation notices */ .hatnote { font-style: italic; } .hatnote i { font-style: normal; } div.hatnote { padding-left: 1.6em; margin-bottom: 0.5em; } div.hatnote + div.hatnote { margin-top: -0.5em; }

/** * CSS for Module:Documentation and Template:Documentation */

/** * ====================== * Template documentation * ====================== */ .template-documentation { border: 1px solid var(--border-color); margin: 1em 0; clear: both; background-color: #ecfcf4; }

.template-documentation .template-documentation-header { padding: 1em; border-bottom: 1px solid var(--border-color); }

.template-documentation .template-documentation-langs { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; padding-bottom: 0.5em; border-top: 1px solid var(--border-color); }

.template-documentation .template-documentation-langs li { margin: 0 0 0 1em; padding: 0.5em 0 0; }

.template-documentation .template-documentation-langs li.selected { order: -1; }

.template-documentation .template-documentation-langs li.selected a { color: black; font-weight: bold; }

.template-documentation .template-documentation-content { overflow-y: auto; padding: 1em; }

.template-documentation .template-documentation-footer { border-top: 1px solid var(--border-color); font-size: 100%; padding: .5em 1em; text-align: right; }

/* */ .jTemplate { font-weight: normal; font-style: normal; } .jTemplate .romaji { font-style: italic; } .jTemplate .lit:before { content: '“'; } .jTemplate .lit:after { content: '”'; } .jTemplate .help { font-size: 9px; font-weight: bold; line-height: 0; vertical-align: super; }

/*http://codepen.io/agasthyanavaneeth/pen/nvgCz.css*/ dl.transcript_dialogue dd { display: inline; }

dl.transcript_dialogue dd:after { content: ''; display: block; }

dl.transcript_dialogue dt { display: inline-block; min-width: 100px; }

dt.transcript_author { text-align: right; } dt.transcript_quote { color: blue; }

/* Expand hover - from SMTOWN Wiki */ .portal img { opacity: 1; filter: alpha(opacity=100); transition: all 0.5s ease; }

.portal img:hover { opacity: 1; filter: alpha(opacity=100); transform: scale(1.10); }

/* Icons style */ /* Add tiny bit of padding between the Eras icons and the Edit button dropdown */ /* Spacing for Top icons */ vertical-align: middle; margin: 8px 5px 0 5px; } .skin-fandomdesktop #icons { margin-right: 5px; } /* "printable version" tweaks */ @media print { /* tweaks for title-messing templates */ #icons { display: none!important; visibility: hidden !important } }
 * 1) icons { padding-bottom: 2px; }
 * 1) icons img {

/* Code and pre tags */ code, .code { background-color: var(--general-bg-color); border: 1px solid var(--theme-infobox-background-color--2); color: inherit; padding: 1px 4px; font-family: monospace; } .page-content pre, .pre { background-color: var(--general-bg-color); border: 1px solid var(--theme-infobox-background-color--2); } /* Dark theme consistency */ .theme-fandomdesktop-dark .mw-content-ltr.mw-highlight-lines pre, .theme-fandomdesktop-dark .mw-content-ltr.content .mw-highlight-lines pre { box-shadow: inset 2.75em 0 0 var(--theme-infobox-background-color--2); } .theme-fandomdesktop-dark .mw-content-rtl.mw-highlight-lines pre, .theme-fandomdesktop-dark .mw-content-rtl.content .mw-highlight-lines pre { box-shadow: inset -2.75em 0 0 var(--theme-infobox-background-color--2); } .theme-fandomdesktop-dark .mw-highlight .linenos { color: var(--theme-page-text-color--hover); } .theme-fandomdesktop-dark .mw-highlight a:hover .linenos, .theme-fandomdesktop-dark .mw-highlight .hll a .linenos { color: var(--theme-page-text-color); }

/* Horizontally aligned TOCs */ .hlist.toc:not(.sticky-toc) ul, .hlist .toc:not(.sticky-toc) ul { max-width: none; padding-left: 12px; } .hlist.toc:not(.sticky-toc) ul li, .hlist .toc:not(.sticky-toc) ul li { margin-left: 0; } .hlist.toc:not(.sticky-toc) ul li a, .hlist .toc:not(.sticky-toc) ul li a { display: inline; } .hlist.toc:not(.sticky-toc) li li:first-child:before, .hlist .toc:not(.sticky-toc) li li:first-child:before { content: "("; } .hlist.toc:not(.sticky-toc) li li:last-child:after, .hlist .toc:not(.sticky-toc) li li:last-child:after {	content: ")"; }

/* Message boxes */ .mbox { --type-important: rgba(200, 0, 0, 0.8); --type-moderate: rgba(233, 124, 47, 0.8); --type-minor: rgba(241, 197, 37, 0.8); display: flex; position: relative; background-color: var(--general-bg-color); border: 1px solid var(--border-color); border-left: 10px solid var(--border-color); min-height: 32px; margin-bottom: 5px; line-height: 1.5; }

.mbox.mbox-type-important { border-left-color: var(--type-important); }

.mbox.mbox-type-moderate { border-left-color: var(--type-moderate); }

.mbox.mbox-type-minor { border-left-color: var(--type-minor); }

.mbox__content { display: table; box-sizing: border-box; width: 100%; padding: 8px 15px; }

.mbox__content__image { display: table-cell; width: 40px; height: 100%; text-align: center; vertical-align: middle; padding-right: 15px; }

.mbox__content__wrapper { display: table-cell; vertical-align: middle; }

.mbox__content__header { display: block; font-size: 20px; font-weight: bold; }

.mbox__content__text { display: block; font-size: 14px; }

.mbox__content__text__comment { font-size: 12px; }

.mbox__content__aside { display: table-cell; width: 100px; vertical-align: middle; text-align: center; padding-left: 15px; } /* Close not needed .mbox__close { position: absolute; right: 0; top: 0; padding: 2px 7px; font-weight: bold; font-size: 16px; color: #fff; cursor: pointer; transition: all .15s ease-in; }

.mbox__close:hover { color: #ccc; }

.mbox__close:after { content: '×'; }

.mw-collapsed + .mbox__close { transform: rotate(45deg); padding: 4px 7px 5px 2px; }

/* Multiple issues */ .mbox.mbox-type-multiissues .mbox { border: none; border-collapse: collapse; background-color: transparent; margin: 0 0 -7px 1.6em; width: auto; } .mbox.mbox-type-multiissues .mbox__content__text .mbox__content__text { display: list-item; line-height: 1.5; list-style-type: disc; } .mbox.mbox-type-multiissues .mbox__content__header { font-size: 12px; } .mbox.mbox-type-multiissues .mbox__content__text .mbox__content { padding: 0; } .mbox.mbox-type-multiissues .mbox__content__text .mbox__content__header, .mbox.mbox-type-multiissues .mbox__content__text .mbox__content__image, .mbox.mbox-type-multiissues .mbox__content__text .mbox__content__text__comment, .mbox.mbox-type-multiissues .mbox__content__text .mbox__close { display: none; }

/* Fanon notice */ .fanon-notice { box-sizing: border-box; background-color: var(--general-bg-color); border: 1px solid var(--border-color); margin-bottom: 12px; padding: 12px 24px; word-wrap: break-word; overflow-wrap: break-word; overflow: hidden; }

/* Dark theme images */ .theme-fandomdesktop-dark .mbox img[data-image-name="Info icon.png"] { filter: invert(1); }

/* Remove weird extra spacing on paragraphs */ .page-content p { margin: 5px 0 8px; } /* The above are not enough to fix extra paragraph spacing, so this should do it */ .page-content p + p { margin-top: 8px; } /* Apply it also on the page header */ .page-header { margin-bottom: 5px; } /* As well as the lists */ .page-content ul, /* Bulleted lists - * */ .page-content ol /* Numbered lists - # */ { margin: 6px 0 2px 36px; } .page-content dl /* Description lists - ; */ { margin: 8px 0; } /* Even the Table of Contents */ .page-content .toc { margin: 12px auto 12px 0; } /* Even the headings as well */ .page-content h1, .page-content h2 { margin: 18px 0 9px; } .page-content h3, .page-content h4, .page-content h5, .page-content h6 { margin: 16px 0 8px; } /* Make h6 slightly smaller than h5 */ .page-content h5 { font-size: 14px; } .page-content h6 { font-size: 13px; }

/* Bold page title */ .page-header__title { font-weight: 500; }

/* Table of Contents (TOC) tweaks) */ .page-content .toc {	background-color: var(--general-bg-color); } /* A much more visible border color for emphasis */ .page-content .toc, .page-content .toc .toctitle {	border-color: var(--border-color); } /* Table of Contents template specifications */ /** **/ .tocright .toc {	float: right;	clear: right;	margin: 12px 0 12px 12px; } /**  **/ .tocleft .toc {	float: left;	clear: left;	margin: 12px 12px 12px 0; } /**  **/ .toclimit-2 .toclevel-1 ul, .toclimit-3 .toclevel-2 ul, .toclimit-4 .toclevel-3 ul, .toclimit-5 .toclevel-4 ul, .toclimit-6 .toclevel-5 ul, .toclimit-7 .toclevel-6 ul {	display: none; } /**  **/

/* Make h1 headings look like page titles (bold also) */ .page-content h1 { font-weight: 500; padding: 6px 0; border-bottom: 1px solid var(--border-color); } /* Fix h2 border color */ .page-content h2 { border-bottom: 1px solid var(--border-color); }

/* Sets links weight from bold to inherit */ .page-content .mw-parser-output a { font-weight: inherit; }

/* Fix hlist and plainlist padding on navboxes */ .page-content .hlist ul, .page-content .shortcutbox.plainlist ol, .page-content .shortcutbox.plainlist ul { margin: 0 0 0 0; }

/* Rail module fix */ .rail-module { border-color: var(--border-color); }

/* Fix redlink problems */ a.new { cursor: pointer; } /* Make the cursor pointer when hovered */ a.new:hover, a.new:focus, a.new:active { text-decoration-style: solid; } /* Solid underlines instead of dashed */

/* Fix abbr on hover and make the cursor show the question mark instead of the text selector */ abbr { cursor: help; }

/* Add invert classes for each light/dark theme on FandomDesktop */ .theme-fandomdesktop-light .invlight img, .theme-fandomdesktop-dark .invdark img { filter: invert(1); }

/* Dark theme fixes */ /* Navboxes */ .theme-fandomdesktop-dark .navbox { border-color: var(--theme-border-color); } .theme-fandomdesktop-dark .navbox, .theme-fandomdesktop-dark .navbox .navbox-subgroup .navbox-gutter, .theme-fandomdesktop-dark .navbox .navbox-image, .theme-fandomdesktop-dark .navbox .navbox-list { background-color: var(--theme-page-background-color); } .theme-fandomdesktop-dark .navbox .navbox-group, .theme-fandomdesktop-dark .navbox .navbox-image-left, .theme-fandomdesktop-dark .navbox .navbox-image-right { border-color: var(--theme-page-background-color); }

.theme-fandomdesktop-dark .navbox .navbox-title { background-color: rgba(0,0,255,.3); }

.theme-fandomdesktop-dark .navbox .navbox-above, .theme-fandomdesktop-dark .navbox .navbox-below, .theme-fandomdesktop-dark .navbox .navbox-group, .theme-fandomdesktop-dark .navbox .navbox-header { background-color: rgba(0,0,255,.2); }

.theme-fandomdesktop-dark .navbox .alt > .navbox-list { background: var(--theme-page-background-color--secondary); }

/* Dark theme bounce image */ .theme-fandomdesktop-dark .bounceme { background-color: transparent; }

/* Dark theme table coloring */ .theme-fandomdesktop-dark .table-yes { background-color: rgba(0,255,0,.3) !important; } .theme-fandomdesktop-dark .table-no { background-color: rgba(255,0,0,.3) !important; } .theme-fandomdesktop-dark .table-no2 { background-color: rgba(0,0,225,.2) !important; } .theme-fandomdesktop-dark .table-na { background-color: rgba(128,128,128,.3) !important; color: #E0E0E0 !important; }

/* Dark theme bg fix */ .theme-fandomdesktop-dark .dark { background-color: var(--theme-page-background-color--secondary) !important; } /* For shortcuts */ .theme-fandomdesktop-dark .shortcutbox.dark { background-color: var(--theme-page-background-color) !important; }

/* Tabs styling */ .topnav-tabs { font-weight: normal; text-align: left; margin: 0 auto 0 0; } .topnav-tabs .topnav-tab { background-color: var(--general-bg-color); min-width: 80px; display: inline-block; padding: 5px 10px; text-align: center; margin-bottom: 5px; font-size: 100%; border: 1px solid var(--border-color); } .topnav-tabs .topnav-tab:not(:last-child) { margin-right: 5px; } .topnav-tabs .topnav-tab.topnav-tab-current { background-color: var(--border-color); }

/* Dark theme fixes for the template */ .theme-fandomdesktop-dark .collapsebox-header { background-color: var(--theme-border-color) !important; } .theme-fandomdesktop-dark .collapsebox-content { border-color: var(--theme-border-color) !important; }

/* Dark theme documentation coloring */ .theme-fandomdesktop-dark .template-documentation { background-color: rgba(0,255,0,.3); }

/* Adds background to galleries */ .wikia-gallery .gallery-image-wrapper.accent { background-color: var(--general-bg-color); border-color: var(--border-color); }

/* Table fixes */ .theme-fandomdesktop-light .wikitable { background-color: var(--general-bg-color); --theme-border-color: var(--border-color); } .theme-fandomdesktop-dark .wikitable { background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)); background-color: var(--theme-page-background-color); } .theme-fandomdesktop-light .wikitable > tr > th, .theme-fandomdesktop-light .wikitable > * > tr > th { background-color: #eaeaea; }

/* Div col - CSS taken from Wikipedia */ .div-col { margin-top: 0.3em; column-width: 30em; }

.div-col-small { font-size: 90%; }

.div-col-rules { column-rule: 1px solid #aaa; }

/* Reset top margin for lists in div col */ .div-col dl, .div-col ol, .div-col ul { margin-top: 0; }

/* Avoid elements breaking between columns See also Template:No col break */ .div-col li, .div-col dd { page-break-inside: avoid; /* Removed from CSS in favor of break-inside c. 2020 */ break-inside: avoid-column; }