登录 注册

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

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

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

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

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

  • 思源笔记

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

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

    28444 引用 • 119764 回帖
2 引用
[css] 分享默认主题下自用的一些代码片段 • Imuvux
思源笔记列表使用指南 • Imuvux
青岛 位置
2 引用
5 回帖
3
885 124 61 375 1 23 20 279

相关帖子

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

欢迎来到这里！

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

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

    @shuoying 大佬来看看

  • 其他回帖
  • 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-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 •
  • 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 •
  • 查看全部回帖
abc1206
青岛
回帖
101
 帖子
34
 积分
38389

近期热议

推荐标签 标签

  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 444 关注
  • gRpc
    11 引用 • 9 回帖 • 116 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 770 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 633 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 517 关注
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • Kubernetes

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

    119 引用 • 54 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 51 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    105 引用 • 908 回帖 • 1 关注
  • RYMCU

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

    4 引用 • 6 回帖 • 56 关注
  • Google

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

    51 引用 • 200 回帖 • 2 关注
  • 运维

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

    151 引用 • 257 回帖 • 1 关注
  • Openfire

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

    6 引用 • 7 回帖 • 133 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 384 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言，在 20 世纪 90 年代中期由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）设计并开发。在 Ruby 社区，松本也被称为马茨（Matz）。

    7 引用 • 31 回帖 • 299 关注
  • CAP

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

    12 引用 • 5 回帖 • 660 关注
  • Postman

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

    4 引用 • 3 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 430 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 3 关注
  • 机器学习

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

    78 引用 • 37 回帖
  • ngrok

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

    7 引用 • 63 回帖 • 668 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 376 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    176 引用 • 544 回帖
  • 工具

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

    308 引用 • 773 回帖
  • 小薇

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

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

    35 引用 • 468 回帖 • 768 关注
  • Vditor

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

    386 引用 • 1892 回帖 • 1 关注

最新标签