MediaWiki:Fandomdesktop.css

/* CSS placed here will be applied to the FandomDesktop skin */

/* Variables */ .theme-fandomdesktop-light { /* Light theme only */ --general-bg-color: #f9f9f9; --border-color: #aaa; } .theme-fandomdesktop-dark { /* Dark theme only */ --general-bg-color: var(--theme-page-background-color--secondary); --border-color: var(--theme-border-color); }

/* Reduce padding and spacing on elements */ /* Header */ .page-header { margin-bottom: 5px; } /* Paragraphs */ .page-content p { margin-bottom: 12px; } .page-content p + p { margin-top: 12px; } /* Table of Contents */ .page-content .toc { margin-top: 12px; margin-bottom: 12px; } /* Headings */ .page-content h1, .page-content h2 { margin-top: 16px; margin-bottom: 10px; } .page-content h3 { margin-top: 14px; margin-bottom: 8px; } .page-content h4 { margin-top: 12px; margin-bottom: 6px; } .page-content h5, .page-content h6 { margin-top: 8px; margin-bottom: 6px; } /* Make h6 slightly smaller than h5 */ .page-content h5 { font-size: 14px; } .page-content h6 { font-size: 13px; } /* Lists */ .page-content ol, /* Numbered lists */ .page-content ul, /* Bulleted lists */ .page-content dl /* Description lists */ { margin-top: 6px; margin-bottom: 2px; }

/* Bold page title */ .page-header__title { font-weight: 500; }

/* Make h1 headings look like page titles (bold also) */ .page-content h1 { font-weight: 500; padding: 6px 0; border-bottom: 1px solid var(--theme-border-color); }

/* Sets links weight from bold to inherit */ .page-content .mw-parser-output a { font-weight: inherit; }

/* Fix redlink problems */ a.new { cursor: pointer; } /* Make the cursor pointer when hovered */ a.new:hover, a.new:focus, a.new:active { text-decoration-style: solid; } /* Solid underlines instead of dashed */

/* Fix for the table styling, reducing line height */ .wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { padding: 0.2em 0.4em; }

/* Add invert classes for each light/dark theme on FandomDesktop */ .theme-fandomdesktop-light .invlight img, .theme-fandomdesktop-dark .invdark img { filter: invert(1); }

/* Add glow to the sorcerer mickey logo */ .theme-fandomdesktop-dark .fandom-community-header__image img { filter: drop-shadow(0px 0px 2px #ffee99) drop-shadow(0px 0px 2px #f8d077) drop-shadow(0px 0px 6px #f8d077); } .theme-fandomdesktop-dark .fandom-sticky-header__logo img { filter: drop-shadow(0px 0px 1px #ffee99) drop-shadow(0px 0px 1px #f8d077) drop-shadow(0px 0px 2px #f8d077); }

/* TOC coloring */ .toc:not(.sticky-toc) { border: none; border-radius: 10px; background-color: var(--general-bg-color); } .toc:not(.sticky-toc) .toctitle { border-color: var(--border-color); }

/* More rounded TOC elements */ .page-content .toc ul li a { border-radius: 6px; }

/* Dark theme fixes */ /* Navboxes */ .theme-fandomdesktop-dark .navbox { border-color: var(--theme-border-color); } .theme-fandomdesktop-dark .navbox, .theme-fandomdesktop-dark .navbox .navbox-subgroup .navbox-gutter, .theme-fandomdesktop-dark .navbox .navbox-image, .theme-fandomdesktop-dark .navbox .navbox-list { background-color: var(--theme-page-background-color); } .theme-fandomdesktop-dark .navbox .navbox-group, .theme-fandomdesktop-dark .navbox .navbox-image-left, .theme-fandomdesktop-dark .navbox .navbox-image-right { border-color: var(--theme-page-background-color); }

.theme-fandomdesktop-dark .navbox .navbox-title { background-color: rgba(0,0,255,.3); }

.theme-fandomdesktop-dark .navbox .navbox-above, .theme-fandomdesktop-dark .navbox .navbox-below, .theme-fandomdesktop-dark .navbox .navbox-group, .theme-fandomdesktop-dark .navbox .navbox-header { background-color: rgba(0,0,255,.2); }

.theme-fandomdesktop-dark .navbox .alt > .navbox-list { background: var(--theme-page-background-color--secondary); }

/* Dark theme bounce image */ .theme-fandomdesktop-dark .bounceme { background-color: transparent; }

/* Warning notice (for deleted pages) */ .mw-message-box-warning { background-color: var(--general-bg-color); border-radius: 10px; border-width: 0 0 0 16px; border-style: solid; border-color: #F90025; }

/* Dark theme table coloring */ .theme-fandomdesktop-dark .table-yes { background-color: rgba(0,255,0,.3) !important; } .theme-fandomdesktop-dark .table-no { background-color: rgba(255,0,0,.3) !important; } .theme-fandomdesktop-dark .table-no2 { background-color: rgba(0,0,225,.2) !important; } .theme-fandomdesktop-dark .table-na { background-color: rgba(128,128,128,.3) !important; color: #E0E0E0 !important; }

/* Tabs styling */ .topnav-tabs { font-weight: normal; text-align: left; margin-bottom: 5px; } .topnav-tabs .topnav-tab { background-color: var(--general-bg-color); min-width: 80px; margin-left: 10px; display: inline-block; padding: 5px 10px; text-align: center; margin-bottom: 0; font-size: 100%; border-bottom: none; border-radius: 10px 10px 0 0; } .topnav-tabs .topnav-tab.topnav-tab-current { background-color: var(--border-color); } .topnav-tabs-bottom { border-bottom: 2px solid var(--border-color); clear: both; }

/* Dark theme fixes for the template */ .theme-fandomdesktop-dark .collapsebox-header { background-color: var(--theme-border-color) !important; } .theme-fandomdesktop-dark .collapsebox-content { border-color: var(--theme-border-color) !important; }

/* UI Design - WIP */ /** Dropdowns **/ .wds-dropdown { --wds-dropdown-background-color: var(--theme-page-background-color); } .main-container .wds-dropdown__content, .fandom-sticky-header .wds-dropdown__content, .WikiaBarWrapper .wds-dropdown__content { border-radius: 10px; border: none; box-shadow: 0 3px 12px 0 rgba(0,0,0,.3); } .main-container .wds-dropdown:before, .fandom-sticky-header .wds-dropdown:before, .WikiaBarWrapper .wds-dropdown:before { border: none; } .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-nested .wds-dropdown-level-nested__content { border-radius: 10px; border: none; box-shadow: 0 3px 12px 0 rgba(0,0,0,.3); }

.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a, .main-container .wds-dropdown__content .wds-list.wds-is-linked > li > a, .fandom-sticky-header .wds-dropdown__content .wds-list.wds-is-linked > li > a, .WikiaBarWrapper .wds-dropdown__content .wds-list.wds-is-linked > li > a { border-radius: 6px; }

.wds-dropdown__content .wds-list.wds-is-linked li > a svg.wds-dropdown-chevron { transition: .3s; }

/** Notifications **/ .wds-banner-notification { box-shadow: 0 3px 12px 0 rgba(0,0,0,.3); border-radius: 10px; } .wds-banner-notification, .wds-banner-notification__text, .wds-banner-notification__close { border: none; } .wds-banner-notification { background-color: var(--theme-page-background-color); } .wds-banner-notification__text { color: var(--theme-page-text-color); } .wds-banner-notification__text a { color: var(--theme-link-color); } .wds-banner-notification__text a:hover { color: var(--theme-link-color--hover); } .wds-banner-notification__close { color: var(--theme-page-text-color); }

.wds-banner-notification__icon { display: none; }

.wds-banner-notification.wds-success .wds-banner-notification__text { border-left: 10px solid #25963e; } .wds-banner-notification.wds-message .wds-banner-notification__text { border-left: 10px solid var(--theme-accent-color); } .wds-banner.notification.wds-warning.wds-banner-notification__text, .wds-banner.notification.wds-alert .wds-banner-notification__text { border-left: 10px solid #f01e2c; }

/* Site notice */ .sitenotice-wrapper { border-radius: 10px; padding-left: 32px; } .sitenotice-wrapper:before { width: 16px; background-color: #2d36ea; } .sitenotice-wrapper .sitenotice-wrapper__content .sitenotice, .sitenotice-wrapper .sitenotice-wrapper__content .sitenotice a { font-weight: normal; }

/* Completed edit notice ("Your edit was saved") */ .postedit { border-radius: 10px; box-shadow: 0 3px 12px 0 rgba(0,0,0,.3); background-color: var(--theme-page-background-color) !important; border-width: 0 0 0 16px; border-style: solid; border-color: var(--border-color) !important; padding: 6px 12px; } .postedit .postedit-content { color: var(--theme-page-text-color) !important; }

/* Categories */ /* Article categories */ .page-footer__categories .wds-collapsible-panel__header { display: none; } .page-footer .wds-collapsible-panel.wds-is-collapsed .wds-collapsible-panel__content { display: block; } .page-footer .wds-icon.wds-icon-small { display: none; } .page-footer .wds-collapsible-panel .article-categories { border-left: 12px solid var(--border-color); border-radius: 6px; background-color: var(--general-bg-color); padding: 6px; } .page-footer .wds-collapsible-panel .article-categories a[title="Special:Categories"] + span { display: none; } .page-footer .wds-collapsible-panel .article-categories a[title="Special:Categories"]:after { content: ':'; } .wds-collapsible-panel__content a { border-right: none; } .page-footer .wds-collapsible-panel .article-categories .container, .page-footer .wds-collapsible-panel .article-categories .catlinks { padding: 0; } .page-footer .wds-collapsible-panel .article-categories .catlinks .mw-normal-catlinks { font-size: 0; } .page-footer .wds-collapsible-panel .article-categories .catlinks .mw-normal-catlinks > * { font-size: 14px; } .page-footer .wds-collapsible-panel .article-categories .last .add { padding: 2px 8px; height: auto; border-radius: 6px; border: none; background-color: var(--theme-accent-color); color: var(--theme-accent-label-color); vertical-align: middle; }

.page__right-rail { background-color: var(--theme-page-background-color); } .rail-module { background: none; } .page-side-tool { background-color: var(--theme-page-background-color); } .wds-tooltip { --wds-tooltip-background-color: var(--theme-page-background-color); border-radius: 6px; } .popover { background-color: var(--theme-page-background-color); color: var(--theme-page-text-color); border-radius: 6px !important; font-family: 'Rubik', 'Helvetica', 'Arial', sans-serif; box-shadow: 0 3px 12px 0 rgba(0,0,0,.3); } .popover-body { color: var(--theme-page-text-color); }

.popover .arrow { display: none; }

/* Portals - remove right rail */ .ns-112 .page__right-rail { display: none; } .ns-112 .page__main { border-radius: 3px !important; } /* Portals - remove footer and categories */ .ns-112 .page-header__categories, .ns-112 #mixed-content-footer { display: none; }

/* Dark theme documentation coloring */ .theme-fandomdesktop-dark .template-documentation { background-color: rgba(0,255,0,.3); }

/* Add left border to right rail for emphasis */ .page__right-rail { border-left: 1px solid #aaa; } .theme-fandomdesktop-dark .page__right-rail { border-color: var(--theme-border-color); }