style(docs): adjust sidebar spacing and line heights for compact layout

docs/.vitepress/theme/style.css

@@ -1,38 +1,40 @@
-/* Custom styles for viewerjs */
+:root {
-.viewer-container {
+  /* 调整侧边栏分组之间的间距 */
-  z-index: 9999 !important; /* Ensure it's above everything including navbar */
+  --vp-sidebar-nav-section-gap: 8px;
 }
 
-/* Optional: Adjust backdrop opacity if needed */
+/* 减少一级标题（如"前端开发"）底部的间距 */
-.viewer-backdrop {
+.VPSidebarItem.level-0 {
-  background-color: rgba(0, 0, 0, 0.9); /* Darker backdrop for better focus */
+  padding-bottom: 4px;
 }
 
-/* 
+/* 减少一级标题文字与下方子菜单的间距 */
-  Core Logic:
+.VPSidebarItem.level-0 > .item {
-  1. Default (opening/closing): No transition -> Instant.
+  padding-bottom: 2px;
-  2. body.viewer-ready (viewing): Force transition -> Smooth Zoom.
-*/
-body.viewer-ready .viewer-canvas > img {
-  transition: transform 0.2s ease-out !important;
 }
 
-/* Limit image max height in document content */
+/* 调整子菜单项之间的间距 */
-.vp-doc img {
+.VPSidebarItem.level-1 .item {
-  max-height: 500px;
+  padding: 2px 0;
-  width: auto;
-  margin: 16px auto; /* Center with spacing */
-  display: block;
-  border-radius: 8px; /* Optional: Rounded corners */
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Optional: Shadow */
 }
 
-/* Tall images (e.g. mobile screenshots) - ratio > 1.2 */
+/* 针对可能存在的特定类名进行覆盖，确保紧凑 */
-.vp-doc img.img-tall {
+.VPSidebarGroup {
-  max-height: 400px;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
-/* Very tall images (e.g. long screenshots) - ratio > 2 */
+/* 进一步压缩分组标题与第一项之间的间距 */
-.vp-doc img.img-very-tall {
+.VPSidebarItem.level-0 + .VPSidebarItem.level-1 {
-  max-height: 300px;
+  margin-top: -2px;
+}
+
+/* 压缩分组标题本身的行高 */
+.VPSidebarItem.level-0 .text {
+  line-height: 1.3;
+}
+
+/* 压缩子项的行高 */
+.VPSidebarItem.level-1 .text {
+  line-height: 1.4;
 }