本人喜欢使用大纲来记笔记,通过观看字体的大小很难判断几级标题,于是只能通过大纲来进行观看标题级别,但是本人具有弱色盲,大纲的标题级别看的不是很清楚,希望各位大佬能不能出手将这个数字调为黑色,加粗,在不影响没感的情况下尽量大一点
相关帖子
-
Muu • • 1付费者
/* 显示标题 */ .sy__outline .b3-list-item[title] { display: inherit; } /* 字体 大小 清晰度 */ .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h1] .b3-list-item__text::before, .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h2] .b3-list-item__text::before, .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h3] .b3-list-item__text::before, .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h4] .b3-list-item__text::before, .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h5] .b3-list-item__text::before, .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h6] .b3-list-item__text::before { font-size: 15px !important; /* 更改显示字体大小 */ opacity: 1; font-family: 'yahei consolas hybrid', 'ibm plex mono'; /* 更改显示字体 */ margin-right: 6px; /* 距离标题文字的距离 */ } /* 屏蔽原始的图标显示 */ .sy__outline .b3-list-item .b3-list-item__graphic.popover__block { display: none; } /* 更改 content 可以显示不同的前缀 */ .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h1] .b3-list-item__text::before { content: "⓵"; color: red; } .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h2] .b3-list-item__text::before { content: "𝟮"; color: #0087ff; } .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h3] .b3-list-item__text::before { content: "𝟯"; color: #8694ff; } .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h4] .b3-list-item__text::before { content: "𝟒"; color: #ffa54b; } .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h5] .b3-list-item__text::before { content: "𝟓"; color: #9cfd57; } .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h6] .b3-list-item__text::before { content: "⒍"; color: #e7fd1a; }
效果图
默认主题
-
不知这种可是你想要的效果,我这里是默认主题,具体细节可根据自己的主题进行调整
/* 大纲颜色,亮色主题 */ html[data-theme-mode="light"] { .file-tree.sy__outline div.b3-list-item[title] .b3-list-item__text, .file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"] .b3-list-item__text{ color: black; /* 颜色请根据自己的需要修改 */ } } /* 大纲颜色,暗色主题 */ html[data-theme-mode="dark"] { .file-tree.sy__outline div.b3-list-item[title] .b3-list-item__text, .file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"] .b3-list-item__text{ color: white; /* 颜色请根据自己的需要修改 */ } } /* 大纲标题 */ .file-tree.sy__outline div.b3-list-item[title] .b3-list-item__text{ font-size: 2em; font-weight: bold; } /* 大纲H1 */ .file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h1"] { font-size: 1.75em; font-weight: 600; padding: .3em 4px; } /* 大纲H2 */ .file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h2"] { font-size: 1.55em; font-weight: 600; padding: .3em 4px; } /* 大纲H3 */ .file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h3"] { font-size: 1.38em; font-weight: 600; padding: 4px; } /* 大纲H4 */ .file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h4"] { font-size: 1.25em; font-weight: 600; padding: 4px; } /* 大纲H5 */ .file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h5"] { font-size: 1.13em; font-weight: 600; padding: 4px; } /* 大纲H6 */ .file-tree.sy__outline li.b3-list-item[data-type="NodeHeading"][data-subtype="h6"] { font-size: 1em; font-weight: 600; padding: 4px; }
1 操作wilsons 在 2024-09-16 04:43:49 更新了该回帖 - 其他回帖
-
根据代码改了一下,当鼠标悬浮在大纲时数字才会显示,代码如下:
/* 屏蔽原始的图标显示 */ .sy__outline .b3-list-item .b3-list-item__graphic.popover__block { display: none; } .sy__outline ul.b3-list.b3-list--background { /* 默认隐藏内容 */ [data-subtype*="h"] > span:first-child::after { visibility: hidden; position: relative; left: 4px; color: black; font-weight: 100px; border-radius: 3px; opacity: 0; font-size: 18px; pointer-events: none; font-family: "Segoe UI"; } /* 鼠标悬停时显示内容 */ [data-subtype*="h"]:hover > span:first-child::after { visibility: visible; opacity: 1; } svg.b3-list-item__graphic { margin-left: -19px; margin-right: 4px; color: black; width: 17px!important; border-radius: 3px; opacity: 0.2; } /* 各个标题的处理方式 */ [data-subtype="h1"] > span:first-child::after { content: "𝟭"; } [data-subtype="h2"] > span:first-child::after { content: "𝟮"; } [data-subtype="h3"] > span:first-child::after { content: "𝟯"; } [data-subtype="h4"] > span:first-child::after { content: "𝟰"; } [data-subtype="h5"] > span:first-child::after { content: "𝟱"; } [data-subtype="h6"] > span:first-child::after { content: "𝟲"; } /* 鼠标悬停时改变图标背景色 */ [data-subtype="h1"] + svg.b3-list-item__graphic:hover { background-color: var(--h1-list-graphic); } [data-subtype="h2"] + svg.b3-list-item__graphic:hover { background-color: var(--h2-list-graphic); } [data-subtype="h3"] + svg.b3-list-item__graphic:hover { background-color: var(--h3-list-graphic); } [data-subtype="h4"] + svg.b3-list-item__graphic:hover { background-color: var(--h4-list-graphic); } [data-subtype="h5"] + svg.b3-list-item__graphic:hover { background-color: var(--h5-list-graphic); } [data-subtype="h6"] + svg.b3-list-item__graphic:hover { background-color: var(--h6-list-graphic); } }
-
/* 显示标题 */ .sy__outline .b3-list-item[title] { display: inherit; } /* 字体 大小 清晰度 */ .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h1] .b3-list-item__text::before, .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h2] .b3-list-item__text::before, .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h3] .b3-list-item__text::before, .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h4] .b3-list-item__text::before, .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h5] .b3-list-item__text::before, .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h6] .b3-list-item__text::before { font-size: 15px !important; /* 更改显示字体大小 */ opacity: 1; font-family: 'yahei consolas hybrid', 'ibm plex mono'; /* 更改显示字体 */ margin-right: 6px; /* 距离标题文字的距离 */ } /* 屏蔽原始的图标显示 */ .sy__outline .b3-list-item .b3-list-item__graphic.popover__block { display: none; } /* 更改 content 可以显示不同的前缀 */ .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h1] .b3-list-item__text::before { content: "⓵"; color: red; } .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h2] .b3-list-item__text::before { content: "𝟮"; color: #0087ff; } .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h3] .b3-list-item__text::before { content: "𝟯"; color: #8694ff; } .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h4] .b3-list-item__text::before { content: "𝟒"; color: #ffa54b; } .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h5] .b3-list-item__text::before { content: "𝟓"; color: #9cfd57; } .sy__outline .b3-list-item[data-type=NodeHeading][data-subtype=h6] .b3-list-item__text::before { content: "⒍"; color: #e7fd1a; }
效果图
默认主题
1 回复 - 查看全部回帖