登录 注册

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

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

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

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

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

  • 思源笔记

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

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

    23003 引用 • 92516 回帖
1 引用
[css] 分享默认主题下自用的一些代码片段 • Imuvux
青岛 位置
1 引用
5 回帖
3
583 113 53 213 1 14 16 171

相关帖子

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
青岛
回帖
100
 帖子
33
 积分
32475

近期热议

推荐标签 标签

  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Node.js

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

    139 引用 • 269 回帖 • 28 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖
  • Shell

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

    123 引用 • 74 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 1 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 5 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 653 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    149 引用 • 257 回帖
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖 • 1 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • Sublime

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

    10 引用 • 5 回帖
  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 2 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 1 关注
  • GitBook

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

    3 引用 • 8 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 159 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 335 关注
  • Kotlin

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

    19 引用 • 33 回帖 • 63 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3578 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    354 引用 • 1823 回帖 • 1 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    16 引用 • 130 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3190 引用 • 8214 回帖 • 1 关注

最新标签