/* Widen the content area for sphinx_rtd_theme */ .wy-nav-content { max-width: 100%; } /* Opt-in cell wrapping for wide tables (e.g. the source-repo table in downloads-and-release-notes). Apply by adding ``:class: wrap-cells`` to the directive. Scoped to avoid breaking long identifiers (URLs, paths, BitBake variables) in unrelated tables across the docs set. */ .rst-content table.docutils.wrap-cells td, .rst-content table.docutils.wrap-cells th { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* Visually distinguish glossary cross-references (the ``:term:`` role) from regular intra-doc and external links. Glossary terms are an inline affordance ("there is a definition for this word") rather than a navigational element, so they render as plain body text decorated only with a bright-orange dotted underline. The orange is chosen for high contrast against the theme link blue, so a reader can scan a paragraph and instantly tell defined terms from ordinary links. No ``cursor: help`` cue is applied here: the sphinx-tippy integration (configured in ``conf.py`` and themed by ``tippy_glossary.css``) now renders a real hover / focus tooltip with the glossary definition, so the question-mark cursor would just duplicate an affordance the tooltip itself is already advertising. The two ``:has(> span.xref.std.std-term)`` rules neutralize the theme's default ``a.reference.internal`` color and underline on the wrapping ```` so the only visible decoration is the orange dotted line drawn by the inner ```` - otherwise the theme paints the glyphs blue and overlays a solid blue underline on hover. */ .rst-content a.reference.internal:has(> span.xref.std.std-term), .rst-content a.reference.internal:hover:has(> span.xref.std.std-term) { color: inherit; text-decoration: none; } .rst-content a.reference.internal > span.xref.std.std-term { text-decoration: underline dotted #ff6a13; text-underline-offset: 0.15em; text-decoration-thickness: 1.5px; } .rst-content a.reference.internal:hover > span.xref.std.std-term { text-decoration: underline dotted #ff6a13; text-decoration-thickness: 2px; } /* Sticky, inverse-video table headers. Pin the ```` row of every reST-generated table to the top of the viewport while the reader scrolls through long tables, so the column labels stay visible. Style the pinned row in inverse video (white text on a dark slab) so the eye can immediately tell header from body even mid-scroll, when there is no whitespace between the pinned header and the data row directly below it. Behavior is global by default; opt out on a specific table by adding ``:class: no-sticky-header`` to the directive. Notes / known interactions: * ``position: sticky`` is scoped to the nearest scrolling ancestor. The ``sphinx_rtd_theme`` JS wraps every docutils table in ``
`` with ``overflow: auto``, which would normally trap sticky inside the wrapper. The ``.wy-table-responsive`` rule below resets that wrapper to ``overflow: visible`` so headers escape to the document scroll root and pin to the page. * The ``.board-badge`` (all-boards mode) also pins to ``top: 0`` with a higher ``z-index`` than this rule. A header that also pinned at ``top: 0`` would be painted under the badge and effectively hidden; the ``.board.board-show-all table.docutils thead th`` rule below pushes nested headers down by roughly the badge's rendered height so both stay legible. * ``background`` must be opaque so the row immediately below the pinned header does not bleed through it. The ``box-shadow`` reinstates a thin bottom border in the same dark color, which ``position: sticky`` would otherwise scroll away with the row. */ .rst-content table.docutils thead th { position: sticky; /* Sit immediately below the breadcrumb bar (defined in ``breadcrumb_bar.css``). When the bar is toggled off or not present, the variable defaults to ``0px`` and the header pins to the very top of the viewport as before. */ top: var(--breadcrumb-bar-h, 0px); background: #404040; color: #fff; z-index: 2; box-shadow: inset 0 -1px 0 #404040; } /* All-boards mode: the ``.board-badge`` (defined in ``board_selector.css``) is itself ``position: sticky`` at ``top: 0`` with a higher ``z-index``, so a table header pinned at ``top: 0`` ends up painted *under* the badge and effectively invisible. Push the table header down by the badge's rendered height so both stay legible: badge on top, header just below. The offset only applies to tables whose ancestor carries the ``board-show-all`` class, which the board-selector JS adds when the reader chooses "All Boards" and removes when they pick a specific board. In single-board mode the badge is ``display: none`` and this rule does not match, so headers pin at ``top: 0`` as usual. */ .rst-content .board.board-show-all table.docutils thead th { /* Slightly less than the badge's rendered box height (which lands near 2rem with the theme's inherited 24px body line-height plus 8px of vertical padding). Picking a value under the badge height makes the header overlap the badge's bottom edge by a few pixels, which is invisible because the overlap falls inside the badge's bottom padding and the badge paints on top via its higher ``z-index``. The alternative -- picking a value at or above the badge height -- leaves a thin band where body content scrolls past in view between the two pinned elements. */ top: calc(var(--breadcrumb-bar-h, 0px) + 1.25rem); } /* All-boards mode: anchor-jump offset for headings inside a board-show-all block. The global ``scroll-padding-top`` rule in ``breadcrumb_bar.css`` reserves room for the breadcrumb bar itself; here we extend that with a per-element ``scroll-margin-top`` so the target heading also clears the pinned ``.board-badge`` (which is itself ``position: sticky`` immediately below the bar). The 1.25rem matches the table-header offset above so the same vertical landing zone works for both sticky stripes; in single-board mode the badge is ``display: none`` and this rule does not match, so heading targets land flush against the bar via the global rule. */ .rst-content .board.board-show-all :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 1.25rem; } /* Lift link colors inside the pinned header onto white. The theme defaults links to a mid-blue (``#2980b9``) which is unreadable on the dark slab. Glossary ``:term:`` references render as a span inside an internal-reference anchor; both layers need recoloring so the orange dotted underline (defined elsewhere in this file) has white glyphs to draw under. */ .rst-content table.docutils thead th a, .rst-content table.docutils thead th a:visited, .rst-content table.docutils thead th a.reference.internal > span.xref.std.std-term { color: #fff; } /* Opt-out: leave the header rendering exactly to the theme. */ .rst-content table.docutils.no-sticky-header thead th { position: static; background: transparent; color: inherit; box-shadow: none; } .rst-content table.docutils.no-sticky-header thead th a, .rst-content table.docutils.no-sticky-header thead th a:visited { color: revert; } /* The ``sphinx_rtd_theme`` JS wraps every docutils table in ``
`` with ``overflow: auto`` at page load. That establishes a scroll container, which scopes ``position: sticky`` to the wrapper instead of the page. Since the wrapper grows to fit the full table height, there is nothing for sticky to react to and headers never pin. Drop the wrapper's overflow so sticky escapes to the document scroll root. Tradeoff: very wide tables that previously scrolled horizontally inside the wrapper now widen the main content column instead. ``wrap-cells`` already handles the widest table in this docs set; if a future table genuinely needs horizontal scroll, give it ``:class: no-sticky-header`` and wrap it in an explicit scroll container in the source. */ .rst-content .wy-table-responsive { overflow: visible; } /* Chrome-frame background overrides live in amd_overrides.css. */ /* Sticky sidebar search / board-selector header. The sphinx_rtd_theme stacks the search-and-logo header (``.wy-side-nav-search``) and the toctree menu (``.wy-menu-vertical``) inside a single scrolling container (``.wy-side-scroll``). On any page where the toctree is taller than the viewport the reader has to scroll the sidebar to reach deeper entries, and the search box, the board selector, and the logo all scroll out of view with it. That makes the search box and board selector unreachable until the reader scrolls back to the top of the sidebar, which is one of the more painful aspects of the default theme. Pin the header to the top of the scroll container with ``position: sticky`` so the toctree scrolls under it while the search box, board selector, and logo stay visible. The header already has the opaque black background pinned above (and via ``board_selector.css`` for the dropdown), so the toctree text does not bleed through as it scrolls past. Constraints: - Targets the *direct* child of ``.wy-side-scroll`` so the rule does not accidentally affect the mobile-collapsed top bar (``.wy-nav-top``) or any future variants of the search header used outside the desktop sidebar. - ``z-index: 1`` keeps the header above the menu items while they slide under it; the surrounding chrome already uses ``z-index: 200`` on ``.wy-nav-side`` so this is purely a local stacking decision inside the sidebar column. */ .wy-side-scroll > .wy-side-nav-search { position: sticky; top: 0; z-index: 1; } /* Pagefind sidebar widget tint. The Pagefind UI mount (`[id^="pagefind-search"]`) is injected into the sidebar by `scripts/pagefind_postprocess.py` after `make html`, replacing the stock RTD search form. Pagefind ships its own self-contained stylesheet (`pagefind/pagefind-ui.css`) that the inline `` next to the mount loads; the rules below only tweak the few CSS custom properties Pagefind exposes so the widget reads as part of the RTD sidebar palette rather than a white plaque dropped on top of it. Everything is scoped under `[id^="pagefind-search"]` so these rules cannot bleed into the rest of the theme. The Pagefind project documents the supported custom properties at https://pagefind.app/docs/ui/. When `make pagefind` has not run (typical local `make html`), the sidebar form is the stock RTD form, the `[id^="pagefind-search"]` element does not exist on the page, and these rules are a no-op. */ [id^="pagefind-search"] { --pagefind-ui-scale: 0.85; --pagefind-ui-primary: #2980b9; --pagefind-ui-text: #404040; --pagefind-ui-background: #ffffff; --pagefind-ui-border: #c1c1c1; --pagefind-ui-tag: #eeeeee; --pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: 4px; --pagefind-ui-image-border-radius: 4px; --pagefind-ui-image-box-ratio: 3 / 2; --pagefind-ui-font: inherit; margin: 0 0 12px 0; }