MediaWiki:Fandomdesktop.css

/* Note: Color styles should be coded as variables to support light, dark, * and per-namespace themes correctly. */ /* Note 2: Currently the variable names aren't stable; they may be stabilized * in the future to allow for inline `var` declarations, but for now you * should not do that, things may break if you do. */ /* Note 3: Some parts of the code written, with or without changes, by * User:ItsPlantseed, some of which are also originally written by * User:SansUT1. */ /* Defaults assume a namespace without a custom theme, and light theme. */
 * root {

--custom-background-blue: hsl(215, 75%, 90%); --custom-background-blue-highlight: hsl(215, 75%, 92%); --custom-background-green: hsl(120, 75%, 90%); --custom-background-green-highlight: hsl(120, 75%, 92%); --custom-background-grey: hsl(0, 0%, 90%); --custom-background-magenta: hsl(310, 75%, 90%); --custom-background-magenta-highlight: hsl(310, 75%, 92%); --custom-background-orange: hsl(40, 75%, 90%); --custom-background-orange-highlight: hsl(40, 75%, 92%); --custom-background-purple: hsl(260, 75%, 90%); --custom-background-purple-highlight: hsl(260, 75%, 92%); --custom-background-red: hsl(0, 75%, 90%); --custom-background-red-highlight: hsl(0, 75%, 92%); --custom-background-yellow: hsl(60, 75%, 90%); --custom-background-yellow-highlight: hsl(60, 75%, 92%); --custom-border-blue: hsl(215, 25%, 65%); --custom-border-blue-highlight: hsl(215, 50%, 68%); --custom-border-green: hsl(120, 25%, 65%); --custom-border-green-highlight: hsl(120, 50%, 68%); --custom-border-grey: hsl(0, 0%, 65%); --custom-border-magenta: hsl(310, 25%, 65%); --custom-border-magenta-highlight: hsl(310, 50%, 68%); --custom-border-orange: hsl(40, 25%, 65%); --custom-border-orange-highlight: hsl(40, 50%, 68%); --custom-border-purple: hsl(260, 25%, 65%); --custom-border-purple-highlight: hsl(260, 50%, 68%); --custom-border-red: hsl(0, 25%, 65%); --custom-border-red-highlight: hsl(0, 50%, 68%); --custom-border-yellow: hsl(60, 25%, 65%); --custom-border-yellow-highlight: hsl(60, 50%, 68%); --custom-main-page-background: #fcfcfc; --custom-main-page-border: #ccc; --custom-main-page-edition-subheader: #333; --custom-table-background: #f8f9fa; --custom-table-alternate-background: #f0f1f2; --custom-table-header-background: #eaecf0; } body.theme-fandomdesktop-light { /* Override default color that causes some contrast issues. */   --theme-alert-color: #ba1231; } body.theme-fandomdesktop-dark { --theme-alert-color: #f1748b; --custom-background-blue: hsl(215, 25%, 8%); --custom-background-blue-highlight: hsl(215, 25%, 12%); --custom-background-green: hsl(120, 25%, 8%); --custom-background-green-highlight: hsl(120, 25%, 12%); --custom-background-grey: hsl(0, 0%, 8%); --custom-background-magenta: hsl(310, 25%, 8%); --custom-background-magenta-highlight: hsl(310, 25%, 12%); --custom-background-orange: hsl(40, 25%, 8%); --custom-background-orange-highlight: hsl(40, 25%, 12%); --custom-background-purple: hsl(260, 25%, 8%); --custom-background-purple-highlight: hsl(260, 25%, 12%); --custom-background-red: hsl(0, 25%, 8%); --custom-background-red-highlight: hsl(0, 25%, 12%); --custom-background-yellow: hsl(60, 25%, 8%); --custom-background-yellow-highlight: hsl(60, 25%, 12%); --custom-border-blue: hsl(215, 15%, 36%); --custom-border-blue-highlight: hsl(215, 50%, 30%); --custom-border-green: hsl(120, 15%, 36%); --custom-border-green-highlight: hsl(120, 50%, 30%); --custom-border-grey: hsl(0, 0%, 36%); --custom-border-magenta: hsl(310, 15%, 36%); --custom-border-magenta-highlight: hsl(310, 50%, 30%); --custom-border-orange: hsl(40, 15%, 36%); --custom-border-orange-highlight: hsl(40, 50%, 30%); --custom-border-purple: hsl(260, 15%, 36%); --custom-border-purple-highlight: hsl(260, 50%, 30%); --custom-border-red: hsl(0, 15%, 36%); --custom-border-red-highlight: hsl(0, 50%, 30%); --custom-border-yellow: hsl(60, 15%, 36%); --custom-border-yellow-highlight: hsl(60, 50%, 30%); --custom-main-page-background: #202125; --custom-main-page-border: #2e2e2e; --custom-main-page-edition-subheader: #ddd; --custom-table-background: #131313; --custom-table-alternate-background: #1a1a1a; --custom-table-header-background: #363636; } body.rootpage-Minecraft_Dungeons, body.ns-10000, body.ns-10001 { --theme-page-background-color: #f2eee7; --theme-page-background-color--secondary: #fff6e4; --theme-accent-color: #c86e10; --theme-accent-color--rgb: 200, 110, 16; --theme-accent-color--hover: #cc7820; --theme-sticky-nav-background-color: #c86e10; --theme-sticky-nav-text-color--hover: #f2e5b2; } body.rootpage-Minecraft_Dungeons.theme-fandomdesktop-dark, body.ns-10000.theme-fandomdesktop-dark, body.ns-10001.theme-fandomdesktop-dark { --theme-page-background-color: #1a1715; --theme-page-background-color--secondary: #2d251f; --theme-accent-color: #3a2916; --theme-accent-color--rgb: 58, 41, 22; --theme-accent-color--hover: #3e2f1e; --theme-sticky-nav-background-color: #3a2916; } body.rootpage-Minecraft_Earth, body.ns-10002, body.ns-10003 { --theme-page-background-color: #e5edff; --theme-page-background-color--secondary: #f1f5ff; --theme-accent-color: #2783ae; --theme-accent-color--rgb: 39, 131, 174; --theme-accent-color--hover: #2783ae; --theme-sticky-nav-background-color: #2783ae; --theme-sticky-nav-text-color--hover: #b2c4f2; } body.rootpage-Minecraft_Earth.theme-fandomdesktop-dark, body.ns-10002.theme-fandomdesktop-dark, body.ns-10003.theme-fandomdesktop-dark { --theme-page-background-color: #14151a; --theme-page-background-color--secondary: #1a1f2a; --theme-accent-color: #0f242e; --theme-accent-color--rgb: 15, 36, 46; --theme-accent-color--hover: #182c36; --theme-sticky-nav-background-color: #0f242e; --theme-sticky-nav-text-color--hover: #b2c4f2; }

/* Main page */ .fp-section { background-color: var(--custom-main-page-background); border-color: var(--custom-main-page-border); } .edition-box .edition-box-subheader { color: var(--custom-main-page-edition-subheader) !important; } .edition-box-java, .edition-box-java .edition-box-header { background-color: var(--custom-background-green) !important; border-color: var(--custom-border-green) !important; } .edition-box-bedrock, .edition-box-bedrock .edition-box-header { background-color: var(--custom-background-red) !important; border-color: var(--custom-border-red) !important; } .edition-box-dungeons, .edition-box-dungeons .edition-box-header { background-color: var(--custom-background-yellow) !important; border-color: var(--custom-border-yellow) !important; } .edition-box-launcher, .edition-box-launcher .edition-box-header { background-color: var(--custom-background-grey) !important; border-color: var(--custom-border-grey) !important; } .edition-box-education, .edition-box-education .edition-box-header { background-color: var(--custom-background-blue) !important; border-color: var(--custom-border-blue) !important; } .edition-box-china, .edition-box-china .edition-box-header { background-color: var(--custom-background-purple) !important; border-color: var(--custom-border-purple) !important; } body.theme-fandomdesktop-dark .main-page .mcwiki-header { background-image: url(https://static.wikia.nocookie.net/minecraft_gamepedia/images/0/0a/GrassBackgroundDark.png/revision/latest?cb=20210613130609&format=original) !important; border-top-color: #1c2828 !important; border-left: 1px solid #1c2828; border-right: 1px solid #1c2828; border-bottom: 1px solid #1c2828; color: #e8e8e8 !important; }

/* Message boxes */ .msgbox { border-color: var(--theme-border-color); } .msgbox.msgbox-blue { background-color: var(--custom-background-blue-highlight); border-left-color: var(--custom-border-blue-highlight); } .msgbox.msgbox-green { background-color: var(--custom-background-green-highlight); border-left-color: var(--custom-border-green-highlight); } .msgbox.msgbox-orange { background-color: var(--custom-background-orange-highlight); border-left-color: var(--custom-border-orange-highlight); } .msgbox.msgbox-purple { background-color: var(--custom-background-purple-highlight); border-left-color: var(--custom-border-purple-highlight); } .msgbox.msgbox-red { background-color: var(--custom-background-red-highlight); border-left-color: var(--custom-border-red-highlight); } .msgbox.msgbox-yellow { background-color: var(--custom-background-yellow-highlight); border-left-color: var(--custom-border-yellow-highlight); } .msgbox.msgbox-magenta { background-color: var(--custom-background-magenta-highlight); border-left-color: var(--custom-border-magenta-highlight); } .msgbox.msgbox-gray { background-color: var(--custom-background-grey); border-left-color: var(--custom-border-grey); }

/* Infoboxes */ .notaninfobox { border-color: var(--theme-border-color); background-color: var(--custom-table-background); } .notaninfobox .mcwiki-header { background-color: var(--custom-background-blue-highlight); border: 1px solid var(--theme-border-color); } .alternaterows tr:nth-child(2n), .infobox-rows tr:nth-child(2n) { background-color: var(--custom-table-alternate-background); }

/* Navboxes */ .navbox, .navbox table { background-color: var(--custom-table-background); } .navbox th, .navbox .navbox-top, background-color: var(--custom-table-header-background) !important; } .loadbox-navbox { border-color: var(--theme-border-color) !important; background-color: var(--custom-table-background) !important; }
 * 1) content .loadbox-navbox > p {

/* Other templates */ .documentation, .documentation-header, .documentation > div[style*="background-color:#EAF4F9"] { background-color: var(--custom-background-blue) !important; border-color: var(--custom-border-blue) !important; }

table.schematic td, span.schematic { border-color: var(--theme-border-color); background-color: var(--custom-table-background); }

/* Table choice. Written by ItsPlantseed with some adjustments for contrast * issues */ body.theme-fandomdesktop-light .tc-yes { background: #c6efce !important; } body.theme-fandomdesktop-dark .tc-yes { background: #29542c !important; } body.theme-fandomdesktop-light .tc-always { background: #5dcc5d !important; } body.theme-fandomdesktop-dark .tc-always { background: #3b533c !important; } body.theme-fandomdesktop-light .tc-no { background: #ffc7ce !important; } body.theme-fandomdesktop-dark .tc-no { background: #592c2c !important; } body.theme-fandomdesktop-light .tc-never { background: #ff8787 !important; } body.theme-fandomdesktop-dark .tc-never { background: #533b3b !important; } body.theme-fandomdesktop-light .tc-rarely { background: #fdce5e !important; } body.theme-fandomdesktop-dark .tc-rarely { background: #594f1e !important; } body.theme-fandomdesktop-light .tc-neutral { background: #ffeb9c !important; } body.theme-fandomdesktop-dark .tc-neutral { background: #5b573f !important; } body.theme-fandomdesktop-light .tc-partial { background: #ffffdd !important; } body.theme-fandomdesktop-dark .tc-partial { background: #3e3d31 !important; } body.theme-fandomdesktop-light .tc-planned { background: #dfdfff !important; } body.theme-fandomdesktop-dark .tc-planned { background: #242f2e !important; } body.theme-fandomdesktop-light .tc-unknown { background: #ccc !important; } body.theme-fandomdesktop-dark .tc-unknown { background: #364148 !important; } body.theme-fandomdesktop-light .tc-in { color: #fff; background: #040 !important; } body.theme-fandomdesktop-dark .tc-in { background: #06450a !important; } body.theme-fandomdesktop-light .tc-inem { color: #fff; background: #080 !important; } body.theme-fandomdesktop-dark .tc-inem { background: #266c29 !important; } body.theme-fandomdesktop-light .tc-out { color: #fff; background: #700 !important; } body.theme-fandomdesktop-dark .tc-out { background: #4a0a0a !important; } body.theme-fandomdesktop-light .tc-outem { color: #fff; background: #c00 !important; } body.theme-fandomdesktop-dark .tc-outem { background: #742a2a !important; } body.theme-fandomdesktop-light .tc-default { color: inherit !important; background: #fff !important; } body.theme-fandomdesktop-dark .tc-default { color: inherit !important; background: #373737 !important; } body.theme-fandomdesktop-light .tc-hyphen { background: #ffc7ce !important; } body.theme-fandomdesktop-dark .tc-hyphen { background: #352929 !important; }

/* Miscellaneous changes */ /* Use table colors for the TOC */ .page-content #toc .toctitle { background-color: var(--custom-table-header-background); } .page-content #toc ul { background-color: var(--custom-table-background); }

/* Invert black images in dark mode */ body.theme-fandomdesktop-dark .math-image, body.theme-fandomdesktop-dark img[data-image-name="Android.svg"], body.theme-fandomdesktop-dark img[data-image-name="MacOS wordmark.svg"], body.theme-fandomdesktop-dark img[data-image-name="IOS.svg"], body.theme-fandomdesktop-dark img[data-image-name="IPadOS.svg"], body.theme-fandomdesktop-dark img[data-image-name="AppleTVLogo.svg"], body.theme-fandomdesktop-dark img[data-image-name="GearVR.svg"], body.theme-fandomdesktop-dark img[data-image-name="Playstation logo.svg"], body.theme-fandomdesktop-dark img[data-image-name="PS5.svg"], body.theme-fandomdesktop-dark img[data-image-name="PS4.svg"], body.theme-fandomdesktop-dark img[data-image-name="PS3.svg"], body.theme-fandomdesktop-dark img[data-image-name="PSVita.svg"], body.theme-fandomdesktop-dark img[data-image-name="Xbox Series.svg"], body.theme-fandomdesktop-dark img[data-image-name="New Nintendo 3DS.svg"] { filter: hue-rotate(180deg) invert(100%) saturate(.6) brightness(2); }

/* Hydra overrides. These should be addressed when FandomDesktop is fully rolled * out. */ /* Hydra overrides for Earth/Dungeons */ .rootpage-Minecraft_Dungeons #content, .rootpage-Minecraft_Earth #content, .ns-10000 #content, .ns-10001 #content, .ns-10002 #content, .ns-10003 #content { background-color: unset; } /* Fix file TOC being light-themed */ border-color: var(--theme-border-color); background-color: var(--custom-table-background); }
 * 1) filetoc {

/* Fix JS links (such as in loadboxes) being too dark */ .jslink { color: var(--theme-link-color); }

/* Fix horizontal lists on dark theme */ background-color: var(--theme-page-text-color); height: 4px; width: 4px; border-radius: 2px; }
 * 1) mw-content-text .hlist li:not(:last-child)::after {

/* Stikitable overrides. Should probably deprecate this class given this * functionality is built into FandomDesktop. */ .stikitable > * > tr:first-child > th::after { left: unset; border-bottom: unset; }

/* FandomDesktop fixes: May be useful to check from time to time if these got * any actual fixes. */ /* Restore border collapsing for tables */ .article-table, .wikitable { border-collapse: collapse; background-color: var(--custom-table-background); }

/* Restore pre-FD table header text centering */ .wikitable > tr > th, .wikitable > * > tr > th { text-align: center; background-color: var(--custom-table-header-background); }

/* Restore pre-FD Hydra/Vector table paddings. 12px on all sides feels too much * for a desktop skin. */ .article-table tr td, .article-table tr th, .wikitable tr td, .wikitable tr th { padding: 0.2em 0.4em; }

/* Fix issues with tables using rowspan / colspan */ .article-table tr td:first-child, .article-table tr th:first-child, .wikitable tr td:first-child, .wikitable tr th:first-child { border: 1px solid var(--theme-border-color); }

/* Fix FD setting box-sizing to border-box by default, and some elements assume * the other option. */ .invslot { box-sizing: content-box; }

/* Fix FD collapsing navbox borders */ .navbox, .navbox table { border-collapse: separate; border-spacing: 2px; }

/* Fix some height declarations being inappropriate with FD */ .wikiEditor-ui-toolbar .page-characters div span { height: unset; }
 * 1) msupload-dropzone,

/* Fix class name overuse */ .wikiEditor-ui-toolbar .page { margin-top: 0; }

/* Fix page history headers being broken into several lines */ div.mw-history-subtitle { display: inline-block; }

/* Fix many special page forms having no styling at all */ .mw-special-MergeHistory fieldset, .mw-special-Whatlinkshere fieldset, .mw-special-Import fieldset { border: 1px solid #2a4b8d; margin: 1em 0 1em 0; padding: 0 1em 1em; } .mw-special-MergeHistory fieldset legend, .mw-special-Whatlinkshere fieldset legend, .mw-special-Import fieldset legend { padding: 0.5em; }
 * 1) mw-history-searchform > fieldset,
 * 2) mw-Protect-Form > fieldset,
 * 3) mw-abusefilter-editing-form > fieldset,
 * 4) mw-upload-form > fieldset,
 * 1) mw-history-searchform > fieldset legend,
 * 2) mw-Protect-Form > fieldset legend,
 * 3) mw-abusefilter-editing-form > fieldset legend,
 * 4) mw-upload-form > fieldset legend,

