小白向,默认主题 css 代码片段自定义样式

2024.1.1 更新重写

CSS 代码片段是帮助你 DIY 外观样式的,以下为全局样式

用了很多大佬的代码片段,四处搜寻,全部鞠躬感谢 ❤️

图片放大查看

image.png

image.png


隐藏文档树图标(icon)

代码
.b3-list-item__icon {
 display: none ;
}

原来 使用 CSS 后效果
image.png image.png

隐藏书签前的图标(icon)

代码
span.b3-list-item__graphic {
	display: none;
}

隐藏大纲树前的块标记 H

代码
/*隐藏大纲块标记*/
.sy__outline .b3-list-item__graphic {
    display: none;
}

原来 使用 CSS 后效果
image.png image.png

隐藏文档编辑器块进度条

代码
.protyle-scroll {
display: none;
}
原来 使用 CSS 后效果
image.png image.png

分割线加粗

代码
.protyle-wysiwyg [data-node-id].hr>div:after {
     height: 2px;
 }

原来 使用 CSS 后效果
image.png image.png

区分内链(双链)动、静锚文本样式

代码
/* 动态锚文本 */
.protyle-wysiwyg [data-node-id] span[data-type="block-ref"][data-subtype="d"]::before {
    color: var(--b3-theme-on-surface)!important;
    content: "["!important;
}

.protyle-wysiwyg [data-node-id] span[data-type="block-ref"][data-subtype="d"]::after {
    color: var(--b3-theme-on-surface)!important;
    content: "]"!important;
}

/* 静态锚文本 */
.protyle-wysiwyg [data-node-id] span[data-type="block-ref"][data-subtype="s"]{
	border-bottom: 0.5px solid var(--b3-protyle-inline-blockref-color);
}

效果:
image.png


图片加投影样式

代码
.b3-typography img, .protyle-wysiwyg img {
	box-shadow: 0 0 3px gray;
}

效果:

image.png


块被引计数样式

代码
.protyle-attr--refcount {
	background-color:#E6E6FA !important;
	font-weight: bold; 
}

效果:

image.png

  • 思源笔记

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

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

    18141 引用 • 66937 回帖
5 操作
Yylicon 在 2024-01-01 21:08:53 更新了该帖
Yylicon 在 2024-01-01 21:05:07 更新了该帖
Yylicon 在 2024-01-01 21:01:00 更新了该帖
Yylicon 在 2024-01-01 20:57:41 更新了该帖 Yylicon 在 2024-01-01 20:56:42 更新了该帖

相关帖子

欢迎来到这里!

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

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