文档树最好的彩色样式,给予参考

如视频所展示的一样,这是我在 trilium 上的一个大神写的文档树 css,区别于彩色的背景太过于饱满而显得过于疲倦,只展示悬停才出现颜色,左侧以线段进行归属哪个层级,这是我认为文档树最好的彩色样式。

但我不懂代码,如果有大佬觉得这个不错,可以写一个代码片段适配到思源上。

这是 trilium 大神写的代码,是以 trilium 主题为载体 https://github.com/SiriusXT/trilium-theme-blue

而我在此基础上自己瞎琢磨修改的颜色的代码,有些自己加了#号

```undefined
/*
Blue theme 
https://github.com/SiriusXT/trilium-theme-blue
version:0.3 for trilium:>0.58.4
云遥修改版,基于Blue theme 做出适合自己的修改
*/
/*
感谢云遥大佬的修改版
在云遥修改版的基础上又进行了一些符合自己习惯的调整
*/

/*云遥改动处 */
:root {
   --main-background-color: #f3f8e8;
   ;
   /* #F2F2F2 */
   /*这里调整背景颜色,并不只是编辑区。*/
   /* --launcher-pane-background-color: #FFFFFF;   /*应该是左侧启动器最左边的那个东西的颜色*/
   --main-font-family: 'Roboto Condensed';
   /* 定义字体,三个字体都是拷贝的主题Linen的设置 */
   --detail-font-family: 'Crimson Pro';
   --monospace-font-family: 'Cousine';
}


div#toast-container {
   right: 0px !important;
   bottom: 0px !important;
   top: auto !important;
   width: auto !important;
}

.switch-widget span.slider.checked {
   background-color: var(--color-blue-light) !important;
}

div.note-detail div.ck-horizontal-line.ck-widget {
   margin-top: 10px !important;
}

.ck-content hr {
   margin-bottom: 10px !important;
}


body,
span.fancytree-title {
   font-family: var(--detail-font-family) !important;
}

/*搜索时候的关键字颜色*/
.ck-find-result {
    background: #b9d2ff;
    color: var(--ck-color-text);
}

span:not(.fancytree-active) span.fancytree-title {
   font-weight: 500 !important;
}

/*目录边界的控制*/
#right-pane .card-body {
    padding: 1px !important;
        padding-top: 1px;
        padding-right: 1px;
        padding-bottom: 1px;
        padding-left: 1px;
}
/*目录左右两边边距控制*/
.toc-widget {
    padding: 15px !important;
}
#launcher-pane .launcher-button {
   color: #F0F4F4 !important;
   /* 云遥改动处 ,原值 f0f4f4*/
   background-color: var(--color-blue-light) !important;
}

.global-menu {
   background-color: var(--color-blue-light);
   width: 44px !important;
}

ul.fancytree-container li {
   contain: initial;
}

/*这里是左上角的选项图标,新加了一行是控制图标大小的,新版本图标默认很大,所以需要大小控制*/
.global-menu-button {
   background-image: url("../../../favicon.ico") !important;
   background-size: 35px !important;
}

/*受保护的标题*/
#center-pane .title-row 
.note-title-widget input.note-title.protected {
    text-shadow: 1px 1px px var(--muted-text-color);
}

div#launcher-pane.component {
   width: 44px !important;
}

#launcher-pane .launcher-button {
   width: 44px !important;
   padding: initial !important;
}

div.spacer.component {
   background-color: var(--color-blue-light) !important;
   width: 44px;
}

.dropdown,
.dropleft,
.dropright,
.dropup {
   position: initial;
}

.sync-status .sync-status-icon {
   padding: 13px 8px 8px 8px;
}

.sync-status .sync-status-icon span {
   padding: 13px 8px 8px 8px;
}

#left-pane input.search-string {
   background: rgba(255, 255, 255, 0.3) !important;
}

div.quick-search.input-group.input-group-sm.component {
   align-content: center;
}

span.fancytree-node:not(.fancytree-folder) .fancytree-expander::before {
   content: "\ec21" !important;
   visibility: visible !important;
   color: rgba(51, 51, 51, 0.1) !important;
}

div#root-widget div.gutter-horizontal {
   background: var(--color-gray-light);
   width: 5px !important;
   border-left: var(--border-standard);
   border-radius: 0;
   padding-right: 0.3rem;
   border-right: var(--border-standard);
}

/*打开的页面的图标的样式*/
#center-pane .title-row .note-icon-widget button {
   display: flex;
   color: #9e49bb;

   margin: 0;
}
/*这里是一级标题部分*/
#center-pane .title-row .note-title-widget input.note-title {
   color: var(--color-blue-dark) !important;
}

.note-title-widget input.note-title.protected {
    text-shadow: 0px 0px 0px var(--muted-text-color);
}

input.note-title {
   font-family: var(--detail-font-family) !important;
   font-weight: bold;
}

.bx-dock-right::before {
   vertical-align: middle;
}


button.ck.ck-block-toolbar-button {
   background-color: rgba(255, 255, 255, 0);
}


html {
   --color-blue-light: #59AC80;
   --color-blue-light-alpha: #ABD49D;
   /*   当前活动标签页的背景色,原值#4682B470   */
   --color-gray: #d6d6d6;
   --color-gray-light: #59AC80;
   /*  至少这里是非活动标签、两侧分隔栏的颜色   */
   --accented-background-color: #B2E8C6;
   /*  这个才是卡片背景颜色   */
   --more-accented-background-color: #8AE097;
   /*  这个是鼠标悬浮在卡片上时的背景颜色 */
   --left-pane-background-color: #FDF5EA;
   /*   这个才是正儿八经的文件树的背景色   */
   --color-gray-light-text: #000000;
   /*  至少是非活动标签的字的颜色  */
   --color-gray-light-alpha: rgba(199, 199, 199, 0.2);
   --border-standard: 1px solid var(--color-gray);
   --color-blue-dark: #296e42;
   --link-color: #007BFF !important;
   --menu-background-color: #F3F9F1;
   /* 快速搜索结果的卡片的背景色 */
}

div#root-widget div#rest-pane div.tab-row-widget div.note-new-tab {
   color: var(--color-gray-dark);
   background-color: var(--color-gray-light-alpha);
}

div#rest-pane>div.component {
   height: 30px !important;
   margin-bottom: 1px !important;
}

.note-new-tab {
   width: 30px !important;
   height: 30px !important;
   font-size: 19px !important;
}

.tab-row-widget .note-tab .note-tab-close span {
   font-size: 23px !important;
}

div#root-widget div#rest-pane div.tab-row-widget div.note-new-tab:hover {
   color: var(--color-blue-light);
   background-color: var(--color-blue-light-alpha);
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper {
   background-color: var(--color-gray-light);
   color: var(--color-gray-light-text);
   padding: 3px 5px 1px 5px !important;
   height: 30px !important;
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper:hover {
   background-color: var(--color-blue-light-alpha);
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper>div:hover {
   background: none;
}

/*当前选中标签的字的颜色 */
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active] .note-tab-wrapper {
   color: #146e20;
   background-color: var(--color-blue-light-alpha);
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active] .note-tab-wrapper div.note-tab-title::before {
   content: "\203B ";
   margin-right: 5px;
}



/* 左侧面板背景图片,由于整个笔记的背景都换了,这个优先级不够高,故注释掉 */
/*#left-pane.component {
   background-image: url("/custom/background.png");
} 
*/
#线条
li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n) {
   border-left: 4px solid#F9950A !important;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1) {
    border-left: 4px solid #30db5b !important;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2) {
   border-left: 4px solid #409cff;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3) {
   border-left: 4px solid #ff6482;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4) {
   border-left: 4px solid #ffd426;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5) {
   border-left: 4px solid #d48fff;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
}

#li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n):hover {
   background-color: #f4a6a601 !important;
}

#li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1):hover {
   --border-background-color:  #84D5BD !important;
}

#li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2):hover {
   background-color: #719ACE !important;
}

#li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3):hover {
   background-color: #F3D48C !important;
}

#li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4):hover {
   background-color: #FEB4AD !important;
}

#li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5):hover {
   background-color: #A5ACE2 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n)>span.fancytree-node:hover {
   background-color: #F8B811 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1)>span.fancytree-node:hover {
   background-color: #8AE097 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2)>span.fancytree-node:hover {
   background-color: #A6C6FD !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3)>span.fancytree-node:hover {
   background-color: #FEB4AD !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4)>span.fancytree-node:hover {
   background-color: #F7DB8A !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5)>span.fancytree-node:hover {
   background-color: #C5BCF0 !important;
}


.fancytree-node {
   padding-top: 0px !important;
   padding-bottom: 0px !important;
}

span.fancytree-node.fancytree-active {

   border-radius: 0px !important;
   border: 0px !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n)>span.fancytree-node.fancytree-active {
   background-color: #F8B811 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1)>span.fancytree-node.fancytree-active {
   background-color: #8AE097 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2)>span.fancytree-node.fancytree-active {
   background-color: #A6C6FD !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3)>span.fancytree-node.fancytree-active {
   background-color: #FEB4AD !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4)>span.fancytree-node.fancytree-active {
   background-color: #F7DB8A !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5)>span.fancytree-node.fancytree-active {
   background-color: #C5BCF0 !important;
}
span.button-widget.icon-action.bx.component.bx-history,
.ribbon-button-container .icon-action {
   padding-top: 5px !important;
}

span.fancytree-node:hover {
   border: 0px !important;
}

span.fancytree-node {
   border: 0px !important;
}

.title-bar-buttons div button.icon-action {
   font-size: 80% !important;
}
/*右侧目录*/
/*如果不带!important优先级别较低,所以不会使用*/
.toc ol {
    padding-left: 25px !important;
}

div.note-detail p {
   font-size: 1.25rem;
   /* 云遥改动处,加入这一行,修改字体大小  */
   margin-top: 0.1rem !important;
   margin-bottom: 0.5rem !important;
   line-height: 2.25rem;
   /*  行高,,减去1.25的字体大小,行距为 1  */
   text-indent: 0em;
   /*  云遥改动处,2em修改为0em,去除缩进2个字符  */
   text-align: justify;
   text-justify: distribute;
}

dl,
ol,
ul {
   padding-left: 1em;
}
/*列表的字体大小*/
div.note-detail ul>li,
ol>li {
   font-size: 1.3rem;
   /* 云遥改动处,修改了列表项的字体大小 */
   text-align: justify;
   text-justify: distribute;
}

blockquote>p {
   text-indent: 0em;
   /* 引用块去除缩进,原作者貌似在0.58.4的主题里就是0em,但上一个版本是2em */
}

p>span.ck-math-tex {
   text-indent: 0em;
}


.note-detail {
   line-height: 2.25rem;
}


.ck-content p>span.image-inline {
   vertical-align: middle;

}


.ck-content figure.image {
   margin-top: 0.2rem;
   margin-bottom: 0.2rem;
}

div.note-detail.component span.image-inline {
   border: 1px dashed rgb(200, 200, 200);
}

div.note-detail.component figure.image {
   border: 1px dashed rgb(200, 200, 200);
}

::selection {
   background-color: rgba(70, 130, 180, 0.7) !important;

}

.note-properties-widget {
   padding: 0px !important;
}

.note-icon-widget.dropdown.component {
   padding-top: 1.5px !important;
}

.basic-properties-widget>* {
   margin-top: 0px !important;
}

div.attribute-list {
   margin-top: 0px !important;
}

.basic-properties-widget {
   padding: 0px 12px 0px 12px !important;
}

.component {
   padding-top: 0px !important;
   padding-bottom: 0px !important;
}

.inherited-attributes-container {
   padding: 0px 12px 0px 12px !important;
}

.add-new-attribute-button,
.save-attributes-button {
   bottom: 0px !important;
}


::-webkit-scrollbar-thumb {
   border-radius: 5px !important;
   background: rgba(0, 0, 0, 0.2) !important;
}

::-webkit-scrollbar {
   height: 12px;
}


/* 这里才是卡片背景颜色*/
div#center-pane .note-book-card {
   border: 1px solid rgba(128, 128, 128, 0.5) !important;
}




#center-pane div.note-detail-editable-text div.note-detail-editable-text-editor.ck.ck-content pre,
#center-pane .CodeMirror pre code {
   color: var(--color-blue-dark) !important;
   padding: 0.2em;
   margin: 0.5rem auto 0.5rem;
   background-color: var(--color-gray-light);
   border: 1px dotted var(--color-gray);
}

.ck.ck-editor__editable pre[data-language]::after {
   background: rgba(10, 10, 10, 0.1);
}
/*编辑模式下代码背景色*/
.ck.ck-editor__editable .ck-code_selected {
background-color: hsla(0,0%,51%,36%) !important;
}
/*浏览模式下代码背景色*/
.ck-content code {
background-color: hsla(0,0%,51%,36%) ;/*这里如果加上了"!important" 那么代码块中也会受到影响,所以去掉后就正常了*/
}


span.katex * {
   font-family: KaTeX_Main !important;
   font: KaTeX_Main, Times New Roman, serif !important;
}

.katex-display {
   margin: 0.1rem 0;
}


/*后代选择器,选中.ck-content下的引用块元素设置样式*/
.ck-content blockquote {
   font-style: initial !important;
   color: #2C3E50 !important;
   border-left: 5px solid #D6DBDF !important;
   /* 云遥改动处 */
   /* 原值   background: none repeat scroll 0 0 rgba(102, 128, 153, .05) !important; */
   /*引用块颜色,这里要使用不透明的,否则如果使用rgba的话,会和底色叠加,不好估计是什么颜色*/
   background: none repeat scroll 0 0 rgb(169, 299, 178) !important;
   padding: 2px 1px 3px !important;
   margin: 0.2rem 0 0 0 !important;
}

/*子元素选择器,选中引用块里的p元素,也就是文字元素,设置样式*/
blockquote>p {
   margin-bottom: 0 !important;
   text-indent: 0em !important;
   /* 云遥改动处,引用块文字去除缩进,原值1.7em,改为0*/
}

dl,
ol,
ul {
   margin-bottom: 0.1rem !important;
}



.ck-content .table {
   margin-top: 0.1rem;
   margin-bottom: 0.1rem;
}

/*这里注释掉是因为暂时不知道有什么用,好像也没啥用*/
/* a[href^="#root"] {
   
} */

html body.mobile.heading-style-plain div#root-widget.component div#launcher-pane.component div#launcher-container.component div.spacer.component {
   background-color: var(--color-blue-light);
   /*不知道是干啥的*/
   width: 44px !important;
}

/*云遥改动处,列表项第一级显示实心圆而不是空心圆  */
.ck-content ul {
   list-style-type: disc;
   line-height: 2.25rem;
   /*行高*/
}

/*不知道是版本问题还是什么,这部分是右侧目录的颜色*/
ol li {
   /*一级目录*/
   color: #000000;
   line-height: 2.25rem;
   /*行高 */
}

ol ol>li {
   /*二级目录*/
   color: #0a84ff;
   line-height: 2.25rem;
}

ol ol>ol>li {
   /*三级目录*/
   color: #ff2d55;
   line-height: 2.25rem;
}

ol ol>ol>ol>li {
   /*四级目录*/
   color: #e6952f;
   line-height: 2.25rem;
}

ol ol>ol>ol>ol>li {
   /*五级目录*/
   color: #af52de;
   line-height: 2.25rem;
}

/*这部分才是有序列表的颜色*/
ol>li {
   /*有序列表,第一层*0075cb/
   color: #F9C40A;
   line-height: 2.25rem;
   /*行高 */
}

ol>li>ol>li {
   /*有序列表,第二层*/
   color: #0094c1;
   line-height: 2.25rem;
}

ol>li>ol>li>ol>li {
   /*有序列表,第三层*/
   color: #3c32bd;
   line-height: 2.25rem;
}

ol>li>ol>li>ol>li>ol>li {
   /*有序列表,第四层*/
   color: #bb4ead;
   line-height: 2.25rem;
}

ol>li>ol>li>ol>li>ol>li>ol>li {
   /*有序列表,第五层*/
   color: #ff9354;
   line-height: 2.25rem;
}

/*编辑模式下有序列表边框有限制,导致10,这种只会显示0,所以特意设置下边距*/
.ck.ck-editor__editable_inline {
    padding-left: 17px;
}

/*浏览模式下右边控制有点冲突,有些会被挡住强迫症很难受所以特意设置下边距*/
.note-detail-readonly-text {
    padding-right: 6px;
}

/*这个就是无序列表项、有序列表项前面的那个圈圈或者数字标识的颜色*/
::marker {
   color: #4682B4;
}

/*编辑模式下,代码块背景颜色*/
#center-pane div.note-detail-editable-text div.note-detail-editable-text-editor.ck.ck-content pre,
#center-pane .CodeMirror pre code {
    color: var(--color-blue-dark) !important;
    padding: 0.2em;
    margin: 0.5rem auto 0.5rem;
    background-color: #FFFAFA;
    /*这部分是控制代码块边缘的阴影的,使代码块看起来更像一个单独的块*/
    border: 1px solid #a5a5a5;
}

/*只读模式下,代码块背景颜色 */
.ck-content pre {
   background: #FFFAFA;
   border: 1px solid #a5a5a5;
   border-radius: 2 px;
   color: #353535;
   direction: ltr;
   font-style: normal;
   min-width: 200 px;
   padding: 1 em;
   tab-size: 4;
   text-align: left;
   white-space: pre-wrap;
}

/*
#root-widget.component {
   background-image: url("/custom/background.png");
   background-size: 100% 100%;
}
*/

.ck .ck-link_selected {
   background-color: #F2F2F2;
}

/*列表的标签数字*/
::marker {
    color: #886bbf;
}
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    23831 引用 • 96893 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • heeeeeee

    有思源大佬觉得这个 css 不错,可以制作一个代码片段,我是真的很想适配到思源笔记上 ❤️

  • pakeh2866

    还要改啥,AI 再加工一下?

    1 回复
  • Mayrain

    好……好花哨……

    不会觉得这么多色彩比较刺眼嘛,感觉文档层次都不太清楚了(

    image.png

    我的是这样的,自我感觉又简洁又好看(个人想法)

    另外有代码的话就可以直接交给 ai 改一下就变成 css 代码段了吧

  • heeeeeee

    这是 trilium 的代码,不上思源上的代码片段

  • Floria233

    楼主,给你几个链接参考,你看一下可否满足你的需求。

    【主题宣传】OneNote 主题回归思源 - 链滴

    about 文档树的彩虹目录 - 链滴

    多彩文档树 - 链滴

    1 回复
  • 觉得非常好看 还是不错的 加油

  • 收藏 都非常好

  • EmberSky

    你这个样式有点好看,我去调一调我自己的多彩文档树

  • heeeeeee

    如果有大佬欣赏这个 trilium 的文档树的彩色样式,可以参考我列出的 trilium 代码进行修改到思源上,我不懂代码,所以我无法自行适配到思源上。要是有大佬适配到思源上的,麻烦分享一下代码片段 😄

  • shiyuankill

    持续关注

  • EmberSky

    改好了, 应该符合你的需求, 还可以参考下这里的说明: [css] 多彩文档树竖线 -- 按层级区分颜色

    图片.png

    /* [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);
        /* 悬浮颜色 */
        --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-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);
    }
    
    /* 折叠按钮 */
    .sy__file>.fn__flex-1>ul li>.b3-list-item__toggle {
        padding-left: 5px !important;
    }
    
    /* 竖线 */
    .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:nth-of-type(4n+1),
    .sy__file>.fn__flex-1>ul ul:nth-of-type(4n+1) {
        border-left: 4px solid var(--vertical-line-color-1);
    }
    .sy__file>.fn__flex-1>ul li:nth-of-type(4n+2),
    .sy__file>.fn__flex-1>ul ul:nth-of-type(4n+2) {
        border-left: 4px solid var(--vertical-line-color-2);
    }
    .sy__file>.fn__flex-1>ul li:nth-of-type(4n+3),
    .sy__file>.fn__flex-1>ul ul:nth-of-type(4n+3) {
        border-left: 4px solid var(--vertical-line-color-3);
    }
    .sy__file>.fn__flex-1>ul li:nth-of-type(4n),
    .sy__file>.fn__flex-1>ul ul:nth-of-type(4n) {
        border-left: 4px solid var(--vertical-line-color-4);
    }
    
    /* 文档悬浮颜色 */
    .sy__file>.fn__flex-1>ul li:hover:not(.b3-list-item--focus):nth-of-type(4n+1) {
        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):nth-of-type(4n+2) {
        background-color: var(--file-hover-color-2) !important;
    }
    .sy__file>.fn__flex-1>ul>ul>ul li:hover:not(.b3-list-item--focus):nth-of-type(4n+3) {
        background-color: var(--file-hover-color-3) !important;
    }
    .sy__file>.fn__flex-1>ul>ul>ul>ul li:hover:not(.b3-list-item--focus):nth-of-type(4n) {
        background-color: var(--file-hover-color-4) !important;
    }
    
    /* 文档打开颜色 */
    .sy__file>.fn__flex-1>ul li.b3-list-item--focus:nth-of-type(4n+1) {
        background-color: var(--file-open-color-1);
    }
    .sy__file>.fn__flex-1>ul>ul li.b3-list-item--focus:nth-of-type(4n+2) {
        background-color: var(--file-open-color-2);
    }
    .sy__file>.fn__flex-1>ul>ul>ul li.b3-list-item--focus:nth-of-type(4n+3) {
        background-color: var(--file-open-color-3);
    }
    .sy__file>.fn__flex-1>ul>ul>ul>ul li.b3-list-item--focus:nth-of-type(4n) {
        background-color: var(--file-open-color-4);
    }
    
    
    
    
请输入回帖内容 ...

推荐标签 标签

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    265 引用 • 666 回帖 • 2 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 399 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 159 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    150 引用 • 257 回帖 • 1 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 537 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 554 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 6 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    111 引用 • 54 回帖 • 2 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 791 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    26 引用 • 196 回帖 • 24 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    578 引用 • 3534 回帖
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 1 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 9 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 724 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 26 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 37 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    223 引用 • 474 回帖 • 1 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    87 引用 • 139 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 374 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 70 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 153 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    6 引用 • 14 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 1 关注