更好的 微信聊天框 组件
Rating: +99

这是什么？

该组件是基于hoah2333hoah2333 的 微信聊天框组件的升级（？）版本。

在使用逻辑上没有大的变动，依然是需要一大堆include。虽然麻烦但不会与各大版式产生冲突，毕竟确实有很多版式对blockquote之类元素有自己的定义。

修改内容包括：

  1. 现在整个微信聊天框和所有元素都是圆角的了。
  2. 更改了暗色模式的开启方式，详见下文。
  3. 更改了发送图片的显示大小，现在它会显示较大的图片了。
  4. 更换了底栏中的“语音”、“表情”和“更多”三个emoji，并修正了它们在不同版式下会错位的bug。
  5. 更换了消息被列入黑名单时的红色叹号警告符，并修正了它在不同版式下会错位的bug。
  6. 修正了底栏文字在超出一行后会被整体压缩的bug。
  7. 修正了消息在黑标版式下会随机崩溃的bug。
  8. 可能还有一些我想不起来的。

新增内容包括：

  1. 添加了群聊模式。开启该模式后，所有人的名字都会显示在头像上方。
  2. 添加了语音转文字模式。这是一个类似于图片模式的单条消息可选项。详见下文。
  3. 添加了透明度更改通道。修改这一参数可以让整个聊天框的背景变得透明，对消息框则不起效果。
  4. 添加了无头像模式。开启该模式后，消息不会显示对应头像。适合同一人持续说话时使用。详见下文。
  5. 添加了多种默认配色。原本的暗色模式被作为其中一种配色整合在其中。

使用方法：

可在任意页面中使用本组件。本组件的使用方法与原版微信聊天框略有不同，请仔细阅读以下使用说明。
你需要填入所有未标记为“（可选）”的参数。缺少参数将会导致组件无法正常运作。

首先插入组件头。组件头包含了整个组件的样式部分以及顶部的标题栏。

[[include :scp-wiki-cn:component:wxchat-backend inc-top=--]
title=相亲相爱一家人
opacity=1
groupmode=true
theme=dark
]]

                           
inc-top辨识符。
使页面读取组件的标题栏部分。仅可且必须填入 --]。
title标题。
此即显示在最顶部的“好友昵称”或“群聊名称”。
opacity透明度更改。
填入0到1之间的数字，1为完全不透明。
这一参数仅会影响整体的背景，在你想要将纯粹的无背景聊天记录放进各种版式的花式div块中时或许有用。
groupmode
（可选）		群聊模式。
填入 true 时将开启群聊模式。
在这一模式下，所有人的名字都会显示在消息上方。
theme
（可选）		配色方案。
可填入 dark、ios、discord、instagram和scp。
留空的话就是普通的白色微信配色方案。
具体配色方案见下文。
hide
（可选）		隐藏顶部标题栏。
填入 hide=hide 时将隐藏顶部的标题栏。

然后是聊天部分。以下为左对话框的全部参数说明。

