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

不是建议,只是把我基于之前发的纯粹使用模板和属性制作的 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;
}

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

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 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • zxhd86 1
    订阅者 作者
    1 回复
  • 其他回帖
  • i1356
    订阅者

    不错的创意

  • i1356
    订阅者

    感谢!

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

    1 回复
  • zxhd86 3 评论
    订阅者 作者

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

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

推荐标签 标签

  • Ubuntu

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

    122 引用 • 168 回帖 • 236 关注
  • jsoup

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

    6 引用 • 1 回帖 • 382 关注
  • 30Seconds

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

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

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 15 关注
  • danl
    2 关注
  • 安装

    你若安好,便是晴天。

    120 引用 • 1181 回帖
  • QQ

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

    45 引用 • 554 回帖 • 363 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    17 引用 • 142 回帖 • 3 关注
  • Unity

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

    22 引用 • 7 回帖 • 328 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    53 引用 • 91 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3086 引用 • 8191 回帖 • 293 关注
  • Facebook

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

    4 引用 • 15 回帖 • 472 关注
  • 服务器

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

    123 引用 • 579 回帖 • 1 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 2 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    7 引用 • 31 回帖 • 286 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 70 关注
  • GitBook

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

    3 引用 • 8 回帖 • 2 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 138 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    199 引用 • 457 回帖 • 1 关注
  • InfluxDB

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

    2 引用 • 65 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 100 关注
  • 安全

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

    173 引用 • 812 回帖 • 243 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    20 引用 • 140 回帖 • 38 关注
  • Mac

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

    161 引用 • 590 回帖
  • Log4j

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

    20 引用 • 18 回帖 • 12 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 1 关注
  • 禅道

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

    4 引用 • 15 回帖 • 356 关注