无序列表子弹线
CSS
/* REF https://github.com/svchord/Rem-Craft */ .protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action{ color:#287B00;; } .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:#287B00;; } .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) }
JS
// 缓存编辑器块并处理聚焦状态的函数定义 let cachedEditorBlocks = []; // 缓存所有编辑器块 let focusedBlock = null; // 缓存当前聚焦的块 // 初始化缓存 function initEditorBlocksCache() { const editors = document.querySelectorAll('.protyle-wysiwyg'); editors.forEach(editor => { if (!editor.classList.contains('NodeAttributeView')) { cachedEditorBlocks.push(...editor.querySelectorAll('[data-node-id]')); } }); } // 更新聚焦状态并维护缓存 function handleBlockFocus(e) { let target; if (e.type === 'mouseup') { // 鼠标事件,查找最近的具有data-node-id属性的元素 target = e.target.closest('[data-node-id]'); } else if (e.type === 'keyup') { // 键盘事件,查找当前焦点所在的具有data-node-id属性的元素 const activeElement = document.activeElement; if (activeElement.classList.contains('protyle-wysiwyg')) { target = window.getSelection()?.focusNode?.parentElement; while (target && !target.dataset.nodeId) { target = target.parentElement; if (!target) break; // 避免空指针异常 if (target.classList.contains('NodeAttributeView')) { target = null; // 如果找到NodeAttributeView,则不处理该元素 break; } } } } if (!target || target === focusedBlock) return; if (focusedBlock) { focusedBlock.classList.remove('block-focus'); } focusedBlock = target; focusedBlock.classList.add('block-focus'); // 根据需要调用相关功能,例如: // setSelector(focusedBlock); } // 初始化编辑器块缓存 initEditorBlocksCache(); // 绑定事件监听器 document.addEventListener('mouseup', handleBlockFocus, true); document.addEventListener('keyup', handleBlockFocus, true); // 立即调用的异步函数表达式,执行handleBlockFocus并输出日志 (async () => { // 这里我们调用handleBlockFocus函数,但由于它不返回Promise,所以不需要await handleBlockFocus({ type: 'dummy' }); // 模拟事件调用 console.log('加载子弹线成功'); })();
笔记文档下划线
.b3-list-item, .b3-dialog--open .fn__flex .b3-list--background, .b3-dialog--open .fn__flex .b3-list-item { outline: 0.5px solid #00000010; margin: 0.5px !important; }
工作空间名称
#barWorkspace span.toolbar__text { font-family: inherit; /* 设置为系统默认字体 */ white-space: nowrap; /* 强制不换行 */ color: #22222280; } #barWorkspace { background-color: transparent !important; border: 1px solid #22222280 !important;; width: auto; /* 宽度自动适应内容 */ }
横排面板
.layout-tab-bar .item__close{ padding: 0; } .layout-tab-bar .item{ min-height: 30px; margin-right: 2px; margin-top: 3px; margin-left: 4px; } li.item.item--focus { background-color: oklch(from var(--b3-theme-primary) 0.43 calc(c * 0.9 * var(--asri-c-0, 1)) h/0.2); border-radius: 5px; /*border-top-left-radius: 5px; border-top-right-radius: 5px;*/ } [data-theme-mode="dark"] li.item.item--focus { background-color: oklch(from var(--b3-theme-primary) 0.99 calc(c * 0.9 * var(--asri-c-0, 1)) h/0.21) } .layout-tab-bar .item__text{ padding-left: 6px; padding-right: 6px; } li.item .item__close{ padding-left: 0px; padding-right: 6px; } .layout__wnd--active .layout-tab-bar .item:after{ display:none; } .layout-tab-bar { border-bottom: 1px solid rgba(0,0,0,0); }
全局字体
/* 合并 @font-face 规则,提供多种字体格式 */ @font-face { font-family: 'AaManYuHandwriting'; /* 假设字体文件在当前 CSS 文件的上一级目录的 fonts 文件夹中,根据实际情况调整 */ src: url('../fonts/Aa漫语手写体(非商用)_@字体视界.woff2') format('woff2'), url('../fonts/Aa漫语手写体(非商用)_@字体视界.woff') format('woff'), url('../fonts/Aa漫语手写体(非商用)_@字体视界.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* 统一选择器的 custom-font-family 属性值 */ [custom-font-family="Aa漫语手写体"], .protyle-wysiwyg [data-node-id][custom-font-family="Aa漫语手写体"] { font-family: 'AaManYuHandwriting', sans-serif; }
编辑区格子背景
/* 编辑器网格背景 CSS片段 */ .protyle-top, .protyle-wysiwyg { background-image: linear-gradient(90deg, rgba(90, 30, 60, .2) 3%, transparent 0), linear-gradient(1turn, rgba(90, 30, 60, .2) 3%, transparent 0); background-size: 20px 20px; background-position: 50%; }
引述快修改
/* 让引述块背景色不那么刺眼 */ /* 修改引述块默认底色 */ /* 提高上下边距以防止多个引述块竖排的时候没有间隙的问题 */ .b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq{ margin: 8px 0; border-radius: 0em; border-width: 0px; /* border-style: dashed; */ border-color: transparent; box-shadow: 0px 0px 2px 1px; color: #41454c; font-family: "仓耳今楷03","霞鹜文楷"; background-color: white; } /* 内边框线 */ .bq::after,blockquote::after{ content: ""; height: calc(100% - 8px); width: calc(100% - 8px); background-color: #ff000000; display: block; top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; border-color: rgba(128, 128, 128, 0.459); border-width: 1px; border-style: solid; pointer-events: none; } .bq,blockquote{ position:relative } .bq .li>.protyle-action{ color: #5c6b86f0 !important; } .bq .li>.protyle-action{ color: #5c6b86f0 !important; } .b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq{ padding: 8px; }
文档树
/* 文档树引用数字的颜色,修改为淡色,避免过于显眼导致注意力容易从笔记本标题文字上分散到此*/ .counter { color: #55555a5d; } /* 设置文档树前面的>符号颜色为灰色以不抢夺笔记本标题文字的视觉吸引力 */ /* .fn__flex-1.fn__flex-column.file-tree .b3-list-item__arrow { color: #8080804d; } */ /* 点击文档树emoji不弹出修改窗口(防止误触) */ /* 有人需要此功能,加回来 */ /* span.b3-list-item__icon.b3-tooltips.b3-tooltips__n { pointer-events: none; } */ /* 笔记本之间的间隔 */ .sy__file ul.b3-list.b3-list--background { border-radius: 0.3em; margin: 6px 10px 6px 12px; outline: 1px solid rgba(178, 100, 100, 0.812); background-color: white; overflow: hidden; } [data-type="navigation-root"] { height: 32px; } /* 设置反链面板图标位置(不设置对不齐) */ .backlinkList.fn__flex-1 .b3-list-item .popover__block { margin-left: 4px; } /* ------------------------------------文档树文字设置为灰色------------------------------- */ .b3-list-item__text { color: var(--b3-theme-on-surface); } /* -----------------------------文档树focus------------------------------- */ /* 颜色 */ .b3-list--background .b3-list-item--focus .b3-list-item__text, .b3-list--background .b3-list-item--focus .b3-list-item__graphic, .b3-list--background .b3-list-item--focus .b3-list-item__icon svg { /* color: var(--b3-theme-on-background); */ color: #287b00; } /* 页签切换面板中不用绿色,绿色太亮了 */ .switch-doc .b3-list-item.b3-list-item--focus{ background-color: #beeb8a !important; } /* 缩小页签列表中的间距 */ .switch-doc .b3-list:last-child .b3-list-item{ border-radius:0; margin-bottom:0 !important; padding: 0.1em 0 0.1em 0; box-shadow: inset 0 -1px 0 #d2bdbd; } /* 背景色 */ .b3-list--background .b3-list-item--focus { background-color: #e9ffbd !important; } .sy__backlink .b3-list--background .b3-list-item--focus { background-color: #ffbdb4b0 !important; } /* -----------------------------文档树hover-------------------------------- */ /* 颜色 */ .b3-list--background .b3-list-item:hover .b3-list-item__text, .b3-list--background .b3-list-item:hover .b3-list-item__graphic, .b3-list--background .b3-list-item:hover .b3-list-item__icon svg { color: var(--b3-theme-error); } /* 背景 */ /* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口,下方代码将其中的元素正常放置而不是居中放置 */ .block__edit.fn__flex-1.protyle{ align-items: normal; } /* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口,为这个区域中的内容块设置小点的内边距以防止出现多个滚动条 */ .block__popover.block__popover--move.block__popover--open .block__edit>.protyle-content{ padding: 0px 20px 0px 20px !important; /* overflow-y: hidden; */ /* min-height: 30px; */ /* margin: 10px; */ } /* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口,为这个区域设置边框 */ .block__popover.block__popover--move.block__popover--open{ border: 5px solid var(--b3-pinkroom-border); } /* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口,为这个区域取消内阴影*/ .block__edit.fn__flex-1.protyle{ box-shadow: none; } /* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口,为这个区域取消内阴影*/ .block__edit>.protyle-breadcrumb{ background-color: #fbeeee; } /* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口,为这个区域中的内容区域设置最底层的底色 */ .block__popover.block__popover--move.block__popover--open .block__content{ background-color: #dfd1cdb5; } /* 防止鼠标划过列表项时,底色左右两边还留有空隙 */ .b3-list-item{ margin: 0px !important; } /* 鼠标划过列表项时的底色 */ .b3-list--background .b3-list-item:hover:not(.b3-list-item--focus){ background-color: #94f7ed; } /* list-item设置底色时和外边框的圆角不融合 */ .b3-list--background .b3-list-item{ border-radius: 2px; } /* 给大纲中项目添加边线 */ .sy__outline .b3-list--background .b3-list-item{ border-radius: 0px; box-shadow: inset -1px -1px 0px 0px #9f9f9f4b; } /* 颜色用蓝的*/ .b3-list--background .b3-list-item:hover .b3-list-item__text, .b3-list--background .b3-list-item:hover .b3-list-item__graphic, .b3-list--background .b3-list-item:hover .b3-list-item__icon svg{ color: inherit; } /* .fn__hidden{ visibility: visible; } .fn__hidden>svg.b3-list-item__arrow{ visibility: hidden; } .b3-list-item__toggle { position: relative; } .b3-list-item__toggle.b3-list-item__toggle--hl::after{ content: ""; height: 100%; width: 100%; position: absolute; left: -1.6em; background-color: #83aaac99; top: 0; } .b3-list-item__text { box-shadow: 0 1px 0 0 rgb(73 126 128 / 40%); } */
代码块
/* ----代码块相关样式---- */ /* 设置代码块背景色为浅色 */ .b3-typography div.hljs, .protyle-wysiwyg div.hljs { background-color: #ffffff; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } /* 为代码块设置阴影和圆角 */ .b3-typography .code-block, .protyle-wysiwyg .code-block{ box-shadow: 0px 0px 6px 1px #c6979772; border-radius: 5px; } /* 代码块左边部分样式,设置统一圆角以让代码块整体阴影能正常显示 */ .protyle-linenumber__rows{ border-right: 1px solid #e3bfc5; border-top-left-radius: 5px; border-bottom-left-radius: 5px; box-sizing:border-box; }
文字下划线
.protyle-wysiwyg span[data-type~=u] { border-bottom: unset; text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: #D61A1A; /* 波浪线的颜色 */ text-decoration-skip-ink: none; }
引述快
/* 让引述块背景色不那么刺眼 */ /* 修改引述块默认底色 */ /* 提高上下边距以防止多个引述块竖排的时候没有间隙的问题 */ .b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq{ margin: 8px 0; border-radius: 8px; /* 增加或修改了这个属性,让边框变圆润,数值越大越圆,这里设置为8px,你可以根据喜好调整 */ border-width: 0px; /* border-style: dashed; */ border-color: transparent; box-shadow: 0px 0px 2px 1px; color: #41454c; background-color: white; } /* 内边框线 */ .bq::after, blockquote::after{ content: ""; height: calc(100% - 8px); width: calc(100% - 8px); background-color: #ff000000; display: block; top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; border-color: rgba(128, 128, 128, 0.459); border-width: 1px; border-style: solid; pointer-events: none; border-radius: 6px; /* 这里也可以添加内边框线的圆角,同样可调整数值,这里设置为6px */ } .bq, blockquote{ position:relative } .bq .li>.protyle-action{ color: #5c6b86f0 !important; } .bq .li>.protyle-action{ color: #5c6b86f0 !important; } .b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq{ padding: 8px; }
边框
body:not(.body--mobile,.body--window) #layouts { background-color: rgb(249, 238, 237); }
标题
.protyle-title__input{ background: transparent; border-bottom: 2px solid #e3bbc3; }
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于