让思源笔记的大纲和文件树显示层级缩进线

一直想搞，终于整出来一个，还是不够完美，水平有限，凑合用吧，专门发个帖子分享一下。

346 x 411

/*---------------------------------------------------*/
/*文件树缩进线v142*/
/*文件树整体结构是一个class为.b3-list.b3-list--files的ul，其中第一个li为笔记本名称，这个li同级的ul为当前笔记本的各条笔记列表，分别以li表示，每个li若有子笔记，则用一个ul包裹，内部重复这个层级结构*/
/*此外，每个li内部包含一些span，分别是折叠三角、emoji图标等*/
/*相对定位的起点，左对齐*/
ul.b3-list.b3-list--files {
	position: relative;
	padding-left: 10px !important;
}

/*每个li的起点都是一个三角，调整这个三角的缩进*/
.b3-list-item__toggle.b3-list-item__toggle--hl,
.b3-list-item.b3-list-item--hide-action,
.b3-list--files>span.b3-list-item__toggle.b3-list-item__toggle--hl,
.b3-list--files>span.b3-list-item__toggle.b3-list-item__toggle--hl fn__hidden {padding-left: 0px !important;}

ul.b3-list.b3-list--files ul>li {
	position: relative;
	padding-left: 20px !important;
}

ul.b3-list.b3-list--files ul>ul {
	position: relative;
	padding-left: 20px !important;
}

/*列表左边框作为层级线，自动显示隐藏*/
ul.b3-list.b3-list--files:hover>ul li:before,
ul.b3-list.b3-list--files:hover>ul ul:before {
	content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: var(--custom-font-color-ui);
    top: 0;
	left: 2px;
	transition:all 0.5s ease-in-out;
}

/*文档树缩进线结束*/


/*---------------------------------------------------*/
/*大纲缩进线v142*/
/*大纲整体是一个class为b3-list--background的ul，一级标题是大纲的一个li，更次级标题放在和一级li同级的ul中，内部结果如上循环*/
/*先把大纲整体改为相对定位，左边距为0*/
ul.b3-list.b3-list--background {
	position:relative;
	padding-left: 0px !important;
}
/*一级标题一级包含下级标题的ul的边距设置,ul左边距作为层级线位置*/
ul.b3-list.b3-list--background>li {
	position:relative;
	margin-left: 0px;
}
ul.b3-list.b3-list--background>ul {
	position:relative;
	margin-left: 12px;
}
/*设置一级以下标题的边距*/
ul.b3-list.b3-list--background ul li {
	position:relative;
	margin-left: 18px;
}
ul.b3-list.b3-list--background ul ul {
	position:relative;
	margin-left: 20px;
}
/*相对定位模式下，清楚折叠三角左边距，避免缩进累积*/
.b3-list-item.b3-list-item--hide-action {padding-left:0px !important;}
/*ul左边框作为层级线，自动显示隐藏*/
ul.b3-list.b3-list--background:hover ul:before {
	content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: var(--custom-font-color-ui);
    top: 0;
	left: 2px;
	transition:all 0.5s ease-in-out;
}
/*大纲缩进线结束*/
/*---------------------------------------------------*/


​