【CSS Snippet】聊天气泡

将如下代码保存到 .obsidian/snippets/ChatBubble.css 文件中（自行创建文件），然后在 Obsidian 设置——外观——代码片段中开启。即可使用 chat-bubble 类型 callouts 创建这种对话气泡了。

/**
 * 聊天气泡
 * @author: 稻米鼠
 * @description: 显示聊天气泡的 callout 视图
 * @created: 2024-05-06
 * @updated: 2024-05-09
 * @version: 0.0.2
 */

 .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 > .list-bullet {
  display: 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));
}

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

> [!chat-bubble]+ 聊天气泡的效果
> 
> - 依然是 callout 配合无序列表的形式，文字多也完全没问题的。
> + 依次切换列表的显示方向，是不同的列表，而不是列表项，同一个列表的列表项所在方向相同
> - 灵活使用 `-`、`+`、`*` 作为列表项的前缀符号就可以便捷地书写了
> - 连续使用相同符号，气泡就在同一边
> 
> 2024-05-06 07:05:51
> 
> - 时间怎么写呢？
> + 普通文字（段落）就可以了
> + 也可以使用 callout 的折叠功能