/* Section-hierarchy breadcrumb bar. * * Pinned to the top of the content area, full-width, showing the * reader's current location in the page heading hierarchy as a * chain of clickable crumbs. Toggled on/off with the close button * at the right edge; choice persisted in localStorage. * * The bar publishes its rendered height as the CSS custom * property ``--breadcrumb-bar-h`` on ````; other sticky * elements read it via ``var(--breadcrumb-bar-h, 0px)`` so they * sit immediately below the bar instead of overlapping it. */ /* Default for browsers / pages where the JS hasn't run yet. */ body { --breadcrumb-bar-h: 0px; } /* Anchor-jump offset. * * Crumb clicks (and any other in-page ``#section-id`` link, including * the theme's headerlink ``#`` glyphs and the sidebar ToC entries) * use the browser's native fragment-anchor scroll. Without a * ``scroll-padding-top`` on the scroll root, the target heading * lands flush with the top of the viewport - i.e. underneath the * sticky breadcrumb bar (and, in all-boards mode, underneath the * board badge and the pinned ````). Reserve the bar's * measured height as scroll padding so the target heading lands * just below the bar instead. The all-boards extra offset (badge * + table-header) is layered on top with a per-element * ``scroll-margin-top`` in ``custom.css`` so it only applies on * pages where the badge is visible. */ html { scroll-padding-top: var(--breadcrumb-bar-h, 0px); } .breadcrumb-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; /* Match the rest of the chrome (sidebar + search header) which is overridden to pure black in amd_overrides.css to align with amd.com's primary navbar color. The breadcrumb bar reads as one continuous band of chrome with the sidebar on its left and the search header above. */ background: #000; color: #ecf0f1; padding: 4px 12px; font-size: 0.85em; line-height: 1.4; /* No drop shadow or bottom border. With the chrome surfaces sharing one solid color, a shadow under the bar and a faint white hairline along its lower edge both read as a left-to-right fade rather than the intended subtle separator, so the bar simply meets the content area edge-to-edge. */ } .breadcrumb-crumbs { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .breadcrumb-crumb { color: #bdc3c7; text-decoration: none; } /* Crumbs are anchor links to in-page section ids, so clicking one marks them as visited in the browser's history. Without this override the rtd theme's default visited-link color would repaint the crumb in a darker, washed-out hue against the bar's dark background. Pin both states to the same palette so a crumb looks the same the second time the reader lands on it. */ .breadcrumb-crumb:visited { color: #bdc3c7; } .breadcrumb-crumb-active, .breadcrumb-crumb-active:visited { color: #fff; font-weight: 600; } .breadcrumb-crumb:hover { color: #fff; text-decoration: underline; } .breadcrumb-separator { color: rgba(255, 255, 255, 0.35); margin: 0 0.4em; user-select: none; } .breadcrumb-toggle { flex: 0 0 auto; background: transparent; border: none; color: rgba(255, 255, 255, 0.7); font-size: 1.1em; line-height: 1; padding: 0 4px; margin-left: 8px; cursor: pointer; border-radius: 3px; } .breadcrumb-toggle:hover, .breadcrumb-toggle:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.12); outline: none; } /* Restore strip - shown only when the bar is toggled off. */ .breadcrumb-restore { display: none; position: sticky; top: 0; z-index: 10; width: 100%; /* The user-agent default ``box-sizing`` for ``