[css] 多彩文档树竖线 -- 按层级区分颜色

效果

按需修改

颜色分为三种: 竖线颜色; 鼠标悬浮时颜色, 打开文档的颜色, 按需修改这部分代码(我没啥审美, 欢迎设计师大佬提供好看的配色)
隐藏文档图标(个人习惯), 按需删掉

css 代码


/* [css片段] 多彩文档树竖线 */
:root {
    /* 竖线颜色 */
    --vertical-line-color-1: var(--b3-font-background8);
    --vertical-line-color-2: var(--b3-font-background7);
    --vertical-line-color-3: var(--b3-font-background6);
    --vertical-line-color-4: var(--b3-font-background11);
    --vertical-line-color-5: var(--b3-font-background8);
    --vertical-line-color-6: var(--b3-font-background7);
    --vertical-line-color-7: var(--b3-font-background6);
    --vertical-line-color-8: var(--b3-font-background11);
    /* 悬浮颜色 */
    --file-hover-color-1: var(--b3-font-background1);
    --file-hover-color-2: var(--b3-font-background2);
    --file-hover-color-3: var(--b3-font-background3);
    --file-hover-color-4: var(--b3-font-background4);
    --file-hover-color-5: var(--b3-font-background1);
    --file-hover-color-6: var(--b3-font-background2);
    --file-hover-color-7: var(--b3-font-background3);
    --file-hover-color-8: var(--b3-font-background4);
    /* 文档打开颜色 */
    --file-open-color-1: var(--b3-font-background1);
    --file-open-color-2: var(--b3-font-background2);
    --file-open-color-3: var(--b3-font-background3);
    --file-open-color-4: var(--b3-font-background4);
    --file-open-color-5: var(--b3-font-background1);
    --file-open-color-6: var(--b3-font-background2);
    --file-open-color-7: var(--b3-font-background3);
    --file-open-color-8: var(--b3-font-background4);
}

/* 折叠按钮 */
.sy__file>.fn__flex-1>ul li>.b3-list-item__toggle {
    padding-left: 5px !important;
}

/* 文件图标, 可以按需删掉 */
.sy__file>.fn__flex-1>ul li>.b3-list-item__icon {
    display: none;
}

