MediaWiki:Fandomdesktop.css

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

.theme-fandomdesktop-light { --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: #88684b; --custom-modetabs-expert-border-color: #C2AC84; --custom-modetabs-expert-label-color: #fff; --custom-modetabs-master-background-color: #996669; --custom-modetabs-master-border-color: #ffbaba; --custom-modetabs-master-label-color: #fff; }

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

/* Override background set in Common.css */ div#content { background-color: unset; color: unset; border-top: 0; border-bottom: 0; margin-right: unset; } @media(max-width:980px) { div#content { margin: auto; } }

table { border-collapse: separate; }

.terraria { border-spacing: revert; }

.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; }

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

.fandom-community-header__local-navigation .wds-dropdown__content { max-width: 220px; }

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

.page-header { margin-bottom: 6px; }

.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 p + p { margin-top: 0.7em; }

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

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

/* Adjust h3-h6 margins */ .page-content h3, .page-content h4, .page-content h5, .page-content h6 { margin-top: 0.5em; }

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

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

/*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-toolbar { background-color: var(--theme-page-background-color); }

.wikiEditor-ui .wikiEditor-ui-view { border-color: var(--theme-border-color); }

.mw-editform .editOptions { padding: 1em 1em 1.5em 1em; margin-bottom: 2em; }

.codeEditor-status { border-top-color: var(--theme-border-color); border-bottom-color: var(--theme-border-color); }

.codeEditor-status-message { border-left-color: var(--theme-border-color); border-right-color: var(--theme-border-color); }

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

body.mainpage .page-header { display: flex; align-items: center; justify-content: flex-end; } 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; }