[[include :scp-wiki-cn:component:wxchat-backend inc-left=--]
name=username1
pure-message=true
**##var(--c-keyword)||####var(--c-builtin)|icon####var(--c-keyword)|=##**##var(--c-string)|@@http://urlhere.com@@##
color=white
content=content1
voice=true
voice-time=60
voice-content=content1
content=content1
image=true
**##var(--c-keyword)||####var(--c-builtin)|image-url####var(--c-keyword)|=##**##var(--c-string)|@@http://urlhere.com@@##
reply=true
reply-name=username2
reply-content=content2
blacklist=true
]]

                           
inc-left辨识符。
使页面读取组件的左对话框部分。仅可且必须填入 --]。
name说话人唯一标识符。
在所有的对话框下填入同样的 name 以将该说话人标记为同一人，以保持头像的一致。
在群聊模式下，这一参数会显示在所有人的头像上
请尽量不要带空格和点号（.），否则有可能出现问题。
pure-message
（可选）		无头像模式。
填入 true 以关闭头像显示。
在群聊模式下，开启这一模式会同时隐藏该条信息的name参数。
开启这一模式的话，下方的icon和color都可以不写，但name还是要写，不然会爆参数。
icon
（可选）		说话人头像。
该参数仅在 name 相同的所有对话框的最后一个中填入才可生效。
你可以在每一个对话框中都加入此参数，不容易遗漏且不影响组件运作。
color
（可选）		说话人头像背景色。
支持所有颜色代码，比如 #FFFFFF、rgb(0, 0, 0), hsl(0, 0, 0)。默认为白色。
该参数仅在 name 相同的所有对话框的最后一个中填入才可生效。
你可以在每一个对话框中都加入此参数，不容易遗漏且不影响组件运作。
content
（可选）		聊天框内容。
voice
（可选）		语音转文字模式。
填入 true 以开启语音转文字模式。
注意：开启后将隐藏 content 中所填写的内容。此模式与下方的图片模式不兼容。
voice-time
（可选）		语音时间。
需先设置 voice=true。
填入任意数字来确定你的语音时间。你需要自行确定你的文字长度对应的大致时间。
语音条的长度会根据你填入的数字变化，在60时长度封顶，高于60的数字不会让长度更长。
你也可以填入诸如 1'35 之类数字与符号混杂的内容，这会使你的语音条长度达到最长。
voice-content
（可选）		语音转文字内容
需先设置 voice=true。
image
（可选）		图片模式。
填入 true 以开启图片模式。开启后在 image-url 处填入图片链接即可发送图片。
注意：开启后将隐藏 content 中所填写的内容。
image-url
（可选）		图片链接。
需先设置 image=true。
reply
（可选）		回复模式。
填入 true 以开启回复模式。
reply-name
（可选）		回复对象名称。
回复对象的名字，显示在回复框的冒号前面。该名称不需要与 name 相同。
需先设置 reply=true。
reply-content
（可选）		被回复内容。
被回复的内容，显示在回复框的冒号后面。
需先设置 reply=true。
blacklist
（可选）		黑名单模式。
填入 true 以开启黑名单模式。
开启后对话框的左侧将出现一个红色叹号。用于模拟被拉入黑名单或图片发送失败的情形。

以下为右对话框的全部参数说明。右对话框的大部分参数均与左对话框相同，仅辨识符有区别。

[[include :scp-wiki-cn:component:wxchat-backend inc-right=--]
name=username1
pure-message=true
**##var(--c-keyword)||####var(--c-builtin)|icon####var(--c-keyword)|=##**##var(--c-string)|@@http://urlhere.com@@##
color=white
content=content1
voice=true
voice-time=60
voice-content=content1
content=content1
image=true
**##var(--c-keyword)||####var(--c-builtin)|image-url####var(--c-keyword)|=##**##var(--c-string)|@@http://urlhere.com@@##
reply=true
reply-name=username2
reply-content=content2
blacklist=true
]]

                           
inc-right辨识符。
使页面读取组件的右对话框部分。仅可且必须填入 --]。

在对话的中间可以插入时间或拍一拍之类的提示语。以下为提示语的参数说明。

[[include :scp-wiki-cn:component:wxchat-backend inc-tip=--]
content=消息已发出，但被对方拒收了。
]]

                           
inc-tip辨识符。
使页面读取组件的提示语部分。仅可且必须填入 --]。
content提示文本。

最后插入组件尾。组件尾包含了聊天时的文本框。

[[include :scp-wiki-cn:component:wxchat-backend inc-end=--]
content=none
]]

                           
inc-end辨识符。
使页面读取组件的结尾部分。仅可且必须填入 --]。
content文本框内容。
填入任意字符会使右边出现发送按钮，填入 none 以使其还原为“更多功能”按钮。
hide
（可选）		隐藏底部文本框。
填入 hide=hide 时将隐藏底部的文本框。

