MediaWiki:Fandomdesktop.css

/* CSS placed here will only affect users of the FandomDesktop skin */

.theme-fandomdesktop-light { --theme-page-text-color: #000; --theme-page-text-color--rgb: 0,0,0; --theme-accent-label-color: #063b5e; --theme-page-background-color--secondary: #f5f5f5; --theme-border-color: #b3b3b3; } .theme-fandomdesktop-dark { --theme-accent-label-color: #fff; --theme-page-background-color--secondary: #1e1f28; --custom-accent-border-color: var(--theme-accent-color--hover);

--custom-note-dark-color: #bbb; --custom-note-light-color: #ddd;

--custom-notice-blue-background-color: var(--theme-accent-color); --custom-notice-blue-border-color: var(--custom-accent-border-color); --custom-notice-red-background-color: hsl(0, 80%, 12%); --custom-notice-red-border-color: hsl(0, 80%, 26%); --custom-notice-purple-background-color: hsl(228, 80%, 12%); --custom-notice-purple-border-color: hsl(243, 80%, 26%); --custom-notice-green-background-color: hsl(84, 80%, 12%); --custom-notice-green-border-color: hsl(84, 80%, 26%); --custom-notice-yellow-background-color: hsl(58, 80%, 12%); --custom-notice-yellow-border-color: hsl(58, 80%, 18%); --custom-notice-orange-background-color: hsl(28, 80%, 12%); --custom-notice-orange-border-color: hsl(28, 80%, 26%); --custom-notice-pink-background-color: hsl(324, 80%, 12%); --custom-notice-pink-border-color: hsl(324, 80%, 26%);

--custom-template-expert-color: #ffba75;

--custom-modetabs-expert-background-color: #594634; --custom-modetabs-expert-border-color: #847457; --custom-modetabs-expert-label-color: #fff; --custom-modetabs-master-background-color: #6a3d3f; --custom-modetabs-master-border-color: #a45e5e; --custom-modetabs-master-label-color: #fff; }

/* Rubik font is blurred and hard to read. * Helvetica font looks weird under 14px+bold. * Align with Hydra. */ .resizable-container, .page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6, .fandom-sticky-header, .search-modal, .ve-fd-header{ font-family: sans-serif; }
 * 1) WikiaBar,

/* temp fix for redlink error */ a[classname~="new"] { color: var(--theme-alert-color); }

/* fix position:fixed issue for touch screen */ html, body{ overflow: auto; }

/* ================================================================== */ /* Dark theme-specific styles */ /* ================================================================== */

