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

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

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

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

    不错的创意

  • i1356
    订阅者

    感谢!

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

    1 回复
  • i1356
    订阅者

    最后的这个代码怎么用呢

    1 回复
  • 查看全部回帖

推荐标签 标签

  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    88 引用 • 113 回帖 • 2 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    18 引用 • 30 回帖 • 5 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    59 引用 • 284 回帖 • 1 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 473 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    66 引用 • 164 回帖 • 242 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 554 关注
  • 负能量

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

    84 引用 • 1161 回帖 • 491 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    5 引用 • 11 回帖 • 1 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 655 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 577 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    27 引用 • 66 回帖
  • Gzip

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

    9 引用 • 12 回帖 • 71 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 318 关注
  • 博客

    记录并分享人生的经历。

    262 引用 • 2369 回帖
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 7 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    273 引用 • 245 回帖 • 414 关注
  • JavaScript

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

    702 引用 • 1149 回帖 • 359 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    176 引用 • 432 回帖
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    86 引用 • 155 回帖
  • Electron

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

    17 引用 • 142 回帖 • 1 关注
  • 旅游

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

    75 引用 • 887 回帖 • 100 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 428 关注
  • Postman

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

    4 引用 • 2 回帖 • 1 关注
  • Sphinx

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

    1 引用 • 154 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    37 引用 • 40 回帖 • 1 关注
  • gRpc
    10 引用 • 8 回帖 • 22 关注