微信聊天框 组件
2022年1月13日
修订 14
核心指标
评分
75
↑ 76
↓ 1
支持率
99%
总票数 77
Wilson 95% 下界
93.0%
在相同票数下更稳健的支持率估计
争议指数
0.051
评分趋势
加载图表中...
最近修订
1 / 5
最近投票
1 / 8
2025-10-22
2025-10-18
2025-10-09
2025-09-14
2025-08-31
2025-08-31
2025-07-30
2025-06-30
2025-06-08
2025-04-13
页面源码
源码字符数 23666文字字数 3366
[[iftags +组件]]
[[include :scp-wiki-cn:component:croqstyle -=- ]]
[[div style="display: none;"]]
[[include :scp-wiki:component:toggle-sidebar]]
[[/div]]
[[module css]]
@import url('https://scp-wiki-cn.wdfiles.com/local--code/component:wechat/1');
.options table.wiki-content-table td {
border: none;
padding: 0.7em 1em;
}
.options table.wiki-content-table {
width: 100%;
}
h1 {
color: black;
text-align: center;
}
/* Sidebox by EstrellaYoshte */
#page-content .sidebox tr td,
#page-content .sidebox tr th {
padding: .35em;
}
#page-content .authorbox tr td,
#page-content .authorbox tr th {
padding: .35em;
}
.limit{
margin-bottom: -1rem;
}
.anchor{
position: sticky;
height: 0;
top: 0;
}
.authorbox,
.sidebox {
position: absolute;
width: calc((100vw - 870px) / 2);
max-height: calc(100vh - 18rem);
margin: 0 8px 0 0;
padding: .14rem;
box-sizing: border-box;
overflow: auto;
z-index: 5;
}
.authorbox {
max-width: calc((100vw - 921.2px) / 2) !important;
top: .5em;
right: 103.5%;
}
.sidebox{
top: 0;
left: 103.5%;
padding-left: 1em;
}
@media (max-width:1079px) {
.authorbox,
.sidebox {
display: none;
}
}
.user.name1 {
background-image: url("http://scp-wiki-cn.wikidot.com/local--files/kcorena-s-artwork/netzach");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: white !important;
box-sizing: border-box;
}
.user.name2 {
background-image: url("http://scp-wiki-cn.wikidot.com/local--files/kcorena-s-artwork/chess");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: white !important;
box-sizing: border-box;
}
[[/module]]
[[include :scp-wiki-cn:credit:start]]
@@ @@
**微信聊天框 组件**
作者：[[*user hoah2333]]
= [http://scp-wiki-cn.wikidot.com/hoah2333 hoah2333的作者页！点击发现更多作品]
@@ @@
[[include :scp-wiki-cn:credit:end]]
[[div class="anchor"]]
[[div class="authorbox"]]
[[div class="blockquote"]]
[[=]]
**微信聊天框 组件**
作者：[[*user hoah2333]]
[http://scp-wiki-cn.wikidot.com/hoah2333 hoah2333的作者页！点击发现更多作品]
[[module rate]]
[[/=]]
[[/div]]
[[/div]]
[[/div]]
[[div style="border: 1px solid #ddd; padding: 1em;"]]
+ 这是什么？
该组件是对聊天软件微信的手机端的聊天区域的仿制，修改自 [[*user Dr Hormress]] 的 [[[message-logging-from-group|>>群聊的聊天记录<<]]]。
[[/div]]
----
[[div style="border: 1px solid #ddd; padding: 1em;"]]
+ 使用方法：
可在任意页面中使用本组件，请仔细阅读以下使用说明。
你需要填入所有未标记为“//（可选）//”的参数。缺少参数将会导致组件无法正常运作。
首先插入组件头。组件头包含了整个组件的样式部分以及顶部的标题栏。
[[div class="code terminal"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:component:wechat## ##var(--c-builtin)|inc-top####var(--c-keyword)|=##**##var(--c-string)|@@--@@]##**
**##var(--c-keyword)||####var(--c-builtin)|title####var(--c-keyword)|=##**##var(--c-string)|相亲相爱一家人##
**##var(--c-keyword)||####var(--c-builtin)|darkmode####var(--c-keyword)|=##**##var(--c-string)|true##
**##var(--c-keyword)|]]##**
[[/div]]
[[div class="options"]]
||**@@ @@**|| ||
|| **inc-top** || 辨识符。 _
使页面读取组件的标题栏部分。仅可且必须填入 {{@@--]@@}}。 ||
|| **title** || 标题。 _
此即显示在最顶部的“好友昵称”或“群聊名称”。 ||
|| **darkmode** _
//（可选）// || 暗色模式。 _
填入 {{true}} 时将开启暗色模式。 ||
|| **hide** _
//（可选）// || 隐藏顶部标题栏。 _
填入 {{hide=hide}} 时将隐藏顶部的标题栏。 ||
[[/div]]
然后是聊天部分。以下为左对话框的全部参数说明。
[[div class="code terminal"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:component:wechat## ##var(--c-builtin)|inc-left####var(--c-keyword)|=##**##var(--c-string)|@@--@@]##**
**##var(--c-keyword)||####var(--c-builtin)|name####var(--c-keyword)|=##**##var(--c-string)|username1##
**##var(--c-keyword)||####var(--c-builtin)|icon####var(--c-keyword)|=##**##var(--c-string)|@@http://urlhere.com@@##
**##var(--c-keyword)||####var(--c-builtin)|color####var(--c-keyword)|=##**##var(--c-string)|white##
**##var(--c-keyword)||####var(--c-builtin)|content####var(--c-keyword)|=##**##var(--c-string)|content1##
**##var(--c-keyword)||####var(--c-builtin)|image####var(--c-keyword)|=##**##var(--c-string)|true##
**##var(--c-keyword)||####var(--c-builtin)|image-url####var(--c-keyword)|=##**##var(--c-string)|@@http://urlhere.com@@##
**##var(--c-keyword)||####var(--c-builtin)|reply####var(--c-keyword)|=##**##var(--c-string)|true##
**##var(--c-keyword)||####var(--c-builtin)|reply-name####var(--c-keyword)|=##**##var(--c-string)|username2##
**##var(--c-keyword)||####var(--c-builtin)|reply-content####var(--c-keyword)|=##**##var(--c-string)|content2##
**##var(--c-keyword)||####var(--c-builtin)|blacklist####var(--c-keyword)|=##**##var(--c-string)|true##
**##var(--c-keyword)|]]##**
[[/div]]
[[div class="options"]]
||**@@ @@**|| ||
|| **inc-left** || 辨识符。 _
使页面读取组件的左对话框部分。仅可且必须填入 {{@@--]@@}}。 ||
||**name**|| 说话人唯一标识符。 _
在所有的对话框下填入同样的 {{name}} 以将该说话人标记为同一人，以保持头像的一致。 _
由于该参数并不会显示出来，所以你可以随意填写，只需保证同一说话人的 {{name}} 一致即可。 _
请尽量不要带空格和点号（.），否则有可能出现问题。 ||
||**icon** _
//（可选）//|| 说话人头像。 _
该参数仅在 {{name}} 相同的所有对话框的最后一个中填入才可生效。 _
你可以在每一个对话框中都加入此参数，不容易遗漏且不影响组件运作。 ||
||**color** _
//（可选）//|| 说话人头像背景色。 _
支持所有颜色代码，比如 {{#FFFFFF}}、{{rgb(0, 0, 0)}}, {{hsl(0, 0, 0)}}。默认为白色。 _
该参数仅在 {{name}} 相同的所有对话框的最后一个中填入才可生效。 _
你可以在每一个对话框中都加入此参数，不容易遗漏且不影响组件运作。 ||
||**content** _
//（可选）//|| 聊天框内容。 ||
||**image** _
//（可选）//|| 图片模式。 _
填入 {{true}} 以开启图片模式。开启后在 {{image-url}} 处填入图片链接即可发送图片。 _
注意：开启后将隐藏 {{content}} 中所填写的内容。 ||
||**image-url** _
//（可选）//|| 图片链接。 _
需先设置 {{image=true}}。 ||
||**reply** _
//（可选）//|| 回复模式。 _
填入 {{true}} 以开启回复模式。 ||
||**reply-name** _
//（可选）//|| 回复对象名称。 _
回复对象的名字，显示在回复框的冒号前面。该名称不需要与 {{name}} 相同。 _
需先设置 {{reply=true}}。 ||
||**reply-content** _
//（可选）//|| 被回复内容。 _
被回复的内容，显示在回复框的冒号后面。 _
需先设置 {{reply=true}}。 ||
||**blacklist** _
//（可选）//|| 黑名单模式。 _
填入 {{true}} 以开启黑名单模式。 _
开启后对话框的左侧将出现一个红色叹号。用于模拟被拉入黑名单或图片发送失败的情形。 ||
[[/div]]
以下为右对话框的全部参数说明。右对话框的大部分参数均与左对话框相同，仅辨识符有区别。
[[div class="code terminal"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:component:wechat## ##var(--c-builtin)|inc-right####var(--c-keyword)|=##**##var(--c-string)|@@--@@]##**
**##var(--c-keyword)||####var(--c-builtin)|name####var(--c-keyword)|=##**##var(--c-string)|username1##
**##var(--c-keyword)||####var(--c-builtin)|icon####var(--c-keyword)|=##**##var(--c-string)|@@http://urlhere.com@@##
**##var(--c-keyword)||####var(--c-builtin)|color####var(--c-keyword)|=##**##var(--c-string)|white##
**##var(--c-keyword)||####var(--c-builtin)|content####var(--c-keyword)|=##**##var(--c-string)|content1##
**##var(--c-keyword)||####var(--c-builtin)|image####var(--c-keyword)|=##**##var(--c-string)|true##
**##var(--c-keyword)||####var(--c-builtin)|image-url####var(--c-keyword)|=##**##var(--c-string)|@@http://urlhere.com@@##
**##var(--c-keyword)||####var(--c-builtin)|reply####var(--c-keyword)|=##**##var(--c-string)|true##
**##var(--c-keyword)||####var(--c-builtin)|reply-name####var(--c-keyword)|=##**##var(--c-string)|username2##
**##var(--c-keyword)||####var(--c-builtin)|reply-content####var(--c-keyword)|=##**##var(--c-string)|content2##
**##var(--c-keyword)||####var(--c-builtin)|blacklist####var(--c-keyword)|=##**##var(--c-string)|true##
**##var(--c-keyword)|]]##**
[[/div]]
[[div class="options"]]
||**@@ @@**|| ||
|| **inc-right** || 辨识符。 _
使页面读取组件的右对话框部分。仅可且必须填入 {{@@--]@@}}。 ||
[[/div]]
在对话的中间可以插入时间或拍一拍之类的提示语。以下为提示语的参数说明。
[[div class="code terminal"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:component:wechat## ##var(--c-builtin)|inc-tip####var(--c-keyword)|=##**##var(--c-string)|@@--@@]##**
**##var(--c-keyword)||####var(--c-builtin)|content####var(--c-keyword)|=##**##var(--c-string)|消息已发出，但被对方拒收了。##
**##var(--c-keyword)|]]##**
[[/div]]
[[div class="options"]]
||**@@ @@**|| ||
|| **inc-tip** || 辨识符。 _
使页面读取组件的提示语部分。仅可且必须填入 {{@@--]@@}}。 ||
|| **content** || 提示文本。 ||
[[/div]]
最后插入组件尾。组件尾包含了聊天时的文本框。
[[div class="code terminal"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:component:wechat## ##var(--c-builtin)|inc-end####var(--c-keyword)|=##**##var(--c-string)|@@--@@]##**
**##var(--c-keyword)||####var(--c-builtin)|content####var(--c-keyword)|=##**##var(--c-string)|none##
**##var(--c-keyword)|]]##**
[[/div]]
[[div class="options"]]
||**@@ @@**|| ||
|| **inc-end** || 辨识符。 _
使页面读取组件的结尾部分。仅可且必须填入 {{@@--]@@}}。 ||
|| **content** || 文本框内容。 _
填入任意字符会使右边出现发送按钮，填入 {{none}} 以使其还原为“更多功能”按钮。 ||
|| **hide** _
//（可选）// || 隐藏底部文本框。 _
填入 {{hide=hide}} 时将隐藏底部的文本框。 ||
[[/div]]
[[/div]]
----
[[div style="border: 1px solid #ddd; padding: 1em;"]]
+ 示例：
[[div class="mn-container"]]
[[div class="title-container"]]
[[div class="titleQuit"]]
[[/div]]
[[div class="titleSelf"]]
多点关心多点爱
[[/div]]
[[div class="titleMore"]]
[[/div]]
[[/div]]
[[div_ class="tip-container"]]
20:31
[[/div]]
[[div class="sl-container alignl"]]
[[div class="user name1"]]
[[/div]]
[[div class="message"]]
[[div class="sl sll"]]
这是一个示例
[[/div]]
[[/div]]
[[div class="placeholder"]]
[[/div]]
[[/div]]
[[div class="sl-container alignr"]]
[[div class="placeholder"]]
[[/div]]
[[div class="message"]]
[[div class="sl slr"]]
这是另一个示例
[[/div]]
[[/div]]
[[div class="user name2"]]
[[/div]]
[[/div]]
[[div class="sl-container alignl"]]
[[div class="user name1"]]
[[/div]]
[[div class="message"]]
[[div class="sl sll"]]
😮
[[/div]]
[[/div]]
[[div class="placeholder"]]
[[/div]]
[[/div]]
[[div class="sl-container alignr"]]
[[div class="placeholder"]]
[[/div]]
[[div class="message"]]
[[div class="sl slr"]]
👍
[[/div]]
[[/div]]
[[div class="user name2"]]
[[/div]]
[[/div]]
[[div class="sl-container alignr"]]
[[div class="placeholder"]]
[[/div]]
[[div class="message"]]
[[div class="sl slr"]]
这个组件好玩吧？
[[/div]]
[[/div]]
[[div class="user name2"]]
[[/div]]
[[/div]]
[[div class="sl-container alignl"]]
[[div class="user name1"]]
[[/div]]
[[div class="message"]]
[[div class="sl sll"]]
嘿你别说，还真不错
[[/div]]
[[div class="sl-reply true"]]
Kcorena：这个组件好玩吧？
[[/div]]
[[/div]]
[[div class="placeholder"]]
[[/div]]
[[/div]]
[[div_ class="tip-container"]]
我拍了拍“H-Storm Z”
[[/div]]
[[div_ class="tip-container"]]
**“H-Storm Z”拍了拍我**
[[/div]]
[[div class="sl-container alignr"]]
[[div class="placeholder"]]
[[/div]]
[[div class="message"]]
[[div class="sl-image true"]]
[[image http://darry.wikidot.com/local--files/upload/%E7%A1%AB%E9%85%B8%E9%93%9C%E6%9C%8B%E5%8F%8B]]
[[/div]]
[[/div]]
[[div class="user name2"]]
[[/div]]
[[/div]]
[[div_ class="tip-container"]]
20:47
[[/div]]
[[div class="sl-container alignr"]]
[[div class="placeholder"]]
[[/div]]
[[div class="message"]]
[[div class="sl slr"]]
看我画的像素画
[[/div]]
[[/div]]
[[div class="user name2"]]
[[/div]]
[[/div]]
[[div_ class="tip-container"]]
我拍了拍“H-Storm Z”
[[/div]]
[[div_ class="tip-container"]]
21:30
[[/div]]
[[div class="sl-container alignl"]]
[[div class="user name1"]]
[[/div]]
[[div class="message"]]
[[div class="sl sll"]]
爬
[[/div]]
[[/div]]
[[div class="placeholder"]]
[[/div]]
[[/div]]
[[div class="sl-container alignr"]]
[[div class="placeholder true"]]
[[/div]]
[[div class="message"]]
[[div class="sl slr"]]
啥？
[[/div]]
[[/div]]
[[div class="user name2"]]
[[/div]]
[[/div]]
[[div_ class="tip-container"]]
消息已发出，但被对方拒收了。
[[/div]]
[[div class="sl-container alignr"]]
[[div class="placeholder true"]]
[[/div]]
[[div class="message"]]
[[div class="sl slr"]]
？？？
[[/div]]
[[/div]]
[[div class="user name2"]]
[[/div]]
[[/div]]
[[div_ class="tip-container"]]
消息已发出，但被对方拒收了。
[[/div]]
[[div class="input-container"]]
[[div class="inputVoice"]]
[[/div]]
[[div_ class="inputText none"]]
none
[[/div]]
[[div class="inputEmoji"]]
[[/div]]
[[div class="inputMore none"]]
[[/div]]
[[/div]]
[[/div]]
示例代码：
[[collapsible show="+ 展开代码" hide="- 收起代码"]]
[[div class="code"]]
@@[[include :scp-wiki-cn:component:wechat inc-top=--]@@
|title=多点关心多点爱
]]
@@[[include :scp-wiki-cn:component:wechat inc-tip=--]@@
|content=20:31
]]
@@[[include :scp-wiki-cn:component:wechat inc-left=--]@@
|name=name1
|content=这是一个示例
]]
@@[[include :scp-wiki-cn:component:wechat inc-right=--]@@
|name=name2
|content=这是另一个示例
]]
@@[[include :scp-wiki-cn:component:wechat inc-left=--]@@
|name=name1
|content=😮
]]
@@[[include :scp-wiki-cn:component:wechat inc-right=--]@@
|name=name2
|content=👍
]]
@@[[include :scp-wiki-cn:component:wechat inc-right=--]@@
|name=name2
|content=这个组件好玩吧？
]]
@@[[include :scp-wiki-cn:component:wechat inc-left=--]@@
|name=name1
|content=嘿你别说，还真不错
|reply=true
|reply-name=Kcorena
|reply-content=这个组件好玩吧？
]]
@@[[include :scp-wiki-cn:component:wechat inc-tip=--]@@
|content=我拍了拍“H-Storm Z”
]]
@@[[include :scp-wiki-cn:component:wechat inc-tip=--]@@
|content=**“H-Storm Z”拍了拍我
]]
@@[[include :scp-wiki-cn:component:wechat 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:wechat inc-tip=--]@@
|content=20:47
]]
@@[[include :scp-wiki-cn:component:wechat inc-right=--]@@
|name=name2
|content=看我画的像素画
]]
@@[[include :scp-wiki-cn:component:wechat inc-tip=--]@@
|content=我拍了拍“H-Storm Z”
]]
@@[[include :scp-wiki-cn:component:wechat inc-tip=--]@@
|content=21:30
]]
@@[[include :scp-wiki-cn:component:wechat inc-left=--]@@
|name=name1
|icon=@@http://scp-wiki-cn.wikidot.com/local--files/kcorena-s-artwork/netzach@@
|content=爬
]]
@@[[include :scp-wiki-cn:component:wechat inc-right=--]@@
|name=name2
|content=啥？
|blacklist=true
]]
@@[[include :scp-wiki-cn:component:wechat inc-tip=--]@@
|content=消息已发出，但被对方拒收了。
]]
@@[[include :scp-wiki-cn:component:wechat 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:wechat inc-tip=--]@@
|content=消息已发出，但被对方拒收了。
]]
@@[[include :scp-wiki-cn:component:wechat inc-end=--]@@
|content=none
]]
[[/div]]
[[/collapsible]]
暗色模式示例见 [[*user Kcorena]] 所作的[[[help|圣诞节的狗语]]]。
[[/div]]
----
[[div style="border: 1px solid #ddd; padding: 1em;"]]
+ 组件样式代码
[[collapsible show="+ 展开代码" hide="- 收起代码"]]
[[code type="css"]]
/*
* 修改自 Dr Hormress 的信息栏组件
* http://ah-sandbox.wikidot.com/message
*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
.sl {
position: relative;
padding: 0.5rem;
-webkit-border-radius: 0.2rem;
-moz-border-radius: 0.2rem;
border-radius: 0.2rem;
margin: 0.5rem 0 1rem 0;
width: fit-content;
width: -o-fit-content;
width: -ms-fit-content;
width: -moz-fit-content;
width: -webkit-fit-content;
color: #111111;
}
.sll {
margin-left: 0.5rem;
background-color: #ffffff;
}
.mn-container.true .sll {
background-color: #2c2c2c;
color: #d1d1d1;
}
.slr {
margin-right: 0.5rem;
text-align: left;
background-color: #9eea6a;
}
.mn-container.true .slr {
background-color: #3eb477;
color: #061d03;
}
.sl > *:nth-child(1) {
margin-top: 0;
}
.sl > *:nth-last-child(1) {
margin-bottom: 0;
}
.sl::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);
}
.sll::before {
left: -0.25rem;
background-color: #ffffff;
}
.mn-container.true .sll::before {
background-color: #2c2c2c;
}
.slr::before {
right: -0.25rem;
background-color: #9eea6a;
}
.mn-container.true .slr::before {
background-color: #3eb477;
}
.sl-image,
.sl-image.true+.sl {
display: none;
}
.sl-image.true {
display: block;
}
#page-content .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;
width: fit-content;
width: -o-fit-content;
width: -ms-fit-content;
width: -moz-fit-content;
width: -webkit-fit-content;
max-width: 40%;
}
.sl-reply {
background-color: #e1e1e1;
color: #626262;
text-align: left;
padding: 0.25rem 0.5rem;
margin: -0.625rem 0.5rem 1rem 0.5rem;
display: none;
width: fit-content;
width: -o-fit-content;
width: -ms-fit-content;
width: -moz-fit-content;
width: -webkit-fit-content;
}
.sl-reply.true {
display: block;
}
.sl-reply p {
margin: 0;
}
.mn-container.true .sl-reply {
background-color: #252525;
color: #929292;
}
.message {
max-width: -webkit-calc(100% - 6.5rem) !important;
max-width: -moz-calc(100% - 6.5rem) !important;
max-width: calc(100% - 6.5rem) !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 > p {
margin: 0;
margin-left: 0.5rem;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
}
.placeholder {
width: 3.5rem;
min-width: 3.5rem;
}
.placeholder.true::before {
content: '!';
color: #ffffff;
background-color: #f43430;
font-size: 16px;
padding: 0.125rem 0.5rem;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: relative;
top: 1rem;
}
.alignl .placeholder.true::before {
left: 0.75rem;
}
.alignr .placeholder.true::before {
right: 0.75rem;
}
.mn-container {
background-color: #ededed;
}
.mn-container.true {
background-color: #111111;
color: #cccccc;
}
.title-container {
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;
font-size: 20px;
position: relative;
left: 1rem;
top: 1rem;
}
.titleMore::before {
content: "\f141";
font-family: FontAwesome;
font-size: 20px;
position: relative;
right: 1rem;
top: 1rem;
}
.titleSelf {
font-size: 16px;
font-weight: bold;
font-family: 'Noto Sans SC', sans-serif;
}
.input-container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
background-color: #f5f5f5;
height: 3rem;
}
.input-container.hide {
display: none;
}
.mn-container.true .input-container {
background-color: #1f1f1f;
}
.inputVoice::before {
content: "\f09e";
font-family: FontAwesome;
border: 2px solid #111111;
color: #111111;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: relative;
padding: 1px 3px;
margin: 1rem;
top: 1rem;
font-size: 14px;
}
.mn-container.true .inputVoice::before,
.mn-container.true .inputEmoji::before,
.mn-container.true .inputMore::before{
border-color: #f1f1f1;
color: #f1f1f1;
}
.inputVoice {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.inputText {
background-color: #ffffff;
width: 100%;
height: 1.5rem;
margin: 0.5rem 0;
padding: 0.25rem;
font-size: 16px;
cursor: text;
}
.mn-container.true .inputText {
background-color: #282828;
}
.inputText.none {
font-size: 0;
}
.inputEmoji::before {
content: "\f118";
font-family: FontAwesome;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: relative;
padding: 3px;
margin: 0 0.5rem 0 1rem;
top: 0.75rem;
font-size: 24px;
}
.inputMore::before {
content: "发送";
background-color: #07bf5f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #ffffff;
position: relative;
white-space: nowrap;
padding: 0.5rem 1rem;
margin: 0 1rem 0 0.5rem;
top: 0.83rem;
font-size: 16px;
}
.inputMore.none::before {
content: "\f067";
font-family: FontAwesome;
border: 2px solid #111111;
background-color: transparent;
color: #111111;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
padding: 1px 3px;
top: 1.125rem;
font-size: 14px;
}
.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: #8c8c8c;
margin-bottom: 1.5rem;
}
.mn-container.true .tip-container {
color: #585858;
}
[[/code]]
[[/collapsible]]
[[/div]]
[[/iftags]]
[!-- {$inc-top}
[[module css]]
@import url('https://scp-wiki-cn.wdfiles.com/local--code/component:wechat/1');
[[/module]]
[[div class="mn-container {$darkmode}"]]
[[div class="title-container {$hide}"]]
[[div class="titleQuit"]]
[[/div]]
[[div class="titleSelf"]]
{$title}
[[/div]]
[[div class="titleMore"]]
[[/div]]
[[/div]]
[!-- --]
[!-- {$inc-left}
[[module css]]
.user.{$name} {
background-image: url("{$icon}");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: {$color};
box-sizing: border-box;
}
[[/module]]
[[div class="sl-container alignl"]]
[[div class="user {$name}"]]
[[/div]]
[[div class="message"]]
[[div class="sl-image {$image}"]]
[[image {$image-url}]]
[[/div]]
[[div class="sl sll"]]
{$content}
[[/div]]
[[div class="sl-reply {$reply}"]]
{$reply-name}：{$reply-content}
[[/div]]
[[/div]]
[[div class="placeholder {$blacklist}"]]
[[/div]]
[[/div]]
[!-- --]
[!-- {$inc-right}
[[module css]]
.user.{$name} {
background-image: url("{$icon}");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: {$color} !important;
box-sizing: border-box;
}
[[/module]]
[[div class="sl-container alignr"]]
[[div class="placeholder {$blacklist}"]]
[[/div]]
[[div class="message"]]
[[div class="sl-image {$image}"]]
[[image {$image-url}]]
[[/div]]
[[div class="sl slr"]]
{$content}
[[/div]]
[[div class="sl-reply {$reply}"]]
{$reply-name}：{$reply-content}
[[/div]]
[[/div]]
[[div class="user {$name}"]]
[[/div]]
[[/div]]
[!-- --]
[!-- {$inc-tip}
[[div_ class="tip-container"]]
{$content}
[[/div]]
[!-- --]
[!-- {$inc-end}
[[div class="input-container {$hide}"]]
[[div class="inputVoice"]]
[[/div]]
[[div_ class="inputText {$content}"]]
{$content}
[[/div]]
[[div class="inputEmoji"]]
[[/div]]
[[div class="inputMore {$content}"]]
[[/div]]
[[/div]]
[[/div]]
[!-- --]