SOURCE

/* [CSS片段] 文档树压缩  */
:root {
    /* 22, 40, 58, 76, 94, 112, 130 */
    --level-tree-compress-scale:0.5;
    --level-tree-compress-0:4px;
    --level-tree-compress-spacing:18px;
    --level-tree-compress-spacing-res: calc(var(--level-tree-compress-spacing) * var(--level-tree-compress-scale));

    --level-tree-compress-2: calc(var(--level-tree-compress-0) + var(--level-tree-compress-spacing-res));
    --level-tree-compress-3: calc(var(--level-tree-compress-2) + var(--level-tree-compress-spacing-res));
    --level-tree-compress-4: calc(var(--level-tree-compress-3) + var(--level-tree-compress-spacing-res));
    --level-tree-compress-5: calc(var(--level-tree-compress-4) + var(--level-tree-compress-spacing-res));
    --level-tree-compress-6: calc(var(--level-tree-compress-5) + var(--level-tree-compress-spacing-res));
    --level-tree-compress-7: calc(var(--level-tree-compress-6) + var(--level-tree-compress-spacing-res));
    --level-tree-compress-8: calc(var(--level-tree-compress-7) + var(--level-tree-compress-spacing-res));
}
div.sy__file>div.fn__flex-1>ul>ul>li>span.b3-list-item__toggle { padding-left: var(--level-tree-compress-2)!important; }
div.sy__file>div.fn__flex-1>ul>ul>ul>li>span.b3-list-item__toggle { padding-left: var(--level-tree-compress-3)!important; }
div.sy__file>div.fn__flex-1>ul>ul>ul>ul>li>span.b3-list-item__toggle { padding-left: var(--level-tree-compress-4)!important; }
div.sy__file>div.fn__flex-1>ul>ul>ul>ul>ul>li>span.b3-list-item__toggle { padding-left: var(--level-tree-compress-5)!important; }
div.sy__file>div.fn__flex-1>ul>ul>ul>ul>ul>ul>li>span.b3-list-item__toggle { padding-left: var(--level-tree-compress-6)!important; }
div.sy__file>div.fn__flex-1>ul>ul>ul>ul>ul>ul>ul>li>span.b3-list-item__toggle { padding-left: var(--level-tree-compress-7)!important; }
div.sy__file>div.fn__flex-1>ul>ul>ul>ul>ul>ul>ul>ul>li>span.b3-list-item__toggle { padding-left: var(--level-tree-compress-8)!important; }