/* Fix cramped infoboxes */ .infobox-rows th, .infobox-rows td { padding: 4px; }

/* Fix indentation with `:` having too much padding */ .page-content dl { margin: 0; }

/* Fix the VE/Source button messing up the 2010 editor */ .wikiEditor-ui .oo-ui-toolbar-bar { padding: 0; } .wikiEditor-ui .ve-init-mw-editSwitch .oo-ui-popupToolGroup.oo-ui-iconElement .oo-ui-popupToolGroup-handle { padding: 16px 8px; }

/* Fix arrows in enhanced recent changes */ .mw-enhancedchanges-arrow-space { height: 19px; }

/* Fix broken VE popups */ .oo-ui-popupWidget-popup { padding: 0; }

/* Fix improper notification styling on dark mode */ .mw-notification { background-color: var(--custom-background-grey); border-color: var(--custom-border-grey); color: var(--theme-page-text-color); } .mw-notification.mw-notification-type-warn { background-color: var(--custom-background-yellow-highlight); border-color: var(--custom-border-yellow-highlight); } .mw-notification.mw-notification-type-error { background-color: var(--custom-background-red-highlight); border-color: var(--custom-border-red-highlight); } body.theme-fandomdesktop-dark .postedit::after { filter: invert(100%); }

/* Fix "this document contains errors" using an inappropriate color with dark * mode */ .oo-ui-messageDialog-message { color: var(--theme-page-text-color); }

/* Fix diffs being too bright */ .diff .diff-deletedline { background-color: var(--custom-background-red-highlight); border: 1px solid var(--custom-border-red-highlight); } .diff .diff-addedline { background-color: var(--custom-background-green-highlight); border: 1px solid var(--custom-border-green-highlight); }

/* Fix various infobox changes (by ItsPlantseed) */ .notaninfobox { box-sizing: content-box; }

.notaninfobox .infobox-rows { word-break: break-word; }

.infobox-rows li > span, .infobox-rows .hlist > span { white-space: normal !important; word-break: break-word; }

/* Fix table alignment inheritance (once again by ItsPlantseed) */ .article-table tr td, .wikitable tr td { text-align: inherit; }