登录 注册

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

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

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

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

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

    27830 引用 • 116707 回帖
  • 代码片段

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

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

    269 引用 • 1943 回帖
  • Q&A

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

    10849 引用 • 49324 回帖 • 68 关注
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
719 371 11 157 3 177

相关帖子

被采纳的回答
  • 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
回帖
328
 帖子
98
 积分
3301

近期热议

推荐标签 标签

  • Notion

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

    10 引用 • 80 回帖
  • 架构

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

    145 引用 • 442 回帖
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖 • 2 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    99 引用 • 367 回帖
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 675 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖 • 3 关注
  • 千千插件

    千千块（自定义块 css 和 js）
    可以用 ai 提示词来无限创作思源笔记

    31 引用 • 50 回帖
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 195 关注
  • 招聘

    哪里都缺人，哪里都不缺人。

    188 引用 • 1057 回帖 • 1 关注
  • 外包

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

    26 引用 • 234 回帖
  • Maven

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

    188 引用 • 319 回帖 • 233 关注
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    454 引用 • 1241 回帖 • 612 关注
  • PostgreSQL

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

    23 引用 • 22 回帖 • 1 关注
  • Webswing

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

    1 引用 • 15 回帖 • 658 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    337 引用 • 324 回帖 • 1 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 4 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖 • 2 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    51 引用 • 200 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4602 回帖 • 721 关注
  • OneNote
    2 引用 • 5 回帖
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 50 关注
  • Visio
    1 引用 • 2 回帖 • 6 关注
  • Lute

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

    29 引用 • 202 回帖 • 40 关注
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 364 关注

最新标签