FandomMobile.css

MediaWiki page

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Fix mobile era icons for dark theme */
.theme-fandommobile-dark .mobileTopIcons img[src*="OnACanonArticle.png"],
.theme-fandommobile-dark .mobileTopIcons img[src*="OnALegendsArticle.png"],
.theme-fandommobile-dark .portable-infobox-wrapper img[src*="OnACanonArticle.png"],
.theme-fandommobile-dark .portable-infobox-wrapper img[src*="OnALegendsArticle.png"] {
    filter: invert(1) drop-shadow(5px 5px 5px #000);
}

.theme-fandommobile-dark .mobileTopIcons img[src*="GoToLegends.png"],
.theme-fandommobile-dark .mobileTopIcons img[src*="GoToCanon.png"],
.theme-fandommobile-dark .portable-infobox-wrapper img[src*="GoToLegends.png"],
.theme-fandommobile-dark .portable-infobox-wrapper img[src*="GoToCanon.png"] {
    filter: invert(1) drop-shadow(0px 0px 10px rgba(0,0,0,0.7));
}

.theme-fandommobile-light .mobileTopIcons img[src*="OnACanonArticle.png"],
.theme-fandommobile-light .mobileTopIcons img[src*="OnALegendsArticle.png"],
.theme-fandommobile-light .portable-infobox-wrapper img[src*="OnACanonArticle.png"],
.theme-fandommobile-light .portable-infobox-wrapper img[src*="OnALegendsArticle.png"] {
    filter: drop-shadow(5px 5px 5px #0b0b0b);
}

.mobile-search-modal__content a[href*="/Fanon"],
.mobile-search-modal__content a[href*="/Breast"],
.mobile-search-modal__content a[href*="Gaper"],
.mobile-search-modal__content a[href*="gaper"],
.mobile-search-modal__content a[href*="Bingzoid"],
.mobile-search-modal__content a[href*="bingzoid"],
.mobile-search-modal__content a[href*="Jinky"],
.mobile-search-modal__content a[href*="jinky"] { 
    display: none !important;
}

.mobileTopIcons {
    padding-top: 1em;
    margin-top: -2em;
}

#canontab {
	display: none;
}

.mobile-hide, .mhi { display: none; }

/* hiding child items in CardGameSet/SourceContents, and fixing spacing */
.cardgame-cards, .cgct { display: none; }
.mti img, .pnh img { display: none; }
#Sources-collapsible-section ul {
	margin-bottom: 0px !important;
}

/* Making scrollboxes work on mobile */
.scrollbox > tbody > tr > td > div {
	height: 400px;
	width: 100%;
}

/* hiding big images in scrollboxes */
.scrollbox > tbody > tr > td > div > .article-media-thumbnail {
	display: none;
}

/* Slight size adjustment for mobile references */
ol.references {
	font-size: 85%;
}

.portable-infobox .pi-navigation { display: none; }
.portable-infobox .pi-item.pi-title { display: none; }

/* Fixing infobox galleries */
.portable-infobox .pi-image-collection__images-wrapper {
	display: flex !important;
}

.portable-infobox .pi-item.pi-image-collection__image {
	display: flex !important;
	flex-flow: column;
}

.portable-infobox .pi-hero-title-wrapper {
	display: inline !important;
	min-height: 24px;
	text-align: center;
}

.portable-infobox .pi-hero-caption { 
	display: inline !important;
}

/* Infobox spacing fix */
.pi-item-spacing .plainlinks {
	display: none;
}

.pi-data[data-source="caption"] .pi-data-value {
	width: 100%;
	text-align: center;
}

/* Image border styling consistency with desktop */
.article-media-icon.lazyloaded, .article-media-placeholder.lazyloaded {
    border: none;
    border-radius: 1px;
}

.article-media-placeholder {
	border: none;
}

/* centering captions under images */
.article-media-thumbnail figcaption {
	text-align: center !important;
}