示例 & 配色方案：

普通配色普通配色/群聊模式暗色模式（dark）IOSDiscordInstagramSCP终端

多点关心多点爱

20:31

5"

这是一个示例

这是另一个示例

😮

👍

这个组件好玩吧？

嘿你别说，还真不错

Kcorena：这个组件好玩吧？

我拍了拍“H-Storm Z”
“H-Storm Z”拍了拍我

硫酸铜朋友

20:47

看我画的像素画

我拍了拍“H-Storm Z”
21:30

爬

啥？

消息已发出，但被对方拒收了。

？？？

消息已发出，但被对方拒收了。
none

示例代码：

+ 展开代码- 收起代码

[[include :scp-wiki-cn:component:wxchat-backend inc-top=--]
|title=多点关心多点爱
|opacity=1
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-tip=--]
|content=20:31
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-left=--]
|name=name1
|voice=true
|voice-time=5
|voice-content=这是一个示例
]]
[[include :scp-wiki-cn:component:wxchat-backend inc-right=--]
|name=name2
|content=这是另一个示例
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-left=--]
|name=name1
|content=😮
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-right=--]
|name=name2
|content=👍
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-right=--]
|name=name2
|pure-message=true
|content=这个组件好玩吧？
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-left=--]
|name=name1
|content=嘿你别说，还真不错
|reply=true
|reply-name=Kcorena
|reply-content=这个组件好玩吧？
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-tip=--]
|content=我拍了拍“H-Storm Z”
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-tip=--]
|content=**“H-Storm Z”拍了拍我
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-right=--]
|name=name2
|image=true
|image-url=@@http://darry.wikidot.com/local--files/upload/%E7%A1%AB%E9%85%B8%E9%93%9C%E6%9C%8B%E5%8F%8B@@
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-tip=--]
|content=20:47
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-right=--]
|name=name2
|content=看我画的像素画
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-tip=--]
|content=我拍了拍“H-Storm Z”
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-tip=--]
|content=21:30
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-left=--]
|name=name1
|icon=@@http://scp-wiki-cn.wikidot.com/local--files/kcorena-s-artwork/netzach@@
|content=爬
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-right=--]
|name=name2
|content=啥？
|blacklist=true
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-tip=--]
|content=消息已发出，但被对方拒收了。
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-right=--]
|name=name2
|icon=@@http://scp-wiki-cn.wikidot.com/local--files/kcorena-s-artwork/chess@@
|content=？？？
|blacklist=true
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-tip=--]
|content=消息已发出，但被对方拒收了。
]]

[[include :scp-wiki-cn:component:wxchat-backend inc-end=--]
|content=none
]]

组件样式代码

+ 展开代码- 收起代码
css


/*
 *    修改自 hoah2333 的微信聊天框 组件
 *    https://scp-wiki-cn.wikidot.com/component:wechat
 */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');

:root {
    --shell-radius: 0.875rem;
    --img-radius: 1em;

    --bg-color:237,237,237;
    --top-bg-color:245,245,245;
    --bottom-bg-color:245,245,245;

    --input-text-bg-color:255,255,255;
    --button-color:158,234,106;
    --button-font-color:17,17,17;

    --left-bubble-bg-color:255,255,255;
    --left-bubble-font-color:17,17,17;

    --right-bubble-bg-color:158,234,106;
    --right-bubble-font-color:17,17,17;

    --tip-color: 140,140,140;

    --reply-bg-color:230,230,230;
    --reply-font-color:100,100,100;

    --top-bottom-font-color:17,17,17;
}

