MediaWiki:FandomMobile.css

/*Imports*/ /** Fonts **/ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); @font-face { font-family: 'Montserrat', sans-serif; } /* End Imports */

/* Article Space & UI */ /** Admin colors **/ /*** Text colors ***/ a[href$=":ElpisGalaxy"], a[href$="/ElpisGalaxy"] { color: #9370DB !important; font-weight: 600 !important;} a[href$=":Loa_Maria"], a[href$="/Loa_Maria"], a[href$=":Loa%20Maria"], a[href$="/Loa%20Maria"] { color: #f36196 !important; font-weight: 600 !important;} a[href$=":SeifukuGirls"], a[href$="/SeifukuGirls"] { color: #f36196 !important; font-weight: 600 !important;} a[href$=":Alexmingtung"], a[href$="/Alexmingtung"] { color: #f36196 !important; font-weight: 600 !important;} a[href$=":D4rkWzd"], a[href$="/D4rkWzd"] { color: #f36196 !important; font-weight: 600 !important;} /*** End Text colors ***/ /*** Profile frame colors ***/ .page-User_ElpisGalaxy div.user-identity-avatar img.user-identity-avatar__image, .page-Message_Wall_ElpisGalaxy div.user-identity-avatar img.user-identity-avatar__image, .page-User_blog_ElpisGalaxy div.user-identity-avatar img.user-identity-avatar__image, .page-Special_Contributions_ElpisGalaxy div.user-identity-avatar img.user-identity-avatar__image, .page-Special_UserProfileActivity_ElpisGalaxy div.user-identity-avatar img.user-identity-avatar__image, img.wds-avatar__image[alt='ElpisGalaxy'], div.EntityHeader_avatar__2TDnq[alt='ElpisGalaxy'] { border-color: #9370DB !important; } .page-User_Loa_Maria div.user-identity-avatar img.user-identity-avatar__image, .page-Message_Wall_Loa_Maria div.user-identity-avatar img.user-identity-avatar__image, .page-User_blog_Loa_Maria div.user-identity-avatar img.user-identity-avatar__image, .page-Special_Contributions_Loa_Maria div.user-identity-avatar img.user-identity-avatar__image, .page-Special_UserProfileActivity_Loa_Maria div.user-identity-avatar img.user-identity-avatar__image, img.wds-avatar__image[alt='Loa Maria'], div.EntityHeader_avatar__2TDnq[alt='Loa Maria'] { border-color: #f36196 !important; } .page-User_SeifukuGirls div.user-identity-avatar img.user-identity-avatar__image, .page-Message_Wall_SeifukuGirls div.user-identity-avatar img.user-identity-avatar__image, .page-User_blog_SeifukuGirls div.user-identity-avatar img.user-identity-avatar__image, .page-Special_Contributions_SeifukuGirls div.user-identity-avatar img.user-identity-avatar__image, .page-Special_UserProfileActivity_SeifukuGirls div.user-identity-avatar img.user-identity-avatar__image, img.wds-avatar__image[alt='SeifukuGirls'], div.EntityHeader_avatar__2TDnq[alt='SeifukuGirls'] { border-color: #f36196 !important; } .page-User_Alexmingtung div.user-identity-avatar img.user-identity-avatar__image, .page-Message_Wall_Alexmingtung div.user-identity-avatar img.user-identity-avatar__image, .page-User_blog_Alexmingtung div.user-identity-avatar img.user-identity-avatar__image, .page-Special_Contributions_Alexmingtung div.user-identity-avatar img.user-identity-avatar__image, .page-Special_UserProfileActivity_Alexmingtung div.user-identity-avatar img.user-identity-avatar__image, img.wds-avatar__image[alt='Alexmingtung'], div.EntityHeader_avatar__2TDnq[alt='Alexmingtung'] { border-color: #f36196 !important; } .page-User_D4rkWzd div.user-identity-avatar img.user-identity-avatar__image, .page-Message_Wall_D4rkWzd div.user-identity-avatar img.user-identity-avatar__image, .page-User_blog_D4rkWzd div.user-identity-avatar img.user-identity-avatar__image, .page-Special_Contributions_D4rkWzd div.user-identity-avatar img.user-identity-avatar__image, .page-Special_UserProfileActivity_D4rkWzd div.user-identity-avatar img.user-identity-avatar__image, img.wds-avatar__image[alt='D4rkWzd'], div.EntityHeader_avatar__2TDnq[alt='D4rkWzd'] { border-color: #f36196 !important; } /*** End Profile frame colors ***/ /** End Admin colors **/ /** Expand-Collapse button appearance in Template:Collapse **/ .collapse-template > .mw-collapsible-toggle a { color: inherit !important; } .collapse-template > .mw-collapsible-toggle { float:none !important; padding: 4px 6px; color: #037ec4; font-weight: bold; } /** End Expand-Collapse **/ /** Maps background color **/ .interactive-maps__map { background-color: #b4dcfc !important; } /** End Maps **/ /** Mobile Infobox **/ /*** Adding accent color to group titles ***/ .pi-header-wrapper { background: var(--theme-accent-color); margin-bottom: 8px; } .pi-group { border-left: 1px solid var(--theme-accent-color) !important; border-right: 1px solid var(--theme-accent-color) !important; margin: 0 !important; padding-top: 0; padding-bottom: 23px !important; } .pi-group:first-of-type > .pi-header-wrapper, .pi-group:first-of-type { border-top-left-radius: 4px; border-top-right-radius: 4px; } .pi-group:first-of-type { border-top: 1px solid var(--theme-accent-color) !important; } .pi-group:last-of-type { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom: 1px solid var(--theme-accent-color) !important; } .pi-group:not(:first-child){ border-top: 0 !important; } .pi-group .pi-item:not(.pi-header) { padding-left: 12px !important; padding-right: 12px !important; } .portable-infobox { border: none !important; padding: 0 !important; margin: 0 !important; } .portable-infobox, .wiki-page-header__hero-image img { border-radius: 4px !important; } .portable-infobox-wrapper > .pi-expand-button { background-color: var(--theme-accent-color); color: inherit !important; border: none !important; } .portable-infobox[aria-expanded="true"] { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /*** End Adding accent color***/ /*** Standalone caption styling ***/ .pi-item[data-source=caption] > div { line-height: 1.75; font-size: 14px; word-wrap: break-word; } .pi-item[data-source=caption] { text-align: center; font-family: 'Montserrat'; color: rgba(var(--theme-page-text-color--rgb),.6); font-weight: 500; font-style: italic; display: block; border-radius: 4px; border: 1px solid rgba(var(--theme-accent-color--rgb),.5); } /*** End Standalone caption ***/ /** End Mobile Infobox **/ /**Removing icon overlay from recommended articles slideshow at the botton of the page **/ .related-content-items-wrapper > a > div > div { display: none; } /** End recommended articles **/ /** Adding margin after bullet lists to fix bad spacing in discography lists **/ ul, ol { margin-bottom: 1.125rem; } /** End Spacing Fix */ /** Fixing font size in infobox fields with linebreaks **/ .pi-data-value > p, .pi-data-value > p > a { font-size: 14px !important; } /** End infobox font fix **/ /** Adding wiki logo in mobile community bar **/ .mobile-community-bar__sitename > a::before { background-image: url("https://static.wikia.nocookie.net/jpop/images/8/89/Wiki-wordmark.png"); width: 28px; height: 16px; background-size: 16px 16px; background-repeat: no-repeat; content: ""; transform: scale(1.9); background-position: 30% 0%; display: inline-block; } .mobile-community-bar__sitename { overflow: visible; } /** End community bar **/ /* End Article Space & UI */

/* Front Page */ /** Headings **/ .heading-a { text-align: center; overflow: auto !important; padding: 14px !important; margin: 10px 0 10px 0 !important; border-width: 1px !important; font-family: Montserrat !important; font-weight: 500 !important; font-size: 24px !important; border-radius: 0 !important; line-height: 26px; } .heading-b { text-align: center; overflow: auto !important; padding: 5px !important; margin: 10px 0 5px 0 !important; border-width: 0.5px !important; font-family: Montserrat !important; font-weight: 500 !important; font-size: 18px !important; border-radius: 0 !important; line-height: 20px; } .mobile-main-page h2 { background-color: var(--theme-accent-color) !important; padding: 12px 4px !important; font-family: 'Montserrat' !important; text-align: center !important; } .mobile-main-page h2 > .chevron-wrapper, .mobile-main-page h2 > .section-edit-link, .mobile-main-page h2 > .vertical-separator { display: none !important; } /** End Headings **/ /** Flexbox Grid **/ .flexGrid { display: flex; flex-wrap: wrap; justify-content: center; } .flexGrid > div{ margin: 1px; } /** End Flexbox Grid **/ /** Template:Infocard **/ .infocard-mobile > .article-table-wrapper, .infocard-mobile > .article-table-wrapper tr:not(:last-of-type), .infocard-mobile > .article-table-wrapper tr>th { border-color: var(--theme-accent-color) !important; border-radius: 4px; } .infocard-mobile-titlecell { padding:2px !important; border-radius: 0 !important; } .infocard-mobile-title { font-size: 1.4em !important; overflow: auto; padding: 1px !important; margin-bottom: 0 !important; text-align: center !important; font-family: Montserrat !important; font-weight: 500; } .infocard-mobile-image > figure > a > img { max-height: 400px; } /** End Template:Infocard/mobile **/ /** Template:Imagebox **/ .imagebox { height: 180px; width: 180px; position: relative; display: inline-block; } .imagebox-inner-1 { position: absolute; height: 100%; width: 100%; overflow: hidden; } .imagebox-inner-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 180px; overflow: hidden; } .imagebox-caption { background-color: rgba(0,0,0,0.5); position: absolute; bottom: 0; font-size: 10px; color: white; width: 180px; z-index: 3; font-family: Montserrat; font-weight: 500; } .imagebox-caption > p { text-align: center; margin: 5px 0; font-size: 12px; } .imagebox-caption > p > b > a { color:#fff; } .imagebox-inner-2 > figure > a > img { border: none !important; border-radius: 0 !important; } .imagebox-image { max-width: none; } /** End Template:Imagebox **/ /** Template:Imagebox/alt **/ .imagebox-alt { height: 135px; width: 240px; position: relative; display: inline-block; } .imagebox-alt-inner-1 { position: absolute; height: 100%; width: 100%; overflow: hidden; } .imagebox-alt-inner-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 135px; width: 240px; overflow: hidden; } .imagebox-alt-caption { width: 240px; } .imagebox-alt-caption > p { text-align: center; margin-bottom: 10px; font-size: 15px; font-weight: 400; line-height: 18px; } .imagebox-alt-caption > p > a { color: inherit; } .imagebox-alt-inner-2 > figure > a > img { border: none !important; border-radius: 0 !important; } /** End Template:Imagebox/alt **/ /** 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; } /** End Hide default mobile main page**/ /** Wider main page area **/ .mobile-hidden > #mw-content-text { padding: 0; } /** End wider front page **/ /** Better Fandom Stats **/ .mobile-hidden { margin-top: 5px !important; } .fandom-stats-item { padding-bottom: 0 !important; } .fandom-stats-container { margin-bottom: 10px !important; border-bottom: 1px solid var(--theme-border-color) !important; } /** End Fandom Stats **/ /** Wiki title at front page above logo */ .wiki-title { font-size: 24px !important; font-weight: 400 !important; margin-bottom: 20px !important; } /** End Wiki title**/ /** Template:Birthdays **/ .mainpage-mobileonly-flexGrid dd { margin-left: 24px !important; } .mainpage-mobileonly-flexGrid { display: flex; flex-wrap: wrap; justify-content: space-between !important; margin-bottom: 10px; } .mainpage-mobileonly-flexGrid > div { margin: 0 0 5px 14px; width: 200px; line-height: 22px; } /** End Template:Birthdays **/ /** Recent Music Videos **/ .recent-videos-grid { justify-content: space-around; } .recent-videos-description { width: 220px; } /** End Recent Music Videos **/ /* End Front Page */

/* Utils */ /** Colors that change automatically based on dark/light theme **/ .accent-color { color: var(--theme-accent-color) !important; } .accent-color-bg { background-color: var(--theme-accent-color) !important; } .accent-color-border { border-color: var(--theme-accent-color) !important; } /** End Auto Colors **/ /** Utility classes **/ .text-center { text-align: center; } .text-white { color: white; } .text-justify { padding: 0 20px !important; text-align:justify !important; text-align-last: center !important; text-justify: inter-character !important; } .text-padding { padding-left: 20px; padding-right: 20px; } .display-none { display: none !important; } /** End Utility classes **/ /* End Utils */