MediaWiki:FandomMobile.css

/* CSS placed here will be applied to the mobile interface */

/* Imports */ @import url("/MediaWiki:Mainpage.css?ctype=text/css&action=raw"); @import url("/MediaWiki:Highlights.css?ctype=text/css&action=raw"); @import url("/MediaWiki:InfoboxMobile.css?ctype=text/css&action=raw");

/* Variables */ .theme-fandommobile-light { /* Light theme only */ --general-bg-color: #f9f9f9; --border-color: #aaa; --border-color--rgb: 170, 170, 170; --table-yes: #9EFF9E; --table-no: #FFC7C7; --table-no2: #DDF; --table-na: #ececec; --table-na--text: #2C2C2C; --theme-infobox-background-color--1: #f9f9f9; --theme-infobox-background-color--2: #f0f0f0; } .theme-fandommobile-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); --table-yes: rgba(0,255,0,.3); --table-no: rgba(255,0,0,.3); --table-no2: rgba(0,0,225,.2); --table-na: rgba(128,128,128,.3); --table-na--text: #E0E0E0; --theme-infobox-background-color--1: #25275e; --theme-infobox-background-color--2: #3c3f70; }

/* Code color stuff: use pygments colors (I don't know why these are available on FM but not being used?) - Credit to Genshin Impact Wiki */ .mw-highlight { color: inherit !important; } .mw-highlight .c { color: var(--pygments-c);  } .mw-highlight .k { color: var(--pygments-k);  } .mw-highlight .o { color: var(--pygments-o);  } .mw-highlight .ch { color: var(--pygments-ch); } .mw-highlight .cm { color: var(--pygments-cm); } .mw-highlight .cp { color: var(--pygments-cp); } .mw-highlight .cpf { color: var(--pygments-cpf); } .mw-highlight .c1 { color: var(--pygments-c1); } .mw-highlight .cs { color: var(--pygments-cs); } .mw-highlight .gd { color: var(--pygments-gd); } .mw-highlight .gr { color: var(--pygments-gr); } .mw-highlight .gh { color: var(--pygments-gh); } .mw-highlight .gi { color: var(--pygments-gi); } .mw-highlight .go { color: var(--pygments-go); } .mw-highlight .gp { color: var(--pygments-gp); } .mw-highlight .gu { color: var(--pygments-gu); } .mw-highlight .gt { color: var(--pygments-gt); } .mw-highlight .kc { color: var(--pygments-kc); } .mw-highlight .kd { color: var(--pygments-kd); } .mw-highlight .kn { color: var(--pygments-kn); } .mw-highlight .kp { color: var(--pygments-kp); } .mw-highlight .kr { color: var(--pygments-kr); } .mw-highlight .kt { color: var(--pygments-kt); } .mw-highlight .m { color: var(--pygments-m);  } .mw-highlight .s { color: var(--pygments-s);  } .mw-highlight .na { color: var(--pygments-na); } .mw-highlight .nb { color: var(--pygments-nb); } .mw-highlight .nc { color: var(--pygments-nc); } .mw-highlight .no { color: var(--pygments-no); } .mw-highlight .nd { color: var(--pygments-nd); } .mw-highlight .ni { color: var(--pygments-ni); } .mw-highlight .ne { color: var(--pygments-ne); } .mw-highlight .nf { color: var(--pygments-nf); } .mw-highlight .nl { color: var(--pygments-nl); } .mw-highlight .nn { color: var(--pygments-nn); } .mw-highlight .nt { color: var(--pygments-nt); } .mw-highlight .nv { color: var(--pygments-nv); } .mw-highlight .ow { color: var(--pygments-ow); } .mw-highlight .w { color: var(--pygments-w);  } .mw-highlight .mb { color: var(--pygments-mb); } .mw-highlight .mf { color: var(--pygments-mf); } .mw-highlight .mh { color: var(--pygments-mh); } .mw-highlight .mi { color: var(--pygments-mi); } .mw-highlight .mo { color: var(--pygments-mo); } .mw-highlight .sa { color: var(--pygments-sa); } .mw-highlight .sb { color: var(--pygments-sb); } .mw-highlight .sc { color: var(--pygments-sc); } .mw-highlight .dl { color: var(--pygments-dl); } .mw-highlight .sd { color: var(--pygments-sd); } .mw-highlight .s2 { color: var(--pygments-s2); } .mw-highlight .se { color: var(--pygments-se); } .mw-highlight .sh { color: var(--pygments-sh); } .mw-highlight .si { color: var(--pygments-si); } .mw-highlight .sx { color: var(--pygments-sx); } .mw-highlight .sr { color: var(--pygments-sr); } .mw-highlight .s1 { color: var(--pygments-s1); } .mw-highlight .ss { color: var(--pygments-ss); } .mw-highlight .bp { color: var(--pygments-bp); } .mw-highlight .fm { color: var(--pygments-fm); } .mw-highlight .vc { color: var(--pygments-vc); } .mw-highlight .vg { color: var(--pygments-vg); } .mw-highlight .vi { color: var(--pygments-vi); } .mw-highlight .vm { color: var(--pygments-vm); } .mw-highlight .il { color: var(--pygments-il); }

/* Hatnote styling */ .context-link { padding-left: 10%; padding-bottom: 10px; font-style: italic; }

.context-link i, .hatnote i { font-style: normal; }

.hatnote { background-color: var(--general-bg-color); color: var(--border-color); padding: 0.3em; font-size: 85%; padding-left: 2em; }

.theme-fandommobile-dark .hatnote { color: #7E82B4; }

/* Adding space after last bullet point */
 * not(li) > ul, :not(li) > ol {

margin-bottom: 1.125rem; }

/* Excluding space from tables and infoboxes */ table ul, table ol, .portable-infobox ul, .portable-infobox ol { margin-bottom: 0; }

/* Smaller references */ ol.references { font-size: 90%; }

.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); }

