[css] 分享默认主题下自用的一些代码片段

只改动少量内容，主配色未调（默认即可），稍微调整了些不协调的内容。

推荐一个使用方式：将全屏设置为一个非常简单的快捷键，比如 Alt+2，在编辑的时候全屏，可以收获一个极简化编辑的体验。

标题大小和级别显示

:root {
  /* 变量 */
  --h-size: 1em; /* 默认大小 */
  --h-weight: 800; /* 默认粗细 */
}

/* 标题级别显示 */
div[data-subtype^="h1"]:not([type]) > div:first-child:after,
div[data-subtype^="h2"] > div:first-child:after,
div[data-subtype^="h3"] > div:first-child:after,
div[data-subtype^="h4"] > div:first-child:after,
div[data-subtype^="h5"] > div:first-child:after,
div[data-subtype^="h6"] > div:first-child:after {
  font-size: 0.7em;
  opacity: 0.4;
}

div[data-subtype^="h1"]:not([type]) > div:first-child:after { content: " 1"; }
div[data-subtype^="h2"] > div:first-child:after { content: " 2"; }
div[data-subtype^="h3"] > div:first-child:after { content: " 3"; }
div[data-subtype^="h4"] > div:first-child:after { content: " 4"; }
div[data-subtype^="h5"] > div:first-child:after { content: " 5"; }
div[data-subtype^="h6"] > div:first-child:after { content: " 6"; }

/* H1-H6标题样式 */
.b3-typography h1, .b3-typography .h1, 
.protyle-wysiwyg h1, .protyle-wysiwyg .h1 {
  font-weight: var(--h-weight);
  font-size: calc(var(--h-size) * 1.3);
}
.b3-typography h2, .b3-typography .h2, 
.protyle-wysiwyg h2, .protyle-wysiwyg .h2 {
  font-weight: var(--h-weight);
  font-size: calc(var(--h-size) * 1.2);
}
.b3-typography h3, .b3-typography .h3, 
.protyle-wysiwyg h3, .protyle-wysiwyg .h3 {
  font-weight: var(--h-weight);
  font-size: calc(var(--h-size) * 1.1);
}
.b3-typography h4, .b3-typography .h4, 
.protyle-wysiwyg h4, .protyle-wysiwyg .h4,
.b3-typography h5, .b3-typography .h5, 
.protyle-wysiwyg h5, .protyle-wysiwyg .h5,
.b3-typography h6, .b3-typography .h6, 
.protyle-wysiwyg h6, .protyle-wysiwyg .h6 {
  font-weight: var(--h-weight);
  font-size: var(--h-size);
}

/* H1~H6标题间距, 不适合所有人，因为我把间距都调整为一样了 */
.b3-typography li>p,
.b3-typography>p,
.b3-typography blockquote>p,
.b3-typography [data-node-id],
.protyle-wysiwyg li>p,
.protyle-wysiwyg>p,
.protyle-wysiwyg blockquote>p,
.protyle-wysiwyg [data-node-id] {
    padding: 0 4px;
    margin: 0;
}

.b3-typography .h1,
.b3-typography h1,
.protyle-wysiwyg .h1,
.protyle-wysiwyg h1 {
    padding: 0.2em 4px;
}

.b3-typography .h2,
.b3-typography h2,
.protyle-wysiwyg .h2,
.protyle-wysiwyg h2 {
    padding: 0.15em 4px;
}

.b3-typography .h3,
.b3-typography h3,
.b3-typography .h4,
.b3-typography h4,
.b3-typography .h5,
.b3-typography h5,
.b3-typography .h6,
.b3-typography h6,
.protyle-wysiwyg .h3,
.protyle-wysiwyg h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg h5,
.protyle-wysiwyg .h6,
.protyle-wysiwyg h6 {
    padding: 0.1em 4px;
}

[字体渲染增强]https://ld246.com/article/1712480500457

