SOURCE

/* 多彩层级大纲 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));
}