【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 的折叠功能