.wiki-page-header__hero-image img { 
	width: auto; 
}
.pi .article-media-thumbnail {
    margin: auto;
}

/* Avoid miniscule images */
.article-media-icon, .article-media-placeholder {
	max-width: fit-content;
}

/* Stop cutting off pictures in infoboxes */
.pi-hero > figure {
    margin-top: 12px;
    max-height: calc(40vh);
    max-width: calc(100% - 24px);
}

/* Hatnote styling */
div.context-link {
	font-style: italic;
    border-left: 3px solid var(--theme-accent-color);
    padding: 6px 15px;
    border-radius: 3px;
    background: linear-gradient(145deg,rgba(var(--theme-accent-color--rgb),0.15) 0%,rgba(var(--theme-accent-color--rgb),0) 100%);
    margin: 7px 1;
}

/* Override navbox ban on mobile... and de-uglification */
.navbox {
	display: table !important;
	border: 1px solid var(--theme-accent-color);
}

.sucessionbox th, .sucessionbox td {
	text-align: center !important;
}

.nav1 {
    text-align: center;
}
.nav1 figure {
    width: 100%;
    margin-bottom: 0 !important;
}

/* hiding edit link on navboxes */
.nb2-end {
    display: none;
}

/* Invert colors in darkmode */
.theme-fandommobile-dark .darkmodeinvert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

/* Fixing mobile titles being oversized on mobile */
#forum-tools{
  font-weight:normal;
}

/* Mobile Special:RecentChanges */
.client-js .mw-changeslist ul, .client-js .mw-changeslist table.mw-enhanced-rc {
	margin-left: 1em;
}
.mw-changeslist-line {
	margin-bottom: 0.5em;
	font-size:90%;
}

