Incomplete TOC sidebar

Support
3

wish code here would be helpful for you, code comment in chinese。

:root {
  /*TOCsidebar的相关变量 , Toc SideBar variables definition */
  --tocsidebar-fontsize: 16px;  /*TocSideBar的字体大小，TocSideBar's fontsize*/
  --tocsidebar-bg: #313640;  /*TocSideBar的面板背景色 , TocSideBar's panel color*/

  --tocsiderbar-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);   /*TocSideBar的阴影设置 , TocSideBar's shadow */
  --tocsiderbar-radius:10px;        /*TocSideBar的圆角度 , TocSideBar's radius */


  --tocsiderbar-leftline: 1px solid rgba(255, 255, 255, 0.5);  /*TocSideBar左边竖线线颜色和不透明度，0为全透明，1为不透明, TocSideBar's left line for Classification befor link*/

  --tocsidebar-linkcolor: #FFFFFF;    /*TocSideBar链接颜色 , link color*/
  --tocsidebar-linkcolor-opacity: 0.8;   /*TocSideBar链接颜色的不透明度, link color's opacity */

  --tocsidebar-linkhovercolor: #E71B64;  /*TocSideBar链接悬停时的颜色 #E71B64-玫红色, link color when cursor hovering */
  --tocsidebar-linkhovercoloropacity: 1; /*TocSideBar链接悬停时的颜色的不透明度,  link color's opacity  when cursor hovering */
}

/**************************************************************************************************
 *  TABLE OF CONTENTS
 *  Based on the idea from here:
 *  -https://discourse.joplinapp.org/t/toc-as-the-sidebar/5979/8
 *  -https://discourse.joplinapp.org/t/toc-as-the-sidebar/5979/34
 *  -https://discourse.joplinapp.org/t/share-your-css/1730/192
 *************************************************************************************************/

nav.table-of-contents > ul {
  /*面板固定在右上角,  fix Toc panel on the right of the window , this panel is used for activing toc sidebar */
  position: fixed;  
  top: 0;
  right: 6px;
  z-index: 10;

  font-size: var(--tocsidebar-fontsize);  /*目录字体大小，可设置为16PX或small,16px比较合适， toc sidebar's fontsize, 16px is  better for our eyes*/
  height: 85%;
  padding: 5px;
  overflow: hidden;

  min-width: 20px;   /* 右侧面板宽度,也可用 width: 20px;设置在鼠标到达右侧20px范围内时激活TocSideBar, 20px means the Toc sidebar will be active when cursor within 20px on the right side of the window */
  background: none;  /* 面板无背景色填充 */
}

nav.table-of-contents ul {
  /*所有目录li的父框ul设置，即所有目录父框的设置*/
  list-style-type: none;
  margin-bottom: 0;
  margin-left: 8px;  /*分类距离tocsidebar边缘，8px*/
  margin-top: 0;
}

nav.table-of-contents > ul:hover {
  /*TocSideBar弹出时，背景底框的设置 所以用>只选择一级目录li的父框ul ，填充背景色和阴影以显示TocSideBar*/
  background-color: var(--tocsidebar-bg);
  border-radius: var(--tocsiderbar-radius);
  box-shadow: var(--tocsiderbar-shadow);
  overflow: scroll;
  width: auto;  /*根据内容自动调整宽度 ,但会导致字体加粗显示时跳动, Automatically adjust width according to content */
}

nav.table-of-contents > ul:hover li {
  display: list-item;
  min-width: 180px;    /*Toc SideBar最小宽度，Toc SideBar 's minimum width*/
}

nav.table-of-contents li {
  display: none;
  line-height: 1.8em;
  margin-bottom: 0;
  white-space: nowrap;
}

nav.table-of-contents > ul > li > ul li {
/*设置目录前的分类线，也可以这样(空格表示所有子孙代li)写 nav.table-of-contents ul li ul li */
  border-left: var(--tocsiderbar-leftline); !important;
}

nav.table-of-contents li a {
  color: var(--tocsidebar-linkcolor);
  opacity: var(--tocsidebar-linkcolor-opacity);
  padding: 5px;
}

nav.table-of-contents a {
  /*去掉下划线,remove  link's underline */
  text-decoration: none !important;
}

nav.table-of-contents li a:hover {
    /*悬停时，改变字体样式，change font style when cursor hovering*/
   color:  var(--tocsidebar-linkhovercolor);  /*link color when cursor hovering */
   opacity: var( --tocsidebar-linkhovercoloropacity);
}

1
11905×988 512 KB