vitepress-theme-tui/src/styles/components/aside.css

A terminal UI theme for VitePress

@layer components {
  .VPLocalNav .items  {
    background-color: var(--vp-tui-aside-border-color) !important;
    border-color: var(--vp-tui-aside-border-color) !important;
  }
  .VPLocalNav .header {
    border-radius: 0 !important;
  }
  .VPLocalNav .outline {
    outline-style: none !important;
    border-radius: 0 !important;
  }

  .VPDocAsideOutline .content,
  .VPDocOutlineItem .content {
    border-left: none !important;
  }

  .VPDocAsideOutline .VPDocOutlineItem.nested,
  .VPDocOutlineItem .VPDocOutlineItem.nested {
    margin-left: 4px !important;
    border-left: var(--vp-tui-aside-border-width) var(--vp-tui-aside-border-style) var(--vp-tui-aside-border-color) !important;
    border-radius: 0 !important;
  }

  .VPDocAsideOutline .outline-link,
  .VPDocOutlineItem .outline-link {
    position: relative !important;
  }

  .VPDocAsideOutline .outline-link::before,
  .VPDocOutlineItem .outline-link::before {
    margin-right: 8px !important;
    color: var(--vp-tui-aside-border-color) !important;
  }

  .VPDocOutlineItem.nested > li:last-child > .outline-link::before {
    content: '└─' !important;
  }

  .VPDocOutlineItem.nested > li:not(:last-child) > .outline-link::before {
    content: '├─' !important;
  }

  .VPDocOutlineItem.root > li:last-child > .outline-link::before {
    content: '└─' !important;
  }

  .VPDocOutlineItem.root > li:not(:last-child) > .outline-link::before {
    content: '├─' !important;
  }

  .VPDocAsideOutline .outline-link:hover,
  .VPDocAsideOutline .outline-link:hover::before,
  .VPDocOutlineItem .outline-link:hover,
  .VPDocOutlineItem .outline-link:hover::before {
    color: var(--vp-tui-aside-item-hover-fg) !important;
    background-color: var(--vp-tui-aside-item-hover-bg) !important;
  }

  .VPDocAsideOutline .outline-marker,
  .VPDocOutlineItem .outline-marker {
    width: 0 !important;
  }
  .VPDocAsideOutline .outline-marker::before,
  .VPDocOutlineItem .outline-marker::before {
    content: '' !important;
    position: absolute !important;
    left: var(--vp-tui-aside-indicator-left, 0) !important;
    right: 0 !important;
    bottom: -8px !important;
    width: var(--vp-tui-aside-indicator-width) !important;
    height: 0 !important;
    transition: left 0.2s, background-color 0.2s !important;
    border-left: none !important;
    border-bottom: var(--vp-tui-aside-border-width) var(--vp-tui-aside-border-style) var(--vp-tui-aside-border-color) !important;
  }
}