:not(.katex):not(.overlaydiv):not([class*="icon"]):not([class*="button"]) {
    font-family: "JetBrainsMono", "更纱黑体 SC", sans-serif !important;
    text-shadow: 0.01em 0.01em 0.01em #999999;
    -webkit-text-stroke-width: 0.10px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

span:not([class="katex"]):not([class="overlaydiv"]) {
    text-shadow: rgba(0,0,0,0) !important;
}

.textLayer span {
    text-shadow: rgba(0,0,0,0) !important;
}

.protyle-action.protyle-action--order {
    text-shadow: rgba(0,0,0,0) !important;
}

.b3-typography strong, .b3-typography span[data-type~=strong], .protyle-wysiwyg strong, .protyle-wysiwyg span[data-type~=strong] {
    text-shadow: #999999 !important;
    -webkit-text-stroke-width: 0px !important;
}

作者：5kyfkr
链接： [css] 思源笔记字体渲染增强 - 代码片段

前后对比：

快捷键

.b3-typography kbd, 
.b3-typography span[data-type~=kbd], 
.protyle-wysiwyg kbd, 
.protyle-wysiwyg span[data-type~=kbd] {
    font-size: 75%;
}

字体相关（正文）

.b3-typography, .protyle-wysiwyg, .protyle-title {
    font-size: 20px !important;
}
:root {
  --b3-font-family: "JetBrainsMono", "更纱黑体 SC";
  --b3-font-family-protyle: var(--b3-font-family);
  --b3-font-family-code: var(--b3-font-family);
  --b3-font-family-graph: var(--b3-font-family);
  --b3-font-family-emoji: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI";
  --b3-font-family-math: KaTeX_Math;
}

图片

/*缺点：不能垂直拉伸，慎用，预览只能双击图片打开，希望直接预览图片需去掉限制高度的代码*/
.b3-typography span.img img:not(.emoji):not([style *="width"]),
.protyle-wysiwyg span.img img:not(.emoji):not([style *="width"]) {
    width: 100px;
    height: 100px; /* 限制高度为100px */
}
/*鼠标指向图片的时候才变亮*/
.protyle-wysiwyg img {
    opacity: 0.75;
    transition: opacity .25s linear;
}
.protyle-wysiwyg img:hover {
    opacity: 1;
}
/* 图片名称字体减小 */
.b3-typography .img .protyle-action__title,
.protyle-wysiwyg .img .protyle-action__title {
    font-size: 65%;
}

主色调整（针对引用块）

调整的原因：紫色在 Dark 主题下偏暗，看起来不是很协调。

:root{--b3-protyle-inline-blockref-color:hsl(201,17%,70%)}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]:not(.av__celltext),.protyle-wysiwyg [data-node-id] span[data-type~=file-annotation-ref]{font-weight:bold}

面包屑

.protyle-breadcrumb {
  background-color: var(--b3-theme-surface);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.protyle-breadcrumb:hover {
  opacity: 1;

隐藏图标

.b3-list-item__icon,
.layout-tab-bar .item__icon,
#barSync,
#plugin_siyuan-plugin-picgo_0,
#barSearch,
#barCommand,
#plugin_siyuan-plugins-index_0,
#plugin_plugin-add-shortcut-to-topbar_0,
li:not(.item--pin)>.item__icon  {
  display: none;
}

块标更加流畅

.protyle-gutters button svg {
  padding: 0 5px;
  border-radius: 4px;
  height: 24px !important;
}
.protyle-gutters button[data-type="fold"] svg {
  padding: 0 7px;
}
.protyle-gutters button {
  padding: 5px 0;
}
.protyle-gutters {
  transition: top 150ms ease-out;
}
.b3-text-field::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

‍

段落块高亮

.protyle-wysiwyg [data-type]:hover:not(.protyle-wysiwyg [data-type="NodeList"]):not(.protyle-wysiwyg [data-type="NodeListItem"]):not(.protyle-wysiwyg [data-type="img"]) {
  background-color: hsla(0, 0%, 77%, 0.035);
  box-shadow: 0 0 3px 0 hsla(0, 0%, 77%, 0.05);
}

.protyle-wysiwyg [data-type]:not(.protyle-wysiwyg [data-type="img"]) {
  transition: all 0.35s ease-out 0ms;
}

‍

[多行搜索]https://ld246.com/article/1697985662481

#searchList {
    background-color: var(--b3-theme-background);
}

.search__layout {
    border-bottom: 1px solid var(--b3-theme-surface-lighter);
}

.fn__flex-column #searchList > .b3-list-item[data-type='search-item'] {
    padding-bottom: 20px;
    margin: 6px;
}

.fn__flex-column #searchList .b3-list-item[data-type='search-item'] > .b3-list-item__meta {
    color: var(--b3-list-item--meta);
    background-color: var(--b3-list-background);
    font-size: 13px;
    line-height: 20px;
    border-radius: 4px;
    padding: 0 4px;
    position: absolute;
    max-width: 34vw;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.fn__flex-column #searchList .b3-list-item--focus[data-type='search-item'] > .b3-list-item__meta {
    background-color: var(--b3-theme-background);
}

.fn__flex-column #searchList > .b3-list-item + div [data-type='search-item'] .b3-list-item__graphic {
    height: 10px;
    width: 10px;
    padding: 4px;
    border-radius: 3px;
    background-color: var(--b3-list-background);
}

.fn__flex-column #searchList > .b3-list-item:not([data-type='search-item']) {
    border-radius: 4px 4px 0 0;
    margin: 6px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    padding-left: 0;
    background-color: var(--b3-dockright-background);
}

