【代码片段】移动端文档树展开聚焦显示

移动端展开文档树层级多了以后基本看不到文档标题了，用这个代码片段可以解决这个问题

/* 长文档标题显示两行 */
#sidebar .b3-list--background .b3-list-item__text{
    -webkit-line-clamp: 2;
}

/* ------------------------ 聚焦内容突出显示 ------------------------ */

/* 取消聚焦内容左侧边距 */
#sidebar .b3-list--background 
.b3-list-item--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom) > 
span[style]:has(.b3-list-item__arrow--open) {
    /* 仅在展开的时候取消缩进 */
    padding-left: 4px !important;
}

/* 取消聚焦子集左侧边距 */
#sidebar .b3-list--background 
.b3-list-item--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom) + 
ul > .b3-list-item > span[style] {
    padding-left: 24px !important;
}

/* 增加突出显示框 */
#sidebar .b3-list--background 
.b3-list-item--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom):has(span[style] > .b3-list-item__arrow--open) {
    /* 仅在展开的时候添加顶部突出显示框 */
    border-top: 2px solid var(--b3-scroll-color);
}

#sidebar .b3-list--background 
.b3-list-item--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom)[data-type="navigation-file"] + 
ul {
    /* 仅在展开文档时添加底部突出显示框 */
    border-bottom: 2px solid var(--b3-scroll-color);
}
​

显示效果：