From 52514691fcfccb5f3d3c53cbdde2d9670ded765b Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 3 Nov 2026 03:15:00 +0000
Subject: [PATCH] Fit the article directory highlight to each label

Drop the resting left rule and show a text-width button only while a directory link is hovered.

Co-authored-by: Jingwei Yuan <Musicaldg@users.noreply.github.com>
---
 assets/style.css | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index d8ac385..e3e8536 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -102,12 +102,13 @@ main { flex: 1; }
 .math-block .katex-display > .katex { white-space: nowrap; }
 .prose .katex { font-size: 1.05em; color: var(--text-100); }
 .math-error { color: #9b3b32; }
-.desktop-toc { position: sticky; top: 36px; max-height: calc(100vh - 72px); overflow: auto; margin-top: 18px; }
-.toc-title { font-size: 12px; color: var(--accent-200); margin-bottom: 14px; }
-.toc-links { display: flex; flex-direction: column; font-size: 13px; }
-.toc-links a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--primary-200); line-height: 1.55; color: var(--text-200); }
-.toc-links a.toc-level-3 { font-size: 12px; padding-left: 22px; }
-.toc-links a:hover, .toc-links a.active { color: var(--accent-200); border-color: var(--accent-200); }
+.desktop-toc { position: sticky; top: 36px; max-height: calc(100vh - 72px); overflow: auto; margin-top: 12px; }
+.toc-title { font-size: 12px; color: var(--text-200); margin: 0 0 8px 8px; }
+.toc-links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 13px; }
+.toc-links a { display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 8px; line-height: 1.45; color: var(--text-200); }
+.toc-links a.toc-level-3 { margin-left: 14px; font-size: 12px; }
+.toc-links a:hover { color: var(--accent-200); background: color-mix(in srgb, var(--primary-100) 78%, var(--bg-100)); }
+.toc-links a.active { color: var(--accent-200); }
 .mobile-toc { display: none; }
 @media (max-width: 1000px) {
   .article-page .wrap { max-width: 870px; }