【主题自定义】让思源笔记的大纲和文件树显示层级缩进线

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

image.png

346 x 411

image.png

/*---------------------------------------------------*/
/*文件树缩进线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;
}
/*大纲缩进线结束*/
/*---------------------------------------------------*/


广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • jinghu-moon
    订阅者

    强!回去试试

    1 回复
  • abbj
    支持者 订阅者 作者

    能否对齐和字体字号有关,颜色也需要自己调整下。