chore(docs): improved the style, fixed many issues

docs/.vitepress/theme/style.css

@@ -163,16 +163,9 @@ mark {
 }
 
 main .prose :where(details):not(:where(.not-prose,.not-prose *)) {
-  background-color:rgba(131, 186, 231, 0.1);
-
-  padding: 1.2rem 1.2rem;
   border-radius: 12px;
 }
 
-.dark main .prose :where(details):not(:where(.not-prose,.not-prose *)) {
-  background-color:rgba(88, 112, 132, 0.06);
-}
-
 pre.shiki {
   border-radius: 12px;
   background-color: var(--shiki-light-bg);

docs/.vitepress/theme/theme-vitepress.css

@@ -44,21 +44,40 @@
   &::before {
     content: "";
     position: absolute;
-    left: 0;
-    top: 0;
-    width: 4px;
-    height: 100%;
+    left: 0.75rem;
+    top: 50%;
+    width: 0.25rem;
+    height: calc(100% - 2rem);
+    transform: translateY(-50%);
     border-radius: 999px;
   }
 
   & .custom-block-title {
-    margin: 0 0 8px 0;
+    margin: 0 0 0.5rem 0.5rem;
   }
 
   & > p {
-    margin: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0.5rem;
     display: block;
   }
+
+  & > div {
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0.5rem;
+  }
+
+  pre.shiki.shiki-themes.catppuccin-latte.catppuccin-mocha {
+    background-color: #ffffffbd;
+  }
+}
+
+.dark .custom-block {
+  pre.shiki.shiki-themes.catppuccin-latte.catppuccin-mocha {
+    background-color: #00000040;
+  }
 }
 
 .custom-block.info {
@@ -124,3 +143,11 @@
     @apply dark:text-neutral-50;
   }
 }
+
+pre.shiki.shiki-themes.catppuccin-latte.catppuccin-mocha {
+  background-color: #f6f9ff;
+}
+
+.dark pre.shiki.shiki-themes.catppuccin-latte.catppuccin-mocha {
+  background-color: #1e1e2e;
+}

docs/uno.config.ts

@@ -30,6 +30,19 @@ export default defineConfig({
         'code::after': {
           content: 'normal',
         },
+        'pre': {
+          'margin-top': '0.5rem',
+          'margin-bottom': '0',
+        },
+        'details': {
+          'margin-top': '0.5rem',
+          'margin-bottom': '0.5rem',
+          'padding': '0.5rem 1rem',
+          'background-color': '#a6ceef1a',
+        },
+        '.dark details': {
+          'background-color': '#5870840f',
+        },
       },
     }),
     presetWind3(),