User:DEmersonJMFM/globalnav.css

/***************************************************************************************/ /********************* Fixes For A Clumsy Global Navigation Bar ************************/ /** Author(s): DEmersonJMFM (extremely modified from original code by JayJayJohnson) ***/ /** Original Version: 20:01, 2 December 2014 - Latest Update: 02:50, 05 October 2016 ***/ /******* ATTRIBUTION OF FOLLOWING CODE REQUIRED UNDER CC-BY-SA LICENSE IF COPIED *******/ /*                                                                                    */ /************ To Use Code, Copy/Paste Import at the Top of Your Global.css *************/ /* @import "http://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 Size and Removed Top Border */ .wds-global-navigation { height: 38px; border-top: none; box-shadow: none; } .wds-global-navigation__logo, .wds-global-navigation__link, .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 */ .WikiaTopAds { display: none; }

/* Remove Completely */ .wds-global-navigation__link, /* Hub Cells */ .wds-global-navigation__wikis-menu.wds-dropdown, /* Wiki Dropdown */ .wds-global-navigation__start-a-wiki.wds-user-is-logged-in, /* Start a Wikia Button */ button.wds-button.wds-global-navigation__search-submit { display: none; } /* Search Button */

/* Changes to Wikia Positioning */ .wds-global-navigation__logo-fandom { padding-bottom: 0; }

/* Search Bar Restyling */ .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 */

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

/* Initial Dropdown Improvements */ .wds-icon { fill: #39424d; } /* Prevent Blue Hover Of Icons */ .wds-dropdown.wds-is-active .wds-dropdown__toggle-chevron { -webkit-transform: none; -ms-transform: none; transform: none; } /* Prevent Flipping Of Chevrons - Intended With Use Of w:c:dev:ExpandGlobalNavDropdownsOnHover/code.js Script */

.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, /* Hover During Non-Inversion */

.wds-global-navigation.headroom--not-top .wds-global-navigation__account-menu:active, .wds-global-navigation.headroom--not-top .wds-global-navigation__account-menu.wds-is-active, .wds-global-navigation.headroom--not-top .wds-global-navigation__user-menu:active, .wds-global-navigation.headroom--not-top .wds-global-navigation__user-menu.wds-is-active, .wds-global-navigation.headroom--not-top .wds-global-navigation__notifications-menu:active, .wds-global-navigation.headroom--not-top .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-dropdown__content { box-shadow: none; } .wds-global-navigation__dropdown-content { top: 100%; } .wds-list { padding: 0; border: 1px solid #cccccc; } .wds-list.wds-is-linked > li > a { padding: 11px 15px; color: #092140; opacity: .9; } .wds-list.wds-is-linked > li > a:hover { background-color: rgba(164,182,191,0.2); color: #092140; opacity: 1; } /* Prevent Blue Hover Of Text */

/* Notification Improvements */ .wds-global-navigation__notifications-menu-counter { background-color: red; font-size: 11px; }

/* Dark Inversion + Visibility When Scrolling (Original Version by OneTwoThreeFall, Modified) */ .wds-global-navigation { transition-duration: .5s; transition-property: background-color; } .wds-global-navigation.headroom--not-top { background-color: rgba(0,0,0,0.65); transform: none; } .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' */