CSS 来自 @稻米鼠
时间轴：https://zji.me/8b93e651-e165-401c-aa97-3a15d841679f.html
聊天气泡：https://zji.me/cc6bc4d5-2255-40a2-9172-2e197c429d3c.html
利用 CSS 将特定的 Callout 语法渲染成时间轴 & 聊天气泡。原文已经讲得很清楚了，这里做个备份。感兴趣可以玩玩。
效果展示#
时间轴#
聊天气泡#
配置及使用示例#
时间轴 - 配置#
将以下代码保存到 .obsidian/snippets/TimeLine.css 文件中（自行创建文件），然后在 Obsidian 设置 —— 外观 —— 代码片段中开启。即可使用 timeline 类型 callouts 创建这种时间轴。
时间轴 - 使用示例#
> [!timeline] 就是展示这样的时间线
> - **2024-05-01** *00:00* 就是开始放假吧
> - *05:45* 我是想晚点起的，奈何睡不着了
> - *06:30* 啊，咖啡啊，真的是续命的呢~
> - **2024-05-02** *08:00* 其实这就是个无序列表
> - **日期啦** 列表项最开始的加粗内容作为日期
> - *时间啦* 列表项最开始的斜体内容作为时间显示
> - 反正日期和时间都省略也不是不行
聊天气泡 - 配置#
将以下代码保存到 .obsidian/snippets/ChatBubble.css 文件中（自行创建文件），然后在 Obsidian 设置 —— 外观 —— 代码片段中开启。即可使用 chat-bubble 类型 callouts 创建这种对话气泡了。
聊天气泡 - 使用示例#
> [!chat-bubble]+ 聊天气泡的效果
>
> - 依然是 callout 配合无序列表的形式，文字多也完全没问题的。
> + 依次切换列表的显示方向，是不同的列表，而不是列表项，同一个列表的列表项所在方向相同
> - 灵活使用 `-`、`+`、`*` 作为列表项的前缀符号就可以便捷地书写了
> - 连续使用相同符号，气泡就在同一边
>
> 2024-05-06 07:05:51
>
> - 时间怎么写呢？
> + 普通文字（段落）就可以了
> + 也可以使用 callout 的折叠功能
CSS 代码#
时间轴 TimeLine.css#
/**
* TimeLine
* @author: 稻米鼠
* @description: 显示时间轴的 callout 视图
* @created: 2023-09-16 09:23:10
* @updated: 2024-05-05
* @version: 0.0.1
*/
.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;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > strong:first-child {
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 > strong:first-child+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%;
}
聊天气泡 ChatBubble.css#
/**
* 聊天气泡
* @author: 稻米鼠
* @description: 显示聊天气泡的 callout 视图
* @created: 2024-05-06
* @updated: 2024-05-06
* @version: 0.0.1
*/
.callout[data-callout="chat-bubble"] {
--callout-color: 238, 237, 239;
--callout-text-color: 24, 23, 25;
--callout-tip-color: 145,144,145;
--bubble-left: 255,254,255;
--bubble-right: 150,236,106;
--callout-icon: chevron-left;
background: rgb(var(--callout-color));
max-width: 480px;
border-radius: .8rem;
margin-left: auto !important;
margin-right: auto !important;
}
.callout[data-callout="chat-bubble"] > .callout-title,
.callout[data-callout="chat-bubble"] > .callout-title > .callout-icon
.callout[data-callout="chat-bubble"] > .callout-title > .callout-icon > .svg-icon {
color: var(--callout-text-color);
}
.callout[data-callout="chat-bubble"] > .callout-title > .callout-title-inner {
text-align: center;
flex-grow: 1;
}
.callout[data-callout="chat-bubble"] > .callout-content {
padding: 1rem 0;
}
.callout[data-callout="chat-bubble"] > .callout-content > p {
text-align: center;
color: rgb(var(--callout-tip-color));
font-size: .8rem;
padding: 0 2rem;
}
.callout[data-callout="chat-bubble"] > .callout-content ul {
display: flex;
flex-direction: column;
margin: 0 1rem;
padding: 0;
}
.callout[data-callout="chat-bubble"] > .callout-content ul > li {
position: relative;
max-width: 80%;
flex-shrink: 1;
padding: .5rem 1rem;
border-radius: 1rem;
margin: .5rem 0;
list-style: none;
}
.callout[data-callout="chat-bubble"] > .callout-content ul > li::before {
position: absolute;
box-sizing: content-box;
content: " ";
width: 0;
height: 0;
border: 1rem solid transparent;
top: 0;
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n+1) {
align-items: start;
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n+1) > li {
background: rgb(var(--bubble-left));
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n+1) > li::before {
left: -1rem;
border-top: 1rem solid rgb(var(--bubble-left));
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n) {
align-items: end;
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n) > li {
background: rgb(var(--bubble-right));
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n) > li::before {
right: -1rem;
border-top: 1rem solid rgb(var(--bubble-right));
}