// ebi-header-footer--header // Disable masthead-black-bar search when told body.no-global-search .masthead-black-bar ul#global-nav.menu li.search { display: none; } .ebi-header-footer.masthead-black-bar { --vf-stack-margin--custom: 0; // black bar needs to always sit at the top of the screen background-color: var(--vf-color--grey--darkest); nav ul.menu li { display: inline-block; margin-bottom: 0; float: right; } > .row { opacity: 0; body.ebi-black-bar-loaded & { opacity: 1; opacity: unset; // show the blackbar contents after JS has strapped } } a:focus { box-shadow: 0 0 2px var(--vf-color--grey--lightest) } .vf-content .global-masthead-interactive-banner p:not([class*='vf-']) { font-size: 15px; // embl dropdown p tags shouldn't have large text } .global-masthead-interactive-banner { height: 0; overflow: hidden; display: none; background-color: #000; &.active { display: block; height: auto; overflow: visible; } } .search-bar { .close-button:hover, .close-button:focus { color: var(--vf-ui-color--white); } } .global-nav { li a { color: var(--vf-ui-color--white); } a:hover, li a:hover, li a:active, li a:focus, li.active a, li.active-trail a { color: var(--vf-color--grey--darkest); border-bottom: none; background-color: var(--vf-color--grey--lightest); } li.active a { font-weight: 700; } li { font-size: 14.4px; // to closely match existing height a:before { font-family: 'EBI-Generic'; display: inline-block; // safari 9 & 10 fix padding-right: .4rem; } } li.where { a:before { content: '['; } } // icon for Home li.home, li.ebi { a:before { content: 'H'; } } // icon for Services li.services { a:before { content: '('; } } // icon for Research li.research { a:before { content: ')'; } } // icon for Training li.training { a:before { content: 't'; } } // icon for about us li.about { a:before { content: 'i'; } } // icon for search li.search a:before { font-family: 'EBI-Functional'; content: '1'; padding-right: 0; } li.search .dropdown-pane { width: 100%; left: 0; background: var(--vf-color--grey--darkest); border: none; margin-top: -2px; color: var(--vf-ui-color--white); } } // mobile @media screen and (max-width: 39.9375em) { &.masthead-black-bar nav ul.menu > li > a { text-align: center; font-size: 10px; padding: .6rem .35rem; } } @media screen and (max-width: 39.9375em) { &.masthead-black-bar nav ul.menu > li > a > img, &.masthead-black-bar nav ul.menu > li > a:before { display: block; margin: 0 auto 0.25rem; font-size: 16px; } } } // vf-stack + vf-content-hub + legacy black bar edge case .vf-stack .vf-content-hub-html .masthead-black-bar > div { --vf-stack-margin: 0; --vf-stack-margin--custom: 0; } // New blackbar changes to fix accessbility errors and remove the white separator next to EBI logo, also fix the search // 'x' button fix .ebi-header-footer .input-group { width: 97% !important; margin-left: auto; margin-right: auto; } .ebi-header-footer .close-button { right: -1rem !important; } .custom-ebi-logo-bg { background: no-repeat 3px 48% url("https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg"); background-size: 90px; padding-left: 95px; width: 105px; background-color: unset !important; } .custom-ebi-logo-bg-transparent-text { color: transparent !important; } .ebi-header-footer.masthead-black-bar li.embl-selector { border-left: none !important; padding-left: 0.5rem !important; }