MediaWiki:FandomMobile.css
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.
@import url("/load.php?mode=articles&articles=MediaWiki:Variables.css|MediaWiki:Quotes.css|MediaWiki:Tabber.css|MediaWiki:Navbox.css|MediaWiki:Dialogue.css|MediaWiki:Mbox.css|MediaWiki:Recipe.css|MediaWiki:Tables.css|MediaWiki:Font.css|MediaWiki:Card.css|MediaWiki:Item.css|MediaWiki:Colors.css|MediaWiki:Gallery.css|MediaWiki:AudioButton.css|MediaWiki:CustomTabs.css|MediaWiki:Tooltip.css|u:dev:MediaWiki:PortableNavbox.css|u:dev:MediaWiki:Module:Documentation.css|MediaWiki:Documentation.css|MediaWiki:Header.css|MediaWiki:EnemySkills.css|MediaWiki:Maps.css|MediaWiki:Description.css|MediaWiki:UtilityClasses.css|MediaWiki:FatesAtlas.css|MediaWiki:PossibleOutcomes.css|MediaWiki:ChangeHistory.css|MediaWiki:Messages.css|MediaWiki:EditorDashboard.css|MediaWiki:Icon.css|MediaWiki:Attributes.css|MediaWiki:AbilityTable.css&only=styles");
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:FandomIcons.css&only=styles";
/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+KR:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Avestan:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&display=swap');
hr {
color: var(--theme-border-color);
border-style: solid;
border-top: none;
}
/* For Server Based Timers Gadgets */
body.show-active-as .hide-active,
body.show-active-eu .hide-active,
body.show-active-na .hide-active,
body:not(.show-active-as) .active-as,
body:not(.show-active-eu) .active-eu,
body:not(.show-active-na) .active-na {
display: none;
}
body.show-active-as div.active-as,
body.show-active-eu div.active-eu,
body.show-active-na div.active-na,
body.show-active-as span.active-as,
body.show-active-eu span.active-eu,
body.show-active-na span.active-na,
body:not(.show-active-as, .show-active-eu, .show-active-na) div.default-active {
display: inline-block !important;
}
body.show-active-as.show-active-eu br.active-as.active-eu,
body:not(.show-active-eu).show-active-as br:not(.active-eu).active-as {
display: inline !important;
}
/* External link "Icon" */
.mw-parser-output .external:after {
content: " external";
font-family: 'FANDOM-Icons';
letter-spacing: -0.3em;
font-size: 0.9em;
margin-right: 0.4em;
}
/* For [[Template:Event Countdown]] */
.countdownevent {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
text-align: center;
gap: 5px;
margin-bottom: 10px;
}
.countdownevent div {
width: 100%;
border-radius: 5px;
background-color: var(--theme-page-background-color--secondary);
padding: 7px;
}
.countdownevent div span {
color: var(--theme-accent-color);
font-weight: 700;
}
.countdownevent div hr {
border-color: var(--theme-accent-color);
}
/* End for [[Template:Event Countdown]] */
/* Avoid tabs from going off-screen and needing horizontal scrolling */
body > .main-container .wds-tabs__wrapper {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
margin-left: 0 !important;
}
/* 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;
}
/* For [[Template:Version Information]] used on Main Page */
.bgimg {
color: white;
background-size: cover;
background-image: linear-gradient(rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)), url('https://static.wikia.nocookie.net/houkai-star-rail/images/1/17/Concept_Art_The_Overworld.png/revision/latest?cb=20211013103128&format=original');
}
.mobile-main-page .mw-body-content .Mainpage-border, .Mainpage-border {
border-radius: 5px;
border: 3px solid var(--subtitle-color);
padding: 2px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.mobile-main-page .mw-body-content .article-table-wrapper table th.Mainpage-header, .Mainpage-header {
background-color: var(--subtitle-color);
color: #000000;
font-weight: bold;
font-size: 1.5em;
padding: 6px;
border-radius: 5px;
text-align: center;
}
.Mainpage-header-link {
color: #000000;
}
.mobile-main-page .article-media-thumbnail,
.mobile-main-page .article-table-wrapper {
margin-bottom: 0;
border: none;
}
.mobile-main-page .article-media-placeholder,
.mobile-main-page .mobile-gallery__image img {
border: none;
}
/* Show gallery captions */
.mobile-gallery .mobile-gallery__image-caption {
display: block !important;
}
/* Center captions in normal galleries */
figcaption.mobile-gallery__image-caption {
text-align: center;
}
/* Disable Max Length for Gallery Captions */
.mobile-gallery-default .mobile-gallery__image-caption {
max-height: unset;
display: block;
}
/* Fix Infobox Images */
.pi-image-collection .pi-item .article-media-placeholder {
max-height: 50vh;
}
/* Fix Hatnotes */
div.context-link, .hatnote {
border-left: 3px solid var(--theme-accent-color);
padding: 3px 10px;
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: 5px 0;
}
/* For [[Template:Tt]] */
/* Disable default hover tooltip */
.hover-tooltip {
display: none;
}
/* Enable custom toggleable tooltip */
.custom-tt-wrapper.hsr-collapsible .mw-collapsible-toggle {
display: inline !important;
}
/* Reducing left margin when using lists in a table. */
.mw-parser-output td > .columntemplate > ul,
.mw-parser-output td > .columntemplate > ol,
.mw-parser-output td > ul,
.mw-parser-output td > ol {
margin-left: 1em;
}
/* Override navbox ban on mobile */
.navbox, .navbox table{
display: table !important;
}
/* Template:TOC Limit */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}
/* Template:Keys */
.srw-key {
background-color: #020203;
color: #dcc491;
font-size: 80%;
font-family: Barlow;
border: 1px solid #a59269;
border-radius: 3px;
box-shadow: 0 0 0 2px #332b1e inset;
padding: 0.1em 0.4em;
min-width: 30px;
display: inline-block;
text-align: center;
}
/* Hide default "Start Here" section on [[Special:Community]], as we have our own to-do list */
.community-page-cards-module {
display: none;
}
/* format code */
code, .custom-formatting-code:not(.custom-formatting-plain) {
background-color: var(--theme-page-background-color--secondary);
border: 1px solid var(--theme-border-color);
border-radius: 2px;
padding: 1px 4px;
font-family: monospace;
}
/* For [[Module:Formatting]] */
.custom-formatting-code {
display: inline-block;
line-height: 21px;
}
.custom-formatting-code.code-block-table {
display: table;
}
span.variable {
opacity: 0.65;
}
span.variable::after {
opacity: 0.65;
content: ">";
}
span.variable::before {
opacity: 0.65;
content: "<";
}
.custom-formatting-nested {
display: none;
}
.custom-formatting-resulting {
display: inline;
}
.custom-formatting-code .custom-formatting-nested {
display: inline-block;
}
.custom-formatting-code .custom-formatting-resulting {
display: none;
}
/* End for [[Module:Formatting]] */
/* light infobox images on mobile */
.wiki-page-header__hero-image img {
filter:drop-shadow(0px 0px 3px black)
}
/* Custom MessageBox styling for mobile so nothing gets squished */
.mbox__content__image {
height: unset;
vertical-align: top;
float: left;
}
.mbox__content__image:has(.article-media-thumbnail) {
width: 75px;
}
.mbox__content__wrapper {
display: block;
}
.mbox__content .article-media-thumbnail {
margin-bottom: 0;
}
.mbox__content .mbox__content__image img {
border: none;
}
/* For [[Template:Tabber]] */
.mw-parser-output .wds-tabber > ul {
margin-left: 0px;
}
/* Avoid tabs from going off-screen and needing horizontal scrooling */
.wds-tabs__wrapper {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
margin-left: 0 !important;
}
/* Class to add text hidden from view that is usable by screen readers */
.screen-reader-text { font-size: 0; }