@cherry-markdown/cherry-markdown-dev 0.9.4-dev.202507280929.50924e5 → 0.9.4-dev.202507290127.ccd7524

package/dist/cherry-markdown.css

@@ -668,6 +668,20 @@ span.CodeMirror-selectedtext {
   --md-blockquote-color: var(--base-sub-font-color);
   --md-table-border: var(--base-border-color);
   --md-hr-border: var(--base-border-color);
+  --md-toc-bg: var(--oc-gray-0);
+  --md-toc-border-color: var(--base-border-color);
+  --md-toc-radius: var(--radius-lg);
+  --md-toc-padding: var(--spacing-lg);
+  --md-toc-title-color: var(--md-heading-color);
+  --md-toc-link-hover-bg: var(--oc-gray-1);
+  --md-toc-link-active-bg: var(--oc-gray-2);
+  --md-toc-link-radius: var(--radius-md);
+  --md-toc-link-color: var(--md-paragraph-color);
+  --md-toc-link-hover-color: var(--md-link-hover-color);
+  --md-toc-indicator-width: var(--border-width-4);
+  --md-toc-indicator-color: var(--oc-gray-3);
+  --md-toc-indicator-hover-color: var(--md-toc-link-hover-color);
+  --md-toc-indicator-gap: var(--spacing-lg);
   /* ========== 手风琴组件样式 ========== */
   --accordion-bg: var(--base-previewer-bg);
   --accordion-border: var(--base-border-color);
@@ -1582,21 +1596,46 @@ span.CodeMirror-selectedtext {
 .cherry-markdown .toc {
   margin-bottom: var(--spacing-lg);
   padding-left: 0;
+  background-color: var(--md-toc-bg);
+  border: var(--border-width-1) solid var(--md-toc-border-color);
+  border-radius: var(--md-toc-radius);
+  padding: var(--md-toc-padding);
 }
 .cherry-markdown .toc .toc-title {
   font-size: var(--font-size-2xl);
-  margin-bottom: 5px;
+  margin-bottom: var(--spacing-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--md-toc-title-color);
 }
 .cherry-markdown .toc .toc-li {
-  border: none;
   list-style: none;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  border-left: var(--md-toc-indicator-width) solid var(--md-toc-indicator-color);
+  padding-left: var(--md-toc-indicator-gap);
+  transition: border-color 50ms ease-out;
 }
 .cherry-markdown .toc .toc-li a {
   text-decoration: none;
-  color: var(--md-paragraph-color);
+  color: var(--md-toc-link-color);
+  flex-grow: 1;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--md-toc-link-radius);
+  transition: color 50ms ease-out, background-color 50ms ease-out;
 }
 .cherry-markdown .toc .toc-li a:hover {
-  color: var(--md-link-hover-color);
+  color: var(--md-toc-link-hover-color);
+  background-color: var(--md-toc-link-hover-bg);
+}
+.cherry-markdown .toc .toc-li a:active {
+  background-color: var(--md-toc-link-active-bg);
+}
+.cherry-markdown .toc .toc-li a.level-1 {
+  font-weight: var(--font-weight-semibold);
+}
+.cherry-markdown .toc .toc-li:hover, .cherry-markdown .toc .toc-li:has(a:active) {
+  border-left-color: var(--md-toc-indicator-hover-color);
 }
 .cherry-markdown .auto-num-toc {
   counter-reset: headtoclevel1;
@@ -6289,6 +6328,11 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: rgba(102, 128, 153, 0.05);
   --md-hr-border: var(--oc-gray-5);
   --md-table-border: var(--oc-gray-5);
+  --md-toc-bg: var(--oc-gray-9);
+  --md-toc-border-color: var(--oc-gray-7);
+  --md-toc-indicator-color: var(--oc-gray-7);
+  --md-toc-link-hover-bg: var(--oc-gray-8);
+  --md-toc-link-active-bg: var(--oc-gray-7);
   /* ========== 手风琴组件变量覆盖 ========== */
   --accordion-bg: var(--oc-gray-8);
   --accordion-border: var(--oc-gray-6);
@@ -6357,23 +6401,6 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 }
 
 /** 预览区域样式 */
-.cherry-markdown.theme__dark {
-  /** 目录 */
-}
-.cherry-markdown.theme__dark .toc {
-  border: 1px solid var(--md-hr-border);
-  margin-top: 15px;
-  margin-bottom: 15px;
-  margin-right: 15px;
-}
-.cherry-markdown.theme__dark .toc .toc-title {
-  padding: 15px;
-  margin-bottom: 15px;
-  border-bottom: 1px solid var(--md-hr-border);
-}
-.cherry-markdown.theme__dark .toc .toc-li {
-  padding: 0 20px;
-}
 .cherry-markdown.theme__dark figure svg path,
 .cherry-markdown.theme__dark figure svg rect,
 .cherry-markdown.theme__dark figure svg line {
@@ -6445,6 +6472,10 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: var(--oc-blue-0);
   --md-hr-border: var(--oc-blue-5);
   --md-table-border: var(--oc-blue-5);
+  --md-toc-bg: var(--oc-blue-0);
+  --md-toc-indicator-color: var(--oc-blue-1);
+  --md-toc-link-hover-bg: var(--oc-blue-1);
+  --md-toc-link-active-bg: var(--oc-blue-2);
   /* ========== 手风琴组件变量覆盖 ========== */
   --accordion-bg: var(--oc-blue-0);
   --accordion-border: var(--oc-blue-2);
@@ -6496,6 +6527,10 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: var(--oc-green-1);
   --md-hr-border: var(--oc-green-8);
   --md-table-border: var(--oc-green-8);
+  --md-toc-bg: var(--oc-white);
+  --md-toc-indicator-color: var(--oc-green-1);
+  --md-toc-link-hover-bg: var(--oc-green-0);
+  --md-toc-link-active-bg: var(--oc-green-1);
   /* ========== 手风琴组件变量覆盖 ========== */
   --accordion-bg: var(--oc-green-0);
   --accordion-border: var(--oc-green-2);
@@ -6508,9 +6543,6 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 }
 
 /** 预览区域样式 */
-.cherry-markdown.theme__green {
-  /** 目录 */
-}
 .cherry-markdown.theme__green h1,
 .cherry-markdown.theme__green h2,
 .cherry-markdown.theme__green h3,
@@ -6519,18 +6551,6 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   text-align: center;
   margin-bottom: 35px;
 }
