diff --git a/crates/mdbook-html/front-end/css/chrome.css b/crates/mdbook-html/front-end/css/chrome.css
index 45bbd5ed..9e242110 100644
--- a/crates/mdbook-html/front-end/css/chrome.css
+++ b/crates/mdbook-html/front-end/css/chrome.css
@@ -624,6 +624,20 @@ html:not(.sidebar-resizing) .sidebar {
transform: rotate(90deg);
}
+.chapter a.current-header {
+ color: var(--sidebar-active);
+}
+
+.on-this-page {
+ margin-left: 22px;
+ border-inline-start: 4px solid var(--sidebar-header-border-color);
+ padding-left: 8px;
+}
+
+.on-this-page > ol {
+ padding-left: 0;
+}
+
/* Horizontal line in chapter list. */
.spacer {
width: 100%;
@@ -735,20 +749,3 @@ html:not(.sidebar-resizing) .sidebar {
/* mdbook's margin for h2 is way too large. */
margin: 10px;
}
-
-.current-header {
- /* Allows the circle positioning. */
- position: relative
-}
-
-/* Places a circle just before the current header in the sidebar. */
-.current-header::before {
- content: '';
- position: absolute;
- left: -16px;
- margin-top: 10px;
- width: 8px;
- height: 8px;
- background-color: var(--sidebar-active);
- border-radius: 50%;
-}
diff --git a/crates/mdbook-html/front-end/css/variables.css b/crates/mdbook-html/front-end/css/variables.css
index b715d672..af5023bc 100644
--- a/crates/mdbook-html/front-end/css/variables.css
+++ b/crates/mdbook-html/front-end/css/variables.css
@@ -73,6 +73,8 @@
--blockquote-important-color: #d3abff;
--blockquote-warning-color: #f0b72f;
--blockquote-caution-color: #f21424;
+
+ --sidebar-header-border-color: #c18639;
}
.coal {
@@ -132,6 +134,8 @@
--blockquote-important-color: #ab7df8;
--blockquote-warning-color: #d29922;
--blockquote-caution-color: #d91b29;
+
+ --sidebar-header-border-color: #3473ad;
}
.light, html:not(.js) {
@@ -191,6 +195,8 @@
--blockquote-important-color: #8250df;
--blockquote-warning-color: #9a6700;
--blockquote-caution-color: #b52731;
+
+ --sidebar-header-border-color: #6e6edb;
}
.navy {
@@ -250,6 +256,8 @@
--blockquote-important-color: #ab7df8;
--blockquote-warning-color: #d29922;
--blockquote-caution-color: #f21424;
+
+ --sidebar-header-border-color: #2f6ab5;
}
.rust {
@@ -307,6 +315,8 @@
--blockquote-important-color: #8250df;
--blockquote-warning-color: #603700;
--blockquote-caution-color: #aa1721;
+
+ --sidebar-header-border-color: #8c391f;
}
@media (prefers-color-scheme: dark) {
@@ -367,5 +377,7 @@
--blockquote-important-color: #ab7df8;
--blockquote-warning-color: #d29922;
--blockquote-caution-color: #d91b29;
+
+ --sidebar-header-border-color: #3473ad;
}
}
diff --git a/crates/mdbook-html/front-end/templates/toc.js.hbs b/crates/mdbook-html/front-end/templates/toc.js.hbs
index ec77e4c0..231a8643 100644
--- a/crates/mdbook-html/front-end/templates/toc.js.hbs
+++ b/crates/mdbook-html/front-end/templates/toc.js.hbs
@@ -424,8 +424,11 @@ window.customElements.define('mdbook-sidebar-scrollbox', MDBookSidebarScrollbox)
currentParent.ol.appendChild(li);
}
+ const onThisPage = document.createElement('div');
+ onThisPage.classList.add('on-this-page');
+ onThisPage.append(stack[0].ol);
const activeItemSpan = activeSection.parentElement;
- activeItemSpan.after(stack[0].ol);
+ activeItemSpan.after(onThisPage);
});
document.addEventListener('DOMContentLoaded', reloadCurrentHeader);
diff --git a/tests/gui/heading-nav-unusual-levels.goml b/tests/gui/heading-nav-unusual-levels.goml
index db58f3e5..9d2df5f0 100644
--- a/tests/gui/heading-nav-unusual-levels.goml
+++ b/tests/gui/heading-nav-unusual-levels.goml
@@ -3,5 +3,4 @@
set-window-size: (1400, 800)
go-to: |DOC_PATH| + "heading-nav/unusual-heading-levels.html"
-assert-property: ("//a[@href='unusual-heading-levels.html']/../following-sibling::ol", {"innerHTML": '
'})
-
+assert-property: ("//a[@href='unusual-heading-levels.html']/../following-sibling::div", {"innerHTML": '
'})