style(toc): Adjust the CSS of the TOC

apps/client/src/stylesheets/theme-next/shell.css

@@ -1637,7 +1637,9 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 
 #right-pane .toc li,
 #right-pane .highlights-list li {
-    padding: 2px 8px;
+    padding-top: 2px;
+    padding-right: 8px;
+    padding-bottom: 2px;
     border-radius: 4px;
     text-align: unset;
     transition:

apps/client/src/widgets/toc.ts

@@ -35,12 +35,8 @@ const TPL = /*html*/`<div class="toc-widget">
         .toc ol {
             position: relative;
             overflow: hidden;
-            padding-left: 20px;
-            transition: max-height 0.3s ease;
-        }
-
-        .toc > ol {
             padding-left: 0px;
+            transition: max-height 0.3s ease;
         }
 
         .toc li.collapsed + ol {
@@ -51,8 +47,8 @@ const TPL = /*html*/`<div class="toc-widget">
             content: "";
             position: absolute;
             height: 100%;
-            left: 17px;
             border-left: 1px solid var(--main-border-color);
+            z-index: 10;
         }
 
         .toc li {
@@ -67,11 +63,35 @@ const TPL = /*html*/`<div class="toc-widget">
             hyphens: auto;
         }
 
+        .toc > ol {
+            --toc-depth-level: 1; 
+        }
+        .toc > ol > ol {
+            --toc-depth-level: 2;
+        }
+        .toc > ol > ol > ol {
+            --toc-depth-level: 3;
+        }
+        .toc > ol > ol > ol > ol {
+            --toc-depth-level: 4;
+        }
+        .toc > ol > ol > ol > ol > ol {
+            --toc-depth-level: 5;
+        }
+
+        .toc > ol ol::before {
+            left: calc((var(--toc-depth-level) - 2) * 20px + 14px);
+        }
+
+        .toc li {
+            padding-left: calc((var(--toc-depth-level) - 1) * 20px + 4px); 
+        }
+
         .toc li .collapse-button {
             display: flex;
             position: relative;
-            width: 20px;
-            height: 20px;
+            width: 21px;
+            height: 21px;
             flex-shrink: 0;
             align-items: center;
             justify-content: center;
@@ -83,12 +103,12 @@ const TPL = /*html*/`<div class="toc-widget">
         }
 
         .toc li .item-content {
-            margin-left: 28px;
+            margin-left: 24px;
             flex: 1;
         }
 
         .toc li .collapse-button + .item-content {
-            margin-left: 8px;
+            margin-left: 4px;
         }
 
         .toc li:hover {
@@ -301,7 +321,7 @@ export default class TocWidget extends RightPanelWidget {
                     if ($previousLi) {
                         const headingKey = `h${newLevel}_${headingIndex}_${$previousLi?.text().trim()}`;
                         this.setupCollapsibleHeading($ol, $previousLi, headingKey, tocCollapsedHeadings, validHeadingKeys);
-                    }                    
+                    }
                 }
             } else if (levelDelta < 0) {
                 // Close as many lists as curLevel - newLevel
@@ -317,10 +337,9 @@ export default class TocWidget extends RightPanelWidget {
             //
 
             const headingText = await this.replaceMathTextWithKatax(m[2]);
-            const $itemContent = $('<div class="item-content">').html(headingText).on("click", () => {
-                this.jumpToHeading(headingIndex);
-            });
-            const $li = $("<li>").append($itemContent);
+            const $itemContent = $('<div class="item-content">').html(headingText);
+            const $li = $("<li>").append($itemContent)
+                .on("click", () => this.jumpToHeading(headingIndex));
             $ols[$ols.length - 1].append($li);
             headingCount = headingIndex;
             $previousLi = $li;
@@ -401,7 +420,8 @@ export default class TocWidget extends RightPanelWidget {
                 $previousLi.removeClass("collapsed");
             }
 
-            $collapseButton.on("click", () => {
+            $collapseButton.on("click", (event) => {
+                event.stopPropagation();
                 if ($previousLi.hasClass("animating")) return;
                 const willCollapse  = !$previousLi.hasClass("collapsed");
                 $previousLi.addClass("animating");