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");

/* Variables */ .theme-fandommobile-light { /* Light theme only */ --general-bg-color: #f9f9f9; --border-color: #aaa; } .theme-fandommobile-dark { /* Dark theme only */ --general-bg-color: var(--theme-page-background-color--secondary); --border-color: var(--theme-border-color); }

/* 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; }

/* 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%; }

/* Make the tabs visible */ .topnav-tabs { display: block !important; } /* Tabs styling */ .topnav-tabs { font-weight: normal; text-align: left; margin-bottom: 5px; } .topnav-tabs .topnav-tab { background-color: var(--general-bg-color); min-width: 80px; margin-left: 10px; display: inline-block; padding: 5px 10px; text-align: center; margin-bottom: 0; font-size: 100%; border-bottom: none; border-radius: 10px 10px 0 0; } .topnav-tabs .topnav-tab.topnav-tab-current { background-color: var(--border-color); } .topnav-tabs-bottom { border-bottom: 2px solid var(--border-color); clear: both; }

/* 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; }

/* 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; }

/* Affiliates testing .theme-fandomdesktop-light.page-Animation_Wiki_Affiliates, .theme-fandommobile-light.page-Animation_Wiki_Affiliates { --theme-page-background-color: #c9e6ff; --theme-sticky-nav-background-color: #c9e6ff; --theme-page-background-color--secondary: #bfdbf2; --theme-border-color: #a5bbce; }

/*** Temporary only to promote Disney•Pixar's Elemental ***/ /* Sticky headers */ .theme-fandommobile-light .mobile-community-bar { background-image: linear-gradient(90deg, rgba(255, 0, 0, .5), rgba(255, 90, 0, .5), rgba(255, 154, 0, .5), rgba(28, 163, 236, .5), rgba(35, 137, 218, .5), rgba(34, 139, 34, .5), rgba(76, 187, 23, .5), rgba(127, 0, 255, .5), rgba(93, 63, 211, .5)); } .theme-fandommobile-dark .mobile-community-bar { background-image: linear-gradient(90deg, rgba(255, 0, 0, .75), rgba(255, 90, 0, .75), rgba(255, 154, 0, .75), rgba(28, 163, 236, .75), rgba(35, 137, 218, .75), rgba(34, 139, 34, .75), rgba(76, 187, 23, .75), rgba(127, 0, 255, .75), rgba(93, 63, 211, .75)); }