特别鸣谢 wilsons 大佬。
此代码只是在 Savor 基础上更改颜色,并且有序列表加粗。自用没问题哈。之前因为思源自己的问题导致移动端缩进后列表会下沉,现在思源已经修复了,故再次放上来。
代码:
/*有序列表标记更改为好看的蓝色*/
.protyle-wysiwyg [data-node-id].li[data-subtype="o"]>.protyle-action,
.protyle-wysiwyg [data-node-id].li[data-subtype="o"]>.protyle-action:hover{
color: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
.li[data-subtype="o"] .li[data-subtype="o"] .protyle-action--order {
color: transparent !important;
}
.li[data-subtype="o"] .li[data-subtype="o"] .protyle-action::after {
color: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
.list[data-subtype="o"] {
counter-reset: o1 0 o2 0 o3 0;
}
.li[data-subtype="o"]>.protyle-action::after {
padding: 3px 2px;
width: 24px;
display: flex;
justify-content: center;
color: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
.li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
counter-increment: o2;
content: counter(o2, lower-latin)".";
position: absolute;
color: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
counter-increment: o3;
content: counter(o3, lower-roman)".";
position: absolute;
color: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"]>.protyle-action::after {
counter-increment: o1;
content: counter(o1, decimal)".";
position: absolute;
color: #007BFF; /* 修改为好看的蓝色 */
font-weight: bold; /* 加粗 */
}
/* 继续添加类似的修改到其他选择器 */
/*无序列表标记更改为好看的蓝色*/
[data-subtype="u"]>.li[data-subtype="u"]>.protyle-action svg {
color: transparent;
}
[data-subtype="u"]>.li[data-subtype="u"]>.protyle-action::before {
font-size: 1.5em;
line-height: 1;
margin-bottom: 0px;
margin-left: 13px;
font-family: Arial;
content: "•";
color:#007BFF ; /* 修改颜色为蓝色 */
}
[data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before {
content: "◦";
color: #007BFF; /* 修改颜色为蓝色 */
}
[data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before {
content: "▪";
color: #007BFF; /* 修改颜色为蓝色 */
}
[data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before {
content: "•";
color: #007BFF; /* 修改颜色为蓝色 */
}
[data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before {
content: "◦";
color: #007BFF; /* 修改颜色为蓝色 */
}
[data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before {
content: "▪";
color: #007BFF; /* 修改颜色为蓝色 */
}
[data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before {
content: "•";
color: #007BFF; /* 修改颜色为蓝色 */
}
[data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before {
content: "◦";
color: #007BFF; /* 修改颜色为蓝色 */
}
[data-subtype="u"]>[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"]>.protyle-action::before {
content: "▪";
color: #007BFF; /* 修改颜色为蓝色 */
}