User:AquariumBlocks/global.css

/* * NoGlobalNav * * @description Removes the FandomDesktop global navigation and moves user and notification dropdowns to top right * @author Joritochip * * Make sure you also import the JS at MediaWiki:NoGlobalNav.js */ .user-navigation-moved { -fandom-global-nav-link-color: var(--theme-community-header-color); -fandom-global-nav-icon-background-color: none; -fandom-global-nav-icon-background-color--hover: rgba(255, 255, 255, 0.25); -fandom-global-nav-icon-background-color--active: rgba(255, 255, 255, 0.4); } .fandom-sticky-header .user-navigation-moved { -fandom-global-nav-link-color: var(--theme-sticky-nav-text-color); } .user-navigation-moved .wds-avatar { -wds-avatar-border-color: var(--theme-community-header-color); -wds-avatar-border-color--hover: var(--theme-link-color); } .fandom-sticky-header .user-navigation-moved .wds-avatar { -wds-avatar-border-color: var(--theme-sticky-nav-text-color); }

.global-navigation .notifications .wds-dropdown__content { left: inherit !important; right: 0; } .user-navigation-moved { display: flex; margin-left: 10px; flex-direction: row; } .user-navigation-moved .wds-dropdown__toggle { width: 30px; height: 30px; } .user-navigation-moved .wds-dropdown { margin-left: 0; } .user-navigation-moved .moved-notifications { line-height: 1; } .user-navigation-moved .global-navigation__icon { width: 30px; height: 30px; border: none; } .user-navigation-moved .moved-notifications__counter { align-items: center; background: #fff; border-radius: 50%; color: #5f7a7b; display: flex; font-size: 10px; font-weight: 500; height: 18px; justify-content: center; left: 0; line-height: 1; position: absolute; top: 0; width: 18px; } .user-navigation-moved .moved-notifications__counter:empty { display: none; } .wiki-tools.wds-button-group > .wds-dropdown .wds-button { border-right: 1px solid; } .global-navigation { position: absolute; left: -500vw; box-shadow: none; } .main-container { width: 100%; margin-left: 0; } .fandom-sticky-header { left: 0; } .notifications-placeholder { left: 18px; } .global-navigation .notifications .wds-dropdown .wds-dropdown__content { border-radius: 3px 3px 0 0; } .fandom-sticky-header.is-visible ~ .global-navigation .notifications .wds-dropdown .wds-dropdown__content { top: 46px; } .fandom-sticky-header:not(.is-visible) ~ .global-navigation .notifications .wds-dropdown .wds-dropdown__content { top: 113px; right: calc((100% - 1236px)/2); } .is-content-expanded .fandom-sticky-header:not(.is-visible) ~ .global-navigation .notifications .wds-dropdown .wds-dropdown__content { right: 2.5%; } @media only screen and (max-width: 785px) { .global-navigation { top: -500vw; position: absolute !important; } } @media only screen and (min-width: 1280px) and (max-width: 1454px) { body:not(.is-content-expanded) .fandom-sticky-header:not(.is-visible) ~ .global-navigation .notifications .wds-dropdown .wds-dropdown__content { right: 7.5%; } } @media only screen and (max-width: 1279px) { .fandom-sticky-header:not(.is-visible) ~ .global-navigation .notifications .wds-dropdown .wds-dropdown__content { right: 2.5%; } } .global-navigation .notifications .wds-dropdown:before, .global-navigation .notifications .wds-dropdown:after { display: none; } /* Hacky method to flip the dropdown items in the user dropdowns TODO: Find a better way to do this */ .user-navigation-moved > .wds-dropdown .wds-list { transform: scaleY(-1); } .user-navigation-moved > .wds-dropdown .wds-list li { transform: scaleY(-1); }

/* Make search background fadeout cover area where global nav used to be */ .search-modal, .search-modal:before { left: 0; }

/* Add some space before JS loads so that buttons don't jump around */ body:not(.noglobalnav-loaded) .wiki-tools.wds-button-group::after { content: ''; margin-left: 10px; width: 60px; display: block; background-color: rgba(0, 0, 0, 0.3); border-radius: 8px; }

/* Fix sign out button color */ /* From User:Sophiedp */ .global-navigation__signout-button { line-height: 1; } .global-navigation__signout-button:hover { background-color: rgba(var(--theme-link-color--rgb),0.1); }

/* Make fullscreen background expand to full width */ .fandom-community-header__background.fullScreen { width: 100%; }

/* Fix Map editor thinking that global nav is still there */ .interactive-map-editor { margin-left: unset; width: 100vw; }