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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/**
* @title Katsuragi
* @description Dark purple theme for the global navigation.
* Inspired by Misato Katsuragi from Neon Genesis Evangelion.
* @author Americhino
* @version 2.2.3
* @license CC-BY-SA 3.0
* @colordef #1a1b33; background
* @colordef #4c4e9e; hub links, icons
* @colordef #7b797a; dropdown chevrons
* @colordef #ccc; dropdown text, buttons
* @colordef #a0210f; notification count
* @colordef #444; search text
* @colordef #e0e0e0; text
* @colordef #212241; notifications
*
*/
.wds-global-navigation-wrapper {
box-shadow: none;
}
.wds-global-navigation {
background-color: #1a1b33;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 0;
border-image: none;
}
.wds-is-wikia-org.wds-global-navigation {
background-color: #1a1b33;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 0;
border-image: none;
border-top-color: transparent !important;
}
.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(--katsu-height, 55px);
}
.wds-global-navigation a:hover:not(.wds-notifications__mark-all-as-read),
.wds-global-navigation a:hover:not(.wds-global-navigation__link),
.wds-global-navigation__user-menu .wds-global-navigation__dropdown-link.wds-sign-out button.wds-sign-out__button,
.wds-is-wikia-org .wds-sign-out__button {
color: #e0e0e0;
transition: all .2s ease !important;
text-shadow: 0;
}
.wds-global-navigation__logo,
.wds-global-navigation__link,
.wds-global-navigation__search,
.wds-global-navigation__search-label,
.wds-global-navigation__search-input,
.wds-global-navigation__user-menu,
.wds-global-navigation__notifications-menu,
.wds-global-navigation__start-a-wiki,
.wds-global-navigation__wikis-menu {
background: transparent;
color: #fff;
}
.wds-global-navigation__notifications-menu-counter,
.wds-global-navigation__search-submit {
background-color: transparent!important;
border-radius: 2px;
border: none;
}
.wds-global-navigation__search-submit .wds-icon,
.wds-global-navigation__search-close .wds-icon {
fill: #fff !important;
}
.wds-global-navigation.wds-search-is-always-visible .wds-global-navigation__search-input::-webkit-input-placeholder {
color: #444;
}
.wds-global-navigation__logo-image path {
fill: #fff;
}
.wds-global-navigation__logo-image path:first-child,
#wds-company-logo-fandom-white path:first-child {
fill: #4c4e9e;
}
.wds-is-wikia-org .wds-global-navigation__logo-image path {
fill: #fff !important;
}
.wds-global-navigation__search-input-wrapper {
border-bottom-color: #4c4e9e !important;
}
.wds-global-navigation__search-suggestions {
margin-top: -1px !important;
}
.wds-global-navigation__search-suggestions,
.wds-global-navigation__search-suggestions a {
color: #111
}
.wds-global-navigation__search-toggle-text {
display: none;
}
.wds-global-navigation__search-toggle-icon,
.wds-is-wikia-org .wds-global-navigation__search-toggle-icon {
transform: scale(1.2) !important;
}
.wds-is-wikia-org .wds-global-navigation__search-input {
color: #e0e0e0;
}
.wds-global-navigation__search-input {
-webkit-appearance: none;
background: 0 0;
border: 0;
box-sizing: border-box;
color: #fff;
flex: 1 1 auto;
font-family: sans-serif;
font-size: 14px;
height: 28px !important;
padding: 0;
width: 0;
}
.wds-global-navigation .wds-global-navigation__link {
color: #4c4e9e !important;
transition: .3s ease;
}
.wds-global-navigation .wds-global-navigation__link:hover,
.wds-button.wds-is-secondary.wds-global-navigation__link-button:hover {
filter: brightness(150%);
transition: .3s ease;
}
.wds-global-navigation .wds-button.wds-is-secondary.wds-global-navigation__link-button,
.wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-button.wds-is-secondary.wds-global-navigation__link-button {
color: #ccc !important;
border-color: #ccc;
}
.wds-global-navigation .wds-dropdown .wds-dropdown__content,
.wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2:hover .wds-dropdown-level-2__content,
.wds-global-navigation .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list:before,
.wds-global-navigation .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list:after,
.wds-global-navigation .wds-dropdown .wds-dropdown-level-2__content li,
.wds-global-navigation #GlobalNavigationWallNotifications {
background-color: #1a1b33;
box-shadow: none;
border: none;
}
.wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked > li:hover>a {
background-color: transparent;
color: #4c4e9e;
filter: brightness(1.1);
}
.wds-global-navigation .wds-dropdown__toggle-chevron {
fill: #7b797a !important;
}
.wds-global-navigation .wds-icon,
.wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked > li:hover>a .wds-icon {
fill: #4c4e9e
}
.wds-global-navigation .wds-global-navigation__link-button .wds-icon {
fill: #ccc !important;
}
.wds-global-navigation .wds-global-navigation__notifications-dropdown .wds-icon,
.wds-global-navigation .wds-dropdown .wds-dropdown-level-2__toggle .wds-icon {
fill: #ccc;
}
.wds-global-navigation .wds-dropdown .wds-dropdown-level-2__toggle:hover .wds-icon {
fill: #4c4e9e
}
.wds-global-navigation .wds-global-navigation__search-toggle {
transition: .2s ease;
}
.wds-global-navigation .wds-global-navigation__search-toggle:hover {
filter: brightness(150%);
transition: .2s ease;
}
.wds-global-navigation .wds-avatar .wds-avatar__image,
.wds-global-navigation .wds-avatar .wds-avatar__image:hover {
border-color: #4c4e9e !important;
}
.wds-global-navigation .wds-dropdown.wds-is-active:not(.wds-no-chevron)::after,
.wds-global-navigation .wds-dropdown.wds-is-active:not(.wds-no-chevron)::before,
.wds-global-navigation .wds-dropdown:hover:not(.wds-no-chevron)::after,
.wds-global-navigation .wds-dropdown:hover:not(.wds-no-chevron)::before,
.wds-global-navigation .wds-dropdown::after,
.wds-is-wikia-org.wds-global-navigation .wds-dropdown::after {
display: none !important;
}
.wds-global-navigation .wds-dropdown,
.wds-global-navigation .wds-notifications__dropdown-content,
#GlobalNavigationWallNotifications .notifications-for-wiki .notifications-wiki-header,
.wds-global-navigation .wds-dropdown__content .wds-list li,
#GlobalNavigationWallNotifications .notifications-markasread,
.wds-notification-card__last-actor,
#cn-entrypoint .wds-notification-card__body p {
color: #ccc;
}
.wds-notification-card__context-list .wds-notification-card__context-item:hover,
.wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-list li a {
color: #ccc !important;
filter: brightness(80%);
}
.wds-global-navigation__dropdown-toggle svg {
fill: #e0e0e0 !important;
}
#GlobalNavigationWallNotifications .notification:hover {
background-color: transparent;
}
#GlobalNavigationWallNotifications,
#GlobalNavigationWallNotifications .notification {
border: none;
}
#GlobalNavigationWallNotifications .notification time {
color: #444;
}
#GlobalNavigationWallNotifications .notification h4,
.wds-notification-card__text {
color: #e0e0e0;
}
#GlobalNavigationWallNotifications .notifications-for-wiki .notifications-for-wiki-list a {
color: #4c4e9e;
}
#GlobalNavigationWallNotifications .notification.empty {
background-color: transparent;
color: #4c4e9e;
}
#GlobalNavigationWallNotifications .notifications-for-wiki.show .notifications-for-wiki-list {
background-color: #1a1b33;
}
#GlobalNavigationWallNotifications .notifications-for-wiki .notifications-wiki-header {
background-color: #212241;
border-color: transparent;
display: flex;
align-items: center;
justify-content: space-between;
}
#GlobalNavigationWallNotifications .notifications-markasread {
background-color: #1a1b33;
border-color: transparent;
}
.wds-global-navigation .wds-list.wds-has-lines-between > li,
.wds-notifications__mark-all-as-read {
border-bottom: none;
}
.wds-global-navigation__notifications-counter,
.wds-is-wikia-org .wds-global-navigation__notifications-counter {
background-color: #a0210f !important;
color: #e0e0e0;
transform: scale(0.9);
font-weight: bold;
}
.wds-notifications__mark-all-as-read-button a,
#cn-entrypoint_mark-all-as-read a {
color: #4c4e9e !important;
}
.wds-notification-card.wds-is-unread .wds-notification-card__icon-wrapper svg {
fill: #4c4e9e !important;
}
.wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-list li a:hover,
.wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-list li:hover,
.wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-list li .wds-sign-out__button:hover,
.wds-global-navigation .wds-dropdown .wds-dropdown__content li.wds-is-selected,
.wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-list li:hover > a {
background-color: transparent !important;
color: #4c4e9e !important;
}
.wds-is-wikia-org.wds-global-navigation .wds-dropdown__content {
margin-top: -3px;
}
/* Fix signout button being a different color */
.wds-global-navigation .wds-sign-out__button {
filter: brightness(80%) !important;
}
.wds-is-wikia-org.wds-global-navigation .wds-sign-out__button {
color: #e0e0e0;
}
/* ConsistentNotifications support */
#cn-entrypoint_mark-all-as-read a {
color: #4c4e9e;
}
#cn-entrypoint .wds-notification-card.wds-is-unread .wds-avatar .wds-avatar__image {
border-color: #4c4e9e !important;
}
#cn-entrypoint #on-site-notifications-loader .wds-spinner__stroke {
stroke: #4c4e9e;
}
#cn-entrypoint .wds-notification-card.wds-is-unread .wds-avatar:before, #cn-entrypoint .wds-notification-card.wds-is-unread .wds-avatar:after {
background: #a0210f !important;
height: 9px !important;
width: 9px !important;
left: -3px;
top: 1px;
z-index: 100;
}
/* Default avatar */
.wds-global-navigation .wds-avatar .wds-avatar__image {
background-color: #212241;
}
.wds-global-navigation .wds-avatar .wds-avatar__inner-border {
border-color: #212241;
}
.wds-global-navigation .wds-avatar .wds-avatar__image path {
fill: #ccc;
}
/*** Variables ***/
.wds-global-navigation-wrapper {
--katsu-height: 55px !important;
}