/* Main page CSS for mobile */ /* Hide default mobile main page and display full mobile main page - Credits to Genshin Impact Wiki and Sky: Children of the Light Wiki */ .mobile-main-page__wiki-description, .mobile-main-page__trending-articles, .mobile-main-page__popular-categories, .mobile-main-page .collapsible-section { display: none !important; }

.mobile-main-page .mobile-hidden { display: block !important; }

/* Hide desktop-only elements on mobile view */ .skin-fandommobile .desktoponly { display: none; }

/* Article header */ .article-header { background-color: #2d36ea; margin: 2px 0 10px; border-radius: 6px; padding: 2px; color: white; font-size: 22px; font-weight: 500; text-align: center; }

/* Hide the icons on mobile */ .skin-fandommobile #icons { display: none !important; }

/* Invert certain icons */ .theme-fandommobile-dark .portable-infobox img.article-media-icon[alt="Twitter Icon.png"], /* Twitter (logo is now X) */ .theme-fandommobile-dark .portable-infobox img.article-media-icon[alt="Instagram Icon.png"], /* Instagram */ .theme-fandommobile-dark .portable-infobox img.article-media-icon[alt="Threads Icon.png"] /* Threads */{ filter: invert(1); } /* Dark theme TikTok icon */ .theme-fandommobile-dark .portable-infobox img.article-media-icon[alt="TikTok Icon.png"] { content: url("https://static.wikia.nocookie.net/cartoons/images/9/94/TikTok_Icon_Dark.png/revision/latest/scale-to-width-down/20"); }

/* Table fixes - Imported from Desktop CSS, but optimized for mobile */ .theme-fandommobile-light .wikitable { background-color: var(--general-bg-color); --theme-border-color: var(--border-color); } .theme-fandommobile-dark .wikitable { background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)); background-color: var(--theme-page-background-color); } .theme-fandommobile-light .wikitable > tr > th, .theme-fandommobile-light .wikitable > * > tr > th { background-color: #eaeaea; }

/* Fix inconsistent table border colors in light theme (ex. Grey DeLisle) */ .theme-fandommobile-light .article-table-wrapper { border-color: var(--border-color); }

/* Table coloring */ .table-yes { background-color: var(--table-yes); } .table-no { background-color: var(--table-no); } .table-no2 { background-color: var(--table-no2); } .table-na { background-color: var(--table-na); color: var(--table-na--text); }

/* Remove underlines on tooltips */ abbr { text-decoration: none !important; }

/* Dark theme consistency */ .theme-fandommobile-dark .mw-content-ltr.mw-highlight-lines pre, .theme-fandommobile-dark .mw-content-ltr.content .mw-highlight-lines pre { box-shadow: inset 2.75em 0 0 var(--theme-infobox-background-color--2); } .theme-fandommobile-dark .mw-content-rtl.mw-highlight-lines pre, .theme-fandommobile-dark .mw-content-rtl.content .mw-highlight-lines pre { box-shadow: inset -2.75em 0 0 var(--theme-infobox-background-color--2); } .theme-fandommobile-dark .mw-highlight .linenos { color: var(--theme-page-text-color--hover); } .theme-fandommobile-dark .mw-highlight a:hover .linenos, .theme-fandommobile-dark .mw-highlight .hll a .linenos { color: var(--theme-page-text-color); } .mw-highlight .hll { background-color: rgba(var(--theme-accent-color--rgb),.2); }

/* hlist */ .hlist ul { margin: 0; padding: 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; }

/* Shortcuts */ .shortcutbox { border: 1px solid #aaa; background-color: #fff; padding: 0.3em 0.6em 0.2em 0.6em; margin: 0 auto 1em 0; text-align: center; font-size: 85%; font-weight: bold; width: fit-content; }

.theme-fandommobile-dark .shortcutbox { background-color: var(--theme-page-background-color); }

.shortcutbox-label { display: inline-block; border-bottom: 1px solid #aaa; line-height: 1.5em; font-weight: normal; margin-bottom: .2em; }