.mn-container.dark {
    --top-bg-color:17,17,17;
    --bg-color:17,17,17;
    --bottom-bg-color:17,17,17;

    --input-text-bg-color:40,40,40;
    --button-color:62,180,119;
    --button-font-color:17,17,17;

    --left-bubble-bg-color:40,40,40;
    --left-bubble-font-color:237,237,237;

    --right-bubble-bg-color: 62,180,119;
    --right-bubble-font-color: 17,17,17;

    --tip-color: 140,140,140;

    --reply-bg-color: 37,37,37;
    --reply-font-color: 146,146,146;

    --top-bottom-font-color:237,237,237;
}

.mn-container.ios {
    --bg-color: 242,242,247;
    --top-bg-color: 248,248,250;
    --bottom-bg-color: 248,248,250;

    --input-text-bg-color: 255, 255, 255;

    --button-color: 0,122,255;
    --button-font-color: 255,255,255;

    --left-bubble-bg-color: 255, 255, 255;
    --left-bubble-font-color: 20,20,20;

    --right-bubble-bg-color: 0,122,255;
    --right-bubble-font-color: 255,255,255;

    --tip-color: 140,140,140;

    --reply-bg-color: 230,230,235;
    --reply-font-color: 120,120,120;

    --top-bottom-font-color: 20,20,20;
}

.mn-container.discord {
    --bg-color:49,51,56;
    --top-bg-color:35,36,40;
    --bottom-bg-color:35,36,40;

    --input-text-bg-color:64,68,75;
    --button-color:88,101,242;
    --button-font-color:248,248,248;

    --left-bubble-bg-color:64,68,75;
    --left-bubble-font-color:220,221,222;

    --right-bubble-bg-color:88,101,242;
    --right-bubble-font-color:255,255,255;

    --tip-color: 140,140,140;

    --reply-bg-color:54,57,63;
    --reply-font-color:150,150,150;

    --top-bottom-font-color:220,221,222;
}

.mn-container.instagram {
    --bg-color: 245, 242, 255;
    --top-bg-color: 250, 248, 255;
    --bottom-bg-color: 250, 248, 255;

    --input-text-bg-color: 255, 255, 255;

    --button-color: 124, 92, 255;
    --button-font-color: 255, 255, 255;

    --left-bubble-bg-color: 255, 255, 255;
    --left-bubble-font-color: 30, 30, 40;

    --right-bubble-bg-color: 124, 92, 255;
    --right-bubble-font-color: 255, 255, 255;

    --tip-color: 140,140,140;

    --reply-bg-color: 235, 230, 250;
    --reply-font-color: 130, 120, 150;

    --top-bottom-font-color: 40, 40, 60;
}

.mn-container.scp {
    --bg-color:20,20,20;
    --top-bg-color:10,10,10;
    --bottom-bg-color:10,10,10;

    --input-text-bg-color:30,30,30;
    --button-color:200,40,40;
    --button-font-color:248,248,248;

    --left-bubble-bg-color:30,30,30;
    --left-bubble-font-color:200,200,200;

    --right-bubble-bg-color:200,40,40;
    --right-bubble-font-color:255,255,255;

    --tip-color: 140,140,140;

    --reply-bg-color:25,25,25;
    --reply-font-color:120,120,120;

    --top-bottom-font-color:200,200,200;
}

.sl,
.sl-voice,
.sl-voice-to-text {
    position: relative;
    padding: 0.5rem;
    -webkit-border-radius: 0.2rem;
       -moz-border-radius: 0.2rem;
            border-radius: 0.2rem;
    margin: 0.1rem 0.5rem 1rem auto;
    width: fit-content;
    width: -o-fit-content;
    width: -ms-fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
}

.sll,
.alignl .sl-voice,
.alignl .sl-voice-to-text {
    margin-left: 0.5rem;
    background-color: rgb(var(--left-bubble-bg-color));
    color: rgb(var(--left-bubble-font-color));
}

.slr,
.alignr .sl-voice,
.alignr .sl-voice-to-text {
    margin-right: 0.5rem;
    text-align: left;
    background-color: rgb(var(--right-bubble-bg-color));
    color: rgb(var(--right-bubble-font-color));
}

