MediaWiki:CustomGlobalNavigation.css

/* * CustomGlobalNavigation by User:DuckeyD */

/* Implement FANDOM 2.0 FDS Colors */
 * root {

--cgn-wds-color-aqua: #00d6d6; --cgn-wds-color-black: #1a1a1a; --cgn-wds-color-coral: #ff6a64; --cgn-wds-color-dark-gray: #5f7a7b; --cgn-wds-color-light-gray: #f2f5f5; --cgn-wds-color-link: #00acac; --cgn-wds-color-link-hover: #008989; --cgn-wds-color-mid-light-gray: #dee7e5; --cgn-wds-color-middle-gray: #bed1cf; --cgn-wds-color-mint: #5df2ae; --cgn-wds-color-navy: #002a32; --cgn-wds-color-pine: #006661; --cgn-wds-color-plum: #833c58; --cgn-wds-color-purple: #460084; --cgn-wds-color-red: #ee1a41; --cgn-wds-color-warm-gray: #eeecdc; --cgn-wds-color-yellow: #dfec24; }

/* Variables */ .wds-global-navigation-wrapper { --cgn-color-text: var(--wds-fandom-color-light-gray, var(--cgn-wds-color-light-gray)); --cgn-color-text-secondary: var(--wds-fandom-color-middle-gray, var(--cgn-wds-color-middle-gray)); --cgn-color-background: var(--wds-fandom-color-navy, var(--cgn-wds-color-navy)); --cgn-color-accent: var(--wds-fandom-color-aqua, var(--cgn-wds-color-aqua)); --cgn-color-chevron: var(--wds-fandom-color-coral, var(--cgn-wds-color-coral));

--cgn-color-dropdown-background: var(--wds-fandom-color-light-gray, var(--cgn-wds-color-light-gray)); --cgn-color-dropdown-text: var(--wds-fandom-color-black, var(--cgn-wds-color-black)); --cgn-color-dropdown-text-secondary: var(--wds-fandom-color-dark-gray, var(--cgn-wds-color-dark-gray)); --cgn-color-dropdown-accent: var(--wds-fandom-color-link, var(--cgn-wds-color-link));

--cgn-color-heart: var(--cgn-color-accent); --cgn-background: var(--cgn-color-background); --cgn-height: 55px; --cgn-position: fixed; /* or absolute */

--cgn-logo-height: 27px; --cgn-link-font-size: 18px;

--cgn-start-a-wiki-display: flex; /* or none */ --cgn-start-a-wiki-secondary-display: list-item; /* or none */

--cgn-notification-bold-font-weight: bold; /* or normal */ --cgn-notification-icon-display: flex; /* or none */

--cgn-blend-mode: normal; --cgn-avatar-blend-mode: var(--cgn-blend-mode); --cgn-avatar-filter: none; --cgn-left-content-links-blend-mode: var(--cgn-blend-mode); --cgn-notification-icon_blend-mode: var(--cgn-blend-mode); --cgn-search-blend-mode: var(--cgn-blend-mode); --cgn-start-wiki-blend-mode: var(--cgn-blend-mode); }

/* Navbar */ .wds-global-navigation-wrapper { min-height: 55px; }

.wds-global-navigation, .wds-global-navigation-wrapper, .wds-global-navigation__content-container, .wds-global-navigation__content-bar-left, .wds-global-navigation__content-bar-right, .wds-global-navigation__dropdown-controls { height: var(--cgn-height); }

.wds-global-navigation__content-bar-left { mix-blend-mode: var(--cgn-left-content-links-blend-mode); }

.wds-global-navigation { background: var(--cgn-background); position: var(--cgn-position); }

.wds-global-navigation__logo-image { height: var(--cgn-logo-height); width: auto; }

.wds-global-navigation__logo-image g path:first-child { fill: var(--cgn-color-heart); }

.wds-global-navigation__logo-image g path:last-child { fill: var(--cgn-color-text); }

.wds-global-navigation__links { font-size: var(--cgn-link-font-size); }

.wds-global-navigation__link, .wds-global-navigation__search.wds-dropdown { color: var(--cgn-color-accent); }

.wds-global-navigation__link:visited, .wds-global-navigation__start-a-wiki:visited { color: var(--cgn-color-accent) !important; }

.wds-global-navigation__search.wds-dropdown { mix-blend-mode: var(--cgn-search-blend-mode); }

.wds-global-navigation__link:hover, .wds-global-navigation__search-toggle:hover { color: var(--cgn-color-text); }

.wds-global-navigation__link-group:hover .wds-global-navigation__link { color: var(--cgn-color-text); }

.wds-global-navigation__search .wds-global-navigation__search-input-wrapper { border-color: var(--cgn-color-accent); }

.wds-global-navigation__search-input { color: var(--cgn-color-text); }

.wds-global-navigation__search-input::placeholder { color: var(--cgn-color-text-secondary); }

.wds-global-navigation__search-close.wds-button.wds-is-text { color: var(--cgn-color-text); }

.wds-global-navigation__search-submit:not(.wds-is-text):not(.wds-is-secondary), .wds-global-navigation__search-submit:not(.wds-is-text):not(.wds-is-secondary).wds-is-active, .wds-global-navigation__search-submit:not(.wds-is-text):not(.wds-is-secondary):active, .wds-global-navigation__search-submit:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled), .wds-global-navigation__search-submit:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled) { background-color: var(--cgn-color-accent); color: var(--cgn-color-text); border: none; outline: none; }

