[css] 深色文档树风格 CSS 片段

有更好的优化建议请指出

/* ---------------------------------------------笔记本背景颜色设置--------------------------------------------- */
:root {
  --b3-tree-node-background-1: #502380;
  --b3-tree-node-background-2: #406348;
  --b3-tree-node-background-3: #404863;
  --b3-tree-node-background-4: #4D4A59;
  --b3-tree-node-background-5: #117092;
  --b3-tree-node-background-6: #6A5539;
  --b3-tree-node-background-7: #15628E;
}

/* 一级文档树背景颜色 + 白色圆角边框 */
div.sy__file>div.fn__flex-1>ul:nth-of-type(1),
div.sy__file>div.fn__flex-1>ul:nth-of-type(2),
div.sy__file>div.fn__flex-1>ul:nth-of-type(3),
div.sy__file>div.fn__flex-1>ul:nth-of-type(4),
div.sy__file>div.fn__flex-1>ul:nth-of-type(5),
div.sy__file>div.fn__flex-1>ul:nth-of-type(6),
div.sy__file>div.fn__flex-1>ul:nth-of-type(7),
div.sy__file>div.fn__flex-1>ul:nth-of-type(8),
div.sy__file>div.fn__flex-1>ul:nth-of-type(9),
div.sy__file>div.fn__flex-1>ul:nth-of-type(10),
div.sy__file>div.fn__flex-1>ul:nth-of-type(11),
div.sy__file>div.fn__flex-1>ul:nth-of-type(12),
div.sy__file>div.fn__flex-1>ul:nth-of-type(13),
div.sy__file>div.fn__flex-1>ul:nth-of-type(14) {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: 6px;
  margin: 6px 0;
}

/* 一级背景色配置 */
div.sy__file>div.fn__flex-1>ul:nth-of-type(1)  { background-color: var(--b3-tree-node-background-1); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(2)  { background-color: var(--b3-tree-node-background-2); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(3)  { background-color: var(--b3-tree-node-background-3); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(4)  { background-color: var(--b3-tree-node-background-4); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(5)  { background-color: var(--b3-tree-node-background-5); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(6)  { background-color: var(--b3-tree-node-background-6); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(7)  { background-color: var(--b3-tree-node-background-7); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(8)  { background-color: var(--b3-tree-node-background-1); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(9)  { background-color: var(--b3-tree-node-background-2); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(10) { background-color: var(--b3-tree-node-background-3); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(11) { background-color: var(--b3-tree-node-background-4); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(12) { background-color: var(--b3-tree-node-background-5); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(13) { background-color: var(--b3-tree-node-background-6); }
div.sy__file>div.fn__flex-1>ul:nth-of-type(14) { background-color: var(--b3-tree-node-background-7); }

/* ---------------------------------------------文档树子级：黑色内阴影（凹陷感）--------------------------------------------- */

/* 二级：轻度凹陷 */
div.sy__file ul ul {
  margin: 6px 4px;
  padding: 4px 6px;
  border-radius: 6px;
  border: none;
  background-clip: padding-box;
  box-shadow: inset 4px 4px 6px rgba(0, 0, 0, 0.28);
}

/* 三级：更明显 */
div.sy__file ul ul ul {
  border-radius: 6px;
  border: none;
  box-shadow: inset 5px 5px 8px rgba(0, 0, 0, 0.32);
}

/* 四级：最深 */
div.sy__file ul ul ul ul {
  border-radius: 6px;
  border: none;
  box-shadow: inset 6px 6px 10px rgba(0, 0, 0, 0.36);
}

/* ---------------------------------------------文档树文字：加粗 + 白色--------------------------------------------- */
div.sy__file {
  color: #fff !important;
  font-weight: bold !important;
}

div.sy__file span,
div.sy__file .b3-list-item__text {
  color: #fff !important;
  font-weight: bold !important;
}