闪卡样式的改进样式分享(个人认为)

本贴最后更新于 805 天前,其中的信息可能已经物是人非

不是建议,只是把我基于之前发的纯粹使用模板和属性制作的 admonition 提示条 - 链滴和借鉴了部分 logseq 的闪卡样式分享一下。感觉目前容器块内重复制卡的标识确实不怎么明确,所有做了一个更有标识度的样式。

我并不讨厌官方的样式,甚至默认日常就是用这个的,因为标识度的提高是靠对于正常内容的侵犯性换来的,在渐进阅读的时候太突兀了,感觉反而不如官方样式。

样式效果见下:

图片.png

在复习界面的话,右边的红条还在,阴影消失:

图片.png

----2023.2.23 14:36 更新

经过自己的实际使用,我觉得三种制卡块还是分开吧,感觉列表块的上下距离并不适用于段落和超级块。

效果见下:

图片.png

.protyle-wysiwyg .li[data-node-id][custom-riff-decks] { position: relative; display: block; border-left: 0.15em solid #ff6a6a; padding: 0.01em 0.2em !important; box-shadow: 0.1em 0.1em 0.2em #aaaaaa; background-image: none; } .protyle-wysiwyg .p[data-node-id][custom-riff-decks] { position: relative; display: block; border-left: 0.15em solid #00c853; padding: 0.1em 0.2em !important; box-shadow: 0.1em 0.1em 0.2em #aaaaaa; background-image: none; margin: 0em 0em 1em 0em; } .protyle-wysiwyg .sb[data-node-id][custom-riff-decks] { position: relative; border-left: 0.15em solid #7c4dff; padding: 0.01em 0.2em !important; box-shadow: 0.1em 0.1em 0.2em #aaaaaa; background-image: none; margin: 0em 0em 1em 0em; }

觉得不错留个言吧,起码让我知道有人在用。

  • 思源笔记

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

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

    25467 引用 • 105329 回帖
4 操作
zxhd86 在 2023-02-27 15:08:16 更新了该帖
zxhd86 在 2023-02-27 14:38:54 更新了该帖
zxhd86 在 2023-02-27 14:38:13 更新了该帖
zxhd86 在 2023-02-27 14:30:51 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • i1356

    不错的创意

  • i1356

    最后的这个代码怎么用呢

    1 回复
  • i1356

    感谢!

    会代码真好,一下子就解决难题了。

    1 回复
  • zxhd86 3 评论 via Ubuntu

    经过自己的实际使用,我觉得三种制卡块还是分开吧,感觉列表块的上下距离并不适用于段落和超级块

    赞,更有辨识度了。
    i1356
    @i1356 发现横向超级块的显示貌似不太对,更新修复了。
    zxhd86
    @zxhd86 好的
    i1356
  • Yylicon

    感谢,正好急用!

  • yunyunyun

    感谢!

  • 分享一下我修改之后自己用的

    /* 凸显闪卡 CSS片段 */ .protyle-wysiwyg .list[data-node-id][custom-riff-decks], .protyle-wysiwyg .li[data-node-id][custom-riff-decks] { border-left: 2px solid #ff6a6a; box-shadow: 1px 1px 4px #aaaaaa; margin-top: 2px; margin-bottom: 4px; padding-left: 2px; & > .protyle-action, & > [data-node-id] { left: -2px; } } .protyle-wysiwyg .p[data-node-id][custom-riff-decks] { border-left: 2px solid #00c853; box-shadow: 1px 1px 4px #aaaaaa; margin-top: 2px; margin-bottom: 4px; padding-left: 2px; } .protyle-wysiwyg .bq[data-node-id][custom-riff-decks] { border-left: 2px solid #cccf84; box-shadow: 1px 1px 4px #aaaaaa; margin-top: 2px; margin-bottom: 4px; padding-left: 2px; } .protyle-wysiwyg .sb[data-node-id][custom-riff-decks] { border-left: 2px solid #7c4dff; box-shadow: 1px 1px 4px #aaaaaa; margin-top: 2px; margin-bottom: 4px; padding-left: 2px; & > [data-node-id] { left: -2px; } }
请输入回帖内容 ...

推荐标签 标签

  • MongoDB

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

    91 引用 • 59 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 48 关注
  • 职场

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

    127 引用 • 1708 回帖
  • Access
    1 引用 • 3 回帖 • 2 关注
  • 持续集成

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

    15 引用 • 7 回帖 • 1 关注
  • Git

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

    211 引用 • 358 回帖
  • OpenShift

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

    14 引用 • 20 回帖 • 654 关注
  • ZooKeeper

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

    59 引用 • 29 回帖 • 1 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • 小薇

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

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

    35 引用 • 468 回帖 • 764 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 1 关注
  • TensorFlow

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

    20 引用 • 19 回帖 • 5 关注
  • 微软

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

    8 引用 • 44 回帖
  • AWS
    11 引用 • 28 回帖 • 7 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    168 引用 • 597 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    188 引用 • 1057 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • etcd

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

    6 引用 • 26 回帖 • 544 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 289 关注
  • 区块链

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

    92 引用 • 752 回帖
  • 学习

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

    174 引用 • 538 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 91 关注
  • V2Ray
    1 引用 • 15 回帖
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    495 引用 • 931 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    730 引用 • 1280 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 2 关注