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

A terminal UI theme for VitePress

@layer components {
  .VPSidebar {
    border-right: var(--vp-tui-sidebar-border-width) solid var(--vp-tui-sidebar-border-color) !important;
    border-radius: 0 !important;
  }

  .VPSidebar  .group + .group {
    border-top: 1px dashed var(--vp-tui-sidebar-border-color) !important;
    border-radius: 0 !important;
  }

  .VPSidebarItem .item {
    position: relative !important;
  }

  .VPSidebarItem .VPLink::before, .item > h4.text::before {
    margin-right: 8px !important;
    font-size: 24px;
    /*transform: scale(0.7, 1);*/
  }

  .items > .VPSidebarItem:last-child .VPLink::before, .item > h4.text::before {
    content: '└' !important;
  }

  .items > .VPSidebarItem:not(:last-child) .VPLink::before {
    content: '├' !important;
  }

  .VPSidebarItem .item:hover .VPLink.link, .VPSidebarItem.is-active .item:hover .VPLink.link {
    color: var(--vp-tui-sidebar-item-hover-fg) !important;
    background-color: var(--vp-tui-sidebar-item-hover-bg) !important;
  }

  .VPSidebarItem .item:hover .VPLink.link .text {
    color: var(--vp-tui-sidebar-item-hover-fg) !important;
  }

  .VPSidebarItem .item:hover .VPLink::before, .VPSidebarItem.is-active .item:hover .VPLink::before {
    background-color: var(--vp-tui-sidebar-item-hover-bg) !important;
    color: var(--vp-tui-sidebar-item-hover-fg) !important;
  }

  .VPSidebarItem.is-active > .item .VPLink::before {
    color: var(--vp-c-brand-1) !important;
  }

  .VPSidebarItem.is-active > .item .text {
    font-weight: var(--vp-tui-sidebar-item-active-font-weight) !important;
  }

  .VPSidebarItem.is-active > .item > .indicator {
    position: relative !important;
    width: 0 !important;
  }

  .VPSidebarItem.is-active > .item > .indicator::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
    color: var(--vp-c-brand-1) !important;
    background-color: var(--vp-sidebar-bg-color) !important;
    transition:
      left 0.2s,
      background-color 0.2s !important;
  }

  .VPSidebarItem.is-active > .item:hover > .indicator::before {
    left: 3px !important;
    background-color: var(--vp-tui-sidebar-item-active-indicator-bg) !important;
    color: var(--vp-tui-sidebar-item-hover-fg) !important;
  }

  .VPSidebarItem .items {
    padding-left: 16px !important;
    border-left: 0 !important;
  }

  .VPNavBar.has-sidebar .wrapper {
    background-color: var(--vp-nav-bg-color) !important;
    border-radius: 0 !important;
  }
  .VPNavBar.has-sidebar .content-body {
    background-color: transparent !important;
  }

  .VPLocalNav.has-sidebar {
    border-color: var(--vp-tui-sidebar-border-color) !important;
    border-radius: 0 !important;
  }

  .VPNavBarTitle a.title {
    border-bottom: none !important;
  }

  .VPNavBar .divider {
    display: none !important;
  }

  .VPNav {
    border-bottom: var(--vp-tui-sidebar-border-width) solid var(--vp-tui-sidebar-border-color) !important;
    border-radius: 0 !important;
  }
}