style(docs): adjust sidebar spacing and improve scoped style specificity

Update CSS styles to refine sidebar spacing and ensure proper scoped style application. Changes include:
- Increased padding values for better click targets
- Added explicit scoped attribute selectors to prevent build/preview overrides
- Removed unnecessary margins to maintain consistent vertical spacing
This commit is contained in:
sanbuphy
2026-01-12 22:19:04 +08:00
parent dd4d08431a
commit 7d853d06ad
+40 -20
View File
@@ -1,60 +1,80 @@
:root { :root {
/* Easy-Vibe Theme Fix v2025-01-12 */ /* Easy-Vibe Theme Fix v2025-01-12 */
/* 调整侧边栏分组之间的间距 */ /* 通过变量控制分组底部留白(默认 24px) */
--vp-sidebar-nav-section-gap: 8px; --vp-sidebar-nav-section-gap: 8px;
} }
/* 减少一级标题(如"前端开发")底部的间距 */ /* 生产环境(带 data-v-* 的 scoped 样式)会比 class 选择器更高优先级。
html .VPSidebarItem.level-0 { 为避免 build/preview 时被覆盖,这里显式匹配 scoped 属性并加 !important。 */
padding-bottom: 4px !important; :where(html) .VPSidebarItem.level-0,
:where(html) .VPSidebarItem.level-0[data-v-d81de50c] {
padding-bottom: 8px !important;
} }
/* 减少一级标题文字与下方子菜单的间距 */ /* 减少一级标题文字与下方子菜单的间距 */
html .VPSidebarItem.level-0 > .item { :where(html) .VPSidebarItem.level-0 > .item,
padding-bottom: 2px !important; :where(html) .VPSidebarItem.level-0[data-v-d81de50c] > .item {
padding-bottom: 4px !important;
} }
/* 调整子菜单项之间的间距 - 针对所有层级 */ /* 调整子菜单项之间的间距 - 针对所有层级 */
html .VPSidebarItem.level-1 .item, :where(html) .VPSidebarItem.level-1 .item,
html .VPSidebarItem.level-2 .item, :where(html) .VPSidebarItem.level-1[data-v-d81de50c] .item,
html .VPSidebarItem.level-3 .item, :where(html) .VPSidebarItem.level-2 .item,
html .VPSidebarItem.level-4 .item { :where(html) .VPSidebarItem.level-2[data-v-d81de50c] .item,
padding-top: 2px !important; :where(html) .VPSidebarItem.level-3 .item,
padding-bottom: 2px !important; :where(html) .VPSidebarItem.level-3[data-v-d81de50c] .item,
min-height: 24px !important; /* 强制减小最小高度 */ :where(html) .VPSidebarItem.level-4 .item,
:where(html) .VPSidebarItem.level-4[data-v-d81de50c] .item {
padding-top: 3px !important;
padding-bottom: 3px !important;
min-height: 26px !important; /* 稍微放大便于点击 */
} }
/* 针对可能存在的特定类名进行覆盖,确保紧凑 */ /* 针对可能存在的特定类名进行覆盖,确保紧凑 */
html .VPSidebarGroup { :where(html) .VPSidebarGroup,
:where(html) .VPSidebarGroup[data-v-8d50c081] {
padding-top: 6px !important; padding-top: 6px !important;
padding-bottom: 6px !important; padding-bottom: 6px !important;
} }
/* 进一步压缩分组标题与第一项之间的间距 */ /* 进一步压缩分组标题与第一项之间的间距 */
html .VPSidebarItem.level-0 + .VPSidebarItem.level-1 { :where(html) .VPSidebarItem.level-0 + .VPSidebarItem.level-1,
:where(html) .VPSidebarItem.level-0[data-v-d81de50c] + .VPSidebarItem.level-1[data-v-d81de50c] {
margin-top: -2px !important; margin-top: -2px !important;
} }
/* 压缩分组标题本身的行高 */ /* 压缩分组标题本身的行高 */
html .VPSidebarItem.level-0 .text { :where(html) .VPSidebarItem.level-0 .text,
:where(html) .VPSidebarItem.level-0[data-v-d81de50c] .text {
line-height: 1.3 !important; line-height: 1.3 !important;
} }
/* 压缩子项的行高 */ /* 压缩子项的行高 */
html .VPSidebarItem.level-1 .text, :where(html) .VPSidebarItem.level-1 .text,
html .VPSidebarItem.level-2 .text, :where(html) .VPSidebarItem.level-1[data-v-d81de50c] .text,
html .VPSidebarItem.level-3 .text { :where(html) .VPSidebarItem.level-2 .text,
:where(html) .VPSidebarItem.level-2[data-v-d81de50c] .text,
:where(html) .VPSidebarItem.level-3 .text,
:where(html) .VPSidebarItem.level-3[data-v-d81de50c] .text {
line-height: 1.4 !important; line-height: 1.4 !important;
padding: 0 !important; /* 移除文字本身的内边距 */ padding: 0 !important; /* 移除文字本身的内边距 */
} }
/* 强制链接本身没有额外的边距 */ /* 强制链接本身没有额外的边距 */
html .VPSidebarItem .VPLink { :where(html) .VPSidebarItem .VPLink,
:where(html) .VPSidebarItem[data-v-d81de50c] .VPLink {
padding-top: 2px !important; padding-top: 2px !important;
padding-bottom: 2px !important; padding-bottom: 2px !important;
min-height: auto !important; min-height: auto !important;
} }
/* 清空 sidebar item 自带的 margin,避免垂直间距被放大 */
:where(html) .VPSidebarItem .item,
:where(html) .VPSidebarItem[data-v-d81de50c] .item {
margin-bottom: 0 !important;
}
/* 图片高度限制策略:根据长宽比调整最大高度 */ /* 图片高度限制策略:根据长宽比调整最大高度 */
/* 越高的图片(长宽比越大),限制的高度越小,避免占用过多纵向空间 */ /* 越高的图片(长宽比越大),限制的高度越小,避免占用过多纵向空间 */
.vp-doc img.img-tall { .vp-doc img.img-tall {