@cherry-markdown/cherry-markdown-dev 0.9.4-dev.202507280816.1fc0b64 → 0.9.4-dev.202507290127.ccd7524

package/dist/cherry-markdown.css

@@ -668,6 +668,31 @@ 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);
+  --accordion-radius: var(--radius-lg);
+  --accordion-shadow: var(--shadow-md);
+  --accordion-summary-bg: var(--primary-color);
+  --accordion-summary-color: var(--oc-white);
+  --accordion-summary-hover-bg: var(--color-primary-hover);
+  --accordion-body-bg: var(--base-previewer-bg);
+  --accordion-body-color: var(--base-font-color);
+  --accordion-body-border: var(--base-border-color);
 }
 
 /*
@@ -1571,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;
@@ -3817,34 +3867,101 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 }
 
 .cherry-detail details {
-  background: rgba(248, 249, 250, 0.6666666667);
-  border-radius: var(--radius-xl);
+  background: var(--accordion-bg);
+  border: 1px solid var(--accordion-border);
+  border-radius: var(--accordion-radius);
+  box-shadow: var(--accordion-shadow);
+  margin-bottom: var(--spacing-md);
+  transition: box-shadow 0.2s ease;
   overflow: hidden;
-  margin-bottom: 10px;
+}
+.cherry-detail details:hover {
+  box-shadow: var(--accordion-shadow);
 }
 .cherry-detail details summary {
+  background: var(--accordion-summary-bg);
+  color: var(--accordion-summary-color);
+  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) calc(var(--spacing-lg) + var(--spacing-xl));
+  cursor: pointer;
+  font-weight: 600;
+  transition: background-color 0.2s ease;
+  position: relative;
   user-select: none;
-  padding: 5px 10px;
-  background-color: #6c757d;
-  color: #fff;
-  border-radius: var(--radius-xl);
+  border-radius: var(--accordion-radius) var(--accordion-radius) 0 0;
+}
+.cherry-detail details summary:hover {
+  background: var(--accordion-summary-hover-bg);
+}
+.cherry-detail details summary::marker {
+  content: "";
+}
+.cherry-detail details summary::before {
+  content: "▼";
+  position: absolute;
+  left: var(--spacing-md);
+  top: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.2s ease;
+}
+.cherry-detail details[open] summary::before {
+  transform: translateY(-50%) rotate(180deg);
+}
+.cherry-detail details:not([open]) summary {
+  border-radius: var(--accordion-radius);
 }
 .cherry-detail details .cherry-detail-body {
-  padding: 15px 25px 0 25px;
+  padding: var(--spacing-lg);
+  background: var(--accordion-body-bg);
+  border-top: 1px solid var(--accordion-body-border);
+  color: var(--accordion-body-color);
+  line-height: var(--line-height-relaxed);
+  border-radius: 0 0 var(--accordion-radius) var(--accordion-radius);
+}
+.cherry-detail details .cherry-detail-body > *:first-child {
+  margin-top: 0;
+}
+.cherry-detail details .cherry-detail-body > *:last-child {
+  margin-bottom: 0;
 }
 
 .cherry-detail__multiple {
-  border-radius: var(--radius-xl);
+  border-radius: var(--accordion-radius);
+  box-shadow: var(--accordion-shadow);
+  background: var(--accordion-bg);
+  border: 1px solid var(--accordion-border);
   overflow: hidden;
 }
 .cherry-detail__multiple details {
-  margin-bottom: 1px;
+  margin-bottom: 0;
   border-radius: 0;
   border: none;
+  border-bottom: 1px solid var(--accordion-body-border);
+  box-shadow: none;
+}
+.cherry-detail__multiple details:first-child summary {
+  border-radius: var(--accordion-radius) var(--accordion-radius) 0 0;
+}
+.cherry-detail__multiple details:last-child {
+  border-bottom: none;
+}
+.cherry-detail__multiple details:last-child:not([open]) summary {
+  border-radius: 0 0 var(--accordion-radius) var(--accordion-radius);
+}
+.cherry-detail__multiple details:last-child[open] summary {
+  border-radius: 0;
+}
+.cherry-detail__multiple details:last-child .cherry-detail-body {
+  border-radius: 0 0 var(--accordion-radius) var(--accordion-radius);
+}
+.cherry-detail__multiple details:not(:first-child):not(:last-child) summary {
+  border-radius: 0;
 }
-.cherry-detail__multiple details summary {
+.cherry-detail__multiple details:not(:first-child):not(:last-child) .cherry-detail-body {
   border-radius: 0;
 }
+.cherry-detail__multiple details:hover {
+  box-shadow: none;
+}
 
 .cherry-text-align__center table {
   margin-left: auto;
@@ -6130,6 +6247,15 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: rgba(134, 142, 150, 0.05);
   --md-hr-border: var(--oc-gray-3);
   --md-table-border: var(--oc-gray-3);
+  /* ========== 手风琴组件变量覆盖 ========== */
+  --accordion-bg: var(--oc-gray-0);
+  --accordion-border: var(--oc-gray-3);
+  --accordion-shadow: var(--shadow-sm);
+  --accordion-summary-bg: var(--oc-gray-6);
+  --accordion-summary-hover-bg: var(--oc-gray-5);
+  --accordion-body-bg: var(--oc-gray-0);
+  --accordion-body-border: var(--oc-gray-2);
+  --accordion-body-color: var(--oc-gray-7);
 }
 
 /** 预览区域样式 */
