User:DEmersonJMFM/globalnav.css

/**************************************************************************************/ /********************* Fixes For A Clumsy Global Navigation Bar ***********************/ /********* Author(s): DEmersonJMFM + OneTwoThreeFall (Original Inversion Code) ********/ /*************** Extremely Modified From Original Code By JayJayJohnson ***************/ /**** Original Version: 20:01, 2 December 2014 - Latest Update: 15:46, 1 June 2017 ****/ /*                                                                                   */ /******* ATTRIBUTION OF FOLLOWING CODE REQUIRED UNDER CC-BY-SA LICENSE IF COPIED ******/ /*                                                                                   */ /************************************ Fuctionality ************************************/ /* Simplifies Bar to Highlight Logo, Search, & User Menus (Restored Hover Behavior)  */ /* Retains Aboslute Positioning (Moves Down The Page With Scrolling)                 */ /* Restores previous Inverse Fandom Logo                                             */ /*                                                                                   */ /************ To Use Code, Copy/Paste Import at the Top of Your Global.css ************/ /* @import "https://community.wikia.com/index.php?title=User:DEmersonJMFM/globalnav.css&action=raw&ctype=text/css&smaxage=86400&templates=expand"; */ /*                                                                                   */ /******************************* Additional Information *******************************/ /** Code in Use: http://community.wikia.com/wiki/File:Global_Header_DEmersonJMFM.png **/ /**** Moves/History: User:JayJayJohnson/common.css -> User:DEmersonJMFM/common.css ****/ /********* -> User:DEmersonJMFM/global.css -> User:DEmersonJMFM/globalnav.css *********/ /**************************************************************************************/

/* Reduces Bar Size - Check */ .wds-global-navigation { height: 38px; }

.wds-global-navigation__logo, .wds-global-navigation__search, .wds-global-navigation__account-menu, .wds-global-navigation__user-menu, .wds-global-navigation__notifications-menu { height: 38px; }

.wds-global-navigation-wrapper { height: 45px; }

/* Remove Top Ad Thus Reducing Space Under Bar - Check */ .WikiaTopAds { display: none; } body.mediawiki.ltr.ns-0 { padding-top: 0 !important; }

/* Remove Completely - Check */ .wds-global-navigation__link, /* Hub Cells */ .wds-global-navigation__link-group, /* Wiki Dropdown */ .wds-global-navigation__start-a-wiki, /* Start a Wikia Button */ button.wds-button.wds-global-navigation__search-submit { display: none; } /* Search Button */

/* Search Bar Restyling */ .wds-global-navigation__search.wds-dropdown { display: inherit; } /* Expands Toggle */

.wds-global-navigation__search-toggle { /* Invisible Toggle Needed For Search Suggests */ position: absolute; z-index: 1; opacity: 0; width: 93%; height: 25px; margin: 12px 30px 0; cursor: text; }

.wds-global-navigation__search-input-wrapper { padding: 12px 30px 0; } /* Repositioned with Toggle Removal */

