MediaWiki:FandomMobile.css: Difference between revisions

@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:Messages.css|MediaWiki:EditorDashboard.css|MediaWiki:Icon.css|MediaWiki:ChangeHistory.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;
}

/* [[Template:Latest Edits]] Fix for UCP */
#ActivityFeed .mw-changeslist-line-inner-rollback,
#ActivityFeed .mw-changeslist-line-inner-tags,
#ActivityFeed .mw-changeslist-line-inner-userTalkLink,
#ActivityFeed .mw-changeslist-line-inner-separatorAftercharacterDiff,
#ActivityFeed .mw-changeslist-line-inner-separatorAftercharacterDiff,
#ActivityFeed .mw-changeslist-line-inner-userTalkLink,
#ActivityFeed td.mw-enhanced-rc,
#ActivityFeed .mw-changeslist-legend,
#ActivityFeed .mw-changeslist-line-inner-historyLink,
#ActivityFeed .mw-changeslist-line-inner-separatorAfterLinks,
#ActivityFeed .mw-changeslist-line-inner-characterDiff,
#ActivityFeed .mw-changeslist-line-inner-comment,
#ActivityFeed .activity-tabs,
#ActivityFeed .activity-summary,
#ActivityFeed .mw-enhancedchanges-arrow-space,
#ActivityFeed .mw-changeslist-line td:not(.mw-changeslist-line-inner) {
	display: none;
}
#ActivityFeed .mw-changeslist div table.mw-changeslist-line {
    margin: 0px;
}

#ActivityFeed .mw-changeslist-line-inner-userLink:before {
	content: "\00000A\000009edited\0000A0by ";
	white-space: pre-wrap;
}
#ActivityFeed .mw-changeslist-line-inner {
	text-align:left;
	width: 284px;
}
#ActivityFeed span.mw-changeslist-line-inner-userLink {
	font-size: 11px;
	position: relative;
	top: -5px !important;
	left: -15px;
}
#ActivityFeed .mw-changeslist div table {
	border-bottom: 1px solid var(--subtitle-color);
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 3px !important;
}
#ActivityFeed .mw-changeslist div table:last-child {
	border: none;
}
/* End [[Template:Latest Edits]] Fix for UCP */

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

/* [[Template:Description]] styles */
div.description-wrapper {
	border: 1px solid var(--border-color);
	overflow: hidden;
	border-radius: 8px;
	background: #bf8c4015;
}
div.description-content {
	font-size: 15px;
	text-align: left;
	overflow: auto;
	line-height: 1.35em;
	padding: 12px 12px 12px 12px;
}
div.description-source {
	font-size: 15px;
	overflow: auto;
	padding: 5px 12px;
}
hr.description-separator {
	width: 97.5%;
	margin: auto;
}
div.description-title {
	font-size: 15px;
	text-align: left;
	overflow: auto;
	padding: 10px 12px 6px;
}