MediaWiki:FandomMobile.css

/* CSS placed here will be applied to the mobile interface */ @import url("/MediaWiki:InfoboxMobile.css?ctype=text/css&action=raw"); @import url("/MediaWiki:InfoboxColors.css?ctype=text/css&action=raw"); /* 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; }

/* Hide default mobile main page and display full mobile main page */ .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; }

/* Make the page header match the styling on desktop */ .wiki-page-header__title { background: none; font-weight: 500; }

/* Make the bottom sticky notice match the desktop */ .sitenotice-wrapper { border-radius: 10px; padding-left: 32px; } .sitenotice-wrapper:before { width: 16px; background-color: #2d36ea; } .sitenotice-wrapper .sitenotice-wrapper__content .sitenotice, .sitenotice-wrapper .sitenotice-wrapper__content .sitenotice a { font-weight: normal; }

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

/* Make headers match the desktop skin */ .mw-parser-output h1, .mw-parser-output h2 { font-weight: 500; border-bottom: 1px solid var(--theme-border-color); }

/* Reset the font weights of the article body */ .mw-parser-output p, .mw-parser-output ul, .mw-parser-output ol, .pi-data-value { font-weight: normal; }

/* Reduce padding between paragraphs */ .mw-parser-output p { margin-bottom: 1rem; } .mw-parser-output p + p { margin-top: 1rem; }

/* Make the tabs visible */ .topnav-tabs { display: block !important; }

/* Main page CSS for mobile */
 * root {

--mp-box-header-color: white; --mp-box-text-color: white; --mp-header-font: 'Matterhorn', sans-serif; --mp-font: 'Matterhorn', sans-serif; } .theme-fandommobile-light { --mp-header-color: #fa442c; --mp-link-color: #fa442c; --mp-box-color: #fa442c; --mp-box-link-color: #000; } .theme-fandommobile-dark { --mp-header-color: #fa442c; --mp-link-color: #fa442c; --mp-box-color: #fa442c; --mp-box-link-color: #000; }

/* Import custom fonts */ @font-face{ font-family:Matterhorn; font-weight:400; font-style:normal; font-display:swap; src:url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-regular-b6b4f5da5330.eot?#iefix") format("embedded-opentype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-regular-eed88f0756d6.woff") format("woff"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-regular-07d90ea407f5.ttf") format("truetype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-regular-bc3e22ea86d1.svg#Matterhorn") format("svg") } @font-face{ font-family:Matterhorn; font-weight:700; font-style:normal; font-display:swap; src:url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bold-2e320b8c4852.eot?#iefix") format("embedded-opentype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bold-5c32f7bb9baf.woff") format("woff"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bold-9cab245c49d2.ttf") format("truetype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bold-8d475c305607.svg#Matterhorn") format("svg") } @font-face{ font-family:Matterhorn; font-weight:400; font-style:italic; font-display:swap; src:url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-italic-d6a12505a6d6.eot?#iefix") format("embedded-opentype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-italic-567ad2b211ae.woff") format("woff"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-italic-4797f40b854e.ttf") format("truetype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-italic-e74b8d17af78.svg#Matterhorn") format("svg") } @font-face{ font-family:Matterhorn; font-weight:700; font-style:italic; font-display:swap; src:url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bolditalic-bd50ee3457b3.eot?#iefix") format("embedded-opentype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bolditalic-224d3464c358.woff") format("woff"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bolditalic-6ad96f32f9ea.ttf") format("truetype"), url("https://static-mh.content.disney.io/matterhorn/assets/matterhorn/sans/matterhorn-bolditalic-4f5eecbcee78.svg#Matterhorn") format("svg") } @font-face { font-family: 'Waltograph'; /* From Disney Wiki */ src: url('https://vignette.wikia.nocookie.net/disney/images/8/84/Waltograph.ttf') format('truetype'); }

/* ==================================

Elements mainly affecting just the mainpage. ================================= */ /* Credits to Wookieepedia and Harry Potter Wiki, with some modifications */ /** General mainpage qualities **/ .mainpage h1.page-header__title { display:none } .mainpage-wrap { font-family:var(--mp-font); letter-spacing:-0.2px; }

.mainpage-wrap a, .mainpage-wrap a:visited, .mainpage-wrap a:link, .mainpage-wrap a.new, .mainpage-wrap a.new:visited { color:var(--mp-link-color); } .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.new, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.new:visited, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.visited, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a.link, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption { color:var(--mp-link-color); } .mainpage figcaption p.title, .mainpage .article-thumb figcaption { display:none; } .mainpage .article-thumb { margin-top:0px; }

.mainpage .wikia-gallery-item .lightbox-caption { line-height:150%; font-size:14px; background:transparent; } .mainpage-box-explore .gallery .description, .mainpage-box-upcoming .gallery .description, .mainpage-box-books .gallery .description, .mainpage-box-films .gallery .description { font-size:11px; color:#fff; letter-spacing:0; font-weight:normal; } .mainpage .wikia-gallery-item .lightbox-caption .subheader { text-transform:none; letter-spacing:1px; font-family:var(--mp-header-font); font-size:16px; font-weight:600; } /* Basic box qualities */ .mainpage-box-welcome, .mainpage-box-explore, .mainpage-box-upcoming, .mainpage-box-books, .mainpage-box-films { margin: 30px auto 10px auto; width: 90%; } .mainpage-box-wiki { padding:10px 0; }

/* Main declarations for all the left rail headers */ .mainpage-box-welcome .header { text-align:left; font-size:16px; letter-spacing:3px; font-weight:normal; text-transform:uppercase; font-family: var(--mp-header-font); color:var(--mp-header-color); line-height:100%; }

.mainpage-box-explore .header, .mainpage-box-upcoming .header, .mainpage-box-books .header, .mainpage-box-films .header { text-align:left; font-size:18px; letter-spacing:3px; font-weight:normal; text-transform:uppercase; font-family: var(--mp-header-font); color:var(--mp-header-color); line-height:100%; }

.mainpage-box-welcome .top { text-align:left; font-size:24px; letter-spacing:3px; text-transform:uppercase; font-family: var(--mp-header-font); font-weight:400; color:var(--mp-header-color); line-height:100%; line-height:110%; }

.mainpage-box-explore .top, .mainpage-box-upcoming .top, .mainpage-box-books .top, .mainpage-box-films .top { text-align:left; font-size:28px; letter-spacing:3px; text-transform:uppercase; font-family: var(--mp-header-font); font-weight:400; color:var(--mp-header-color); line-height:100%; line-height:110%; }

/* Exceptions for the left rail */

.mainpage-box-welcome .header { font-size:54px; margin-bottom:20px; } .mainpage-box-explore .header { margin-bottom:20px!important; } .mainpage-box-videos .header { margin-bottom:20px; } .mainpage-box-featured-videos .vid2 { margin-top:20px; } .mainpage-box-welcome { margin-top:0; }

/* Broad declarations for the right rail */ .mainpage-box-wiki { padding:10px 0; } .mainpage-box-today, .mainpage-box-contribute, .mainpage-box-news, .mainpage-box-randomcharacter, .mainpage-box-randomposter, .mainpage-box-browse { margin:20px auto; padding:20px 0; }

.mainpage-box-wiki { background:var(--mp-box-color); color:var(--mp-box-text-color); font-size:14px; line-height:150%; text-align:left; padding:20px; margin: 20px auto; } .mainpage-box-wiki a, .mainpage-box-wiki a.visited, .mainpage-box-wiki a.link, .mainpage-box-wiki a.new { color:var(--mp-box-link-color)!important; text-decoration:underline!important; }

.mainpage-box-wiki .header, .mainpage-box-today .header, .mainpage-box-contribute .header, .mainpage-box-news .header, .mainpage-box-randomcharacter .header, .mainpage-box-randomposter .header { font-size:18px; text-align:left; line-height:130%; color:var(--mp-header-color); text-transform:uppercase; letter-spacing:0; font-weight:bold; font-family:var(--mp-header-font); }

.mainpage-box-wiki .top, .mainpage-box-today .top, .mainpage-box-contribute .top, .mainpage-box-news .top, .mainpage-box-randomcharacter .top, .mainpage-box-randomposter .top { text-align:left; font-size:24px; letter-spacing:3px; text-transform:uppercase; font-family: var(--mp-header-font); font-weight:400; color:var(--mp-header-color); line-height:100%; line-height:110%; } .mainpage-box-wiki .top, .mainpage-box-wiki .header { color: var(--mp-box-header-color); }

/* Portability */ @media (max-width: 1024px) { .mainpage-box-wiki, .mainpage-box-today, .mainpage-box-contribute, .mainpage-box-news, .mainpage-box-randomcharacter, .mainpage-box-randomposter { display:inline-block; }    .mainpage-box-wiki .header { line-height:120%; } } /* Mickey head color */ img[data-image-name="Mainpage Mickey Head.svg"] { background: var(--mp-header-color); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("/Special:FilePath/File:Mainpage_Mickey_Head.svg"); mask-image: url("/Special:FilePath/File:Mainpage_Mickey_Head.svg"); object-position: -1000px 1000px; } /* Slider fix */ .mainpage-wrap .fandom-slider .fandom-slider__nav .fandom-slider__nav__caption > div > h2 { font-family: var(--mp-font); letter-spacing: -0.1px; }

/* ==========    ALBUMS ========== */

.book-container, .book-container-comic { -moz-perspective: 1200px; -webkit-perspective: 1200px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -webkit-user-drag: none; user-drag: none; display: block; margin: 0 auto; perspective: 1200px; width: 250px; }

.book-container { width: 250px; }

.book-container-comic { width: 150px; }

.book, .book-comic { -moz-transform-origin: 125px 0; -moz-transform-style: preserve-3d; -moz-transition: 0.75s; -webkit-transform-origin: 125px 0; -webkit-transform-style: preserve-3d; -webkit-transition: 0.75s; box-shadow: 0 2px 4px rgba(227, 109, 118, 0.25); transform-origin: 125px 0; transform-style: preserve-3d; transition: 0.75s; z-index: 5; }

.book:after, .book-comic:after { bottom: 0; content: ""; left: 3px; position: absolute; top: 0; width: 7px; z-index: 20; }

.book:hover { -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); }

.book-comic:hover { -moz-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); }

.book-cover { position: relative; z-index: 10; }

.book-cover img { height: auto; max-width: 100%; vertical-align: bottom; }

.book-spine { background: url(https://i.imgur.com/Mshm8sZ.png); }

.book-spine-comic1 { background: #EF0070; }

.book-spine-comic2 { background: #2F29B0; }

.book-spine-comic3 { background: #7229B0; } .book-spine-comic1, .book-spine-comic2, .book-spine-comic3, .book-spine { -moz-transform-origin: 0; -moz-transform: rotateY(-90deg) translateX(-49px); -webkit-transform-origin: 0; -webkit-transform: rotateY(-90deg) translateX(-49px); background-size: auto 100%; bottom: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); color: #fff; smargin-left: 5px; overflow: hidden; position: absolute; top: 0; transform-origin: 0; z-index: 5; }

.book-spine { transform: rotateY(-90deg) translateX(-30px); width: 30px; }

.book-spine-comic1, .book-spine-comic2, .book-spine-comic3 { transform: rotateY(-90deg) translateX(-20px); width: 20px;d }

.book-spine-comic1 h1, .book-spine-comic2 h1, .book-spine-comic3 h1, .book-spine h1 { -moz-transform-origin: 0; -moz-transform: rotateZ(90deg); -webkit-font-smoothing: antialiased; -webkit-transform-origin: 0; -webkit-transform: rotateZ(90deg); color: #fff; display: block; font-size: 2em; font-weight: normal; left: 39px; opacity: 0.75; position: absolute; text-align: left; text-indent: 43px; text-transform: uppercase; top: 0; transform-origin: 0; transform: rotateZ(90deg); width: 250px; }

.book-spine-comic1:before, .book-spine-comic2:before, .book-spine-comic3:before, .book-spine:before { content: ""; display: block; height: 100%; width: 100%; }

/* Fix centered image even if it is intended to float right */ .mainpage-box-welcome-image, .mainpage-box-welcome-image img { float: right; clear: right; }

/* Dropdown on Mobile */ .mobile-community-bar .wds-dropdown { --wds-dropdown-background-color: var(--theme-page-background-color); } .mobile-community-bar .wds-dropdown__content { border-radius: 10px; border: none; box-shadow: 0 3px 12px 0 rgba(0,0,0,.3); } .mobile-community-bar .wds-dropdown:before { border: none; } .mobile-community-bar .wds-dropdown__content .wds-list.wds-is-linked > li > a:not(.wds-button) { border-radius: 6px; }