.wds-global-navigation__search-input { border: 1px solid #9aa3af; padding: 0 7px 2px; height: 25px; }

.wds-search-is-active .wds-dropdown.wds-global-navigation__search.wds-no-chevron.wds-has-dark-shadow, .wds-search-is-active .wds-dropdown.wds-global-navigation__search.wds-no-chevron.wds-has-dark-shadow.is-clicked { margin-left: -34px; } /* What? */

.wds-search-is-active .wds-global-navigation__search-input-wrapper { border-bottom: none; } /* Removed Blue Line */ .wds-search-is-active .wds-global-navigation__search-close { display: none; } /* Removed 'x' Icon to Prevent Jump */

.wds-global-navigation #searchInput::-webkit-input-placeholder { color: #767C83; } /* Chrome */ .wds-global-navigation__search-close-icon { height: 12px; width: 12px; min-width: 12px; padding: 1px 0 0 7px; } /* 'X' Icon */ .wds-global-navigation__search-input-wrapper { height: 21px; } .wds-global-navigation__search-label-icon { padding-left: 3px; } /* Magnifying Glass */ .wds-global-navigation__search-suggestions { top: 100%; } .wds-global-navigation__search-suggestions .wds-is-selected a { color: #092140; } /* Suggested Pages */

/* 'X' Icon Styling */ .wds-global-navigation .wds-button.wds-is-text, .wds-global-navigation .wds-button.wds-is-text:focus:not(:disabled), .wds-global-navigation .wds-button.wds-is-text:hover:not(:disabled) { background-color: #fff; } /* Remove Dark Background */ .wds-global-navigation__search-close { transition: none; } /* Kill Unnessecary Movement/Opacity Changes */ .wds-global-navigation.wds-search-is-active svg.wds-icon.wds-icon-small.wds-global-navigation__search-close-icon { opacity: 1; } /* Show Icon When Search Is Active */

/* Restore Square Avatar & Position */ .wds-global-navigation .wds-avatar { height: 22px; width: 22px; min-width: 22px; border: solid 1px #656e78; border-radius: 0; }

/* Initial Dropdown Improvements */ .wds-global-navigation .wds-icon { fill: #39424d; } /* Prevent Blue Hover Of Icons */

.wds-global-navigation .wds-global-navigation__account-menu:active, .wds-global-navigation .wds-global-navigation__account-menu.wds-is-active, .wds-global-navigation .wds-global-navigation__user-menu:active, .wds-global-navigation .wds-global-navigation__user-menu.wds-is-active, .wds-global-navigation .wds-global-navigation__notifications-menu:active, .wds-global-navigation .wds-global-navigation__notifications-menu.wds-is-active { background-color: rgba(164,182,191,0.2); } /* Hover During Inversion */

/* Avatar Dropdown Improvements - Restore Hover Behavior */ /* Use w:c:dev:ExpandGlobalNavDropdownsOnHover/code.js For Drop On Hover */ .wds-global-navigation .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list { max-height: 500px; } .wds-global-navigation .wds-dropdown__content { box-shadow: none; padding: 0; border-radius: 0; } .wds-global-navigation__dropdown-content { top: 100%; } .wds-global-navigation .wds-dropdown__content .wds-list>li { margin: 0; } /* Hover Background Across Dropdown */ .wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked>li>a, .wds-global-navigation .wds-is-linked .wds-sign-out__button { padding: 11px 15px; color: #092140 !important; opacity: .9; } /* !important For Wikis With Careless Site Styling */ .wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked>li:hover>a, .wds-global-navigation .wds-is-linked .wds-sign-out__button:hover { background-color: rgba(164,182,191,0.2); color: #092140; opacity: 1; } /* Prevent Blue Hover Of Text */ .wds-global-navigation .wds-dropdown.wds-is-active::after, .wds-global-navigation .wds-dropdown.wds-is-active::before, .wds-global-navigation .wds-dropdown:hover::after, .wds-global-navigation .wds-dropdown:hover::before { display: none; } /* Remove Triangle on Dropdowns

/* Notification Improvements */ .wds-global-navigation__notifications-menu-counter { background-color: red; font-size: 11px; }
 * 1) GlobalNavigationWallNotifications .notification.admin-notification { padding: 12px 0; } /* Highlighted Threads */
 * 2) GlobalNavigationWallNotifications { border-radius: 0; }

/* Dark Inversion + Visibility When Scrolling (Original Version by OneTwoThreeFall, Modified) */ .wds-global-navigation .wds-global-navigation__logo, .wds-global-navigation .wds-global-navigation__search, .wds-global-navigation .wds-global-navigation__account-menu, .wds-global-navigation .wds-global-navigation__user-menu, .wds-global-navigation .wds-global-navigation__notifications-menu { background-color: transparent; } /* .wds-global-navigation.headroom--not-top .wds-global-navigation__search, .wds-global-navigation.headroom--not-top .wds-global-navigation__account-menu, .wds-global-navigation.headroom--not-top .wds-global-navigation__user-menu, .wds-global-navigation.headroom--not-top .wds-global-navigation__notifications-menu { color: #fff; } .wds-global-navigation.headroom--not-top .wds-dropdown__toggle-chevron, .wds-global-navigation.headroom--not-top .wds-global-navigation__dropdown-toggle .wds-icon { fill: #fff; } All Icons But Magnifying Glass & Search 'X' */

/* Previous Fandom Logo (Inversion) - Check */ .wds-global-navigation__logo-image { width: 230px; }

svg#wds-company-logo-fandom-white { opacity: 0; } .wds-global-navigation__logo { background-image: URL(https://vignette1.wikia.nocookie.net/alvin/images/7/7c/Fandom_Powered_By_Wikia_Inverse_Logo.png/revision/latest?cb=20161007191256); background-repeat: no-repeat; background-size: 230px 24px; margin-bottom: 4px; }

/* Previous Original - https://vignette1.wikia.nocookie.net/alvin/images/4/4b/Fandom_Powered_By_Wikia_Logo.png/revision/latest?cb=20170518223833 */