47ea57080b515e5dad5f658c58feb8944a7e7d61 chmalee Thu Jan 29 15:30:26 2026 -0800 Replace clade/assembly dropdowns with a search bar on most CGIs. Add a recents list to hgGateway and to the species bar and to the 'Genomes' dropdown menu. Track recently selected species in localStorage. Add toGenome and fromGenome arguemnts to hubApi/liftOver in order to find appropriate liftover assemblies, refs #36232 diff --git src/hg/htdocs/style/nice_menu.css src/hg/htdocs/style/nice_menu.css index 1f6841bba0f..4273db56165 100644 --- src/hg/htdocs/style/nice_menu.css +++ src/hg/htdocs/style/nice_menu.css @@ -1,564 +1,564 @@ /* @font-face { font-family:"Metrophobic"; src:url(/sites/all/themes/genome/images/font/Metrophobic.ttf); src:local('Metrophobic'), url(/sites/all/themes/genome/images/font/Metrophobic.otf); } */ /* 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; }*/ #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; } #hgTracks-main-menu-whole { width:100%; min-width:1000px; /* NOTE: must cover all top menu options, else wrapping breaks menu */ height:32px; background:#00457c; font-family: Arial,Helvetica,sans-serif; line-height:19px; font-size:13px; margin:0 0 5px 0; } #main-menu { /* width:1031px; */ margin-left: 30px; } /* from Jabico ... probably need to apply this to <body> #maindiv-whole { background: url("../images/internal_bg1.jpg") repeat-x scroll left bottom #F9F9F7; } */ /* from nice_menus_default.css */ /****************************** Global CSS for ALL menu types ******************************/ ul.nice-menu, ul.nice-menu ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid #ccc; } ul.nice-menu li { border: 1px solid #ccc; border-top: 0; float: left; /* LTR */ background-color: #eee; line-height: normal; } ul.nice-menu a { padding: 0.3em 5px 0.3em 5px; } ul.nice-menu ul { top: 1.8em; left: -1px; /* LTR */ border: 0; border-top: 1px solid #ccc; margin-right: 0; /* LTR */ } ul.nice-menu ul li { - width: 12.5em; + min-width: 12.5em; } /****************************** HORIZONTAL (down) menus ******************************/ ul.nice-menu-down { float: left; /* LTR */ border: 0; } ul.nice-menu-down li { border-top: 1px solid #ccc; } ul.nice-menu-down li li { border-top: 0; } ul.nice-menu-down ul { left: 0; /* LTR */ } ul.nice-menu-down ul li { clear: both; } ul.nice-menu-down li ul li ul { left: 12.5em; /* LTR */ top: -1px; } ul.nice-menu-down .menuparent a { padding-right: 10px; /* LTR */ } ul.nice-menu-down li.menuparent { background: #eee; } ul.nice-menu-down li.menuparent:hover { background: #ccc; } ul.nice-menu-down li li.menuparent { background: #eee; } ul.nice-menu-down li li.menuparent:hover { background: #ccc; } #header-region ul.nice-menu-down li ul li ul { left: 12.5em; /* LTR */ top: -1px; } #header-region ul.nice-menu-down li.menuparent { background: #eee; } #header-region ul.nice-menu-down li.menuparent:hover { background: #ccc; } #header-region ul.nice-menu-down li li.menuparent { background: #eee; } #header-region ul.nice-menu-down li li.menuparent:hover { background: #ccc; } /* nice_menus.css */ /* Below should fix menu being a few pixels away in some themes, and menus disappearing behind other stuff. */ .block-nice_menus { line-height: normal; z-index: 10; } ul.nice-menu, ul.nice-menu ul { z-index: 5; position: relative; } ul.nice-menu li { position: relative; } ul.nice-menu a { display: block; } ul.nice-menu ul, /* For Garland header. */ #header-region ul.nice-menu ul { position: absolute; visibility: hidden; } ul.nice-menu li.over ul { visibility: visible; } ul.nice-menu ul li { display: block; } ul.nice-menu:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Show submenus when over their parents. */ ul.nice-menu li:hover ul, ul.nice-menu li.menuparent li:hover ul, ul.nice-menu li.menuparent li.menuparent li:hover ul, ul.nice-menu li.menuparent li.menuparent li.menuparent li:hover ul, ul.nice-menu li.over ul, ul.nice-menu li.menuparent li.over ul, ul.nice-menu li.menuparent li.menuparent li.over ul, ul.nice-menu li.menuparent li.menuparent li.menuparent li.over ul, /* Repeat all this stuff just for Garland headers. */ #header-region ul.nice-menu li:hover ul, #header-region ul.nice-menu li.menuparent li:hover ul, #header-region ul.nice-menu li.menuparent li.menuparent li:hover ul, #header-region ul.nice-menu li.over ul, #header-region ul.nice-menu li.menuparent li.over ul, #header-region ul.nice-menu li.menuparent li.menuparent li.over ul { visibility: visible; } /* Hide sub-menus initially. */ ul.nice-menu li:hover ul ul, ul.nice-menu li:hover ul ul ul, ul.nice-menu li:hover li:hover ul ul, ul.nice-menu li:hover li:hover ul ul ul, ul.nice-menu li:hover li:hover li:hover ul ul, ul.nice-menu li:hover li:hover li:hover ul ul ul, ul.nice-menu li.over ul ul, ul.nice-menu li.over ul ul ul, ul.nice-menu li.over li.over ul ul, ul.nice-menu li.over li.over ul ul ul, ul.nice-menu li.over li.over li.over ul ul, ul.nice-menu li.over li.over li.over ul ul ul, /* Repeat all this stuff just for Garland headers. */ #header-region ul.nice-menu li:hover ul ul, #header-region ul.nice-menu li:hover ul ul ul, #header-region ul.nice-menu li:hover li:hover ul ul, #header-region ul.nice-menu li:hover li:hover ul ul ul, #header-region ul.nice-menu li:hover li:hover li:hover ul ul, #header-region ul.nice-menu li:hover li:hover li:hover ul ul ul, #header-region ul.nice-menu li.over ul ul, #header-region ul.nice-menu li.over ul ul ul, #header-region ul.nice-menu li.over li.over ul ul, #header-region ul.nice-menu li.over li.over ul ul ul, #header-region ul.nice-menu li.over li.over li.over ul ul, #header-region ul.nice-menu li.over li.over li.over ul ul ul { visibility: hidden; } /*************** IE 6 Fixes ***************/ /* Iframe to fix z-index bug when menu hovers over <select> fields. */ ul.nice-menu li.menuparent ul, /* For Garland header. */ #header-region ul.nice-menu li.menuparent ul { overflow: visible !important; /* overflow: hidden; */ } ul.nice-menu li.menuparent ul iframe, /* For Garland header. */ #header-region ul.nice-menu li.menuparent ul iframe { display: none; display/**/: block; position: absolute; top: 0; left: 0; z-index: -1; filter: mask(); width: 20px; height: 20px; } /* START OF ORIGINAL nice_menu.css */ ul.nice-menu { z-index:100; } ul.nice-menu li, ul.nice-menu li.menuparent { background:none; border:none; } ul.nice-menu ul, ul.nice-menu li { margin: 0; padding: 0; } ul.nice-menu li { padding-top:8px; padding-left:11px; padding-right:11px; } ul.nice-menu li.first { padding-left:0px; } ul.nice-menu li.last { padding-right:0px; } ul.nice-menu a { display:block; color:#f0f1f9; /*color:#f0c156;*/ font-size:14px; /*font-family:Metrophobic;*/ font-weight:lighter; text-decoration:none; /*padding:0px 5px 0px 15px;*/ padding:0px 10px 0px 3px; } ul.nice-menu li.menuparent{ padding-top:8px; } ul.nice-menu li.menuparent span { color:#f0f1f9; font-size:14px; cursor: pointer; /*padding:0px 5px 0px 15px;*/ padding:0 18px 0 0; /* background:url('../images/plusesign-main-menu.png') no-repeat 5px center; */ } ul.nice-menu a:hover, ul.nice-menu a.active { /* color:#f0f1f9; */ } #main-menu ul li.menuparent ul li span { color:#121e9b; background:none; padding:2px 10px 0px 3px; } ul.nice-menu ul { position:absolute; top:2.5em; left:10px; margin-right: 0; border:2px solid #f5f5f5; /*border-top:0px;*/ background:#fbfbfb; -webkit-box-shadow: 0px 4px 5px rgba(160, 160, 160, 0.89); -moz-box-shadow: 0px 4px 5px rgba(160, 160, 160, 0.89); box-shadow: 0px 4px 5px rgba(60, 60, 60, 0.89); } ul.nice-menu ul li { padding:0; margin:0; border:0px; text-align:left; - width:200px; + 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 */ 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; } /* class for inactive (greyed out) dropdown menu items */ ul.nice-menu ul li.inactive span { cursor: default !important; color:#CCCCCC !important; background-color: #fff !important; display:block; background:none; text-align:left; padding:8px !important; padding-top:5px !important; padding-bottom:5px !important; padding-right:0px; border:0px !important; - width:180px; + min-width:180px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; } /************************************/ ul.nice-menu ul li a { padding:0; margin:0; color:#121e9b !important; display:inline-block; background:none; text-align:left; padding:8px; padding-top:5px !important; padding-bottom:5px !important; - padding-right:0px; + padding-right:8px; border:0px !important; - width:160px; + min-width:160px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; } ul.nice-menu ul li span { } ul.nice-menu ul li a:hover, ul.nice-menu ul li a.active { color:#fff !important; background-color: #327de4 !important; } ul.nice-menu li.menuparent li a { padding:8px; - padding-right:0px; } ul.nice-menu-down li li.menuparent { background:#ffffff; } ul.nice-menu-down li li.last { border:none; } ul.nice-menu-down li.menuparent:hover, ul.nice-menu-down li.over, #header-region ul.nice-menu-down li.menuparent:hover, #header-region ul.nice-menu-down li.over { background:none; } ul.nice-menu-down li li.over { background:#ffffff; color:#fff; } ul.nice-menu-down li li.menuparent:hover { background:#ffffff; color:#fff; } ul.nice-menu-down li li.menu-467:hover { border:none !important; } ul.nice-menu-down li li.menuparent.active { background:#ffffff; color:#fff; } ul.nice-menu-down li ul li ul { left:141px; top:0px; } ul.nice-menu li.horizSep { height: 2px; background-color: #DDD; } ul.nice-menu li.horizSep:hover { height: 2px; background-color: #DDD !important; } /* a keyboard shortcut can be specified for a menu entry */ #main-menu ul li.menuparent ul li span.shortcut { color : #bbbbbb; padding : 0; } /* over-riding HGStyle for demo */ .blueToggleBar { background-color: #00457c; color: #FFFFFF; font-weight: bold; height: 28px; text-align: center; vertical-align: middle; white-space: nowrap; width: 100%; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } th.blueToggleBar b { /* Win8/IE10 was not inheriting text color redmin 11745 */ color: #FFFFFF; } a:link {color: #121E9A;} #imgTbl, #chrom { background-color: #fff; border: 1px solid #000; border-radius: 2px; } /* Below are all the styles used by the superfish plugin I need SOME of these for the arrows in the dropdown menu. I'll end up deleting any I don't need */ /* arrows */ .sf-menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { /*position: absolute; display: block; right: .75em; top: 1.05em; // IE6 only width: 10px; height: 10px; text-indent: -999em; overflow: hidden; */ /* background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ /*top: .8em; */ /* background-position: 0 -100px; /* use translucent arrow for modern browsers */ }