膜拜大佬,思源笔记 notion 是更新非常快、功能丰富、界面优美的主题。
但是有几个地方我个人会自己修改,近期更新频繁,为了避免每次手动在代码里删改,于是想到在 theme.css 文件后面添加一段代码,这样每次更新只需要粘贴一下就可以。
主要有以下修改,如果使用习惯相似,可以自取需要的部分自定义 notion 主题:
- 任务列表完成后不修改颜色、不加删除线
- 缩小标题上间距
- sql 搜索的嵌入块分割线加粗
- 标题折叠由边框改成红色省略号
- 标题 1 改为居中,标题 2 增加分割虚线
- 高亮改为半高过渡色
- 增加高亮挖空效果(添加属性 w=w)
操作方法:
把以下代码复制到 notion 主题文件夹下 theme.css 文件最后面。(如果需要更改标题折叠样式,需要手动注释掉文件开头 h-reminder.css 的引用)
/* ---------------- */
/* 在theme.css开头,手动注释:
@import url(style/h-reminder.css);
这一行代码 */
/* ---------------- */
/* ---------------- */
/* 把下面的代码复制到theme.css文件最后面 */
/* ---------------- */
/* 任务完成之后没有删除效果,颜色为正常颜色 */
.protyle-task--done{
color: var(--b3-font-color1);
text-decoration:none;
}
/* 缩小标题上间距 */
.protyle-wysiwyg .h1,.protyle-wysiwyg .h2,
.protyle-wysiwyg .h3,.protyle-wysiwyg .h4,
.protyle-wysiwyg .h5,.protyle-wysiwyg .h6{
font-weight:700;
margin-top: .4em!important;
margin-bottom: .4em!important;
}
/* 嵌入块分割线加粗*/
.protyle-wysiwyg [data-node-id].render-node[data-type="NodeBlockQueryEmbed"]>.protyle-wysiwyg__embed{
border-top: 3px dashed var(--b3-border-color);
}
/* 标题折叠去除边框,增加红点 */
.protyle-wysiwyg [data-type="NodeHeading"][fold="1"]:not(.li) [spellcheck="false"]:after,
.protyle-wysiwyg [data-type="NodeList"][fold="1"]:not(.li) [spellcheck="false"]:after,
.protyle-wysiwyg [data-type="NodeListItem"].li[fold="1"]>div:nth-child(2)>[spellcheck="false"]::after {
content: " ...";
color: var(--b3-theme-error);
}
.protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){
background-color:transparent;
border-radius:0px;
border:0px solid var(--b3-border-fold);
}
/* 标题1居中 */
.protyle-wysiwyg [data-node-id].h1 ,.b3-typography h1{
text-align: center;
}
/* 标题2增加虚线 */
.protyle-wysiwyg [data-node-id].h2,.b3-typography h2 {
border-bottom: 1px dashed #dfe0e1 !important;
}
/* 标亮变为半高过渡颜色 */
.b3-typography mark,
.b3-typography span[data-type~=mark],
.protyle-wysiwyg mark,
.protyle-wysiwyg span[data-type~=mark] {
color: inherit;
background-color: transparent;
background-image: linear-gradient(transparent, transparent, var(--b3-protyle-inline-mark-background) 80%, var(--b3-protyle-inline-mark-background) 100%)
}
/* 高亮挖空效果(属性w=w)*/
.protyle-wysiwyg [data-node-id][custom-w~="w"] span[data-type~=mark]{
color: transparent;
border-bottom: 2px solid #888;
transition: color 0.1s ease-in-out !important;
background-image: none;
}
.protyle-wysiwyg [data-node-id][custom-w~="w"] span[data-type~=mark]:hover{
color: #333;
transition: color 0.1s ease-in-out;
}
效果预览:
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于