登录 注册

[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;
}

image.png

[字体渲染增强]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] 思源笔记字体渲染增强 - 代码片段

前后对比：

image.png

快捷键

.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%;
}

标签

.protyle-wysiwyg [data-node-id] span[data-type~="tag"]{font-size:90%}
.protyle-wysiwyg [data-node-id] span[data-type~="tag"]::before{content:"#"}

主色调整（针对引用块）

调整的原因：紫色在 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; 
}

‍

  • 思源笔记

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

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

    23000 引用 • 92498 回帖 • 2 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    90 引用 • 556 回帖
1 引用
麻烦大佬帮忙提取 savor 主题级别标题后的点标，感谢！国庆快乐！ • EmberSky
5 操作
Adaxi 在 2024-11-19 14:34:54 更新了该帖
Adaxi 在 2024-11-19 12:29:56 更新了该帖
Adaxi 在 2024-11-19 12:26:17 更新了该帖
Adaxi 在 2024-11-17 21:47:52 更新了该帖 Adaxi 在 2024-11-17 21:40:43 更新了该帖
遵义 位置
12 感谢
18 收藏
2 赞同
1 引用
5 操作
6 回帖
2
416 353 54 2 7

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Imuvux • • 3
    订阅者 付费者

    跟进分享~

    折叠列表项环绕虚线

    参考此链接：

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

    列表.jpg

    移除块滚动条
    .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;
}

    引用.jpg

  • ifdong •

    大佬 nb

    请问大佬， 如何实现全局公式左对齐? 为啥下面的 css 代码无法在思源中实现? 拜谢 😭

    .mathjax-block,
.MathJax_Display {
    text-align: left !important;
}
    1 回复
  • xqh042 • • 1
    订阅者

    隐藏图标可能会导致钉住的文档变成空白，稍微改了一下

    .b3-list-item__icon,
li:not(.item--pin)>.item__icon {
	display: none !important;
}
  • y1x233 •
    付费者

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

    1 回复
  • Adaxi •
    作者

    我用默认主题测试了下，可以显示

  • Adaxi •
    作者

    试试这个

    .b3-typography .katex-display>.katex>.katex-html, .protyle-wysiwyg .katex-display>.katex>.katex-html {
    display: block !important;
    text-align: left !important;
}
请输入回帖内容 ...
Adaxi
遵义
回帖
196
 帖子
59
 积分
1203