Administration bar.
Implementation of Sons of Suckerfish Dropdowns.
https://www.htmldog.com/articles/suckerfish
/** * @file * Administration bar. * * Implementation of Sons of Suckerfish Dropdowns. * * @see https://www.htmldog.com/articles/suckerfish */ /* Set a CSS property declaring the height of the admin bar. */ /* This can be read by themes to offset the top of the page if needed. */ :root { --admin-bar-height: 2.35rem; } #admin-bar { /* Adjusting font size will scale the entire admin menu, including icons. */ font: normal 0.75rem "Lucida Grande", Verdana, sans-serif; left: 0; position: absolute; text-align: left; /* LTR */ top: 0; width: 100%; line-height: 1; padding: 0; margin: 0; z-index: 999; background: linear-gradient(#2D2D2D 0%, #171717 100%); /* W3C */ } [dir="rtl"] #admin-bar { text-align: right; } #admin-bar-wrapper { overflow: hidden; } /* When body is a contextual links region. */ .contextual-links-region #admin-bar { top: calc(var(--admin-bar-height) * -1) } .admin-bar body { border-top: var(--admin-bar-height) solid #2D2D2D !important; } /* Top level items. */ #admin-bar .top-level { list-style: none; margin: 0; padding: 0; display: inline-block; vertical-align: top; } #admin-bar .top-level > li > a, #admin-bar .top-level > li > span { display: none; } #admin-bar .top-level > li > ul { display: inline-block; left: auto; width: auto; right: auto; background: transparent; } #admin-bar .top-level > li > ul > li { float: left; width: auto; } #admin-bar-menu.top-level > li > ul > li > a.active-trail { text-shadow: #333333 0 1px 0; background-color: #9f9f9f; } /* Specific admin bar menu links. */ #admin-bar .admin-bar-link-icon svg, #admin-bar .admin-bar-link-text { vertical-align: text-bottom; } #admin-bar svg.icon { width: 1.9em; height: 1.9em; padding-right: 0.3em; /* LTR */ box-sizing: content-box; } [dir="rtl"] #admin-bar svg.icon { padding-right: 0; padding-left: 0.3em; } /* Restore active and hover colors. */ #admin-bar #admin-bar-menu > li > .dropdown > li > a.expanded-trail, #admin-bar #admin-bar-extra > li > .dropdown > li > a:hover, #admin-bar #admin-bar-icon li.admin-bar-icon > a:hover { background-color: #45454a; } #admin-bar #admin-bar-menu > li > .dropdown > li > a.active-trail { background-color: #9f9f9f; } #admin-bar li { margin: 0; padding: 0; } /* Dropdown lists. */ #admin-bar .dropdown { line-height: 1.8em; list-style: none; margin: 0; padding: 0; z-index: 999; display: inline-block; position: static; background: #202020; vertical-align: top; } #admin-bar-wrapper { padding: 0 0.5em; } #admin-bar-wrapper > .dropdown { background: transparent; } #admin-bar li > a, #admin-bar li > span { background: transparent none; border: none; color: #eeeeee; font-weight: normal; text-align: left; /* LTR */ text-decoration: none; } [dir="rtl"] #admin-bar li > a, [dir="rtl"] #admin-bar li > span { text-align: right; } #admin-bar .dropdown li > a, #admin-bar .dropdown li > span { display: block; padding: 0.5em 1.5em 0.5em 0.75em; } #admin-bar-icon > li.expandable > a, #admin-bar-menu > li.expandable > ul.dropdown > li > a, #admin-bar-extra > li.expandable > ul.dropdown > li > a, #admin-bar-extra > li.expandable > ul.dropdown > li > span { padding: 0.5em 0.75em 0.5em 0.7em; } #admin-bar a.expanded-trail, #admin-bar span.expanded-trail { background-color: #45454a; } #admin-bar .dropdown .admin-bar-tab a { border-left: none; /* LTR */ border-right: 1px solid #52565e; /* LTR */ } [dir="rtl"] #admin-bar .dropdown .admin-bar-tab a { border-left: 1px solid #52565e; border-right: none; } #admin-bar .dropdown li li a { border-right: none; /* LTR */ border-top: 1px solid #323232; } [dir="rtl"] #admin-bar .dropdown li li a { border-left: none; } #admin-bar .dropdown a:hover { text-decoration: underline; } /* All dropdown list items. */ #admin-bar .dropdown li { background-image: none; float: left; /* LTR */ height: 100%; list-style-image: none; list-style-type: none; margin: 0 !important; padding: 0; } [dir="rtl"] #admin-bar .dropdown li { float: right; } /* First level items. */ #admin-bar .dropdown li li { width: 15em; /* Required for Opera. */ } #admin-bar .dropdown li li li { opacity: 1; } /* Second-level lists. */ /* Note: We must hide sub-lists or scrollbars might appear (display: none is not read by screen readers). */ #admin-bar .dropdown li ul { display: none; left: -999em; /* LTR */ line-height: inherit; margin: 0; position: absolute; width: 15em; } [dir="rtl"] #admin-bar .dropdown li ul { left: auto; } /* Third-and-above-level lists. */ #admin-bar .dropdown li li.expandable ul { margin: -3.1em 0 0 15em; /* LTR */ } #admin-bar .dropdown li li.expandable.outside-right ul { margin-left: -15em; /* LTR */ } [dir="rtl"] #admin-bar .dropdown li li.expandable ul { margin-right: 15em; margin-left: 0; } [dir="rtl"] #admin-bar .dropdown li li.expandable.outside-left ul { margin-right: -15em; } /* Lists nested under hovered list items. */ #admin-bar .dropdown ul.expanded { display: block; left: auto; /* LTR */ } [dir="rtl"] #admin-bar .dropdown ul.expanded { right: auto; } /* Second-and-more-level hovering. */ #admin-bar .dropdown li li.expandable > a { background: #45454a; position: relative; } #admin-bar .dropdown li li.expandable > a::before { content: ''; /*noinspection CssUnresolvedCustomProperty*/ mask-image: var(--icon-arrow-right); /* LTR */ mask-repeat: no-repeat; mask-position: center center; background: #ffffff; width: 1em; height: 100%; margin: -0.5em 0; position: absolute; right: 0.7em; /* LTR */ } [dir="rtl"] #admin-bar .dropdown li li.expandable > a::before { /*noinspection CssUnresolvedCustomProperty*/ mask-image: var(--icon-arrow-left); right: auto; left: 0.7em; } #admin-bar .dropdown li li a.expanded-trail { background-color: #111; border-color: #444; color: #EEE; } /* Icon menu. */ #admin-bar-icon.dropdown { display: inline-block; background: transparent; } #admin-bar-icon .admin-bar-icon img { vertical-align: center; } /* Extras menu. */ #admin-bar-extra { float: right; /* LTR */ direction: rtl; /* LTR */ } [dir="rtl"] #admin-bar-extra { float: left; direction: ltr; } #admin-bar-extra .dropdown li { direction: ltr; /* LTR */ } [dir="rtl"] #admin-bar-extra .dropdown li { direction: rtl; } #admin-bar-extra svg.icon { float: right; /* LTR */ margin-left: 0.75em; /* LTR */ margin-right: 0; /* LTR */ } [dir="rtl"] #admin-bar-extra svg.icon { float: left; margin-left: 0; margin-right: 0.75em; } /* Search form. */ #admin-bar .admin-bar-search .form-item { margin: 0; padding: 0.5em; } #admin-bar .top-level .admin-bar-search { width: 12em; } #admin-bar .top-level .admin-bar-search .form-item { padding: 0.5em 0 0; } #admin-bar .admin-bar-search input { /*noinspection CssUnresolvedCustomProperty*/ background: #fff var(--icon-magnifying-glass) center right no-repeat; background-position: right 0.5em center; /* LTR */ background-size: 1.2em; border: none; border-radius: 0; box-shadow: none; margin: 0; outline: none; padding: 0.5em 2em 0.5em 1em; /* LTR */ width: 100%; box-sizing: border-box; } [dir="rtl"] #admin-bar .admin-bar-search input { background-position: left 0.5em center; padding-left: 2em; padding-right: 1em; } #admin-bar .admin-bar-search-results .dropdown { display: block !important; left: auto !important; top: 100%; } #admin-bar .admin-bar-search-results .dropdown, #admin-bar .admin-bar-search-results .dropdown li { width: 15em; } #admin-bar li.active-search-item > a, #admin-bar li.highlight > a { background-color: #0074BD !important; color: white !important; } /* #210615: Mozilla on Mac fix. */ html.js fieldset.collapsible div.fieldset-wrapper { overflow: visible; } /* Hide the menu on print output. */ @media print { #admin-bar { display: none !important; } body.admin-bar { margin-top: 0 !important; } } /** * Tweaks permissions, if enabled. */ tr.admin-bar-tweak-permissions-processed { cursor: hand; } tr.admin-bar-tweak-permissions-processed td.module { border-top: 0; } /* Alert colors. */ #admin-bar .admin-bar-alert .error-count { box-sizing: content-box; padding: 0.5em 0.4em 0.5em 0.4em; display: inline-block; min-width: 1.2em; border-radius: 2em; margin: -0.4em 0 -0.5em; text-align: center; background-color: #ee3d23; line-height: 1; } #admin-bar .admin-bar-alert .error-count { margin-left: 0; margin-right: 0; } #admin-bar .admin-bar-alert .error-label { display: none; }