notion 主题自定义分享

膜拜大佬，思源笔记 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; 
}

效果预览：