.theme-fandommobile-dark .mw-plusminus-neg {color: #FF4B4B;}
.theme-fandommobile-dark .mw-plusminus-pos {color: #40c120}

/* Different link color for links to external sites - Light mode, Dark mode */
a.extiw, a.external { color: rgb(51, 102, 187); }
.theme-fandommobile-dark a.extiw, .theme-fandommobile-dark a.external { color: rgb(51, 113, 201); font-weight:400; }

/* AudioButton formatting (yes, it errors, this is for-now intentional) */
a.ext-audiobutton {
	text-decoration: none;
	&[ data-state='play' ]:before {
		content: 'Listen';
	}
	&[ data-state='pause' ]:before {
		content: 'Listen';
	}
	&[ data-state='error' ]:before {
		content: 'Listen';
	}
}

/* Family tree - forces them to partially display, albeit wonky. But as good as can be managed until found otherwise */
.article-table-wrapper div.familytree tr, .article-table-wrapper div.familytree tr > td {
  border: unset;
  padding: 0;
}

.article-table-wrapper div.familytree .family-tree-table-cell {
  margin: 0;
}

.article-table-wrapper div.familytree .family-tree-line-dashed-right {
  border-right: 1px dashed #71A1FC;
}

.article-table-wrapper div.familytree .family-tree-line-dashed-bottom {
  border-bottom: 1px dashed #71A1FC;
}

.article-table-wrapper div.familytree .family-tree-line-solid-right {
  border-right: 1px solid #71A1FC;
}

.article-table-wrapper div.familytree .family-tree-line-solid-bottom {
  border-bottom: 1px solid #71A1FC;
}

.article-table-wrapper div.familytree tr > td.family-tree-element {
  vertical-align: middle;
  padding: 0.2em;
  text-align: center;
}

.theme-fandommobile-light .article-table-wrapper div.familytree tr > td.family-tree-element {
  background-color: #BFE1FF;
}
.theme-fandommobile-dark .article-table-wrapper div.familytree tr > td.family-tree-element {
  background-color: #072953;
}

/* Infobox title under-highlights to reflect [[MediaWiki:InfoboxColors.css]]... but more pastel so they don't burn your eyes. Ignore all the errors... 

  --- everything below this point is character infoboxes
*/
.theme-fandommobile-light .pi-theme-Bureaucrat .pi-header {
  --wds-midlight-color: #C5F3FC;
}
.theme-fandommobile-light .pi-theme-Bounty-hunter .pi-header {
  --wds-midlight-color: #E8E8E8;
}
.theme-fandommobile-light .pi-theme-Bounty-hunter .pi-header {
  --wds-midlight-color: #FFA985;
}
.theme-fandommobile-light .pi-theme-Bounty-hunter .pi-header {
  --wds-midlight-color: #CEFFA1;
}
.theme-fandommobile-light .pi-theme-Bureaucrat .pi-header {
  --wds-midlight-color: #DEC3FA;
}
.theme-fandommobile-light .pi-theme-Bounty-hunter .pi-header {
  --wds-midlight-color: #ACDCFC;
}
.theme-fandommobile-light .pi-theme-CIS .pi-header {
  --wds-midlight-color: #FFA8C2;
}
.theme-fandommobile-light .pi-theme-Confederation .pi-header {
  --wds-midlight-color: #A8FFFF;
}
.theme-fandommobile-light .pi-theme-Corporate .pi-header {
  --wds-midlight-color: #FCBC97;
}
.theme-fandommobile-light .pi-theme-Criminal .pi-header {
  --wds-midlight-color: #FAA79D;
}
.theme-fandommobile-light .pi-theme-Dark-Jedi .pi-header {
  --wds-midlight-color: #D1D1D1;
}
.theme-fandommobile-light .pi-theme-Dathomori .pi-header {
  --wds-midlight-color: #E6C4FF;
}
.theme-fandommobile-light .pi-theme-Eternal-Empire .pi-header {
  --wds-midlight-color: #FCDE9F;
}
.theme-fandommobile-light .pi-theme-First-Order .pi-header {
  --wds-midlight-color: #EBE8E8;
;
}
.theme-fandommobile-light .pi-theme-Galactic-Empire .pi-header {
  --wds-midlight-color: #9CB7F7;
;
}
.theme-fandommobile-light .pi-theme-Galactic-Republic .pi-header {
  --wds-midlight-color: #9CB7F7;
}
.theme-fandommobile-light .pi-theme-GFFA .pi-header {
  --wds-midlight-color: #AEFCC7;
}
.theme-fandommobile-light .pi-theme-Hutt-Cartel .pi-header {
  --wds-midlight-color: #FFE29B;
}
.theme-fandommobile-light .pi-theme-Infinite-Empire .pi-header {
  --wds-midlight-color: #FFAF7A;
}
.theme-fandommobile-light .pi-theme-Je_daii .pi-header {
  --wds-midlight-color: #BCBCBC;
}
.theme-fandommobile-light .pi-theme-Jedi .pi-header {
  --wds-midlight-color: #FFF99A;
}
.theme-fandommobile-light .pi-theme-Mandalorian .pi-header {
  --wds-midlight-color: #C6DEE5;
}
.theme-fandommobile-light .pi-theme-Musician .pi-header {
  --wds-midlight-color: #FFEEAA;
}
.theme-fandommobile-light .pi-theme-New-Republic .pi-header {
  --wds-midlight-color: #B1B9FF;
}
.theme-fandommobile-light .pi-theme-Nihil .pi-header {
  --wds-midlight-color: #C5C3FF;
}
.theme-fandommobile-light .pi-theme-Pet.pi-header {
  --wds-midlight-color: #C9FFAD;
}
.theme-fandommobile-light .pi-theme-Rebel .pi-header {
  --wds-midlight-color: #DCC4FF;
}
.theme-fandommobile-light .pi-theme-Resistance .pi-header {
  --wds-midlight-color: #E7E7E7;
}
.theme-fandommobile-light .pi-theme-Sith .pi-header {
  --wds-midlight-color: #FFC5C5;
}
.theme-fandommobile-light .pi-theme-Sith-Empire .pi-header {
  --wds-midlight-color: #FFC7C7;
}
.theme-fandommobile-light .pi-theme-Yuuzhan-Vong .pi-header {
  --wds-midlight-color: #FFDCA7;
}
.theme-fandommobile-light .pi-theme-Deity .pi-header {
  --wds-midlight-color: #AAAAAA;
}
/* Other Infoboxes
 yes, the errors are expected here too 
 -------------------------------
  */
 .theme-fandommobile-light .pi-theme-Disease .pi-header {
  --wds-midlight-color: #FFC1FF;
}
 .theme-fandommobile-light .pi-theme-Force .pi-header {
  --wds-midlight-color: #CFF7FF;
}
 .theme-fandommobile-light .pi-theme-Course .pi-header {
  --wds-midlight-color: #FFD9CF;
}
 .theme-fandommobile-light .pi-theme-IU-media .pi-header {
  --wds-midlight-color: #FFDEE2;
}
 .theme-fandommobile-light .pi-theme-Language .pi-header {
  --wds-midlight-color: #FFFFC6;
}
 .theme-fandommobile-light .pi-theme-Plant .pi-header {
  --wds-midlight-color: #CAFFC9;
}
 .theme-fandommobile-light .pi-theme-Species .pi-header {
  --wds-midlight-color: #E2E2E2;
}
 .theme-fandommobile-light .pi-theme-Sport .pi-header {
  --wds-midlight-color: #FFE6FF;
}
 .theme-fandommobile-light .pi-theme-Game .pi-header {
  --wds-midlight-color: #FFEBFF;
}
 .theme-fandommobile-light .pi-theme-Tactics .pi-header {
  --wds-midlight-color: #FFD2D2;
}
 .theme-fandommobile-light .pi-theme-Title .pi-header {
  --wds-midlight-color: #D9D9D9;
}
 .theme-fandommobile-light .pi-theme-astro .pi-header {
  --wds-midlight-color: #D1F0FF;
}
 .theme-fandommobile-light .pi-theme-Planet .pi-header {
  --wds-midlight-color: #FFFFD8;
}
 .theme-fandommobile-light .pi-theme-Star .pi-header {
  --wds-midlight-color: #FFDCBA;
}
 .theme-fandommobile-light .pi-theme-Battle .pi-header {
  --wds-midlight-color: #CBDDFF;
}
 .theme-fandommobile-light .pi-theme-Event .pi-header {
  --wds-midlight-color: #DEECFF;
}
 .theme-fandommobile-light .pi-theme-Competition .pi-header {
  --wds-midlight-color: #FFC6D4;
}
 .theme-fandommobile-light .pi-theme-Holiday .pi-header {
  --wds-midlight-color: #C8F0FF;
}
 .theme-fandommobile-light .pi-theme-Year .pi-header {
  --wds-midlight-color: #DAEAFF;
}
 .theme-fandommobile-light .pi-theme-Band .pi-header {
  --wds-midlight-color: #FFF6D2;
}
 .theme-fandommobile-light .pi-theme-Company .pi-header {
  --wds-midlight-color: #E9E9E9;
}
 .theme-fandommobile-light .pi-theme-Family .pi-header {
  --wds-midlight-color: #FFDDDD;
}
 .theme-fandommobile-light .pi-theme-Fleet .pi-header {
  --wds-midlight-color: #D1D1FF;
}
 .theme-fandommobile-light .pi-theme-group .pi-header {
  --wds-midlight-color: #DDDDDD;
}
 .theme-fandommobile-light .pi-theme-City .pi-header {
  --wds-midlight-color: #FFEACC;
}
 .theme-fandommobile-light .pi-theme-Location .pi-header {
  --wds-midlight-color: #CBEEFF;
}
 .theme-fandommobile-light .pi-theme-Racing-track .pi-header {
  --wds-midlight-color: #F0D2FF;
}
 .theme-fandommobile-light .pi-theme-Structure .pi-header {
  --wds-midlight-color: #FFEFD8;
}
 .theme-fandommobile-light .pi-theme-Store .pi-header {
  --wds-midlight-color: #F1FFD8;
}
 .theme-fandommobile-light .pi-theme-Armor .pi-header {
  --wds-midlight-color: #D9D9FF;
}
 .theme-fandommobile-light .pi-theme-Artifact .pi-header {
  --wds-midlight-color: #CEDFFF;
}
 .theme-fandommobile-light .pi-theme-Clothing .pi-header {
  --wds-midlight-color: #FFE5BA;
}
 .theme-fandommobile-light .pi-theme-Currency .pi-header {
  --wds-midlight-color: #E6FFD7;
}
 .theme-fandommobile-light .pi-theme-Device .pi-header {
  --wds-midlight-color: #CEDFFF;
}
 .theme-fandommobile-light .pi-theme-Food .pi-header {
  --wds-midlight-color: #FFE1C2;
}
 .theme-fandommobile-light .pi-theme-Holocron .pi-header {
  --wds-midlight-color: #E4E4E4;
}
 .theme-fandommobile-light .pi-theme-Lightsaber .pi-header {
  --wds-midlight-color: #CDF5FF;
}
 .theme-fandommobile-light .pi-theme-Medal .pi-header {
  --wds-midlight-color: #D7E5FF;
}
 .theme-fandommobile-light .pi-theme-Substance .pi-header {
  --wds-midlight-color: #D0D1FF;
}
 .theme-fandommobile-light .pi-theme-Symbol .pi-header {
  --wds-midlight-color: #D0E0FF;
}
 .theme-fandommobile-light .pi-theme-Weapon .pi-header {
  --wds-midlight-color: #FFC7C7;
}
 .theme-fandommobile-light .pi-theme-Filming-location .pi-header {
  --wds-midlight-color: #EAD5FF;
}
 .theme-fandommobile-light .pi-theme-OOU-company .pi-header {
  --wds-midlight-color: #EAEAEA;
}
 .theme-fandommobile-light .pi-theme-Person .pi-header {
  --wds-midlight-color: #D0FFFF;
}
 .theme-fandommobile-light .pi-theme-User .pi-header {
  --wds-midlight-color: #DCF9FF;
}
 .theme-fandommobile-light .pi-theme-WPinfobox .pi-header {
  --wds-midlight-color: #EBEBEB;
}
 .theme-fandommobile-light .pi-theme-Board-game .pi-header {
  --wds-midlight-color: #D3F2FF;
}
 .theme-fandommobile-light .pi-theme-Other-Media .pi-header {
  --wds-midlight-color: #FFD2C7;
}
 .theme-fandommobile-light .pi-theme-Music .pi-header {
  --wds-midlight-color: #CED6FF;
}
 .theme-fandommobile-light .pi-theme-Toy-line .pi-header {
  --wds-midlight-color: #FFD8F0;
}
 .theme-fandommobile-light .pi-theme-Website .pi-header {
  --wds-midlight-color: #C9E4FF;
}
 .theme-fandommobile-light .pi-theme-Media .pi-header {
  --wds-midlight-color: #FFFFD9;
}
 .theme-fandommobile-light .pi-theme-starship .pi-header {
  --wds-midlight-color: #DDDDFF;
}
 .theme-fandommobile-light .pi-theme-Ship-series .pi-header {
  --wds-midlight-color: #D2FFD2;
}
 .theme-fandommobile-light .pi-theme-Air-vehicle .pi-header {
  --wds-midlight-color: #D4E5FF;
}
 .theme-fandommobile-light .pi-theme-Aquatic-vehicle .pi-header {
  --wds-midlight-color: #D4E5FF;
}
 .theme-fandommobile-light .pi-theme-Ground-vehicle .pi-header {
  --wds-midlight-color: #D4FFD4;
}
 .theme-fandommobile-light .pi-theme-Repulsorlift-vehicle .pi-header {
  --wds-midlight-color: #D4FFF1;
}