CSS片段-多彩文件夹

coffeebean...大约 11 分钟

说明：
实现左侧文件列表，根据文件夹的名称实现自动背景色。这里使用了渐变色

使用方法：

  1. 复制以下代码，保存为coffebean-多彩文件夹.css文件格式
  2. 将coffebean-多彩文件夹.css复制到库的css片段中，刷新obsidian片段。重启obsidian生效
  3. 在左侧文件列表，修改文件夹的名称，数字、小写字母、大写字母开头，会有不同的背景颜色。按需设置就可以了。
  4. 本代码片段，在默认主题上测试通过。理论上适合各种主题，如有冲突，暂停即可。

添加启动css片段的方法

  1. 打开obsidian设置 → 外观 → CSS 代码片段，点击此处的文件夹图标📁，打开css片段文件夹
  2. 复制你的css文件到这个文件夹，回到obsidian中，刷新并启动片段。偶尔需要重启ob生效

代码
代码框右下有复制按钮，点击自动复制代码

/*
 @Author   : coffeebean
 @contact  : https://obsidian.vip/
 @File     : coffeebean-多彩文件夹.css
 @Software : webstorm
 @Date     : 2022-12-17 16:32:06
 @update   : 2022-12-17 16:32:12
 @Desc     : 用来给左侧文件夹设置多彩的背景色，根据文件夹的名字来设置背景色
 */
 .nav-folder {  /* 未展开的文件夹 */    /* 默认的背景颜色 */    /*background-color: #CCC;*/}  
  
