微信聊天框 组件

这是什么

我CroquemboucheCroquembouche用在一大堆页面上的一大堆各种各样的CSS“改进”，因为我觉得这样就能使其更容易处理。

该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点（也就是我经常干的事）。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。

我不期望用了这个组件的文章的翻译版也会用到这个组件，除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。

这个组件可能不会与其它组件或版式冲突，且即使会冲突，也可能不会有什么影响。

用法

在任意维基上：

[[include :scp-wiki:component:croqstyle]]

该组件被设计于与其它组件一同使用，所以-=-是用来隐藏该文档的。在另一个组件内使用时，请确保将该组件放在[[iftags]]块内，这样你的组件的用户就不会强制同样使用 Croq 风格。

相关组件

其它个人自定义组件（只会改变一点点东西）：

个人自定义版式（在视觉上有大的变化）：

CSS修改

大小合理的脚注

不让脚注达到一百万里那么宽，让你能确实地阅读脚注。

css
.hovertip { max-width: 400px; }

等宽字体编辑/代码

使编辑文本框内字体等宽，且将所有等宽字文本改为Fira Code，也是个明显很优秀的等宽字字体。

css
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

电传打字机背景

给<tt>元素加上亮灰色的背景（{{文本}}），使得代码片段更为突出。

css
tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

不要大脸

禁用悬停于某人的头像的时候出现的大图片，因为这图片又蠢又真的很烦人，想看大头像版本的话直接点击一下就行了。

css
.avatar-hover { display: none !important; }

碎裂碎裂

任何在带有nobreak类的div中的文本可以在字母间自动换行。

css
.nobreak { word-break: break-all; }

代码颜色

将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题，但是现在暂时这还是我的个人主题，是从Tomorrow Night Eighties中衍生而来的。

还有，将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中，因为Wikidot嵌入了一大堆语法来使其高亮，不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。

css
:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}

.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

调试模式

将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。

你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间，让注释不会与其上方或下方的东西重叠。

……就像这样！

css
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:toggle-sidebar）

Rating: +107

著作信息


微信聊天框 组件
作者：hoah2333hoah2333

Rating: +107

微信聊天框 组件
作者：hoah2333hoah2333

hoah2333的作者页！点击发现更多作品

Rating: +107

这是什么？

该组件是对聊天软件微信的手机端的聊天区域的仿制，修改自 Dr HormressDr Hormress 的 >>群聊的聊天记录<<。

使用方法：

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

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

[[include :scp-wiki-cn:component:wechat inc-top=--]
title=相亲相爱一家人
darkmode=true
]]

                           
inc-top辨识符。
使页面读取组件的标题栏部分。仅可且必须填入 --]。
title标题。
此即显示在最顶部的“好友昵称”或“群聊名称”。
darkmode
（可选）		暗色模式。
填入 true 时将开启暗色模式。
hide
（可选）		隐藏顶部标题栏。
填入 hide=hide 时将隐藏顶部的标题栏。

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

[[include :scp-wiki-cn:component:wechat inc-left=--]
name=username1
**##var(--c-keyword)||####var(--c-builtin)|icon####var(--c-keyword)|=##**##var(--c-string)|@@http://urlhere.com@@##
color=white
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 以将该说话人标记为同一人，以保持头像的一致。
由于该参数并不会显示出来，所以你可以随意填写，只需保证同一说话人的 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 以开启黑名单模式。
开启后对话框的左侧将出现一个红色叹号。用于模拟被拉入黑名单或图片发送失败的情形。

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

[[include :scp-wiki-cn:component:wechat inc-right=--]
name=username1
**##var(--c-keyword)||####var(--c-builtin)|icon####var(--c-keyword)|=##**##var(--c-string)|@@http://urlhere.com@@##
color=white
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:wechat inc-tip=--]
content=消息已发出，但被对方拒收了。
]]

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

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

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

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

示例：

多点关心多点爱

20:31

这是一个示例

这是另一个示例

😮

👍

这个组件好玩吧？

嘿你别说，还真不错

Kcorena：这个组件好玩吧？

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

硫酸铜朋友

20:47

看我画的像素画

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

爬

啥？

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

？？？

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

示例代码：

+ 展开代码- 收起代码

[[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
]]

暗色模式示例见 KcorenaKcorena 所作的圣诞节的狗语。

组件样式代码

+ 展开代码- 收起代码
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;
}
原创组件
页面版本：⁨0⁩, 最后编辑于: ⁨2022/1/13 17:08:22⁩ (⁨⁨1707⁩ 日前⁩), 现时评分: 107
历史 附件 + 选项