如视频所展示的一样,这是我在 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;
}
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于