-.cherry-markdown.theme__green .toc {
-  border-bottom: 1px solid var(--md-hr-border);
-  padding-bottom: 15px;
-  margin-bottom: 30px;
-}
-.cherry-markdown.theme__green .toc .toc-title {
-  text-align: center;
-  padding-bottom: 15px;
-  margin-top: 30px;
-  margin-bottom: 15px;
-  border-bottom: 1px solid var(--md-hr-border);
-}
 
 /*
  * 热情主题
@@ -6582,12 +6602,14 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: var(--oc-pink-1);
   --md-hr-border: var(--oc-pink-8);
   --md-table-border: var(--oc-pink-8);
+  --md-toc-bg: var(--oc-white);
+  --md-toc-border-color: var(--base-border-color);
+  --md-toc-indicator-color: var(--oc-pink-1);
+  --md-toc-link-hover-bg: var(--oc-pink-0);
+  --md-toc-link-active-bg: var(--oc-pink-1);
 }
 
 /** 预览区域样式 */
-.cherry-markdown.theme__red {
-  /** 目录 */
-}
 .cherry-markdown.theme__red h1,
 .cherry-markdown.theme__red h2,
 .cherry-markdown.theme__red h3,
@@ -6598,18 +6620,6 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   padding-bottom: 15px;
   margin-bottom: 25px;
 }
-.cherry-markdown.theme__red .toc {
-  border-bottom: 1px solid var(--md-hr-border);
-  padding-bottom: 15px;
-  margin-bottom: 30px;
-}
-.cherry-markdown.theme__red .toc .toc-title {
-  text-align: center;
-  padding-bottom: 15px;
-  margin-top: 30px;
-  margin-bottom: 15px;
-  border-bottom: 1px solid var(--md-hr-border);
-}
 
 /*
  * 淡雅主题
@@ -6649,6 +6659,10 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: var(--oc-violet-1);
   --md-hr-border: var(--oc-violet-8);
   --md-table-border: var(--oc-violet-8);
+  --md-toc-bg: var(--oc-violet-0);
+  --md-toc-indicator-color: var(--oc-violet-1);
+  --md-toc-link-hover-bg: var(--oc-violet-1);
+  --md-toc-link-active-bg: var(--oc-violet-2);
   /* ========== 手风琴组件变量覆盖 ========== */
   --accordion-bg: var(--oc-violet-0);
   --accordion-border: var(--oc-violet-2);
@@ -6661,9 +6675,6 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 }
 
 /** 预览区域样式 */
-.cherry-markdown.theme__violet {
-  /** 目录 */
-}
 .cherry-markdown.theme__violet h1,
 .cherry-markdown.theme__violet h2,
 .cherry-markdown.theme__violet h3,
@@ -6672,18 +6683,6 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   text-align: center;
   margin-bottom: 35px;
 }
-.cherry-markdown.theme__violet .toc {
-  border-bottom: 1px solid var(--md-hr-border);
-  padding-bottom: 15px;
-  margin-bottom: 30px;
-}
-.cherry-markdown.theme__violet .toc .toc-title {
-  text-align: center;
-  padding-bottom: 15px;
-  margin-top: 30px;
-  margin-bottom: 15px;
-  border-bottom: 1px solid var(--md-hr-border);
-}
 
 /*
  * 清幽主题
@@ -6724,6 +6723,11 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: var(--oc-violet-1);
   --md-hr-border: var(--oc-indigo-4);
   --md-table-border: var(--oc-indigo-4);
+  --md-toc-bg: var(--oc-white);
+  --md-toc-border-color: var(--base-border-color);
+  --md-toc-indicator-color: var(--oc-indigo-1);
+  --md-toc-link-hover-bg: var(--oc-violet-0);
+  --md-toc-link-active-bg: var(--oc-violet-1);
   /* ========== 手风琴组件变量覆盖 ========== */
   --accordion-bg: var(--oc-violet-0);
   --accordion-border: var(--oc-indigo-2);
@@ -6736,9 +6740,6 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 }
 
 /** 预览区域样式 */
-.cherry-markdown.theme__blue {
-  /** 目录 */
-}
 .cherry-markdown.theme__blue h1,
 .cherry-markdown.theme__blue h2,
 .cherry-markdown.theme__blue h3,
@@ -6748,16 +6749,4 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   border-bottom: 1px dashed var(--md-hr-border);
   padding-bottom: 15px;
   margin-bottom: 25px;
-}
-.cherry-markdown.theme__blue .toc {
-  border-bottom: 1px solid var(--md-hr-border);
-  padding-bottom: 15px;
-  margin-bottom: 30px;
-}
-.cherry-markdown.theme__blue .toc .toc-title {
-  text-align: center;
-  padding-bottom: 15px;
-  margin-top: 30px;
-  margin-bottom: 15px;
-  border-bottom: 1px solid var(--md-hr-border);
 }