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

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

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

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

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

  • 思源笔记

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

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

    22335 引用 • 89367 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • @shuoying 大佬来看看

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

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

    .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

推荐标签 标签

  • Unity

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

    25 引用 • 7 回帖 • 174 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • HTML

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

    107 引用 • 295 回帖 • 1 关注
  • Android

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

    334 引用 • 323 回帖 • 1 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 52 关注
  • 996
    13 引用 • 200 回帖 • 6 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 95 关注
  • Log4j

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

    20 引用 • 18 回帖 • 31 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 384 关注
  • V2Ray
    1 引用 • 15 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 529 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 154 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 654 关注
  • DNSPod

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

    6 引用 • 26 回帖 • 510 关注
  • 微软

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

    8 引用 • 44 回帖
  • Firefox

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

    8 引用 • 30 回帖 • 407 关注
  • HBase

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

    17 引用 • 6 回帖 • 73 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 211 关注
  • Gitea

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

    4 引用 • 16 回帖 • 4 关注
  • DevOps

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

    47 引用 • 25 回帖
  • Solidity

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

    3 引用 • 18 回帖 • 399 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 680 关注
  • 架构

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

    142 引用 • 442 回帖
  • Vue.js

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

    266 引用 • 665 回帖 • 1 关注
  • Wide

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

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

    30 引用 • 218 回帖 • 629 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    567 引用 • 3532 回帖