Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/***
* @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 */
#wds-brand-fandom-logomark > path:nth-of-type(1),
#wds-brand-fandom-logo-light > path:nth-of-type(1) {
fill: var(--ivory-logomark);
}
#wds-brand-fandom-logomark > path:nth-of-type(2),
#wds-brand-fandom-logo-light > path:nth-of-type(2) {
fill: var(--ivory-logomark--secondary);
}
#wds-brand-fandom-logo-light > path:nth-of-type(3) {
fill: var(--ivory-text-color);
}
/*** 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 ***/
#WikiaBar {
--theme-accent-color: var(--ivory-background-primary);
--theme-accent-label-color: var(--ivory-text-color);
}
#WikiaBar .tools > li {
border-color: var(--ivory-text-color-muted);
}
#WikiaBar .wds-dropdown__content {
--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);
}
#WikiaBar .wds-dropdown:before, #WikiaBar .wds-dropdown:after {
border-top-color: var(--ivory-background-tertiary);
}
/** 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);
}