User:BlurryReflections/global.css

/*** * @title			Ivory * @description	Light pink theme for global navigation Inspired by Ivorycello on YouTube * @docs			Ivory * @version		v1.0 * @author			Nyxiju * @skin			FandomDesktop * @license		CC-BY-SA 3.0 * @installation	@import url("/load.php?mode=articles&articles=u:dev:MediaWiki:Ivory.css&only=styles"); * @instructions	Go to the CSS page you would like to install this theme on. If you would like to install it on all of fandom, use this page: https://community.fandom.com/wiki/User:USERNAME/global.css If you would only like the theme on one wiki, use this page: https://WIKI.fandom.com/wiki/User:USERNAME/common.css Press edit, paste in the import statement: @import url("/load.php?mode=articles&articles=u:dev:MediaWiki:Ivory.css&only=styles"); Save changes and you should see the theme take effect. DISCLAIMER: This does not work on discussions. If you would like it to work on discussions, download the Stylus extension for your browser, write a new style, paste in the import statement there, enable the style and save. Your changes should take effect immediately. ***/


 * root {

/* background of global nav buttons when hovered over */ --ivory-accent: #FF73A9; /* color of mark all as read and current notifications tab header */ --ivory-accent-secondary: #BF082C; /* color of highlight when hovering over a link in a dropdown */ --ivory-accent-dark: #FF73A6; /* color of notifications dot and background to the count */ --ivory-notification: #F57898; /* color of most text */ --ivory-text-color: #F00; /* color of other tab header in notifications */ --ivory-text-color-muted: #C00; /* background color of new notifications */ --ivory-background-primary: #FF8AC4; /* Main background color of navbar */ --ivory-background-secondary: #FCD4E4; /* background of dropdowns in navbar */ --ivory-background-tertiary: #FF87B9; /* background of glabal nav buttons when not hovered over */ --ivory-background-accent: #FF7AA2; /* color of flame in fandom logo */ --ivory-logomark: #FF21CB; /* color of heart in fandom logo */ --ivory-logomark--secondary: #FF0051; }

/* Overwrite the color of Fandom's logo colors */ fill: var(--ivory-logomark); }
 * 1) wds-brand-fandom-logomark > path:nth-of-type(1),
 * 2) wds-brand-fandom-logo-light > path:nth-of-type(1) {

fill: var(--ivory-logomark--secondary); }
 * 1) wds-brand-fandom-logomark > path:nth-of-type(2),
 * 2) wds-brand-fandom-logo-light > path:nth-of-type(2) {

fill: var(--ivory-text-color); }
 * 1) wds-brand-fandom-logo-light > path:nth-of-type(3) {

/*** Global navigation ***/ .global-navigation { --fandom-global-nav-background-color: var(--ivory-background-secondary); --fandom-global-nav-link-color: var(--ivory-text-color); --fandom-global-nav-link-color--hover: var(--ivory-accent); --fandom-global-nav-icon-color: var(--ivory-text-color); --fandom-global-nav-icon-background-color: var(--ivory-background-accent); --fandom-global-nav-icon-background-color--hover: var(--ivory-accent); --fandom-global-nav-icon-background-color--active: var(--fandom-global-nav-icon-background-color--hover); --fandom-global-nav-icon-border-color: var(--ivory-text-color); --fandom-global-nav-icon-border-color--hover: var(--fandom-global-nav-icon-background-color--hover); --fandom-global-nav-icon-border-color--active: var(--fandom-global-nav-icon-border-color--hover); --fandom-global-nav-bottom-icon-color: var(--fandom-global-nav-icon-color); --fandom-global-nav-counter-background-color: var(--ivory-notification); --fandom-global-nav-counter-label-color: var(--ivory-text-color); }

.global-navigation__link[data-tracking-label="start-a-wiki"] .global-navigation__icon { color: var(--ivory-text-color); background-color: var(--ivory-background-accent); border: none; }

.global-navigation__link[data-tracking-label="start-a-wiki"] .global-navigation__icon:hover, .global-navigation__link[data-tracking-label="start-a-wiki"]:hover .global-navigation__icon { color: var(--ivory-text-color); background-color: var(--ivory-background-accent); }

.global-navigation__links .global-navigation__icon { transition: border-color 250ms ease, color 250ms ease, background-color 250ms ease, border-radius 250ms ease; }

.global-navigation__links .global-navigation__icon:hover, .global-navigation__link:hover .global-navigation__icon, .global-navigation__links .wds-dropdown:hover .global-navigation__icon { border-radius: 33%; }

/*** Dropdowns ***/ .global-navigation .wds-dropdown:not(.notifications .wds-dropdown) { --fandom-dropdown-background-color: var(--ivory-background-tertiary); --fandom-border-color: var(--fandom-dropdown-background-color); --fandom-text-color: var(--ivory-text-color); --fandom-link-color: var(--ivory-text-color); --fandom-link-color--fadeout: var(--ivory-accent-dark); }

/*** Notifications ***/ .global-navigation .notifications { --fandom-border-color: var(--ivory-background-primary); --fandom-text-color: var(--ivory-text-color); --fandom-link-color: var(--ivory-accent-secondary); --fandom-link-color--hover: var(--ivory-accent-secondary); --fandom-accent-color: var(--ivory-accent); --fandom-accent-color--hover: var(--ivory-accent-secondary); --fandom-accent-label-color: var(--ivory-text-color); --fandom-notifications-background-color: var(--ivory-background-primary); --fandom-dropdown-background-color: var(--ivory-background-tertiary); --fandom-notifications-read-card-background-color: var(--ivory-background-secondary); --fandom-notifications-unread-card-background-color: var(--ivory-background-primary); --fandom-notifications-footer-text-color: var(--ivory-text-color); }

/* Tabs */ .global-navigation .notifications .wds-tabber .wds-tabs__tab:not(.wds-is-current) { color: var(--ivory-text-color-muted); }

.global-navigation .notifications .wds-tabs__tab-label > span { background-color: var(--fandom-global-nav-counter-background-color); color: var(--fandom-global-nav-counter-label-color); }

/* Cards */ .global-navigation .notifications [class*="NotificationCard-module_card__"] { --fandom-border-color: var(--ivory-background-accent); }

.global-navigation .notifications [class*="NotificationCard-module_card__"] [class^="NotificationCard-module_unreadStatusDot__"] { --fandom-link-color: var(--ivory-notification); }

/*** Search ***/ .search-modal { --fandom-text-color: var(--ivory-text-color); --fandom-text-color--hover: var(--ivory-accent); --fandom-dropdown-background-color: var(--ivory-background-primary); --fandom-border-color: var(--fandom-dropdown-background-color); --fandom-accent-color: var(--ivory-text-color-muted); --fandom-accent-color--hover: var(--ivory-accent-dark); --fandom-accent-label-color: var(--ivory-text-color); --fandom-link-color--fadeout: var(--ivory-background-accent); --fandom-link-color: var(--ivory-logomark--secondary); }

.search-modal form > input::placeholder { color: var(--ivory-text-color); opacity: 0.4; }

/*** Global footer ***/ .global-footer, .global-footer__section-header { background-color: var(--ivory-background-secondary); color: var(--ivory-text-color); }

.global-footer__link, .global-footer__link:active, .global-footer__link:focus, .global-footer__link:visited, .global-footer__bottom a, .global-footer__bottom a:visited { color: var(--ivory-accent); }

.global-footer__link:hover, .global-footer__bottom a:hover, .global-footer__section-social-links .global-footer__link-icon:hover { color: var(--ivory-accent); }

.global-footer__section-social-links .global-footer__link-icon { color: inherit; }

.global-footer__bottom { background-color: inherit; }

/*** QuickBar ***/ --theme-accent-color: var(--ivory-background-primary); --theme-accent-label-color: var(--ivory-text-color); }
 * 1) WikiaBar {

border-color: var(--ivory-text-color-muted); }
 * 1) WikiaBar .tools > li {

--wds-dropdown-background-color: var(--ivory-background-tertiary); --wds-dropdown-border-color: var(--wds-dropdown-background-color); --wds-dropdown-text-color: var(--ivory-text-color); --wds-dropdown-linked-item-color: var(--wds-dropdown-text-color); --wds-dropdown-linked-item-background-color: var(--ivory-accent-dark); }
 * 1) WikiaBar .wds-dropdown__content {

border-top-color: var(--ivory-background-tertiary); }
 * 1) WikiaBar .wds-dropdown:before, #WikiaBar .wds-dropdown:after {

/** Social Icons **/

.global-footer__section.wds-is-follow-us .global-footer__link { background: no-repeat center; -webkit-background-size: 24px; -o-background-size: 24px; background-size: 24px; display: inline-block; height: 24px; margin-right: 20px; width: 24px; }

.global-footer__section.wds-is-follow-us .wds-icon { fill: currentColor; height: 24px; min-width: 24px; width: 24px; }

.global-footer__section.wds-is-follow-us .global-footer__links-list { grid-gap: 22px; display: grid; grid-template-columns: repeat(auto-fill,22px); }

.global-footer__bottom-bar { background: var(--ivory-background-tertiary); font-size: 12px; min-height: 50px; padding: 0 20px; text-align: center; }

/*** Scrollbar ***/
 * -webkit-scrollbar-track {

background-color: var(--ivory-background-primary); }


 * -webkit-scrollbar-thumb {

background-color: var(--ivory-accent); border-radius: 10px; }


 * -webkit-scrollbar {

width: 10px; height: 10px; }


 * -webkit-scrollbar-corner {

background-color: var(--ivory-background-primary); }