User:Steamblust/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 */ .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 } .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: -66px; box-shadow: none; } .main-container { width: 100%; margin-left: 0; } .fandom-sticky-header { left: 0; } .global-navigation .notifications .wds-dropdown__content { border-radius: 3px 3px 0 0; } .fandom-sticky-header:not(.is-visible) + .global-navigation .notifications .wds-dropdown__content { top: calc(clamp(70px, var(--theme-icon-height, 0px), 100px) - 5px); right: calc((100% - 1236px)/2); } .is-content-expanded .fandom-sticky-header:not(.is-visible) + .global-navigation .notifications .wds-dropdown__content { right: 2.5%; } @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__content { right: 7.5%; } } @media only screen and (max-width: 1279px) { .fandom-sticky-header:not(.is-visible) + .global-navigation .notifications .wds-dropdown__content { right: 2.5%; }   .user-navigation-moved__has-header-image .fandom-sticky-header:not(.is-visible) + .global-navigation .notifications .wds-dropdown__content { top: calc(min(80px, var(--theme-icon-height, 0px)) + 35px); } } .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; }

/* Change notification icon color */ .global-navigation__icon, .global-navigation__icon:active, .global-navigation__icon:focus, .global-navigation__icon:hover, .global-navigation__icon:visited { color: #FFF; }

.global-navigation__icon { border: 2px solid #FFF; }