【CSS Snippet】聊天气泡

聊天气泡的效果
  • 依然是 callout 配合无序列表的形式,文字多也完全没问题的。
  • 依次切换列表的显示方向,是不同的列表,而不是列表项,同一个列表的列表项所在方向相同
  • 灵活使用 -+* 作为列表项的前缀符号就可以便捷地书写了
  • 连续使用相同符号,气泡就在同一边

2024-05-06 07:05:51

  • 时间怎么写呢?
  • 普通文字(段落)就可以了
  • 也可以使用 callout 的折叠功能

可爱的小老鼠抱着空空的咖啡杯流着口水冲了出来,看看没人注意到他,又垂头丧气的回去了……

将如下代码保存到 .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 的折叠功能
©2022~2024 稻米鼠. Last build at 2024-12-21 00:00:24