MediaWiki:Fandomdesktop.css

body.theme-fandomdesktop-light { --custom-visited-link-color: #0B0080; --custom-background-color: #f8f9fa; /*--custom-background-color-alt: #;*/ --custom-background-color--secondary: #f3f4f4; --custom-border-color: #eaecf0; } body.theme-fandomdesktop-dark { --custom-visited-link-color: #2673BF; --custom-background-color: #181818; --custom-background-color-alt: #202020; --custom-background-color--secondary: #282828; --custom-border-color: #383838; --theme-page-background-color--secondary: #282828; /* change Fandom's default secondary background to match better with Wowpedia */ }

/* Framework */ .resizable-container, .page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 { font-family: sans-serif; }

.page { border: solid 1px #F37F20; } .page__main, .page__right-rail { border-radius: unset; } .page-header__title { border-bottom: 1px solid #333; }

.fandom-community-header__background, /* hide the gradient in the header, causing sublte lines */ .page-Wowpedia .page-header__title { /* hide header on main page */ display: none; }

/* Recreate hydradark feel */ .page-content p, .page-content section { margin: 0.5em 0; } .page-content dl { margin: 0.2em 0 0.5em; } .page__main p+ul, .page__main p+ol { margin-top: -0.5em; }

/* Reduce the size of sub-headings within a table of contents */ .toc ul li li a { line-height: 1.5; } .toc ul li li li a { line-height: 1.33; }

/* The shadow behind the left buttons is too subtle in dark mode */ .theme-fandomdesktop-dark .page-side-tool { box-shadow: 0 3px 12px 0 rgba(0, 0, 0, .4); }

/* Main page - WoW Classic logo */ .theme-fandomdesktop-dark .mp-lightimg, .theme-fandomdesktop-light .mp-darkimg { display: none; }

/* Code - bring back hydra/hydradark code styling */ code { background-color: var(--custom-background-color); border: 1px solid var(--custom-border-color); border-radius: 2px; padding: 1px 4px; }

/* Add back visited links color */ a { transition: unset; } a:visited, a.external:visited, a.extiw:visited { color: var(--custom-visited-link-color); } .fandom-community-header a:visited, .fandom-sticky-header a:visited, .ve-fd-header__title a:visited, .page__main .wtooltip a:visited { color: inherit; } a.new:visited { color: #F05048; } a.new:visited:hover { color: var(--theme-alert-color--hover); } a.mw-selflink { color: inherit; font-weight: bold; text-decoration: inherit; }

/* Add the External links icon */ .mw-parser-output .external { background-position: center right; background-repeat: no-repeat; background-image: url(https://static.wikia.nocookie.net/ucp-internal-test-starter-commons/images/2/25/External.svg/revision/latest); background-size: 10px; padding-right: 13px; }

/* Reset tooltip font weight */ .theme-fandomdesktop-dark .page__main .wtooltip a, .theme-fandomdesktop-light .page__main .wtooltip a { font-weight: inherit; }

/* Accomodate FandomDesktop's narrow layout by making infoboxes narrower with staggered headings/data. */ .infobox { max-width: 18.25em; }

.infobox th[scope=row] { display: block; width: 100%; }

.infobox th[scope=row]+td { display: block; min-width: 90%; margin-left: 10%; margin-right: 0; }

/* However, do not apply this narrower infobox if the screen is large and the user has maximized their screen. (1024px is the same break point as the FandomDesktop side bar.) */ @media screen and (min-width:1024px) {   .is-content-expanded .infobox { max-width: none; }   .is-content-expanded .infobox th[scope=row], .is-content-expanded .infobox th[scope=row]+td { display: table-cell; width: inherit; }   .is-content-expanded .infobox th[scope=row]+td { min-width: unset; } }

/* Main Page and Project:Community portal */ .theme-fandomdesktop-dark .bg-darkred { background: #1A1616; } .theme-fandomdesktop-dark .bg-darkgreen { background: #161A16; } .theme-fandomdesktop-dark .bg-darkblue { background: #16181D; } .theme-fandomdesktop-dark .bg-darkgray { background: #181818; } .theme-fandomdesktop-dark .bg-darkred, .bg-darkgreen, .bg-darkblue, .bg-darkgray { border-style: none; } .theme-fandomdesktop-dark .mpcontentbox > h3 { border-color: #303030; }

/* Darktable stuff */ .theme-fandomdesktop-dark .darktable, .theme-fandomdesktop-dark .darkbox, .theme-fandomdesktop-dark div.forumheader {background-color: #181818; border-color: #383838} .theme-fandomdesktop-dark table.stylish td:not(:first-child) { border-color:#383838; } .theme-fandomdesktop-dark .navbox, .theme-fandomdesktop-dark .navbox-subgroup {background-color: #181818; border-color: #383838} .theme-fandomdesktop-dark table.navbox {border-color: #383838} .theme-fandomdesktop-dark .navbox-even, .theme-fandomdesktop-dark .alt, .theme-fandomdesktop-dark .darktable .alt, .theme-fandomdesktop-dark .rowtitle, .theme-fandomdesktop-dark .darktable .rowtitle, .theme-fandomdesktop-dark .darkbox .alt {background-color: #202020} .theme-fandomdesktop-dark .navbox-list {border-color: #181818} .theme-fandomdesktop-dark table.zebra.darktable > tbody > tr:nth-child(2n+1), .theme-fandomdesktop-dark table.zebra.darkbox > tbody > tr:nth-child(2n+1) {background-color: #202020} .theme-fandomdesktop-dark table.zebra> tbody > tr:nth-child(2n+1), .theme-fandomdesktop-dark table.zebra.darkbox > tbody > tr:nth-child(2n+1) {background-color: #282828} .theme-fandomdesktop-dark table.darktable th, .theme-fandomdesktop-dark table.darkbox th, .theme-fandomdesktop-dark .navbox-title, .theme-fandomdesktop-dark table.navbox th, .theme-fandomdesktop-dark table.stylish td:first-child {background-color: #062540} .theme-fandomdesktop-dark table.darktable td.title, .theme-fandomdesktop-dark .darkbox td.title {background-color: #303030} .theme-fandomdesktop-dark table.darktable tr:not(:first-child) th, .theme-fandomdesktop-dark table.darkbox tr:not(:first-child) th, .theme-fandomdesktop-dark .navbox-abovebelow, .theme-fandomdesktop-dark .navbox-group, .theme-fandomdesktop-dark .navbox-subgroup .navbox-title {background-color: #072C4D} .theme-fandomdesktop-dark .navbox-subgroup .navbox-group, .theme-fandomdesktop-dark .navbox-subgroup .navbox-abovebelow {background-color: #282828} .theme-fandomdesktop-dark .navbox-abovebelow, .theme-fandomdesktop-dark .navbox-group, .theme-fandomdesktop-dark .navbox-subgroup .navbox-title { background-color: #282828 }

/* Versions tabs (versions, faction disambiguation) */ .theme-fandomdesktop-dark #versions-header-tabs a { background: #282828; } .theme-fandomdesktop-dark #versions-header-tabs a.inactivetab:hover { background: #303030; color: #808080; } .theme-fandomdesktop-dark #versions-header-tabs .activetab {background: #181818; color: #F0F0F0} .theme-fandomdesktop-dark #versions-header-tabs .activetab.hordetab { color: #A62121; } .theme-fandomdesktop-dark #versions-header-tabs .activetab.alliancetab { color: #214DA6; } .theme-fandomdesktop-dark #versions-header-tabs.item-versions a.inactivetab { border: 1px solid #404040; color: #a0a0a0; } .theme-fandomdesktop-dark #versions-header-tabs.item-versions a.activetab { border: 1px solid #997708; }

/* Template:Ambox */ .theme-fandomdesktop-dark .ambox {background-color: #282828; border-top-color: #383838; border-bottom-color: #383838; border-right-color: #383838} .theme-fandomdesktop-dark .ambox-gray {border-left-color: #383838}

/* Template:Section */ .theme-fandomdesktop-dark .greybar { background-color: #202020; border-color: #383838; color: #e0e0e0; }

/* Quality colors */ .theme-fandomdesktop-dark .qc-common, .theme-fandomdesktop-dark .qc-common a { color: white; } .theme-fandomdesktop-dark .qc-uncommon, .theme-fandomdesktop-dark .qc-uncommon a { color: #1EFF00; } .theme-fandomdesktop-dark .qc-enchant, .theme-fandomdesktop-dark .qc-enchant a { color: #FFD100; } .theme-fandomdesktop-dark .qc-artifact, .theme-fandomdesktop-dark .qc-artifact a { color: #E6CC80; } .theme-fandomdesktop-dark .qc-heirloom, .theme-fandomdesktop-dark .qc-heirloom a, .theme-fandomdesktop-dark .qc-token, .theme-fandomdesktop-dark .qc-token a { color: #00CCFF; }

/* Class colors */ .theme-fandomdesktop-dark .cc-rogue, .theme-fandomdesktop-dark .cc-rogue a { color: #FFF569; } .theme-fandomdesktop-dark .cc-priest, .theme-fandomdesktop-dark .cc-priest a { color: #F0F0F0; } .theme-fandomdesktop-dark .cc-monk, .theme-fandomdesktop-dark .cc-monk a { color: #00FF96; }

/* Template:Reputation */ .theme-fandomdesktop-dark .rep-hated {color: #cc2222} .theme-fandomdesktop-dark .rep-hostile {color: red} .theme-fandomdesktop-dark .rep-unfriendly {color: #ee6622} .theme-fandomdesktop-dark .rep-neutral {color: yellow} .theme-fandomdesktop-dark .rep-friendly {color: lime} .theme-fandomdesktop-dark .rep-honored {color: #00ff88} .theme-fandomdesktop-dark .rep-revered {color: #00ffcc} .theme-fandomdesktop-dark .rep-exalted, .theme-fandomdesktop-dark .rep-paragon {color: cyan}

.theme-fandomdesktop-dark .factiontable {background-color: #282828; border: 2px solid #282828} .theme-fandomdesktop-dark .factiontable tr {background-color: #181818} .theme-fandomdesktop-dark .factiontable.alliance th, .factiontable.alliance td.factionbg {background-color: #143A66} .theme-fandomdesktop-dark .factiontable.horde th, .factiontable.horde td.factionbg {background-color: #661111}

.theme-fandomdesktop-dark .abilitylink {color: #7ad5ff}

.theme-fandomdesktop-dark .repspanbar {background: #002040; border-width: 1px; border-style: solid; border-color: #204080 #001030 #001030 #204080}

/* Miscellaneous */ .theme-fandomdesktop-dark .blizztext, .theme-fandomdesktop-dark .text-blizz { color: #00C0FF; } .theme-fandomdesktop-dark .blizztext a, .theme-fandomdesktop-dark .text-blizz a, .theme-fandomdesktop-dark .blizztext a:visited, .theme-fandomdesktop-dark .text-blizz a:visited { color: #E0E0E0; } .theme-fandomdesktop-dark .blizztext a.new, .theme-fandomdesktop-dark .text-blizz a.new { color: #F05048; } .theme-fandomdesktop-dark .text-say { color: #E6E68E; }

/* Template:Coords error highlighting */ .theme-fandomdesktop-dark .broken.coords-link sup { background-color: #600000; padding: 1px; }

/* Template:Class, Template:Profession, Template:Race */ .theme-fandomdesktop-dark .ClassLink a, .theme-fandomdesktop-dark .ProfLink a, .theme-fandomdesktop-dark div.RaceLink a { color: #fff; }

/* Template:Userbox */ .theme-fandomdesktop-dark table.wwusrbox {background-color: #282828; border-color: #383838} .theme-fandomdesktop-dark table.wwusrbox td.main {font-size: 0.85em} .theme-fandomdesktop-dark table.wwusrbox td.left, .theme-fandomdesktop-dark table.wwusrbox td.right {background-color: #303030}

/* Fix dark theme recent changes (incl. enhanced filters) */ body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey td:not(:nth-child(-n+2)) { background-color: hsl(195, 11%, 15%); }

body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c1, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c1 tr:first-child, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: hsl(193, 45%, 15%); }

body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c2, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c2 tr:first-child, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: hsl(167, 53%, 12%); }

body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c3, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c3 tr:first-child, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: hsl(45, 100%, 12%); }

body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c4, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c4 tr:first-child, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: hsl(20, 100%, 15%); }

body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c5, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c5 tr:first-child, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: hsl(0, 75%, 15%); }

body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c5, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c5 tr:first-child, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: hsl(30, 85%, 15%); }

body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c2.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c4, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c2.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c4 tr:first-child, body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), body.theme-fandomdesktop-dark .mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) { background-color: hsl(56, 37%, 15%); }

body.theme-fandomdesktop-dark .mw-plusminus-pos { color: hsl(120, 80%, 50%); }

body.theme-fandomdesktop-dark .mw-plusminus-neg { color: hsl(0, 90%, 70%); }

/* Fix Fandom breaking enhanced RC even further, basically giving up on the dark * theme */ body.theme-fandomdesktop-dark .mw-rcfilters-highlighted { color: var(--theme-page-text-color); } body.theme-fandomdesktop-dark .mw-rcfilters-highlighted a { color: var(--theme-link-color); } body.theme-fandomdesktop-dark .mw-rcfilters-highlighted a.new { color: var(--theme-alert-color); } body.theme-fandomdesktop-dark .unpatrolled { color: var(--theme-alert-color); } body.theme-fandomdesktop-dark .autocomment, body.theme-fandomdesktop-dark .autocomment a, body.theme-fandomdesktop-dark .autocomment a:visited { color: #92999d; }

/* Math */ .theme-fandomdesktop-dark .mwe-math-fallback-image-inline { filter: invert(1); }