@cherry-markdown/cherry-markdown-dev 0.9.4-dev.202507280816.1fc0b64 → 0.9.4-dev.202507280929.50924e5

package/dist/cherry-markdown.css

@@ -668,6 +668,17 @@ 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);
+  /* ========== 手风琴组件样式 ========== */
+  --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);
 }
 
 /*
@@ -3817,34 +3828,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 summary {
+.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: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 +6208,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 +6289,15 @@ 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);
+  /* ========== 手风琴组件变量覆盖 ========== */
+  --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 {
@@ -6349,6 +6445,15 @@ 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);
+  /* ========== 手风琴组件变量覆盖 ========== */
+  --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,6 +6496,15 @@ 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);
+  /* ========== 手风琴组件变量覆盖 ========== */
+  --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);
 }
 
 /** 预览区域样式 */
@@ -6422,7 +6536,18 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
  * 热情主题
  */
 .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);
@@ -6524,6 +6649,15 @@ 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);
+  /* ========== 手风琴组件变量覆盖 ========== */
+  --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);
 }
 
 /** 预览区域样式 */
@@ -6590,6 +6724,15 @@ 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);
+  /* ========== 手风琴组件变量覆盖 ========== */
+  --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);
 }
 
 /** 预览区域样式 */