.fn__flex-column #searchList > .b3-list-item:not([data-type='search-item']) + div [data-type='search-item'] {
    margin: 0 6px;
    border-radius: 0;
    box-shadow: rgba(15, 15, 15, 0.1) -1px 0px 0, rgba(15, 15, 15, 0.1) 1px 0px 0;
}

#searchList > [data-type="search-item"] {
    display: block;
}

#searchList > [data-type="search-item"] > .b3-list-item__graphic {
    position: absolute;
}

#searchList > [data-type="search-item"] > .b3-list-item__text {
    margin-left: 20px;
    padding: 6px; 
    overflow-y: auto !important;
    text-overflow: ellipsis !important;
}

.b3-list-item[data-type="search-new"] {
    border-radius: 4px;
    height: 40px;
    margin: 6px;
    padding: 0 16px; 
    background-color: var(--b3-bq-background13) !important; 
}

#criteria .b3-button--small {
    padding: 2px 8px; 
}

#criteria + .block__icons {
    padding: 0 4px; 
}

.b3-dialog__body > .fn__flex-column:not(.switch-doc) {
    background-color: var(--b3-theme-background);
}

.search__tip {
    height:30px; 
}

公式块（对齐方式）

.b3-typography .katex-display > .katex > .katex-html,
.protyle-wysiwyg .katex-display > .katex > .katex-html {
    display: block; 
    text-align: left; 
}

‍

6 回帖

[css] 分享默认主题下自用的一些代码片段

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

y1x233 • 3 个月前
付费者

大佬，一级标题后面不显示数字 1，是什么情况

1 回复
其他回帖

Adaxi • 6 天前

作者

试试这个

.b3-typography .katex-display>.katex>.katex-html, .protyle-wysiwyg .katex-display>.katex>.katex-html {
    display: block !important;
    text-align: left !important;
}

xqh042 • 3 个月前 • 1
订阅者
隐藏图标可能会导致钉住的文档变成空白，稍微改了一下
```
.b3-list-item__icon,
li:not(.item--pin)>.item__icon {
	display: none !important;
}
```

Imuvux • 4 个月前 • 3

订阅者付费者

跟进分享~

折叠列表项环绕虚线

参考此链接：

.protyle-wysiwyg [data-node-id].li[fold="1"]>.protyle-action:after{
    border: 1px dashed var(--b3-font-color1);
    transform: scale(1.35);
}

移除块滚动条

.protyle-scroll {
    display: none;
}

块引用锚文本附加 `｢｣` 符号

彩色｢｣符号并区分动静态锚文本


:root {
    --b3-protyle-inline-blockref-color: var(--b3-theme-accent);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]::before {
    content: "｢";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]::after {
    content: "｣";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="s"]::before {
    content: "｢";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
    transform: scale(1, -1);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="s"]::after {
    content: "｣";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
    transform: scale(1, -1);
}
span[data-type~=block-ref] {
    font-weight: unset !important;
}

查看全部回帖

标题大小和级别显示

[字体渲染增强]https://ld246.com/article/1712480500457

快捷键

字体相关（正文）

图片

标签

主色调整（针对引用块）

面包屑

隐藏图标

块标更加流畅

段落块高亮

[多行搜索]https://ld246.com/article/1697985662481

公式块（对齐方式）

相关帖子

[js] 让思源笔记启动之后最大化显示

[js] 思源复制内容添加块链接

[css] 聚焦状态下折叠的列表显示展开状态

[js] 思源笔记文档添加动态图标自定义颜色

求助这个 css 选择器是什么？

[css] 有序列表样式分享（1.→（1）→A.→i.）

[js] 在面包屑旁添加全屏按钮，快捷切换全屏

欢迎来到这里！

折叠列表项环绕虚线

移除块滚动条

块引用锚文本附加 `｢｣` 符号

[css] 分享默认主题下自用的一些代码片段

标题大小和级别显示

[字体渲染增强]https://ld246.com/article/1712480500457

快捷键

字体相关（正文）

图片

标签

主色调整（针对引用块）

面包屑

隐藏图标

块标更加流畅

段落块高亮

[多行搜索]https://ld246.com/article/1697985662481

公式块（对齐方式）

相关帖子

[js] 让思源笔记启动之后最大化显示

[js] 思源复制内容添加块链接

[css] 聚焦状态下折叠的列表显示展开状态

[js] 思源笔记文档添加动态图标自定义颜色

求助这个 css 选择器是什么？

[css] 有序列表样式分享（1.→（1）→A.→i.）

[js] 在面包屑旁添加全屏按钮，快捷切换全屏

欢迎来到这里！

折叠列表项环绕虚线

移除块滚动条

块引用锚文本附加 ｢｣ 符号

块引用锚文本附加 `｢｣` 符号