登录 注册

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

本贴最后更新于 347 天前，其中的信息可能已经时过境迁

特别鸣谢 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; /* 修改颜色为红橙色调 */
}
  • 思源笔记

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

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

    28446 引用 • 119789 回帖
  • 代码片段

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

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

    285 引用 • 1988 回帖
  • Q&A

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

    11155 引用 • 50666 回帖 • 52 关注
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
734 373 11 160 5 1 184

相关帖子

被采纳的回答
  • 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 •
    订阅者 恶龙 作者

    谢谢大佬！😋 🎉

  • Mayrain •

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

    image.png

    2 回复
  • Afterglow •
    订阅者 恶龙 作者

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

  • Afterglow •
    订阅者 恶龙 作者

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

    另，其实不是大佬，hhh。

Afterglow
回帖
330
 帖子
98
 积分
603

近期热议

推荐标签 标签

  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    248 引用 • 1342 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 413 关注
  • 倾城之链
    23 引用 • 66 回帖 • 189 关注
  • BND

    BND（Baidu Netdisk Downloader）是一款图形界面的百度网盘不限速下载器，支持 Windows、Linux 和 Mac，详细介绍请看这里。

    107 引用 • 1281 回帖 • 36 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 669 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 11 关注
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    12 引用 • 5 回帖 • 660 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    43 引用 • 130 回帖 • 259 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 563 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 847 关注
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    269 引用 • 666 回帖 • 1 关注
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 458 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 60 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    203 引用 • 4025 回帖
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 578 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

    27 引用 • 7 回帖 • 92 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    126 引用 • 83 回帖 • 1 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 8 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 98 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 5 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 190 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    173 引用 • 1559 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 664 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 1 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 80 回帖 • 1 关注
  • sts
    2 引用 • 2 回帖 • 260 关注
  • GitBook

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

    3 引用 • 8 回帖

最新标签