思源笔记文档树划分-虚线分隔

用于划分思源笔记左侧文档树，具有明确的层级划分

/* [css片段] 多彩文档树03 --ediary风格-带文档图标 20251003_091537 */
:root {
  /* 文档缩进距离 */
  --file-retract-length: 22px;
  /* 折叠按钮宽度 */
  --fold-button-width: 3px;

  /* 竖线颜色 */
  --vertical-line-color: black;
}

/* 拖拽文档时文档的阴影 */
.b3-list--background li.b3-list-item.dragover::after {
  width: 100%;
  left: 0;
}

/* 拖拽文档时的条状长度 */
.b3-list--background .b3-list-item.dragover__top::after,
.b3-list--background .b3-list-item.dragover__bottom::after {
  width: 100%;
  left: 0;
}

/* 每个文档外围缩小一点 */
.sy__file>.fn__flex-1>ul li {
  margin: 1px 4px;
}

/*笔记本的折叠按钮不显示*/
.sy__file>.fn__flex-1>ul>li>.b3-list-item__toggle {
  display: none;
}

/* 折叠按钮宽度 */
.sy__file>.fn__flex-1>ul li>.b3-list-item__toggle {
  padding: 0 var(--fold-button-width) !important;
}

/*折叠按钮样式*/
.sy__file>.fn__flex-1>ul li>.b3-list-item__toggle>svg {
  background-color: var(--b3-theme-surface);
  border: 1px solid var(--b3-theme-on-surface-light);
  padding: 2px;
}

/* 文档树缩进 */
.sy__file>.fn__flex-1>ul>ul ul {
  margin-left: var(--file-retract-length);
}

/*文档的折叠按钮, 图标要比虚线高一层 */
.sy__file>.fn__flex-1>ul li>.b3-list-item__toggle>svg,
.sy__file>.fn__flex-1>ul li>.b3-list-item__icon {
  z-index: 2;
}


/* L型的线 */
.sy__file>.fn__flex-1>ul ul {
  position: relative;
}
.sy__file>.fn__flex-1>ul ul::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 18px;
  top: -15px;
  width: 20px;
  height: 100%;
  background: transparent;
  border-left: 1px dashed var(--vertical-line-color);
  border-bottom: 1px dashed var(--vertical-line-color);
  z-index: 0;
}

/* L型的线并不能完全覆盖, 剩下的由每个文档覆盖*/
.sy__file>.fn__flex-1>ul ul>:not(:last-child)>.b3-list-item__toggle::before {
  content: "";
  visibility: visible;
  position: absolute;
  left: 15px;
  width: 15px;
  height: 1px;
  background: transparent;
  border-bottom: 1px dashed var(--vertical-line-color);
  z-index: 0;
}