.sl > *:nth-child(1) {
    margin-top: 0;
}

.sl > *:nth-last-child(1) {
    margin-bottom: 0;
}

.sl::before,
.sl-voice::before{
    content: "";
    display: block;
    top: 1em;
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

.mn-container.true .sl::before,
.mn-container.true .sl-voice::before{
    top: 0.5em;
}

.sll::before,
.alignl .sl-voice::before {
    left: -0.25rem;
    background-color: rgb(var(--left-bubble-bg-color));
}

.slr::before,
.alignr .sl-voice::before {
    right: -0.25rem;
    background-color: rgb(var(--right-bubble-bg-color));
}

/* 语音转文字 */

.sl-voice,
.sl-voice-to-text,
.sl-voice.true ~.sl {
    display: none;
}

.sl-voice.true {
    display: block;
    padding-right: 1rem;
}

.sl-voice-to-text.true {
    display: block;
}

.sl-voice {
    align-items: center;
    --t: clamp(1, var(--time), 60);
    width: calc(20% + (var(--time) / 60) * 40%) !important;
    min-width: -webkit-fit-content !important;
    max-width: 60% !important;
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
}

.sl-voice .voice-time {
    display: inline-flex;
    align-items: center;
}

.sl-voice .voice-time::before {
    content: "\f1eb";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    transform: rotate(90deg);
    margin-right: 0.35rem;
}

.sl-voice p,
.sl-voice-to-text p {
    margin: 0;
    display: inline;
}

.sl-image,
.sl-image.true+.sl {
    display: none;
}

.sl-image.true {
    display: block;
    padding-right: 1rem;
    max-width: 30rem !important;
}

.sl-image img {
    position: relative;
    padding: 0.5rem;
    -webkit-border-radius: 0.2rem;
       -moz-border-radius: 0.2rem;
            border-radius: 0.2rem;
    margin: -0.25rem 0 1rem 0;
    border-radius: var(--img-radius) !important;
    width: fit-content;
    width: -o-fit-content;
    width: -ms-fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    max-width: 100%;
}

.sl-reply {
    background-color: rgb(var(--reply-bg-color));
    color: rgb(var(--reply-font-color));
    text-align: left;
    padding: 0.25rem 0.5rem;
    margin: 0rem 0.5rem 0.5rem 0.5rem;
    display: none;
    width: fit-content;
    width: -o-fit-content;
    width: -ms-fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    max-width: 85%;
    border-radius: 0.2rem;
}

.mn-container.true .sl-reply{
    margin: -0.7rem 0.5rem 0.5rem 0.5rem;
}

.sl-reply.true {
    display: block;
}
.sl-reply p {
    margin: 0;
}

.message {
    max-width: inherit !important;
}

.sl-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.sl-container.alignr {
    text-align: right;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.sl-container.alignr .sl.slr {
    margin-left: auto;
}

#page-content .user {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    background-color: #ffffff;
    margin-top: 0.25rem;
}

.alignl .user {
    margin-left: 15px;
}
.alignr .user {
    margin-right: 15px;
}

.message .name {
    color: rgb(var(--tip-color)); 
    font-size: 0.8rem;
}

.message > p {
    margin: 0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    overflow: hidden;
}

.placeholder {
    width: 3.5rem;
    min-width: 3.5rem;
}
.placeholder.true {
    display: flex;
    align-items: center;
    justify-content: center;
}
.placeholder.true::before {
    content: "";
    color: none;
    background-color: transparent;
    padding:0;
    top: 0;

    display: block;
    position: static;
    width: 1.2rem;
    height: 1.2rem;
    background-image: url("https://uploadfile.wikidot.com/local--files/component:wxchat/warning-mark");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.alignl .placeholder.true {
    justify-content: flex-start;
}
.alignr .placeholder.true {
    justify-content: flex-end;
    margin-right: 0.5rem;
}

.alignl .placeholder.true::before {
    left: 0.75rem;
}
.alignr .placeholder.true::before {
    right: 0.75rem;
}

.mn-container {
    border-radius: var(--shell-radius);
    background-color: rgba(var(--bg-color), var(--bg-opacity, 1)) !important;
}

.mn-container .title-container,
.mn-container .input-container {
    color: var(--top-bottom-font-color);
}

.mn-container:not(.true) .message > p{
    display: none;
}
.mn-container:not(.true) .sl{
    margin: 0.4rem 0.5rem !important;
}

.title-container {
    background-color: rgba(var(--top-bg-color), var(--bg-opacity, 1));
    border-radius: var(--shell-radius) var(--shell-radius) 0 0;
    margin-bottom: 1rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.title-container.hide {
    display: none;
}
.titleQuit::before {
    content: "\f053";
    font-family: FontAwesome;
    color: rgb(var(--top-bottom-font-color));
    font-size: 20px;
    position: relative;
    left: 1rem;
    top: 1rem;
}
.titleMore::before {
    content: "\f141";
    font-family: FontAwesome;
    color: rgb(var(--top-bottom-font-color));
    font-size: 20px;
    position: relative;
    right: 1rem;
    top: 1rem;
}
.titleSelf {
    font-size: 16px;
    font-weight: bold;
    font-family: 'Noto Sans SC', sans-serif;
    color: rgb(var(--top-bottom-font-color));
}

.input-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: none;
    height: auto;
    border-radius: 0 0 var(--shell-radius) var(--shell-radius);
}
.input-container.hide {
    display: none;
}
.mn-container .input-container {
    background-color: rgba(var(--bottom-bg-color), calc(var(--bg-opacity, 1) - 0.4));
}

.inputVoice::before {
    content: "\f130";
    font-family: FontAwesome;
    color: rgb(var(--top-bottom-font-color));
    border: 0px;
    position: relative;
    padding: 7px 3px;
    margin: 0.8rem;
    top: 0;
    font-size: 22px;
}
.inputText {
    background-color: rgb(var(--input-text-bg-color));
    color: rgb(var(--top-bottom-font-color));
    width: 100%;
    height: auto;
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-radius: 5px;
    font-size: inherit;
    cursor: text;
}
.inputText.none {
    padding: 1rem;
    font-size: 0;
}
.inputEmoji::before {
    content: "\f118";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    color: rgb(var(--top-bottom-font-color));
    display: inline-block;
    position: relative;
    padding: 3px;
    margin: 0.8rem;
    top: 0;
    font-size: 22px;
    line-height: 1;
}

.inputMore::before {
    content: "发送";
    background-color: rgb(var(--button-color));
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    color: rgb(var(--button-font-color));
    position: relative;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    margin: 0 1rem 0 0;
    top: 0;
    font-size: 16px;
}
.inputMore.none::before {
    content: "\f055";
    font-family: FontAwesome;
    border: 0px;
    background-color: transparent;
    color: rgb(var(--top-bottom-font-color));
    padding: 1px 3px;
    margin: 0.8rem;
    top: 0;
    font-size: 22px;
}

.tip-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: rgb(var(--tip-color));
    margin-bottom: 1.5rem;
}

/* pure message */

.alignl.true .sl,
.alignr.true .sl {
    margin-top: -0.5rem;
}

.alignl.true .user,
.alignr.true .user {
    display:none;
}

.alignl.true .message .name,
.alignr.true .message .name {
    display:none;
}

.alignl.true .message {
    padding-left: 3.5rem;
}

.alignr.true .message {
    padding-right: 3.5rem;
}

.alignl.true .sl::before,
.alignr.true .sl::before {
    display:none;
}
原创组件
页面版本：⁨0⁩, 最后编辑于: ⁨2026/4/5 00:36:00⁩ (⁨⁨164⁩ 日前⁩), 现时评分: 99
历史 附件 + 选项