/*给数字开头的文件夹 设定背景颜色 开始*/  
.nav-folder > .nav-folder-title[data-path^="0"] {  
    background-image: linear-gradient(to right, #add8e6 0%, #00ffff 100%);  
}
  
.nav-folder > .nav-folder-title[data-path^="1"] {  
    background-image: linear-gradient(to right, #87ceeb 0%, #00bfff 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="2"] {  
    background-image: linear-gradient(to right, #87cefa 0%, #00bfff 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="3"] {  
    background-image: linear-gradient(to right, #87cefa 0%, #00b2ee 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="4"] {  
    background-image: linear-gradient(to right, #87cefa 0%, #00a5d6 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="5"] {  
    background-image: linear-gradient(to right, #87cefa 0%, #0097c9 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="6"] {  
    background-image: linear-gradient(to right, #87cefa 0%, #008bb7 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="7"] {  
    background-image: linear-gradient(to right, #87cefa 0%, #0080a2 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="8"] {  
    background-image: linear-gradient(to right, #87cefa 0%, #007380 100%);  
}  
.nav-folder > .nav-folder-title[data-path^="9"] {  
    background-image: linear-gradient(to right, #87cefa 0%, #006659 100%);  
}  
  
/*给数字开头的文件夹 设定背景颜色 结束*/  
  
/*给小写字母开头的文件夹 设定背景颜色 开始*/  
.nav-folder > .nav-folder-title[data-path^="a"] {  
    /* 如果div中的文本内容以小写字母a开头，则修改div的背景颜色 */    background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="b"] {  
    /* 如果div中的文本内容以小写字母b开头，则修改div的背景颜色 */    background-image: linear-gradient(120deg, #f0a3fc 0%, #f6677d 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="c"] {  
    /* 如果div中的文本内容以小写字母c开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #f0b4fd 0%, #f7778e 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="d"] {  
    /* 如果div中的文本内容以小写字母d开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #f0c5fe 0%, #f8879f 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="e"] {  
    /* 如果div中的文本内容以小写字母e开头，则修改div的背景颜色 */    /*background-image: radial-gradient(circle 248px at center, #f0d6ff 0%, #f997b0 100%);*/    background-image: linear-gradient(to right, #f0d6ff 0%, #f997b0 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="f"] {  
    /* 如果div中的文本内容以小写字母f开头，则修改div的背景颜色 */    background-image: linear-gradient(120deg, #f0e7ff 0%, #faa7c1 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="g"] {  
    /* 如果div中的文本内容以小写字母g开头，则修改div的背景颜色 */    background-image: linear-gradient(120deg, #f0f8ff 0%, #fbb7d2 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="h"] {  
    /* 如果div中的文本内容以小写字母a开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #e1f9ff 0%, #fac7e3 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="i"] {  
    /* 如果div中的文本内容以小写字母a开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #d2faff 0%, #fbd7f4 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="j"] {  
    /* 如果div中的文本内容以小写字母a开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #c3fbff 0%, #fce805 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="k"] {  
    /* 如果div中的文本内容以小写字母a开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #b4fcff 0%, #fcf816 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="l"] {  
    /* 如果div中的文本内容以小写字母a开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #a5fdff 0%, #fd0727 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="m"] {  
    /* 如果div中的文本内容以小写字母m开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #96feff 0%, #fd1738 20%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="n"] {  
    /* 如果div中的文本内容以小写字母n开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #87ffff 0%, #fd2749 10%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="o"] {  
    /* 如果div中的文本内容以小写字母o开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #78ffff 0%, #fd375a 0%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="p"] {  
    /* 如果div中的文本内容以小写字母p开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #69ffff 0%, #fd476b 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="q"] {  
    /* 如果div中的文本内容以小写字母q开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #5affff 0%, #fd577c 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="r"] {  
    /* 如果div中的文本内容以小写字母r开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #4bffff 0%, #fd678d 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="s"] {  
    /* 如果div中的文本内容以小写字母s开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #3cffff 0%, #fd779e 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="t"] {  
    /* 如果div中的文本内容以小写字母t开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #2dffff 0%, #fd87af 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="u"] {  
    /* 如果div中的文本内容以小写字母u开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #1effff 0%, #fd97c0 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="v"] {  
    /* 如果div中的文本内容以小写字母v开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #0fffff 0%, #fda7d1 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="w"] {  
    /* 如果div中的文本内容以小写字母w开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #00ffff 0%, #fdb7e2 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="x"] {  
    /* 如果div中的文本内容以小写字母x开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #00ffff 0%, #fdc7f3 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="y"] {  
    /* 如果div中的文本内容以小写字母y开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #00ffff 0%, #fdd7ff 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="z"] {  
    /* 如果div中的文本内容以小写字母z开头，则修改div的背景颜色 */    background-image: linear-gradient(to right, #00ffff 0%, #fee7ff 100%);  
}  
/*.nav-folder > .nav-folder-title[data-path^="z"] {*/  
/*    !* 如果div中的文本内容以小写字母a开头，则修改div的背景颜色 *!*//*    background-image: linear-gradient(to right, #f46b45 0%, #eea849 100%);*/  
/*}*/  
  
  
/*给大写字母开头的文件夹 设定背景颜色 开始*/  
.nav-folder > .nav-folder-title[data-path^="A"] {  
    /* 如果div中的文本内容以大写字母A开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="B"] {  
    /* 如果div中的文本内容以大写字母B开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="C"] {  
    /* 如果div中的文本内容以大写字母C开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="D"] {  
    /* 如果div中的文本内容以大写字母D开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="E"] {  
    /* 如果div中的文本内容以大写字母E开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="F"] {  
    /* 如果div中的文本内容以大写字母F开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="G"] {  
    /* 如果div中的文本内容以大写字母G开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="H"] {  
    /* 如果div中的文本内容以大写字母H开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="I"] {  
    /* 如果div中的文本内容以大写字母I开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="J"] {  
    /* 如果div中的文本内容以大写字母J开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="K"] {  
    /* 如果div中的文本内容以大写字母K开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="L"] {  
    /* 如果div中的文本内容以大写字母L开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="M"] {  
    /* 如果div中的文本内容以大写字母M开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="N"] {  
    /* 如果div中的文本内容以大写字母N开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="O"] {  
    /* 如果div中的文本内容以大写字母O开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="P"] {  
    /* 如果div中的文本内容以大写字母P开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="Q"] {  
    /* 如果div中的文本内容以大写字母Q开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="R"] {  
    /* 如果div中的文本内容以大写字母R开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="S"] {  
    /* 如果div中的文本内容以大写字母S开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="T"] {  
    /* 如果div中的文本内容以大写字母T开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="U"] {  
    /* 如果div中的文本内容以大写字母U开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="V"] {  
    /* 如果div中的文本内容以大写字母V开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="W"] {  
    /* 如果div中的文本内容以大写字母W开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="X"] {  
    /* 如果div中的文本内容以大写字母X开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="Y"] {  
    /* 如果div中的文本内容以大写字母Y开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
}  
  
.nav-folder > .nav-folder-title[data-path^="Z"] {  
    /* 如果div中的文本内容以大写字母Z开头，则修改div的背景颜色 */    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);  
    padding: 10px 0 10px 0;  
}  
  
/*给大写字母开头的文件夹 设定背景颜色 结束*/  
  
/*!*彩蛋-隐藏指定的文件夹*!*/  
/*.nav-folder > .nav-folder-title[data-path^="_gsdata_"] {*/  
/*    !* 如果div中的文本内容以 _gsdata_ 开头，则隐藏此文件夹 *!*//*    display: none!important;*/  
/*}*/

警告

代码在最后调试阶段，颜色在搭配一下在发布

上次编辑于:
贡献者: coffeebean,coffeebean
0  字
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.4
分享知识、成就自我
Copyright © 2024 coffeebean