2024.1.1 更新重写
CSS 代码片段是帮助你 DIY 外观样式的,以下为全局样式
用了很多大佬的代码片段,四处搜寻,全部鞠躬感谢 ❤️
图片放大查看
隐藏文档树图标(icon)
代码
.b3-list-item__icon {
display: none ;
}
原来 | 使用 CSS 后效果 |
---|---|
隐藏书签前的图标(icon)
代码
span.b3-list-item__graphic {
display: none;
}
隐藏大纲树前的块标记 H
代码
/*隐藏大纲块标记*/
.sy__outline .b3-list-item__graphic {
display: none;
}
原来 | 使用 CSS 后效果 |
---|---|
隐藏文档编辑器块进度条
代码
.protyle-scroll {
display: none;
}
原来 | 使用 CSS 后效果 |
---|---|
分割线加粗
代码
.protyle-wysiwyg [data-node-id].hr>div:after {
height: 2px;
}
原来 | 使用 CSS 后效果 |
---|---|
区分内链(双链)动、静锚文本样式
代码
/* 动态锚文本 */
.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);
}
效果:
图片加投影样式
代码
.b3-typography img, .protyle-wysiwyg img {
box-shadow: 0 0 3px gray;
}
效果:
块被引计数样式
代码
.protyle-attr--refcount {
background-color:#E6E6FA !important;
font-weight: bold;
}
效果:
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于