[css] 多彩文档树竖线优化版

闲扯

很久很久之前, 有这样一个多彩文档树, 分享两个好用的代码片段

使用过程中, 每次看到这个文档树, 都感觉非常不爽, 因为颜色太多了, 花里胡哨的

在某一天, 我终于用我撇脚的 css 知识对他进行了优化, 改成了这个样子, [css] 多彩文档树竖线 -- 按层级区分颜色

最新代码

当时以为这已经最终形态了, 但是在使用过程中, 还是感觉有些别扭, 又说不上来具体是哪里有问题

于是, 最近我终于下定决心, 再次对他进行了调整

最终效果 --方案 1

改动点

1. 之前大括号是括住自身, 和孩子节点; 现在改为, 只括住孩子节点
2. 其他地方属于微调

代码

https://gitee.com/Hug_Zephyr/siyuan_script/blob/master/css/%E5%A4%9A%E5%BD%A9%E6%96%87%E6%A1%A3%E6%A0%9102%20--%E6%8B%AC%E5%8F%B7%E4%B8%8D%E5%8C%85%E5%90%AB%E8%87%AA%E8%BA%AB%E8%8A%82%E7%82%B9.css

最终效果 --方案 2 ediary 风格-带文档图标

我是从 ediary 转过来的, 很喜欢 ediary 的文档树风格, 这个方案就是模仿他的

代码

• 方案 2 依赖了文档图标, 如果被隐藏了需要自行显示
• 大纲没有图标, 所以这个方案不太适配

https://gitee.com/Hug_Zephyr/siyuan_script/blob/master/css/%E5%A4%9A%E5%BD%A9%E6%96%87%E6%A1%A3%E6%A0%9103%20--ediary%E9%A3%8E%E6%A0%BC-%E5%B8%A6%E6%96%87%E6%A1%A3%E5%9B%BE%E6%A0%87.css

最终效果 --方案 3 ediary 风格-不带文档图标

完美适配大纲

代码

https://gitee.com/Hug_Zephyr/siyuan_script/blob/master/css/%E5%A4%9A%E5%BD%A9%E6%96%87%E6%A1%A3%E6%A0%9104%20--ediary%E9%A3%8E%E6%A0%BC-%E4%B8%8D%E5%B8%A6%E6%96%87%E6%A1%A3%E5%9B%BE%E6%A0%87.css