登录 注册

[Dark+ 主题] 折叠列表能否突出显示效果？

本贴最后更新于 968 天前，其中的信息可能已经时移世异

Dark+ 主题按默认主题的做法，折叠列表的小点多出一圈光晕效果，在暗黑模式下不显眼。Dark.png

Savor 主题作了改进，折叠列表后有个省略号图示，一目了然。Savor.png

建议 Dark+ 主题是否参考 Savor 主题的做法，对折叠列表也设计一个更加醒目的标识。

  • 思源笔记

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

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

    26207 引用 • 108886 回帖 • 3 关注
2 引用
[css] 分享默认主题下自用的一些代码片段 • Imuvux
思源笔记列表使用指南 • Imuvux
青岛 位置
2 引用
5 回帖
3
825 121 61 361 1 16 17 246

相关帖子

5 回帖
[Dark+ 主题] 折叠列表能否突出显示效果？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Diamond •
    订阅者 恶龙

    @shuoying 大佬来看看

  • shuoying • • 1 • 2 评论
    订阅者 支持者 捐赠者 恶龙

    用伪元素实现的话就和和辅助线样式冲突啦

    建议直接更改一下折叠后列表标志的颜色

    .protyle-wysiwyg [data-node-id].li[fold="1"]>.protyle-action:after {
    background-color: var(--b3-list-hover);
}
​
    试着将代码粘贴到 < 工作空间(workspace)>/data/widgets/custom.css，折叠后列表标志颜色没有变化。
    abc1206 •
    将“background-color: var(--b3-list-hover);”设为“background-color: yellow;”，有效果了，再尝试不同配色效果。谢谢大佬！
    abc1206 •
  • drawone • • 2 • 4 评论
    付费者

    同主题，我给改成这样了：

    image.png

    代码：

     /*列表折叠图标*/
 .protyle-wysiwyg [data-node-id].li[fold="1"]>.protyle-action:after{
    border: 1px dashed var(--custom-color-3-0);
    filter: drop-shadow(0 0 4px var(--custom-components-deep));
 }
 .protyle-wysiwyg [data-node-id][data-subtype=o].li > .protyle-action::after{
    height: 1.1em;
    width: 32px;
    margin: -10px 0 0 -15px;
 }
 .protyle-wysiwyg [data-node-id].li>.protyle-action svg{
    margin-left: 10%;
    margin-top: 8%;
 }
​
    好看, 我抱走了(^o^)/~
    shuoying •
    使用方法：将代码粘贴到 < 工作空间(workspace)>/data/widgets/custom.css
    abc1206 •
    在暗色下醒目了些，谢谢大佬！能否再给外圈虚线着色，这样效果更好。
    abc1206 •
    @abc1206 见回复。
    drawone •
  • drawone • • 1 • 1 评论
    付费者

    image.png

    /*列表折叠图标*/
 .protyle-wysiwyg [data-node-id].li[fold="1"]>.protyle-action:after{
    border: 1px dashed var(--b3-font-color4);
    filter: drop-shadow(0 0 4px var(--custom-components-deep));
 }
 .protyle-wysiwyg [data-node-id][data-subtype=o].li > .protyle-action::after{
    height: 1.1em;
    width: 32px;
    margin: -11px 0 0 -15px;
 }
 .protyle-wysiwyg [data-node-id].li>.protyle-action svg{
    margin-left: 10%;
    margin-top: 8%;
 }
 .protyle-wysiwyg [data-node-id][fold="1"].li>.protyle-action svg{
     color:var(--b3-font-color4);
 }
​
    这版的暗色醒目效果很好，感谢大佬！
    abc1206 •
  • drawone • • 1 • 1 评论
    付费者

    其实我更喜欢另一版，半弧形虚线类似变形的省略号，又像一只虚闭着的眼睛：

    image.png

    .protyle-wysiwyg [data-node-id].li[fold="1"]>.protyle-action:after{
    border-bottom: 1px dashed var(--b3-font-color4);
    filter: drop-shadow(0 0 4px var(--custom-components-deep));
    background:none;
 }
 .protyle-wysiwyg [data-node-id][data-subtype=o].li > .protyle-action::after{
    height: 1.1em;
    width: 32px;
    margin: -11px 0 0 -15px;
 }
 .protyle-wysiwyg [data-node-id][fold="1"].li>.protyle-action svg{
    color:var(--b3-font-color4);
}
​
    简约风格也好。 全圈更醒目些，看用户习惯了。
    abc1206 •
abc1206
青岛
回帖
101
 帖子
33
 积分
36235

近期热议

推荐标签 标签

  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 178 关注
  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 655 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 4 关注
  • 又拍云

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

    20 引用 • 37 回帖 • 577 关注
  • OneNote
    1 引用 • 3 回帖
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 70 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 38 关注
  • OkHttp

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

    16 引用 • 6 回帖 • 90 关注
  • Sandbox

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

    440 引用 • 1238 回帖 • 592 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 61 关注
  • Shell

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

    125 引用 • 74 回帖
  • Oracle

    Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 344 关注
  • 工具

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

    300 引用 • 768 回帖
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题，项目仓库：https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖 • 1 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 755 回帖
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用
  • DNSPod

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

    6 引用 • 26 回帖 • 536 关注
  • AWS
    11 引用 • 28 回帖 • 8 关注
  • OneDrive
    2 引用 • 6 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    5 引用 • 16 回帖
  • Postman

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

    4 引用 • 3 回帖 • 1 关注
  • Solo

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

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

    1444 引用 • 10083 回帖 • 503 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 83 关注
  • 外包

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

    26 引用 • 233 回帖 • 5 关注
  • Electron

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

    15 引用 • 136 回帖 • 1 关注
  • Sym

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

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

    524 引用 • 4601 回帖 • 709 关注

最新标签