@@ -6202,6 +6328,20 @@ 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);
+  --accordion-shadow: var(--shadow-md);
+  --accordion-summary-bg: var(--oc-orange-6);
+  --accordion-summary-hover-bg: var(--oc-orange-5);
+  --accordion-body-bg: var(--oc-gray-7);
+  --accordion-body-border: var(--oc-gray-6);
+  --accordion-body-color: var(--oc-gray-4);
   /* 目录区域样式 */
 }
 .cherry.theme__dark .cherry-flex-toc:hover {
@@ -6261,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 {
@@ -6349,6 +6472,19 @@ 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);
+  --accordion-shadow: var(--shadow-sm);
+  --accordion-summary-bg: var(--oc-blue-5);
+  --accordion-summary-hover-bg: var(--oc-blue-4);
+  --accordion-body-bg: var(--oc-blue-0);
+  --accordion-body-border: var(--oc-blue-1);
+  --accordion-body-color: var(--oc-gray-8);
 }
 
 /*
@@ -6391,12 +6527,22 @@ 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);
+  --accordion-shadow: var(--shadow-sm);
+  --accordion-summary-bg: var(--oc-green-6);
+  --accordion-summary-hover-bg: var(--oc-green-5);
+  --accordion-body-bg: var(--oc-green-0);
+  --accordion-body-border: var(--oc-green-1);
+  --accordion-body-color: var(--primary-color);
 }
 
 /** 预览区域样式 */
-.cherry-markdown.theme__green {
-  /** 目录 */
-}
 .cherry-markdown.theme__green h1,
 .cherry-markdown.theme__green h2,
 .cherry-markdown.theme__green h3,
@@ -6405,24 +6551,23 @@ 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);
-}
 
 /*
  * 热情主题
  */
 .cherry.theme__red {
-  /* ========== 基础色彩变量覆盖 ========== */
+  /* ========== 手风琴组件变量覆盖 ========== */
+  --accordion-bg: var(--oc-pink-0);
+  --accordion-border: var(--oc-pink-2);
+  --accordion-shadow: 0 4px 12px rgba(244, 63, 94, 0.08);
+  --accordion-summary-bg: linear-gradient(135deg, var(--oc-pink-6), var(--oc-pink-7));
+  --accordion-summary-hover-bg: linear-gradient(135deg, var(--oc-pink-5), var(--oc-pink-6));
+  --accordion-accent-color: linear-gradient(to bottom, var(--oc-pink-4), var(--oc-pink-6));
+  --accordion-body-bg: var(--oc-pink-0);
+  --accordion-body-border: var(--oc-pink-1);
+  --accordion-body-color: var(--oc-pink-9);
+  --accordion-multiple-border: var(--oc-pink-2);
+  --accordion-multiple-item-border: var(--oc-pink-1);
   --primary-color: var(--oc-pink-7);
   --secondary-color: var(--oc-pink-0);
   --base-font-color: var(--oc-pink-9);
@@ -6457,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,
@@ -6473,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);
-}
 
 /*
  * 淡雅主题
@@ -6524,12 +6659,22 @@ 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);
+  --accordion-shadow: var(--shadow-sm);
+  --accordion-summary-bg: var(--oc-violet-6);
+  --accordion-summary-hover-bg: var(--oc-violet-5);
+  --accordion-body-bg: var(--oc-violet-0);
+  --accordion-body-border: var(--oc-violet-1);
+  --accordion-body-color: var(--primary-color);
 }
 
 /** 预览区域样式 */
-.cherry-markdown.theme__violet {
-  /** 目录 */
-}
 .cherry-markdown.theme__violet h1,
 .cherry-markdown.theme__violet h2,
 .cherry-markdown.theme__violet h3,
@@ -6538,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);
-}
 
 /*
  * 清幽主题
@@ -6590,12 +6723,23 @@ 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);
+  --accordion-shadow: var(--shadow-sm);
+  --accordion-summary-bg: var(--oc-indigo-6);
+  --accordion-summary-hover-bg: var(--oc-indigo-5);
+  --accordion-body-bg: var(--oc-violet-0);
+  --accordion-body-border: var(--oc-indigo-1);
+  --accordion-body-color: var(--oc-indigo-8);
 }
 
 /** 预览区域样式 */
-.cherry-markdown.theme__blue {
-  /** 目录 */
-}
 .cherry-markdown.theme__blue h1,
 .cherry-markdown.theme__blue h2,
 .cherry-markdown.theme__blue h3,
@@ -6605,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);
 }