/* Make certain icons and logos more visible */ .theme-fandomdesktop-dark .math-image, .theme-fandomdesktop-dark .mwe-math-fallback-image-inline, .theme-fandomdesktop-dark .sound-title::after, .theme-fandomdesktop-dark img[data-image-name*="Playstation"], /* For Playstation 3, Playstation 4, etc */ .theme-fandomdesktop-dark img[data-image-name="PS.svg"], .theme-fandomdesktop-dark img[data-image-name="Amazon.svg"], .theme-fandomdesktop-dark img[data-image-name="Android.svg"], .theme-fandomdesktop-dark img[data-image-name="Pickaxe mask.png"], .theme-fandomdesktop-dark img[data-image-name="Axe mask.png"], .theme-fandomdesktop-dark img[data-image-name="Hammer mask.png"], .theme-fandomdesktop-dark img[data-image-name="Auto icon.png"] { filter: hue-rotate(180deg) invert(100%); } .theme-fandomdesktop-dark img[data-image-name="3DS.svg"] { filter: hue-rotate(180deg) invert(100%) saturate(450%) contrast(150%); } .theme-fandomdesktop-dark img[data-image-name="Tux.svg"] { filter: drop-shadow(0 0 1px #f2f2f2); }

/* More visible +byte diff */ .theme-fandomdesktop-dark .mw-plusminus-pos { color: var(--theme-success-color); } /* More visible -byte diff */ .theme-fandomdesktop-dark .mw-plusminus-neg { color: var(--theme-alert-color); }

/* ================================================================== */ /* Main layout */ /* ================================================================== */

/* Override background set in Common.css */ html body { background-image: none; background-color: var(--theme-body-background-color); font-size: 14px; } div#content { background-color: unset; color: unset; border-top: 0; border-bottom: 0; margin-right: unset; line-height: calc(24/14); } @media(max-width:980px) { div#content { margin: auto; } } .page-content p, .page-content section{ line-height: calc(24/14); } .page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6{ margin: 0.5em 0; padding: 0; align-items: center; } .page-content h2{ margin-top: 0.75em; } .page-content li{ margin-bottom: 1px; }

.community-header-wrapper{ height: 120px; font-size: 16px; } .fandom-community-header__top-container{ padding-bottom: 6px; } .community-header-wrapper .wds-tabs__tab-label{ height: 28px; } .fandom-community-header__community-name, .page-counter{ text-shadow: 0 0 5px rgba(0,0,0,0.4); } .fandom-community-header .wiki-tools{ box-shadow: 0 0 5px rgba(0,0,0,0.4); } .fandom-community-header .wiki-tools > .wds-button{ box-shadow: inset 0 0 5px rgba(0,0,0,0.4); } /* Increase max width of local nav dropdowns (to prevent advanced mechanics/guides from wrapping) */ .fandom-community-header__local-navigation .wds-dropdown__content, .fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content { max-width: 220px; }

table { border-collapse: separate; }

code { background-color: var(--theme-page-background-color); border: 1px solid rgba(var(--theme-border-color--rgb), 0.75); border-radius: 2px; padding: 1px 4px; } /* hydra style selflink */ .page-content .mw-parser-output a.mw-selflink{ color: currentColor; font-weight: bold; text-decoration: none; }

/* Restore Hydra-style terraria tables */ .terraria { border-spacing: revert; } .terraria > caption:after { width: calc(100% + 8px); /* captions have a 4px border on each side */ }

.oo-ui-textInputWidget-type-text > input.oo-ui-inputWidget-input, .oo-ui-textInputWidget-type-search > input.oo-ui-inputWidget-input { border-radius: 0; border-width: 1px; }

/* Slightly increase margin between "x pages" counter and wiki tool buttons */ .page-counter { margin-right: 16px; }

/* Style QuickBar buttons for logged-out users */ .WikiaBarWrapper .wikia-bar-anon .wikiabar-button { background-color: transparent; border: none; color: var(--theme-accent-label-color); line-height: inherit; }

.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElemenrect-progressive > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus, .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {	border-color: currentColor; } .oo-ui-tagItemWidget{ box-sizing: content-box; }

/* Less space between history entries in the page history */ margin-bottom: 2px; padding: 0 1px; }	border-style: dashed; }
 * 1) pagehistory li {
 * 1) pagehistory li.selected{

.page-header__subtitle .mw-history-subtitle{ display: inline; }

img.lazyloaded { transition: opacity 0s; }

/* ================================================================== */ /* Page layout */ /* ================================================================== */ @media only screen and (min-width:1024px) { html:not(.ve-activated) .page.has-right-rail .page__main { border-radius: 3px; }	html:not(.ve-activated) .page.has-right-rail .page__right-rail{ margin-left: -3px; }	html:not(.ve-activated) .page.has-right-rail .page__right-rail.is-rail-hidden { width: 0px; } } @media only screen and (max-width:1023px) { html:not(.ve-activated) .page.has-right-rail .page__right-rail { margin-top: -3px; position: relative; overflow: hidden; }	html:not(.ve-activated) .page.has-right-rail .page__right-rail .right-rail-toggle{ display: flex; }	.right-rail-toggle{ width: 28px; transform: rotate(270deg); top: -4px; right: 12px; transition: .3s; }	.right-rail-toggle:hover { right: 8px; }	html:not(.ve-activated) .page.has-right-rail .page__right-rail.is-rail-hidden { padding: 6px 18px; height: 32px; }	.is-rail-hidden .right-rail-toggle { background-color: rgba(var(--theme-page-dynamic-color-1--rgb),.1); right: 12px; }	.is-rail-hidden .right-rail-toggle:hover { right: 8px; } } @media only screen and (min-width:769px) and (max-width:1279px){ .fandom-community-header .fandom-community-header__local-navigation .medium-navigation{ display: none; }	.fandom-community-header .fandom-community-header__local-navigation .large-navigation{ display: flex; } } @media only screen and (max-width:600px) { .rail-module__list.activity-items{ grid-template-columns: 100%; } } @media only screen and (max-width:600px) { .rail-module__list.activity-items{ grid-template-columns: 100%; } }

.page__main{ padding: 24px; padding-top: 16px; box-shadow: 0 0 4px rgba(255,255,255,0.25); } .page-side-tool{ box-shadow: 0 0 6px 0 rgba(0,0,0,.25); width: 32px; height: 32px; } .is-content-expanded .resizable-container{ width: auto; margin-left: 24px; margin-right: 16px; } @media only screen and (max-width:1279px) { .page-side-tools__wrapper { transform:translateX(-50%); } }

.page-footer{ margin-top: 2em; } .page-footer__languages{ display: block; border: 0; padding: 1em 0; } .page-footer .page-footer__languages > *{ padding: 0; display: inline-flex; } .page-footer .page-footer__languages header{ font-size: inherit; } .page-footer .page-footer__languages header:after{ content: ":"; } .page-footer .page-footer__languages header svg{ display: none; } .page-footer__languages.wds-collapsible-panel.wds-is-collapsed .wds-collapsible-panel__content{ padding: 0; display: inline-flex; } .page-footer__categories{ border-bottom: 0; margin-top: -1em; } .page-footer__categories header{ display: none; } .page-footer__categories.wds-collapsible-panel.wds-is-collapsed .wds-collapsible-panel__content{ display: block; }   padding: 5px 8px; background-color: var(--theme-accent-color); border: 1px ridge var(--theme-border-color); border-radius: .3em; font-size: inherit; } .CategorySelect.articlePage .categories{ display: flex; flex-wrap: wrap; justify-content: flex-start; font-size: 14px; }   padding: 0 0.5em 0 0; flex: 0 0 auto; margin: 3px 0.5em 3px 0; }	vertical-align: middle; } .CategorySelect.articlePage .category, .CategorySelect.articlePage .last, .CategorySelect.articlePage .placeholder, .CategorySelect.articlePage .special-categories-label{ float: none; }	padding: 0; border-right: 0; }	content: ':'; vertical-align: middle; } .CategorySelect.articlePage .add{ font-size: 10px; line-height: 12px; padding: 2px 10px; min-height: 0; }	margin-bottom: 0; line-height: 1; vertical-align: middle; } .CategorySelect.articlePage > .toolbar{ margin-top: 6px; }
 * 1) articleCategories .container{
 * 1) articleCategories .container li {
 * 1) articleCategories .container li > *{
 * 1) articleCategories.CategorySelect.articlePage .special-categories-label{
 * 1) articleCategories.CategorySelect.articlePage .special-categories-label::after{
 * 1) articleCategories.CategorySelect.articlePage .last input{

.page-header__title-wrapper{ display: flex; flex-direction: column; } .page-header__title-wrapper > h1{ order: 2; } .page-header__title-wrapper > .page-header__page-subtitle{ order: 1; line-height: 1; } .page-header__actions{ align-items: flex-end; padding-bottom: 3px; }

/* ================================================================== */ /* Page content */ /* ================================================================== */

.page-header { margin-bottom: 1rem; }

.page-header__bottom { border-bottom: 1px solid var(--theme-border-color); }

/* Reduce size of categories on the top and bottom of pages */ .page-header__categories, .CategorySelect.articlePage { font-size: 85%; }

.page-content dl { margin: 0; }

/* Prevent links from being bolded */ .page-content .mw-parser-output a { font-weight: revert; }

.page-content section { margin: 0; } .page-content p{	margin: 0.5em 0; }

/* Restore thin */ .page-content hr { border-top: 0; border-color: var(--theme-border-color); margin-top: 0; margin-bottom: 0; }

.catlinks { padding: 4px; }

/* Hide empty list items */ .mw-hide-empty-elt .mw-empty-elt { display: none; }

.oo-ui-dialog-content { color: var(--theme-page-text-color); } .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget { border-right-color: var(--theme-border-color); }

.mw-notification { background-color: var(--theme-page-background-color--secondary); border-color: var(--theme-border-color); }

/* Match side rail font size with page content */ .WikiaRail .sticky-modules-wrapper { font-size: 14px; }

/* Fix Fan Feed title being black in dark theme */ color: var(--theme-page-text-color); }
 * 1) mixed-content-footer .mcf-header {

/* ================================================================== */ /* Special pages */ /* ================================================================== */

/* Special:RecentChanges */ .mw-special-Recentchanges .page-header__languages{ margin-bottom: -33px; /*languages box space*/ } .client-js .mw-recentchanges-toplinks:not(.mw-recentchanges-toplinks-collapsed), .mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator { border-top-color: var(--theme-border-color); } .client-js .mw-recentchanges-toplinks:not(.mw-recentchanges-toplinks-collapsed) { border-color: var(--theme-border-color); margin-left: 0; } .mw-rcfilters-ui-overlay .oo-ui-popupWidget-popup{ padding: 1em; } .mw-rcfilters-ui-overlay .oo-ui-popupWidget-popup .oo-ui-buttonElement > .oo-ui-buttonElement-button{ padding: 3px 5px; } .ooui-theme-fandomooui .mw-rcfilters-ui-overlay { font-size: 14px; }

/* Special:Analytics */ .analytics_theme_hydra .analytics_confidential { background-color: var(--theme-accent-color); color: var(--theme-page-text-color); } .analytics_theme_hydra .analytics_table td:first-child a:any-link { color: var(--theme-link-color); } .theme-fandomdesktop-dark #analytics_grid canvas { filter: invert(100%) hue-rotate(180deg); }

/* ================================================================== */ /* Templates */ /* ================================================================== */

.page-content .infobox { background-color: var(--theme-page-background-color);; padding: 6px; clear: none; /*align with hydra, so infobox templates will work properly.*/ }

/* All portable infoboxes */ .portable-infobox .pi-title { padding: 5px; } .portable-infobox .pi-header { font-size: 12px; } .portable-infobox .pi-collapse .pi-header:first-child::after { right: 12px; }

/* Template:Only4theme */ .theme-fandomdesktop-light .theme-special:not(.light) { display: none; } .theme-fandomdesktop-dark .theme-special:not(.dark) { display: none; }

/* Template:Drop infobox */ /* Move the sort arrows to the left of the text for the first two headings (they're on the right by default) */ .drop.infobox th:first-child.headerSort::after, .drop.infobox th:nth-child(2).headerSort::after { left: 6px; }

/* Template:Templatedata */ .templatedata-doc .templatedata-doc-param-valuetrue { color: #050; } .templatedata-doc .templatedata-doc-param-valuefalse { color: #610; } .theme-fandomdesktop-dark .templatedata-doc .templatedata-doc-param-valuetrue { color: #090; } .theme-fandomdesktop-dark .templatedata-doc .templatedata-doc-param-valuefalse { color: #df2500; }

/* Template:Hp */ .hp > div > * { box-sizing: content-box; }

/*image*/ figure.thumb{ border: 1px solid var(--theme-border-color); padding: 3px; border-radius: 5px; box-sizing: content-box; }

/* ================================================================== */ /* Editor fixes */ /* ================================================================== */ .wikiEditor-ui .wikiEditor-ui-view.wikiEditor-ui-view-wikitext .wikiEditor-ui-top{ min-height: inherit; } .wikiEditor-ui .wikiEditor-ui-toolbar { background-color: var(--theme-page-background-color); padding: 0; } .wikiEditor-ui .wikiEditor-ui-toolbar .sections .section {	margin-top: 0; padding-top: 0; } .wikiEditor-ui .wikiEditor-ui-view { border-color: var(--theme-border-color); } .wikiEditor-ui #msupload-div{ border-radius: 0; } .wikiEditor-ui-bottom{ border-left: 1px solid var(--theme-border-color); border-right: 1px solid var(--theme-border-color); }	border: 0 !important; } .mw-editform .editOptions { padding: 1em 1em 1.5em 1em; margin-bottom: 2em; } .codeEditor-status { border: 1px solid var(--theme-border-color); border-bottom: 0; } .codeEditor-status-message { border-left-color: var(--theme-border-color); border-right-color: var(--theme-border-color); }
 * 1) wpTextbox0, #wpTextbox1{

/* ================================================================== */ /* Main page */ /* ================================================================== */

body.mainpage .page__main { padding-top: 12px; } body.mainpage .page-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 0; } body.mainpage .page-header__bottom { border-bottom: 0; } body.mainpage .page-header__title-wrapper { display: none; } body.mainpage #ca-edit { display: none; } body.mainpage .page-header__languages .wds-dropdown__toggle, body.mainpage .page-header__variants .wds-dropdown__toggle { margin-bottom: 0; } body.mainpage .page-header__actions { margin-left: 3px; padding-top: 0; }