背景色设置
:root {--b3-font-background1: #423a3a !important;--b3-font-background2: #4b3722 !important;--b3-font-background3: #203854c2 !important;--b3-font-background4: #2c5438a3 !important;--b3-font-background5: #4c525778 !important;--b3-font-background6: #1b3f758a !important;--b3-font-background7: #664a1c73 !important;--b3-font-background8: #5b1d1770 !important;--b3-font-background9: #541b3594 !important;--b3-font-background10: #6b2f6b70 !important;--b3-font-background11: #2f4c264f!important;--b3-font-background12: #72390f54 !important;--b3-font-background13: #3c3c3cd9 !important;
}
文字加粗颜色
.b3-typography strong, .b3-typography span[data-type~=strong], .protyle-wysiwyg strong, .protyle-wysiwyg span[data-type~=strong] {font-weight: 500;color: #73a6ff;
}
引用块美化
.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {padding: 4px;border-left: 0.25em solid #0b960e !important;background-color: var(--b3-list-hover);margin: 4px 0;
}
底部栏颜色
.status {background-color: #3C3C3C;
}.status * {color: #Dadada;font-size: 14px;font-weight: 600;font-family: 'Cascadia Mono', 'Cascadia Code', 'Microsoft YaHei UI';
}
网址链接
.protyle-wysiwyg [data-node-id] span[data-type~=a] {color: #7badff;border-bottom: 1px solid var(--b3-border-color);
}
题头图
.protyle-background__img {
opacity:1 !important;
}
引用快字体颜色
.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {padding: 4px;color: #DADADA !important;border-left: 0.25em solid #0b960e !important;background-color: var(--b3-list-hover);margin: 4px 0;
}
修改图片亮度
.b3-typography .img, .protyle-wysiwyg .img {display: inline-block;text-align: center;vertical-align: top;margin: 0 auto;max-width: 100%;user-select: none;word-break: keep-all;white-space: nowrap;filter: brightness(0.75);
}
大纲字体大小
.fn__flex-column.layout__dockr .file-tree {font-size: 13px !important;
}
代码块字体样式
.b3-typography .hljs, .protyle-wysiwyg .hljs {font-family: Consolas !important;
}.hljs-comment {font-size: 13px;
}
钉住的同时显示 icon 和标题 CSS 片段
/* 钉住的同时显示 icon 和标题 CSS片段 */
.layout-tab-bar .item.item--pin .item__text {width: auto;max-width: none;display: flex !important;
}
类似 logseq 的层次子弹线 CSS 片段
/* 类似 logseq 的层次子弹线 CSS片段 */
/* REF https://github.com/svchord/Rem-Craft */
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action{color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action svg{margin:0;width:16px;height:16px;padding:0px 0px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li::after{content:"";display:block;position:absolute;pointer-events:none;width:34px;left:-18px;top:-20px;border-style:solid;border-color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:not(:has(.block-focus))::after{bottom:-2px;border-width:0 0 0 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{height:38px;border-radius:0 0 0 8px;border-width:0 0 2px 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)~.li:not(:has(.block-focus))::after{border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=o]::after{width:24px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=t]::after{width:28px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]::after{content:"";display:block;position:absolute;pointer-events:none;width:34px;left:-18px;top:-20px;border-style:solid;border-color:rgb(70, 110, 220);top:20px;height:calc(100% + 4px);border-width:0 0 0 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]:has(+.list)::after{height:auto;bottom:0
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id][data-type=NodeHeading]::after{top:0;height:185%
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)~[data-node-id]::after{border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[fold="1"]>[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus):has(>.block-focus)>[data-node-id]::after{border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li::after{top:-10px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{height:28px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action{color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action svg{margin:0;width:14px;height:14px;padding:0px 0px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li::after{top:-14px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{height:32px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus).protyle-task--done>.list:has(.block-focus)>.li::after{border-color:rgba(139, 139, 139)
}
类似 logseq 的层次子弹线 JS 片段
/* 类似 logseq 的层次子弹线 JS片段 */
/*** 获得指定块位于的编辑区* @params {HTMLElement}* @return {HTMLElement} 光标所在块位于的编辑区* @return {null} 光标不在块内*/
function getTargetEditor(block) {while (block != null && !block.classList.contains('protyle-wysiwyg')) block = block.parentElement;return block;
}/*** 获得焦点所在的块* @return {HTMLElement} 光标所在块* @return {null} 光标不在块内*/
function getFocusedBlock() {if (document.activeElement.classList.contains('protyle-wysiwyg')) {let block = window.getSelection()?.focusNode?.parentElement; // 当前光标while (block != null && block.dataset.nodeId == null) block = block.parentElement;return block;}
}function focusHandler() {/* 获取当前编辑区 */let block = getFocusedBlock(); // 当前光标所在块/* 当前块已经设置焦点 */if (block?.classList.contains(`block-focus`)) return;/* 当前块未设置焦点 */const editor = getTargetEditor(block); // 当前光标所在块位于的编辑区if (editor) {editor.querySelectorAll(`.block-focus`).forEach((element) => element.classList.remove(`block-focus`));block.classList.add(`block-focus`);// setSelector(block);}
}function bulletMain() {// 跟踪当前所在块window.addEventListener('mouseup', focusHandler, true);window.addEventListener('keyup', focusHandler, true);
}(async () => {bulletMain();console.log('加载子弹线成功')
})();
去除图片后的多余空行 CSS 片段
/* 去除图片后的多余空行 CSS片段 */
.b3-typography .img:not([style]), .protyle-wysiwyg .img:not([style]) {display:inline-block;
}
代码块字体设置
.b3-list-item {line-height: 35px !important;min-height: 28px;padding: 0 4px;display: flex;cursor: pointer;align-items: center;position: relative;background-color: rgba(0,0,0,0);text-align: left;border: 0;color: var(--b3-theme-on-background);margin: 1px 8px;
}.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {padding: 4px;color: black;border-left: 0.25em solid #ffffff;background-color: var(--b3-list-hover);margin: 4px 0;
}
虚线备注
/* 虚线备注 CSS片段 https://github.com/TCOTC/siyuan-css-dashed-line-memo */
.b3-typography span[data-type~=inline-memo], .protyle-wysiwyg span[data-type~=inline-memo] {background-color: transparent;border-bottom: 2px dashed var(--b3-theme-primary) !important;
}
隐藏大纲前面的块标记 H
.sy__outline .b3-list-item__graphic {display: none;
}
行间距
.protyle-wysiwyg>.p {line-height: 2.3; /*段落块的行间距，段间距的话前面该改成margin*/}
文档树块间距
.b3-list-item {line-height: 35px !important;min-height: 28px;padding: 0 4px;display: flex;cursor: pointer;align-items: center;position: relative;background-color: rgba(0,0,0,0);text-align: left;border: 0;color: var(--b3-theme-on-background);margin: 1px 8px;
}.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {padding: 4px;color: black;border-left: 0.25em solid #ffffff;background-color: var(--b3-list-hover);margin: 4px 0;
}
标题居中
.protyle-title__input {text-align: center;
}
plugin-custom-fonts-style
/* Twemoji Mozilla: https://github.com/mozilla/twemoji-colr */
@font-face {font-family: "Twemoji Mozilla";font-style: normal;src: url("plugins/custom-fonts/static/fonts/Twemoji.Mozilla/Twemoji.Mozilla-0.7.0.ttf");
}:root {--b3-font-family-emoji: "Twemoji Mozilla", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Noto Color Emoji", "Android Emoji";
}
思源笔记相关设置
