登录 注册

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

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

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

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

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

  • 思源笔记

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

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

    26411 引用 • 109846 回帖
2 引用
[css] 分享默认主题下自用的一些代码片段 • Imuvux
思源笔记列表使用指南 • Imuvux
青岛 位置
2 引用
5 回帖
3
846 123 61 369 1 18 17 255

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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 •
  • 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 • • 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
 积分
36503

近期热议

推荐标签 标签

  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    186 引用 • 1021 回帖 • 1 关注
  • 导航

    各种网址链接、内容导航。

    45 引用 • 177 回帖 • 1 关注
  • CAP

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

    12 引用 • 5 回帖 • 633 关注
  • 分享

    有什么新发现就分享给大家吧！

    248 引用 • 1794 回帖
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • OneDrive
    2 引用 • 1 关注
  • 服务器

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

    125 引用 • 585 回帖 • 1 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 506 关注
  • Firefox

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

    7 引用 • 30 回帖 • 373 关注
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 18 关注
  • 叶归
    13 引用 • 59 回帖 • 21 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 2 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 2 关注
  • Postman

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

    4 引用 • 3 回帖 • 1 关注
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1708 回帖
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • SVN

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

    29 引用 • 98 回帖 • 697 关注
  • 深度学习

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

    43 引用 • 44 回帖 • 1 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    59 引用 • 22 回帖 • 6 关注
  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    96 引用 • 155 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 683 关注
  • abitmean

    有点意思就行了

    • 36 关注
  • Google

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

    49 引用 • 192 回帖

最新标签