【CSS Snippet】卡片堆

将如下代码保存到 .obsidian/snippets/CardsShow.css 文件中（自行创建文件），然后在 Obsidian 设置——外观——代码片段中开启。即可使用 cards-show 类型 callouts 创建这种堆叠卡片了。

/**
 * 卡片视图
 * @author: 稻米鼠
 * @description: 用于显示卡片的 callout 视图
 * @created: 2024-05-04
 * @updated: 2024-05-04
 * @version: 0.0.1
 */
.callout[data-callout="cards-show"] {
  --callout-color: 255, 233, 160; /** 主色調但不影響背景色 */
  --callout-icon: panel-top-open; /** 图标，但默认不显示 */
  --callout-width: 25% - 1rem; /** 卡片宽度，默认为 25%，-1rem 用作间距 */
  --callout-height: 12rem; /** 卡片高度 */
  background: rgba(0, 0, 0, 0.03);
  container-type: inline-size;
  container-name: cards-show;
}
@container cards-show (max-width: 768px) {
  .callout[data-callout="cards-show"] > .callout-title,
  .callout[data-callout="cards-show"] > .callout-content {
    --callout-width: 33% - 1rem;
  }
}
@container cards-show (max-width: 600px) {
  .callout[data-callout="cards-show"] > .callout-title,
  .callout[data-callout="cards-show"] > .callout-content {
    --callout-width: 50% - 1rem;
  }
}
@container cards-show (max-width: 480px) {
  .callout[data-callout="cards-show"] > .callout-title,
  .callout[data-callout="cards-show"] > .callout-content {
    --callout-width: 100%;
  }
}
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content ul > li,
.callout[data-callout="cards-show"] > .callout-content ol > li {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: calc(var(--callout-width));
  height: var(--callout-height);
  padding: 1rem;
  margin: 0;
  color: var(--text-normal);
  background-color: rgb(var(--callout-color));
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}
.callout[data-callout="cards-show"].is-collapsed {
  background: none;
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::before,
.callout[data-callout="cards-show"].is-collapsed > .callout-title::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(var(--callout-color));
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
  content: " ";
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::before {
  transform: rotate(3deg);
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::after {
  transform: rotate(-3deg);
}
.callout[data-callout="cards-show"] > .callout-title > .callout-icon,
.callout[data-callout="cards-show"] > .callout-title > .callout-fold {
  display: none;
}
.callout[data-callout="cards-show"] > .callout-title > .callout-title-inner {
  font-weight: normal;
  font-size: 1rem;
}
.callout[data-callout="cards-show"] > .callout-content {
  padding: 1rem 0;
  overflow: auto;
}
.callout[data-callout="cards-show"] > .callout-content ul,
.callout[data-callout="cards-show"] > .callout-content ol {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: start;
  margin: 0;
  padding: .5rem 0;
}
.callout[data-callout="cards-show"] > .callout-content ul > li,
.callout[data-callout="cards-show"] > .callout-content ol > li {
  margin-bottom: 0.5rem;
  overflow: scroll;
  text-align: justify;
  list-style: none;
  background-color: rgba(var(--callout-color), 0.5);
}

使用示例：

> [!cards-show]- 【**Cards Show**】 这是一个卡片视图，可以折叠或者展开，标题卡片会显示为单独的一列
> 
> - 里面的内容是列表，有序或者无序都可以。也可以是多个列表，它也能够支持。
> - 但不可以是多维列表，**这它不支持**。
> - 用来放置一些并列的，琐碎的信息内容还是很方便的。
> - 只是修改了展示方式，在笔记中依然是 callouts 的格式，所以不存在语法污染问题。
> 
> 1. 这是有序列表，也是完全可以的，但不能显示序号
> 2. 因为是新的列表，所以会从新的一行开始
> 3. 超长文字什么的也可以，不过滚动条的体验并不算很好，我也不想把这件事情搞得很复杂，所以如果可以，还是尽量将内容控制在合适的长度，比如将一个卡片的内容拆成两个，或者扩大卡片面积什么的。
> 4. 每行卡片数量是动态的，所以不同窗口大小，或者手机上也能正常显示