/* 多彩层级文档树 CSS片段 */
:root {
    /* 可修改 - 背景颜色 */
    --b3-background-tree-res-1: var(--b3-font-background10);
    --b3-background-tree-res-2: var(--b3-font-background12);
    --b3-background-tree-res-3: var(--b3-font-background6);
    --b3-background-tree-res-4: var(--b3-font-background11);
    --b3-background-tree-res-5: var(--b3-font-background10);
    --b3-background-tree-res-6: var(--b3-font-background12);
    --b3-background-tree-res-7: var(--b3-font-background6);

    /* 可修改 - 背景颜色相对于上层的缩进距离 */
    --level-spacing-tree-0: 23px;
    --level-spacing-tree-1: 9px;
    --level-spacing-tree-2: 9px;
    --level-spacing-tree-3: 9px;
    --level-spacing-tree-4: 9px;
    --level-spacing-tree-5: 9px;
    --level-spacing-tree-6: 9px;
    --level-spacing-tree-7: 9px;

    /* 实际缩进距离 */
    --level-spacing-tree-res-0: var(--level-spacing-tree-0);
    --level-spacing-tree-res-1: calc(var(--level-spacing-tree-res-0) + var(--level-spacing-tree-1));
    --level-spacing-tree-res-2: calc(var(--level-spacing-tree-res-1) + var(--level-spacing-tree-2));
    --level-spacing-tree-res-3: calc(var(--level-spacing-tree-res-2) + var(--level-spacing-tree-3));
    --level-spacing-tree-res-4: calc(var(--level-spacing-tree-res-3) + var(--level-spacing-tree-4));
    --level-spacing-tree-res-5: calc(var(--level-spacing-tree-res-4) + var(--level-spacing-tree-5));
    --level-spacing-tree-res-6: calc(var(--level-spacing-tree-res-5) + var(--level-spacing-tree-6));
    --level-spacing-tree-res-7: calc(var(--level-spacing-tree-res-6) + var(--level-spacing-tree-7));
    --b3-background-tree-res-0: var(--b3-theme-surface);
}
div.sy__file>div.fn__flex-1>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-tree-res-0) 0,
    var(--b3-background-tree-res-0) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-1));
}
div.sy__file>div.fn__flex-1>ul>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-tree-res-0) 0,
    var(--b3-background-tree-res-0) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-2));
}
div.sy__file>div.fn__flex-1>ul>ul>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-tree-res-0) 0,
    var(--b3-background-tree-res-0) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-2),
    var(--b3-background-tree-res-3) var(--level-spacing-tree-res-2),
    var(--b3-background-tree-res-3) var(--level-spacing-tree-res-3));
}
div.sy__file>div.fn__flex-1>ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-tree-res-0) 0,
    var(--b3-background-tree-res-0) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-2),
    var(--b3-background-tree-res-3) var(--level-spacing-tree-res-2),
    var(--b3-background-tree-res-3) var(--level-spacing-tree-res-3),
    var(--b3-background-tree-res-4) var(--level-spacing-tree-res-3),
    var(--b3-background-tree-res-4) var(--level-spacing-tree-res-4));
}
div.sy__file>div.fn__flex-1>ul>ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-tree-res-0) 0,
    var(--b3-background-tree-res-0) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-2),
    var(--b3-background-tree-res-3) var(--level-spacing-tree-res-2),
    var(--b3-background-tree-res-3) var(--level-spacing-tree-res-3),
    var(--b3-background-tree-res-4) var(--level-spacing-tree-res-3),
    var(--b3-background-tree-res-4) var(--level-spacing-tree-res-4),
    var(--b3-background-tree-res-5) var(--level-spacing-tree-res-4),
    var(--b3-background-tree-res-5) var(--level-spacing-tree-res-5));
}
div.sy__file>div.fn__flex-1>ul>ul>ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-tree-res-0) 0,
    var(--b3-background-tree-res-0) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-2),
    var(--b3-background-tree-res-3) var(--level-spacing-tree-res-2),
    var(--b3-background-tree-res-3) var(--level-spacing-tree-res-3),
    var(--b3-background-tree-res-4) var(--level-spacing-tree-res-3),
    var(--b3-background-tree-res-4) var(--level-spacing-tree-res-4),
    var(--b3-background-tree-res-5) var(--level-spacing-tree-res-4),
    var(--b3-background-tree-res-5) var(--level-spacing-tree-res-5),
    var(--b3-background-tree-res-6) var(--level-spacing-tree-res-5),
    var(--b3-background-tree-res-6) var(--level-spacing-tree-res-6));
}
div.sy__file>div.fn__flex-1>ul>ul>ul>ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-tree-res-0) 0,
    var(--b3-background-tree-res-0) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-0),
    var(--b3-background-tree-res-1) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-1),
    var(--b3-background-tree-res-2) var(--level-spacing-tree-res-2),
    var(--b3-background-tree-res-3) var(--level-spacing-tree-res-2),
    var(--b3-background-tree-res-3) var(--level-spacing-tree-res-3),
    var(--b3-background-tree-res-4) var(--level-spacing-tree-res-3),
    var(--b3-background-tree-res-4) var(--level-spacing-tree-res-4),
    var(--b3-background-tree-res-5) var(--level-spacing-tree-res-4),
    var(--b3-background-tree-res-5) var(--level-spacing-tree-res-5),
    var(--b3-background-tree-res-6) var(--level-spacing-tree-res-5),
    var(--b3-background-tree-res-6) var(--level-spacing-tree-res-6),
    var(--b3-background-tree-res-7) var(--level-spacing-tree-res-6),
    var(--b3-background-tree-res-7) var(--level-spacing-tree-res-7));
}


