-
思源笔记
25342 引用 • 104655 回帖 • 1 关注
思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。
融合块、大纲和双向链接,重构你的思维。
-
Q&A
9685 引用 • 44065 回帖 • 91 关注
提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。
相关帖子
-
Imuvux • • 1付费者
可以用 Savor 主题的子弹线样式(个人调整了非列表块顶层时的显示问题、非 Savor 主题激活节点显示)。
css 代码:
.en_item_bullet_line:not(.protyle-wysiwyg--select)::after { content: ''; display: block; box-sizing: border-box; border-left: 2px solid var(--b3-theme-primary); border-bottom: 2px solid var(--b3-theme-primary); border-bottom-left-radius: 8px; position: absolute; left: -18px; } [data-subtype="u"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 32px; height: calc(var(--en-bullet-line-height) - 1px); top: calc(var(--en-bullet-line-height) * -1 + 20px); } [data-subtype="o"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 24px; height: calc(var(--en-bullet-line-height) - 8px); top: calc(var(--en-bullet-line-height) * -1 + 25px); } [data-subtype="t"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 30px; height: calc(var(--en-bullet-line-height) - 4px); top: calc(var(--en-bullet-line-height) * -1 + 21px); } /* 激活状态样式 */ [data-subtype="u"] .en_item_bullet_actived>.protyle-action, [data-subtype="u"] .en_item_bullet_actived>.protyle-action::before, [data-subtype="u"] .en_item_bullet_actived>.protyle-action::after { color: var(--b3-theme-primary) !important; } [data-subtype="o"] .en_item_bullet_actived>.protyle-action::after { background-color: var(--b3-theme-primary); } [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task, [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task::before, [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task::after { color: var(--b3-theme-primary) !important; }
js 代码:
allListItemNode = [] document.addEventListener('selectionchange', () => { const selection = window.getSelection() if (!selection.rangeCount) { return } const range = selection?.getRangeAt(0) const startNode = range?.startContainer let currentNode = startNode allListItemNode.forEach((node) => { node.classList.remove('en_item_bullet_actived') node.classList.remove('en_item_bullet_line') }) allListItemNode = [] while (currentNode) { if (currentNode?.dataset?.type === 'NodeListItem') { allListItemNode.push(currentNode) } currentNode = currentNode.parentElement } for (let i = 0; i < allListItemNode.length - 1; i++) { const currentNode = allListItemNode[i] const currentRect = currentNode.getBoundingClientRect() const nextNode = allListItemNode[i + 1] const nextRect = nextNode.getBoundingClientRect() const height = currentRect.top - nextRect.top currentNode.style.setProperty('--en-bullet-line-height', `${height}px`) currentNode.classList.add('en_item_bullet_line') } allListItemNode.forEach((node) => { node.classList.add('en_item_bullet_actived') }) })
-
-
-
可以用 Savor 主题的子弹线样式(个人调整了非列表块顶层时的显示问题、非 Savor 主题激活节点显示)。
css 代码:
.en_item_bullet_line:not(.protyle-wysiwyg--select)::after { content: ''; display: block; box-sizing: border-box; border-left: 2px solid var(--b3-theme-primary); border-bottom: 2px solid var(--b3-theme-primary); border-bottom-left-radius: 8px; position: absolute; left: -18px; } [data-subtype="u"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 32px; height: calc(var(--en-bullet-line-height) - 1px); top: calc(var(--en-bullet-line-height) * -1 + 20px); } [data-subtype="o"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 24px; height: calc(var(--en-bullet-line-height) - 8px); top: calc(var(--en-bullet-line-height) * -1 + 25px); } [data-subtype="t"] .en_item_bullet_line:not(.protyle-wysiwyg--select)::after { width: 30px; height: calc(var(--en-bullet-line-height) - 4px); top: calc(var(--en-bullet-line-height) * -1 + 21px); } /* 激活状态样式 */ [data-subtype="u"] .en_item_bullet_actived>.protyle-action, [data-subtype="u"] .en_item_bullet_actived>.protyle-action::before, [data-subtype="u"] .en_item_bullet_actived>.protyle-action::after { color: var(--b3-theme-primary) !important; } [data-subtype="o"] .en_item_bullet_actived>.protyle-action::after { background-color: var(--b3-theme-primary); } [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task, [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task::before, [data-subtype="t"] .en_item_bullet_actived>.protyle-action--task::after { color: var(--b3-theme-primary) !important; }
js 代码:
allListItemNode = [] document.addEventListener('selectionchange', () => { const selection = window.getSelection() if (!selection.rangeCount) { return } const range = selection?.getRangeAt(0) const startNode = range?.startContainer let currentNode = startNode allListItemNode.forEach((node) => { node.classList.remove('en_item_bullet_actived') node.classList.remove('en_item_bullet_line') }) allListItemNode = [] while (currentNode) { if (currentNode?.dataset?.type === 'NodeListItem') { allListItemNode.push(currentNode) } currentNode = currentNode.parentElement } for (let i = 0; i < allListItemNode.length - 1; i++) { const currentNode = allListItemNode[i] const currentRect = currentNode.getBoundingClientRect() const nextNode = allListItemNode[i + 1] const nextRect = nextNode.getBoundingClientRect() const height = currentRect.top - nextRect.top currentNode.style.setProperty('--en-bullet-line-height', `${height}px`) currentNode.classList.add('en_item_bullet_line') } allListItemNode.forEach((node) => { node.classList.add('en_item_bullet_actived') }) })
4 回复1 引用1 操作Imuvux 在 2025-03-26 01:08:42 更新了该回帖这个是 OK 的,感谢分享!veryzhh • -
-
JeffreyChen • • 2 评论
从 Savor 切换到其他主题,子弹线代码是有效的
看起来像是 Savor 的 JS 没卸载干净,所以才有效
1 操作JeffreyChen 在 2025-03-09 15:18:30 更新了该回帖