/* 竖线 */
.sy__file>.fn__flex-1>ul li {
    margin-bottom: -1px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.sy__file>.fn__flex-1>ul li:has(span>svg.b3-list-item__arrow--open) {
    border-bottom-left-radius: 0px;
}
.sy__file>.fn__flex-1>ul ul {
    padding-left: 3px;
    margin-left: 8px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 10px;
}

/* 竖线颜色 */
.sy__file>.fn__flex-1>ul li,
.sy__file>.fn__flex-1>ul ul {
    border-left: 4px solid var(--vertical-line-color-1);
}
.sy__file>.fn__flex-1>ul>ul li,
.sy__file>.fn__flex-1>ul>ul ul {
    border-left: 4px solid var(--vertical-line-color-2);
}
.sy__file>.fn__flex-1>ul>ul>ul li,
.sy__file>.fn__flex-1>ul>ul>ul ul {
    border-left: 4px solid var(--vertical-line-color-3);
}
.sy__file>.fn__flex-1>ul>ul>ul>ul li,
.sy__file>.fn__flex-1>ul>ul>ul>ul ul {
    border-left: 4px solid var(--vertical-line-color-4);
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul li,
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul ul {
    border-left: 4px solid var(--vertical-line-color-5);
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul li,
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul ul {
    border-left: 4px solid var(--vertical-line-color-6);
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul>ul li,
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul>ul ul {
    border-left: 4px solid var(--vertical-line-color-7);
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul>ul>ul li,
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul>ul>ul ul {
    border-left: 4px solid var(--vertical-line-color-8);
}

/* 文档悬浮颜色 */
.sy__file>.fn__flex-1>ul li:hover:not(.b3-list-item--focus) {
    background-color: var(--file-hover-color-1) !important;
    border-bottom-left-radius: 10px !important;
}
.sy__file>.fn__flex-1>ul>ul li:hover:not(.b3-list-item--focus) {
    background-color: var(--file-hover-color-2) !important;
}
.sy__file>.fn__flex-1>ul>ul>ul li:hover:not(.b3-list-item--focus) {
    background-color: var(--file-hover-color-3) !important;
}
.sy__file>.fn__flex-1>ul>ul>ul>ul li:hover:not(.b3-list-item--focus) {
    background-color: var(--file-hover-color-4) !important;
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul li:hover:not(.b3-list-item--focus) {
    background-color: var(--file-hover-color-5) !important;
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul li:hover:not(.b3-list-item--focus) {
    background-color: var(--file-hover-color-6) !important;
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul>ul li:hover:not(.b3-list-item--focus) {
    background-color: var(--file-hover-color-7) !important;
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul>ul>ul li:hover:not(.b3-list-item--focus) {
    background-color: var(--file-hover-color-8) !important;
}

/* 文档打开颜色 */
.sy__file>.fn__flex-1>ul li.b3-list-item--focus {
    background-color: var(--file-open-color-1);
}
.sy__file>.fn__flex-1>ul>ul li.b3-list-item--focus {
    background-color: var(--file-open-color-2);
}
.sy__file>.fn__flex-1>ul>ul>ul li.b3-list-item--focus {
    background-color: var(--file-open-color-3);
}
.sy__file>.fn__flex-1>ul>ul>ul>ul li.b3-list-item--focus {
    background-color: var(--file-open-color-4);
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul li.b3-list-item--focus {
    background-color: var(--file-open-color-5);
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul li.b3-list-item--focus {
    background-color: var(--file-open-color-6);
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul>ul li.b3-list-item--focus {
    background-color: var(--file-open-color-7);
}
.sy__file>.fn__flex-1>ul>ul>ul>ul>ul>ul>ul>ul li.b3-list-item--focus {
    background-color: var(--file-open-color-8);
}

[js] 史诗级增强的思源工具箱用户体验和折叠块. 速拿

搞了 1 天半时间,2 个功能.我也是个萌新,很久不写代码了. 第一.给工具箱加上快捷标题/列表等按钮标题和段落使用都是正常的块(列表)没支持,因为要改动列表里面和外面的序号,太麻烦了,不想搞了... *写代码的时候遇到几个大坑:*(给后面想编辑的大神提个醒) 几个坑.直接调用 dom 添加 button 没用,事 ..

[js] 思源笔记发布到微信公众号、复制到知乎、复制到 Github README 的优化处理代码片段

视频介绍 [链接] 发布到微信公众号进行特殊处理 picgo 插件对文档图片上传图片后，会使用 picgo 的图床替换链接（有些用户没开思源会员，无法用思源的上传到图床功能，这个功能就可以直接用 picgo 插件往微信公众号直接粘贴图文了）因为公众号不支持外部链接，特殊处理外部链接根据我搭建的博客数据库自动转化笔记 ..

[css] Windows 11 系统如何使用旧版的扁平化 emoji

新版的 emoji 会更新为 3D Fluent，带点立体效果： [图片] 但有的人更喜欢旧版的扁平化风格： [图片] 那么如何在思源里恢复到旧版的扁平化 emoji 呢？按照以下步骤操作即可：下载字体文件压缩包：seguiemj-1.35-flat.zip（字体文件来源于 github.com/popemkt/se ..

[js][css] 图片标注

效果 [图片] 操作示例 [视频]甩锅声明 AI 生成，与我无瓜，BUG 自测，仅供娱乐。使用教程将下方的 js 和 css 粘贴对应的位置。点击图片右上角按钮切换开启/关闭标注功能。开启时可以显示已有标注和新增标注。鼠标悬浮标注框显示文字。标注文字和位置均可二次修改。关闭则不显示标注文字，右上角显示已有标注 ..

[js] 告别 select * from blocks！嵌入块多字段查询来了

前言众所周知，思源嵌入块查询（输入{{}}弹出查询窗的那个）不支持指定字段查询，只能使用类似这样的 SQL 查询。 select * from blocks limit 3 那么，你想像下面这样查询吗？ select content, created from blocks where type='d' and tr ..

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

关于

9 回帖

[css] 多彩文档树竖线 -- 按层级区分颜色

注册关于

请输入回帖内容 ...

HugZephyr • 4 个月前
付费者作者

样式参考了这里, 非常感谢: 文档树最好的彩色样式，给予参考

1 回复
HugZephyr • 4 个月前
付费者作者

按照位置设置颜色的, 可以参考这个

文档树最好的彩色样式，给予参考 - HugZephyr 的回帖
wilsons • 4 个月前
付费者捐赠者

虽然我不用，但我觉得很牛 🍺
tongzi • 4 个月前
付费者捐赠者

很好看要是做进主题就不错了

1 回复
heeeeeee • 4 个月前
付费者

非常感谢，大佬牛逼 👍 颜色我可以自行修改
heeeeeee • 4 个月前
付费者

代码片段才不受版本更新的影响
heeeeeee • 4 个月前 • 3 评论
付费者

😭 不是，怪我学识浅显，不懂就问，这怎么修改颜色，我都不知道颜色色值在哪更换

在代码 root 部分改，把那些 var(xxx)改成你想要的颜色代码

queguaiya • 4 个月前

@queguaiya“--vertical-line-color-1: var(#30db5b) ”是这样吗，但这并不显示颜色

heeeeeee • 4 个月前

@heeeeeee var 是用来引用其他颜色变量的, 如果想直接指定颜色, 需要改成 --vertical-line-color-1: #30db5b;

HugZephyr • 4 个月前
heeeeeee • 4 个月前
付费者

我按你的不要 var 直接写颜色，只有竖线显示颜色，悬浮颜色跟文档打开却没有显示颜色

还有，我还是觉得你的按层级的多彩好看些，但你的是 8 个层级，如何显示 5 个颜色一循环，我加了#号没有用，后面都第五层的黄色了
linliesiyuan • 4 个月前

真好看啊，舒服多了，牛逼卡拉斯

[css] 多彩文档树竖线 -- 按层级区分颜色

效果

按需修改

css 代码

相关帖子

[js] 史诗级增强的思源工具箱用户体验和折叠块. 速拿

[js] 思源笔记发布到微信公众号、复制到知乎、复制到 Github README 的优化处理代码片段

[css] Windows 11 系统如何使用旧版的扁平化 emoji

[js][css] 图片标注

[js][css] 仿 Obsidian Callout 样式

[js] 告别 select * from blocks！嵌入块多字段查询来了

[css] “转换为”二级菜单上移至一级菜单

欢迎来到这里！