.wds-global-navigation__link-group .wds-dropdown__toggle-chevron, .wds-global-navigation__notifications-dropdown .wds-dropdown__toggle-chevron, .wds-global-navigation__user-menu .wds-dropdown__toggle-chevron { fill: var(--cgn-color-chevron); }

.wds-global-navigation .wds-avatar .wds-avatar__image { background-color: var(--cgn-color-background); border-color: var(--cgn-color-accent); fill: var(--cgn-color-accent); mix-blend-mode: var(--cgn-avatar-blend-mode); -o-filter: var(--cgn-avatar-filter); -webkit-filter: var(--cgn-avatar-filter); -moz-filter: var(--cgn-avatar-filter); -ms-filter: var(--cgn-avatar-filter); filter: var(--cgn-avatar-filter); transition: border-color 0.3s; }

.wds-global-navigation .wds-notification-card .wds-avatar .wds-avatar__image:hover, .wds-global-navigation .wds-notification-card .wds-avatar .wds-avatar__inner-border:hover + .wds-avatar__image { fill: var(--cgn-color-dropdown-text); border-color: var(--cgn-color-dropdown-text); }

.wds-global-navigation__user-menu:hover .wds-avatar .wds-avatar__image { border-color: var(--cgn-color-text); fill: var(--cgn-color-text); }

.wds-global-navigation__notifications-dropdown { color: var(--cgn-color-accent); mix-blend-mode: var(--cgn-notification-icon_blend-mode); transition: color 0.3s; }

.wds-global-navigation__notifications-dropdown:hover { color: var(--cgn-color-text); mix-blend-mode: var(--cgn-notification-icon_blend-mode); }

.wds-global-navigation__start-a-wiki { display: var(--cgn-start-a-wiki-display); mix-blend-mode: var(--cgn-start-wiki-blend-mode); }

.wds-global-navigation__start-a-wiki .wds-button.wds-is-secondary:not(:disabled) { border-color: var(--cgn-color-accent); color: var(--cgn-color-accent); transition: border-color 0.3s, color 0.3s; }

.wds-global-navigation__start-a-wiki:hover { color: var(--cgn-color-text); border-color: var(--cgn-color-text); }

/* Dropdowns */ .wds-global-navigation .wds-dropdown__content { background-color: var(--cgn-color-dropdown-background); }

.wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content { background-color:var(--cgn-color-dropdown-background); border-color: var(--cgn-color-dropdown-text-secondary); }

.wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list { background: transparent; }

.wds-global-navigation .wds-dropdown__content .wds-list, .wds-global-navigation .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::after, .wds-global-navigation .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::before { background-color: transparent; }

.wds-global-navigation .wds-dropdown::after { border-bottom-color: var(--cgn-color-dropdown-background); }

.wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked > li > a, .wds-global-navigation__search-suggestions.wds-dropdown__content .wds-list.wds-is-linked > li:hover:not(.wds-is-selected) > a, .wds-global-navigation .wds-sign-out__button { color: var(--cgn-color-dropdown-text); }

.wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked > li.wds-is-selected > a, .wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked > li:hover > a, .wds-global-navigation .wds-sign-out__button:hover { color: var(--cgn-color-dropdown-accent); background-color: transparent; }

.wds-global-navigation__link-group .wds-list li:last-child { display: var(--cgn-start-a-wiki-secondary-display); }

.wds-global-navigation .wds-global-navigation__link-group .wds-dropdown__content .wds-button.wds-is-secondary { border-color: var(--cgn-color-dropdown-accent); color: var(--cgn-color-dropdown-accent); transition: border-color 0.3s, color 0.3s; }

.wds-global-navigation__link-group .wds-dropdown__content .wds-button.wds-is-secondary:hover:not(.disabled) { color: var(--cgn-color-dropdown-text); border-color: var(--cgn-color-dropdown-text); }

