登录 注册

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

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

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

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

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

  • 思源笔记

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

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

    22012 引用 • 87776 回帖 • 2 关注
1 引用
分享默认主题下自用的一些代码片段 • Imuvux
青岛 位置
1 引用
5 回帖
3
550 106 53 194 1 11 16 167

相关帖子

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
 积分
31375

近期热议

推荐标签 标签

  • GitBook

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

    3 引用 • 8 回帖 • 4 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 383 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • 国际化

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

    8 引用 • 26 回帖
  • Jenkins

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

    53 引用 • 37 回帖
  • 数据库

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

    338 引用 • 705 回帖
  • RYMCU

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

    4 引用 • 6 回帖 • 53 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 533 回帖 • 778 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖
  • 程序员

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

    565 引用 • 3532 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 741 关注
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 127 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • WebComponents

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

    1 引用 • 2 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 659 关注
  • Firefox

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

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

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 2 关注
  • Gitea

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

    4 引用 • 16 回帖
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 123 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 3 关注
  • 正则表达式

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

    31 引用 • 94 回帖 • 1 关注
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 623 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 127 关注
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    124 引用 • 169 回帖
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 4 关注

最新标签