【CSS Snippet】时间轴
就是展示这样的时间线
- 2024-05-01 00:00 就是开始放假吧
- 05:45 我是想晚点起的,奈何睡不着了
- 06:30 啊,咖啡啊,真的是续命的呢~
- 2024-05-02 08:00 其实这就是个无序列表
- 日期啦 列表项最开始的加粗内容作为日期
- 时间啦 列表项最开始的斜体内容作为时间显示
- 反正日期和时间都省略也不是不行
将如下代码保存到 .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* 其实这就是个无序列表
> - **日期啦** 列表项最开始的加粗内容作为日期
> - *时间啦* 列表项最开始的斜体内容作为时间显示
> - 反正日期和时间都省略也不是不行