/* Notifications (Discussions) */ .wds-notifications__mark-all-as-read { border-color: var(--cgn-color-dropdown-text-secondary); color: var(--cgn-color-dropdown-accent); }

.wds-global-navigation .wds-notification-card .wds-notification-card__text { color: var(--cgn-color-dropdown-text); }

.wds-global-navigation .wds-notification-card .wds-notification-card__text b { font-weight: var(--cgn-notification-bold-font-weight); }

.wds-global-navigation .wds-notification-card__icon-wrapper { display: var(--cgn-notification-icon-display); }

.wds-global-navigation .wds-notification-card__icon-wrapper .wds-icon { fill: var(--cgn-color-dropdown-text-secondary); }

.wds-global-navigation .wds-is-unread .wds-notification-card__icon-wrapper .wds-icon { fill: var(--cgn-color-dropdown-accent); }

.wds-global-navigation .wds-notification-card .wds-notification-card__context-list, .wds-global-navigation .wds-notification-card .wds-notification-card__snippet, .wds-global-navigation .wds-notification-card .wds-notification-card__last-actor { color: var(--cgn-color-dropdown-text-secondary); }

.wds-global-navigation .wds-list.wds-has-lines-between > li { border-color: var(--cgn-color-dropdown-text-secondary); }

.wds-global-navigation .wds-notification-card .wds-avatar .wds-avatar__image { border-color: var(--cgn-color-dropdown-text-secondary); fill: var(--cgn-color-dropdown-text-secondary); }

/* Notifications */ .wds-global-navigation__notifications-counter { background-color: var(--cgn-color-text); color: var(--cgn-color-accent); top: calc(12px - (55px - var(--cgn-height))/2); transition: background-color 0.3s, color 0.3s; }

.wds-global-navigation__notifications-dropdown:hover .wds-global-navigation__notifications-counter { background-color: var(--cgn-color-accent); color: var(--cgn-color-text); }

background-color: var(--cgn-color-dropdown-background); border-color: transparent; }
 * 1) GlobalNavigationWallNotifications {

background-color: transparent; }
 * 1) GlobalNavigationWallNotifications .notification:hover {

border: none; }
 * 1) GlobalNavigationWallNotifications .notification {

color: var(--cgn-color-dropdown-text-secondary); }
 * 1) GlobalNavigationWallNotifications .notification time {

border-bottom: 1px solid var(--cgn-color-dropdown-text-secondary); }
 * 1) GlobalNavigationWallNotifications .notification {

font-weight: var(--cgn-notification-bold-font-weight); color: var(--cgn-color-dropdown-text); }
 * 1) GlobalNavigationWallNotifications .notification h4 {

color: var(--cgn-color-dropdown-accent); }
 * 1) GlobalNavigationWallNotifications .notifications-for-wiki .notifications-for-wiki-list a {

background-color: transparent; color: var(--cgn-color-dropdown-accent); }
 * 1) GlobalNavigationWallNotifications .notification.empty {

background-color: var(--cgn-color-dropdown-accent); color: var(--cgn-color-dropdown-text); border-top: none; border-bottom: 1px solid var(--cgn-color-dropdown-text-secondary); display: flex; align-items: center; justify-content: space-between; }
 * 1) GlobalNavigationWallNotifications .notifications-for-wiki .notifications-wiki-header {

position: initial; border-bottom-color: var(--cgn-color-dropdown-text); border-top-color: var(--cgn-color-dropdown-text); }
 * 1) GlobalNavigationWallNotifications .notifications-for-wiki .notifications-wiki-header .chevron,
 * 2) GlobalNavigationWallNotifications .notifications-for-wiki .notifications-wiki-header:hover .chevron{

background-color: var(--cgn-color-dropdown-accent); color: var(--cgn-color-dropdown-text); border-color: transparent; }
 * 1) GlobalNavigationWallNotifications .notifications-markasread {

/* Script:Highlight */ .wds-global-navigation__user-menu .wds-dropdown__content .wds-list.wds-is-linked > li:nth-child(-n + 2) > a { color: var(--cgn-color-dropdown-text) !important; }

.wds-global-navigation__user-menu .wds-dropdown__content .wds-list.wds-is-linked > li:nth-child(-n + 2):hover > a { color: var(--cgn-color-dropdown-accent) !important; }

/* Script:ConsistentNotifications */ background-color: var(--cgn-color-dropdown-accent); }
 * 1) cn-entrypoint .wds-notification-card.wds-is-unread .wds-avatar-stack__avatar::before,
 * 2) cn-entrypoint .wds-notification-card.wds-is-unread .wds-avatar-stack__avatar::after {

/* Compatibility with Responsive Mobile */

@media only screen and (max-width: 768px) { .wds-global-navigation__start-a-wiki { display: none; } }