57490a621bd10c9c7810bdf474b7c801027d237d max Thu Sep 10 06:56:54 2026 -0700 Use one blue for the menu bar on every page, refs #38206 The bar came in three shades: #2636d1 from nice_menu.css on hgTables, hgBlat, hgc and the other cart CGIs, #00457c on hgTracks through its own set of ids, and #003a72 on the gateway and the static pages, which override nice_menu.css afterwards. They are all #003a72 now, the house deep navy already used for the gateway banner, the footer and the buttons. hgTracks no longer rewrites main-menu-whole and home-link into its own ids, so its bar and its house icon come from the same rules as everyone else's, and hgTracksHomeIconSprite.png goes away - the shared sprite is white on a transparent background and sits on whatever blue the bar has. gbStatic.css keeps its own copy of the color on purpose; the comment there says why. diff --git src/hg/htdocs/style/nice_menu.css src/hg/htdocs/style/nice_menu.css index 66082ffab18..15ab0ad8d4a 100644 --- src/hg/htdocs/style/nice_menu.css +++ src/hg/htdocs/style/nice_menu.css @@ -26,46 +26,39 @@ } /* Contains all css needed for drop-down global navigation menus */ /* FROM Jabico's style.css */ /* body.cgi { margin:0px; padding:0px; font-size:13px; color:#6b6b6b; line-height:19px; background:#e6e3db; font-family:Arial, Helvetica, sans-serif; }*/ +/* The one blue of the menu bar, on every page. #003a72 is the house deep navy, also used for + the gateway banner, the footer and the buttons (gb.css .gbBlueDark, gbModern.css --accent). + It used to differ per CGI: #2636d1 here, #00457c on hgTracks, #003a72 on the pages that load + gbAfterMenu.css. Change it in this one place only. refs #38206 */ #main-menu-whole { width:100%; min-width:1000px; /* NOTE: must cover all top menu options, else wrapping breaks menu */ height:32px; - background:#2636d1; - font-family: Arial,Helvetica,sans-serif; - line-height:19px; - font-size:13px; - margin:0 0 5px 0; - position:relative; /* anchor for #topRightLinks */ -} -#hgTracks-main-menu-whole { - width:100%; - min-width:1000px; /* NOTE: must cover all top menu options, else wrapping breaks menu */ - height:32px; - background:#00457c; + background:#003a72; font-family: Arial,Helvetica,sans-serif; line-height:19px; font-size:13px; margin:0 0 5px 0; position:relative; /* anchor for #topRightLinks */ } /* Top-right utility links (Share a link, Login) - sit at the top-right corner of the bar, separate from the menu list. Filled by menuBar() in lib/web.c and by hgMenubar.c. */ #topRightLinks { position:absolute; top:0; right:14px; height:32px; line-height:32px; z-index:3; @@ -88,31 +81,31 @@ /* Narrow / phone screens: the fixed-width (min 1000px) bar scrolls horizontally, so links pinned to the right edge of the bar end up off-screen. Instead collapse them into a menu icon that sticks to the right edge of the visible part of the bar, and show the links as a dropdown when it is tapped. "sticky" rather than "fixed": fixed pins to the top of the window, which is inside the bar only on hgTracks - on pages with a logo banner above the bar (hgGateway, the home page) it lands in the white area above it. */ @media (max-width: 1100px) { #topRightLinks { position:sticky; float:right; top:auto; right:14px; height:32px; line-height:32px; padding:0 8px; - background:inherit; /* the bar's blue, which is not the same on all pages */ + background:inherit; /* the bar's blue */ z-index:1000; } #trToggle { display:inline-block; background:none; border:0; color:#fff; font-size:20px; line-height:32px; cursor:pointer; padding:0; } /* The links hang below the icon. They are taken out of the flow so that opening the menu does not make the bar taller and push the rest of the page down. */ #trLinks { @@ -456,61 +449,47 @@ } ul.nice-menu ul li { padding:0; margin:0; border:0px; text-align:left; min-width:200px; white-space:nowrap; background:#fbfbfb; border-bottom:1px solid #ffffff; /* old color => #fecc51; */ } /* GREG ADDED STYLES FOR GLOBAL NAVIGATION BAR */ /* for home link */ +/* The house icon in homeIconSprite.png is white on a transparent background, so it sits on the + bar's own blue and needs no color of its own. */ span#home-link { top: -2px; position: relative; text-indent: -9999px; height: 18px; width: 23px; /* margin-right: 1px; */ display: inline-block; background-image: url("../images/homeIconSprite.png"); background-position: 0 -18px; - background-color: #2636d1; -} -span#hgTracks-home-link { - top: -2px; - position: relative; - text-indent: -9999px; - height: 18px; - width: 23px; - /* margin-right: 1px; */ - display: inline-block; - background-image: url("../images/hgTracksHomeIconSprite.png"); - background-position: 0 -18px; - background-color: #00457c; } span#home-link:hover { background-position: 0 0; } -span#hgTracks-home-link:hover { - background-position: 0 0; -} /* for dropdown menu highlighting on hover */ ul.nice-menu ul li:hover, ul.nice-menu ul li:active { background-color: #327de4 !important; color: #fff !important; } /* END - GREG ADDED STYLES */ /************************************/ /* More styles for Nav Bar from UCSC */ /* provide class to suppress highlighting on dropdown menu items (e.g. horiz rule) */ ul.nice-menu ul .noHighlight:hover, ul.nice-menu ul li.noHighlight a:hover { color:#121e9b !important; background-color: #fff !important;