总需求：
有点复杂，以有序列表为例：
1. 折叠时，去除数字方框阴影
另：无序列表的折叠阴影不用去除
2. 只显示“‣”
3. 鼠标悬浮“‣”时，去除方框阴影、“折叠/展开”字样
4. 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”）
相关帖子
被采纳的回答
-
wilsons • • 1付费者 捐赠者
css 代码如下
/* 有序列表，折叠时，去除数字方框阴影; 无序列表的折叠阴影不用去除 */ .protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{ background-color: transparent!important; } /* 只显示“‣” */ .protyle-gutters button[data-type="NodeList"] svg, .protyle-gutters button[data-type="NodeListItem"] svg { display:none; } /* 鼠标悬浮“‣”时去除方框引用 */ .protyle-gutters button:hover svg{ background-color: transparent; } /* 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”） */ .protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){ background-color: transparent; border:none; } /* 鼠标悬浮“‣”时，去除“折叠/展开”字样，css无法实现，见下面的js代码 */鼠标悬浮“‣”时，去除“折叠/展开”字样，css 无法实现，js 代码如下
// 鼠标悬浮“‣”时，去除“折叠/展开”字样 (()=>{ whenElementExist(".layout__center").then((element)=>{ element.addEventListener('mouseover', async (e)=>{ if(e.target.closest('button[aria-label="折叠/展开"]')){ const tooltip = await whenElementExist("#tooltip"); tooltip.remove(); } }); }); function whenElementExist(selector) { return new Promise(resolve => { const checkForElement = () => { let element = null; if (typeof selector === 'function') { element = selector(); } else { element = document.querySelector(selector); } if (element) { resolve(element); } else { requestAnimationFrame(checkForElement); } }; checkForElement(); }); } })();另外，你需求里提到的一级标题，我想你本意应该不是仅针对一级标题的样式吧，所以这里的样式和 js 会应用到 h1-h6 所有标题。
请输入回帖内容
...
- 其他回帖
-
抱歉，之前的回复有问题，并不是因为省略号超出折叠元素范围导致的，而是因为折叠时标题前面的圆形图标和省略号是选择符是同一个元素，且圆形图标的优先级更高，覆盖了省略号导致的。
所以，我现在在折叠模式下，用标题后面的文字元素再添加个样式来模拟标题元素的省略号，这样就弥补了折叠时标题省略号丢失问题。
代码如下，添加到思源 css 代码片段中即可。
.protyle-wysiwyg [data-node-id][data-type="NodeHeading"][fold="1"] > [contenteditable="true"]::before { position: absolute; top: -0.8em; color: #55555a4d; } .protyle-wysiwyg [data-node-id][fold="1"].h1 > [contenteditable="true"]::before { content: "."; } .protyle-wysiwyg [data-node-id][fold="1"].h2 > [contenteditable="true"]::before { content: ".."; } .protyle-wysiwyg [data-node-id][fold="1"].h3 > [contenteditable="true"]::before { content: "..."; } .protyle-wysiwyg [data-node-id][fold="1"].h4 > [contenteditable="true"]::before { content: "...."; } .protyle-wysiwyg [data-node-id][fold="1"].h5 > [contenteditable="true"]::before { content: "....."; } .protyle-wysiwyg [data-node-id][fold="1"].h6 > [contenteditable="true"]::before { content: "......"; }感恩！ -
-
css 代码如下
/* 有序列表，折叠时，去除数字方框阴影; 无序列表的折叠阴影不用去除 */ .protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{ background-color: transparent!important; } /* 只显示“‣” */ .protyle-gutters button[data-type="NodeList"] svg, .protyle-gutters button[data-type="NodeListItem"] svg { display:none; } /* 鼠标悬浮“‣”时去除方框引用 */ .protyle-gutters button:hover svg{ background-color: transparent; } /* 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”） */ .protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){ background-color: transparent; border:none; } /* 鼠标悬浮“‣”时，去除“折叠/展开”字样，css无法实现，见下面的js代码 */鼠标悬浮“‣”时，去除“折叠/展开”字样，css 无法实现，js 代码如下
// 鼠标悬浮“‣”时，去除“折叠/展开”字样 (()=>{ whenElementExist(".layout__center").then((element)=>{ element.addEventListener('mouseover', async (e)=>{ if(e.target.closest('button[aria-label="折叠/展开"]')){ const tooltip = await whenElementExist("#tooltip"); tooltip.remove(); } }); }); function whenElementExist(selector) { return new Promise(resolve => { const checkForElement = () => { let element = null; if (typeof selector === 'function') { element = selector(); } else { element = document.querySelector(selector); } if (element) { resolve(element); } else { requestAnimationFrame(checkForElement); } }; checkForElement(); }); } })();另外，你需求里提到的一级标题，我想你本意应该不是仅针对一级标题的样式吧，所以这里的样式和 js 会应用到 h1-h6 所有标题。
2 回复 - 查看全部回帖