/* ========================================================================== InfoRapid KnowledgeBase Builder – User Guide Custom styles for the left-hand navigation (table of contents) Goal: give the flat section list a visible hierarchy again. Material's "navigation.sections" feature renders top-level entries as section labels and deliberately removes the indentation of their children, so section and page ended up at the exact same x position. Here we add * automatic chapter numbering (1, 2, 2.1, 2.2 ...) via CSS counters * real indentation for the pages inside a section * a calmer, more "chapter like" look for the section headers Everything is purely visual – no Markdown file needs to change, and the numbering follows the nav order in mkdocs.yml in every language. ========================================================================== */ :root { /* Width of the number column for the pages. Measured, not guessed: the widest two-digit number ("4.12") renders 35.4px wide, which is 1.77rem – at 1.35rem every entry from 4.10 on pushed its title 8px out of the column. Numbers scale with rem just like the text, so a rem value keeps the alignment across the theme's different root font sizes. The numbers are set right aligned inside that column (text-align: right further down). Left aligned, a short number like "4.1" left a gap of roughly 18px to its title while "4.12" left 9px – the column has to be as wide as the widest number, and the difference showed up as empty space. */ --kbb-nav-number-width: 1.8rem; /* Third level: "4.10.1" measures 50.1px = 2.51rem. */ --kbb-nav-number-width-sub: 2.55rem; /* Chapter numbers are single digits and need far less room. */ --kbb-nav-number-width-top: 0.55rem; /* Indentation of the pages inside a section. */ --kbb-nav-indent: 0.7rem; /* Distance between the number and the title. */ --kbb-nav-number-gap: 0.25rem; } /* The colours of the numbers are NOT given a default here on purpose. Material puts data-md-color-scheme on , so on (= :root) the scheme dependent variables still hold their light mode values. Declaring --kbb-nav-page-number-color: var(--md-default-fg-color--light) at :root froze black at 54% and inherited it into the dark scheme, where the page numbers ended up at a contrast of 1.1:1 – black on black. The scheme dependent default therefore lives in the var() fallback inside the rules below, where it is resolved on the element that actually uses it. Only the overrides are declared as variables. */ /* Indigo on the dark background only reaches a contrast of about 1.9:1 and the chapter numbers become nearly invisible – use a light indigo there instead. */ [data-md-color-scheme="slate"] { --kbb-nav-number-color: #8c9eff; } /* On the highlighted entry the number takes the colour of the pill's text. */ .md-nav--primary .md-nav__link--active { --kbb-nav-number-color: currentColor; --kbb-nav-page-number-color: currentColor; } /* -------------------------------------------------------------------------- 1. Counters -------------------------------------------------------------------------- */ /* Reset the chapter counter once per sidebar. */ .md-nav--primary > .md-nav__list { counter-reset: kbb-section; } /* Every top level entry is a chapter and starts its own page counter. */ .md-nav--primary > .md-nav__list > .md-nav__item { counter-increment: kbb-section; counter-reset: kbb-page; } /* Every entry inside a section is a numbered page and opens its own counter for the third level (a page that is reached from inside another menu). */ .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item { counter-increment: kbb-page; counter-reset: kbb-sub; } /* Third level: 4.6.1, 4.10.1 ... */ .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) > .md-nav__list > .md-nav__item { counter-increment: kbb-sub; } /* -------------------------------------------------------------------------- 2. Rendering the numbers The section header is either a