/* 多彩层级大纲 CSS片段 */
:root {
    /* 可修改 - 背景颜色相对于上层的缩进距离 */
    --level-spacing-outline-0: 10px;
    --level-spacing-outline-1: 9px;
    --level-spacing-outline-2: 9px;
    --level-spacing-outline-3: 9px;
    --level-spacing-outline-4: 9px;
    --level-spacing-outline-5: 9px;
    --level-spacing-outline-6: 9px;

    /* 可修改 - 背景颜色 */
    --b3-background-outline-res-0: var(--b3-theme-surface);
    --b3-background-outline-res-1: var(--b3-font-background10);
    --b3-background-outline-res-2: var(--b3-font-background12);
    --b3-background-outline-res-3: var(--b3-font-background6);
    --b3-background-outline-res-4: var(--b3-font-background11);
    --b3-background-outline-res-5: var(--b3-font-background10);
    --b3-background-outline-res-6: var(--b3-font-background12);

    /* 实际缩进距离 */
    --level-spacing-outline-res-0: var(--level-spacing-outline-0);
    --level-spacing-outline-res-1: calc(var(--level-spacing-outline-res-0) + var(--level-spacing-outline-1));
    --level-spacing-outline-res-2: calc(var(--level-spacing-outline-res-1) + var(--level-spacing-outline-2));
    --level-spacing-outline-res-3: calc(var(--level-spacing-outline-res-2) + var(--level-spacing-outline-3));
    --level-spacing-outline-res-4: calc(var(--level-spacing-outline-res-3) + var(--level-spacing-outline-4));
    --level-spacing-outline-res-5: calc(var(--level-spacing-outline-res-4) + var(--level-spacing-outline-5));
    --level-spacing-outline-res-6: calc(var(--level-spacing-outline-res-5) + var(--level-spacing-outline-6));
}

div.sy__outline>div.fn__flex-1>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-outline-res-0) 0,
    var(--b3-background-outline-res-0) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-1));
}
div.sy__outline>div.fn__flex-1>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-outline-res-0) 0,
    var(--b3-background-outline-res-0) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-1),
    var(--b3-background-outline-res-2) var(--level-spacing-outline-res-1),
    var(--b3-background-outline-res-2) var(--level-spacing-outline-res-2));
}
div.sy__outline>div.fn__flex-1>ul>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-outline-res-0) 0,
    var(--b3-background-outline-res-0) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-1),
    var(--b3-background-outline-res-2) var(--level-spacing-outline-res-1),
    var(--b3-background-outline-res-2) var(--level-spacing-outline-res-2),
    var(--b3-background-outline-res-3) var(--level-spacing-outline-res-2),
    var(--b3-background-outline-res-3) var(--level-spacing-outline-res-3));
}
div.sy__outline>div.fn__flex-1>ul>ul>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-outline-res-0) 0,
    var(--b3-background-outline-res-0) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-1),
    var(--b3-background-outline-res-2) var(--level-spacing-outline-res-1),
    var(--b3-background-outline-res-2) var(--level-spacing-outline-res-2),
    var(--b3-background-outline-res-3) var(--level-spacing-outline-res-2),
    var(--b3-background-outline-res-3) var(--level-spacing-outline-res-3),
    var(--b3-background-outline-res-4) var(--level-spacing-outline-res-3),
    var(--b3-background-outline-res-4) var(--level-spacing-outline-res-4));
}
div.sy__outline>div.fn__flex-1>ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-outline-res-0) 0,
    var(--b3-background-outline-res-0) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-1),
    var(--b3-background-outline-res-2) var(--level-spacing-outline-res-1),
    var(--b3-background-outline-res-2) var(--level-spacing-outline-res-2),
    var(--b3-background-outline-res-3) var(--level-spacing-outline-res-2),
    var(--b3-background-outline-res-3) var(--level-spacing-outline-res-3),
    var(--b3-background-outline-res-4) var(--level-spacing-outline-res-3),
    var(--b3-background-outline-res-4) var(--level-spacing-outline-res-4),
    var(--b3-background-outline-res-5) var(--level-spacing-outline-res-4),
    var(--b3-background-outline-res-5) var(--level-spacing-outline-res-5));
}
div.sy__outline>div.fn__flex-1>ul>ul>ul>ul>ul>ul {
    background-image: linear-gradient(to right,
    var(--b3-background-outline-res-0) 0,
    var(--b3-background-outline-res-0) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-0),
    var(--b3-background-outline-res-1) var(--level-spacing-outline-res-1),
    var(--b3-background-outline-res-2) var(--level-spacing-outline-res-1),
    var(--b3-background-outline-res-2) var(--level-spacing-outline-res-2),
    var(--b3-background-outline-res-3) var(--level-spacing-outline-res-2),
    var(--b3-background-outline-res-3) var(--level-spacing-outline-res-3),
    var(--b3-background-outline-res-4) var(--level-spacing-outline-res-3),
    var(--b3-background-outline-res-4) var(--level-spacing-outline-res-4),
    var(--b3-background-outline-res-5) var(--level-spacing-outline-res-4),
    var(--b3-background-outline-res-5) var(--level-spacing-outline-res-5),
    var(--b3-background-outline-res-6) var(--level-spacing-outline-res-5),
    var(--b3-background-outline-res-6) var(--level-spacing-outline-res-6));
}