【CSS Snippet】时间轴

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

/**
 * TimeLine
 * @author: 稻米鼠
 * @description: 显示时间轴的 callout 视图
 * @created: 2023-09-16 09:23:10
 * @updated: 2024-06-16 11:33:10
 * @version: 0.0.2
 */
.callout[data-callout="timeline"] {
  --callout-color: 0, 191, 188;
  --callout-icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gantt-chart"><path d="M8 6h10"/><path d="M6 12h9"/><path d="M11 18h7"/></svg>;
}
.callout[data-callout="timeline"] > .callout-content > ul {
  position: relative;
  margin-left: 7rem;
  padding-left: 6rem;
  padding-bottom: 1rem;
  border-left: 3px solid rgba(0, 191, 188);
  font-size: 1rem;
}
.callout[data-callout="timeline"] > .callout-content > ul::before {
  content: " ";
  position: absolute;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  left: -7.5px;
  top: -12px;
  border: 2px solid rgba(0, 191, 188);
  border-radius: 50%;
}
.callout[data-callout="timeline"] > .callout-content > ul > li {
  position: relative;
  margin-bottom: .3rem;
  line-height: 1.6rem;
  list-style: none;
  margin-inline-start: 0;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > .list-bullet {
  display: none;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > strong:first-child,
.callout[data-callout="timeline"] > .callout-content > ul > li > .list-bullet + strong {
  position: absolute;
  left: -13rem;
  display: block;
  width: 6rem;
  font-size: .8rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.2rem;
  margin-top: .2rem;
  border: 2px solid rgba(0, 191, 188);
  border-radius: 12px;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > em:first-child,
.callout[data-callout="timeline"] > .callout-content > ul > li > .list-bullet + em,
.callout[data-callout="timeline"] > .callout-content > ul > li > strong + em {
  position: absolute;
  left: -5rem;
  display: block;
  width: 4rem;
  color: white;
  font-size: .8rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.2rem;
  margin-top: .2rem;
  background-color: rgba(0, 191, 188);
  border-radius: 12px;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > em:first-child::before,
.callout[data-callout="timeline"] > .callout-content > ul > li > strong:first-child+em::before {
  content: " ";
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  left: calc(-1rem - 6px);
  top: calc(.8rem - 4px);
  background-color: rgba(0, 191, 188);
  border-radius: 50%;
}

上面示例的 callout 代码如下，供参考：

> [!timeline] 就是展示这样的时间线
> - **2024-05-01** *00:00* 就是开始放假吧
> - *05:45* 我是想晚点起的，奈何睡不着了
> - *06:30* 啊，咖啡啊，真的是续命的呢~
> - **2024-05-02** *08:00* 其实这就是个无序列表
> - **日期啦** 列表项最开始的加粗内容作为日期
> - *时间啦* 列表项最开始的斜体内容作为时间显示
> - 反正日期和时间都省略也不是不行