登录 注册

[css] 更改有序、无列表的颜色、加粗 -- 来源 Savor 主题

特别鸣谢 wilsons 大佬。

不足：

  1. 不同的主题可能会重叠，影响美观。这个 css 在 Savor 主题上是没问题的。
  2. 聚焦后，列表样式没有修改。
  3. 移动端会有缩进指示线和列表标对不齐的情况。并且由于一些原因可能导致移动端缩进后列表下沉。
  4. 列表子弹线的颜色会遮挡无序列表的颜色，见图二。

完美主义者慎用。代码由 AI 生成，目前因为蓝色和列表子弹线的颜色有点冲突，又改一下。

image.png

PixPin20250109155239.png

代码：

.list[data-subtype="o"] {
    counter-reset: o1 0 o2 0 o3 0;
}

[data-node-index] > [data-subtype="o"][data-type="NodeListItem"]::after {
    content: attr(data-marker) !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
    font-weight: bold !important; /* 加粗 */
    position: absolute;
    left: 9px;
    top: 3px;
    pointer-events: none;
}

.protyle-wysiwyg .li[data-subtype="o"] > .protyle-action,
.protyle-wysiwyg .li[data-subtype="o"] > .protyle-action:hover {
    color: transparent !important;
}

.protyle-wysiwyg .li[data-subtype="o"] > .protyle-action::after {
    color: #db4d52 !important; /* 修改为红橙色调 */
    font-weight: bold !important; /* 加粗 */
    padding: 3px 2px;
    width: 24px;
    display: flex;
    justify-content: center;
    position: absolute;
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: counter(o2, lower-latin) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: counter(o3, lower-roman) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .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) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

/* 继续为更深的层级添加相同的模式... */

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: counter(o2, lower-latin) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: counter(o3, lower-roman) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .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) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

/* ...继续为更深的层级添加相同的模式 */

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: counter(o2, lower-latin) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: counter(o3, lower-roman) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .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) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

/* 最深层级 */
.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: counter(o2, lower-latin) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}

.protyle-wysiwyg .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: counter(o3, lower-roman) "." !important;
    color: #db4d52 !important; /* 修改为红橙色调 */
}



[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;
    font-family: Arial;
    content: "•";
    position: absolute;
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "◦";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "▪";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "•";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[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: #db4d52; /* 修改颜色为红橙色调 */
}

[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: #db4d52; /* 修改颜色为红橙色调 */
}

[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: #db4d52; /* 修改颜色为红橙色调 */
}

[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: #db4d52; /* 修改颜色为红橙色调 */
}

[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: #db4d52; /* 修改颜色为红橙色调 */
}

[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"] .li[data-subtype="u"] > .protyle-action::before {
    content: "•";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[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"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "◦";
    color: #db4d52; /* 修改颜色为红橙色调 */
}

[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"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "▪";
    color: #db4d52; /* 修改颜色为红橙色调 */
}
​
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    24904 引用 • 102551 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    133 引用 • 900 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    9464 引用 • 43140 回帖 • 108 关注
11 操作
Afterglow 在 2025-01-09 15:54:21 更新了该帖
Afterglow 在 2025-01-03 11:40:40 更新了该帖
Afterglow 在 2025-01-03 11:38:23 更新了该帖
Afterglow 在 2024-12-22 23:27:05 更新了该帖 JeffreyChen 在 2024-12-21 23:59:00 更新了该帖 Afterglow 在 2024-12-19 20:21:52 更新了该帖 Afterglow 在 2024-12-09 07:52:57 更新了该帖 Afterglow 在 2024-12-08 23:59:13 更新了该帖 JeffreyChen 在 2024-10-12 01:21:18 更新了该帖 Afterglow 在 2024-10-11 20:52:30 更新了该帖 Afterglow 在 2024-10-11 20:52:09 更新了该帖
11 操作
5 回帖
3
505 327 88 2 88

相关帖子

被采纳的回答
  • wilsons •
    付费者 捐赠者

    加上这个试试

    .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; /* 加粗 */
}
​
5 回帖
[css] 更改有序、无列表的颜色、加粗 -- 来源 Savor 主题

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons •
    付费者 捐赠者

    加上这个试试

    .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; /* 加粗 */
}
​
    1 回复
  • Afterglow • via SCMR-W09
    订阅者 恶龙 作者

    谢谢大佬！😋 🎉

  • Mayrain •

    大佬，这个代码似乎现在不能用在最新版？我试了一下，有序列表没变化啊

    image.png

    2 回复
  • Afterglow • via SCMR-W09
    订阅者 恶龙 作者

    我这边 savor 主题还是可以使用的哦。

  • Afterglow • via SCMR-W09
    订阅者 恶龙 作者

    用默认主题是没有问题的。有的主题确实存在不兼容的情况，例如 Asri ，可能你需要去看看对应主题的代码了。

    另，其实不是大佬，hhh。

Afterglow
回帖
306
 帖子
97
 积分
1655

近期热议

推荐标签 标签

  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 4 关注
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1395 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    28 引用 • 226 回帖 • 136 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 532 关注
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 318 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 256 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    133 引用 • 1124 回帖 • 120 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 3 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    28 引用 • 197 回帖 • 28 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 1 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”，乌云众测平台认证的“安全云”，为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 572 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 47 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 233 回帖 • 2 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 83 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 2 关注
  • Follow
    4 引用 • 12 回帖 • 10 关注
  • 叶归
    5 引用 • 16 回帖 • 11 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3455 回帖 • 164 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    297 引用 • 755 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 392 关注

最新标签