多彩文档树

• 变量都用的是 root 定义中的，颜色不合适的，可以手动进行更换
• 使用方法
  • 复制下面的代码，放到 theme.css 最后边，保存即可生效

分类	介绍	备注
灵感来源

/* 多彩文档树 */

/* 给文档树第一层级设置同样的样式 */
.fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background {
    /* 控制圆角大小 */
    border-radius: 1px;
    /* 控制外边距，分别是 上 右 下 左侧 */
    margin: 6px 4px 6px 4px;
    /* 控制边框为1像素的实线 */
    border: 1px solid var(--b3-border-color);
}


/* 给文档树第一层级设置不同的背景颜色，8个一循环 */
.fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(8n) {
    background-color: var(--b3-font-background1) !important;
}

.fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(8n+1) {
    background-color: var(--b3-font-background2) !important;
}

.fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(8n+2) {
    background-color: var(--b3-font-background3) !important;
}

.fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(8n+3) {
    background-color: var(--b3-font-background4) !important;
}

.fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(8n+4) {
    background-color: var(--b3-font-background5) !important;
}

.fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(8n+5) {
    background-color: var(--b3-font-background6) !important;
}

.fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(8n+6) {
    background-color: var(--b3-font-background7) !important;
}

.fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(8n+7) {
    background-color: var(--b3-font-background8) !important;
}


/* 设置文档树悬浮时（hover/focus）的字体和图标颜色 */
.b3-list--background .b3-list-item--focus .b3-list-item__text,
.b3-list--background .b3-list-item--focus .b3-list-item__graphic,
.b3-list--background .b3-list-item--focus .b3-list-item__icon svg,
.b3-list--background .b3-list-item--focus .b3-list-item__toggle,
.b3-list--background .b3-list-item:hover:not(.b3-list-item--focus),
.b3-list--background .b3-list-item:hover:not(.b3-list-item--focus) .b3-list-item__text,
.b3-list--background .b3-list-item:hover:not(.b3-list-item--focus) .b3-list-item__icon svg,
.b3-list--background .b3-list-item:hover:not(.b3-list-item--focus) .b3-list-item__toggle {
    color: var(--b3-theme-primary) !important;
}

/* 设置鼠标悬浮时背景色为透明 */
.b3-list--background .b3-list-item--focus,
.b3-list--background .b3-list-item:hover:not(.b3-list-item--focus) {
    background-color: transparent !important;
}
​