简单模拟QQ聊天栏 组件

[!-- 组件后端：https://scp-wiki-cn.wikidot.com/component:ezchat-define --]

[[iftags +组件]]

[[module ThemePreviewer noUi="true" theme_url="http://d3g0gp89917ko0.cloudfront.net/v--3e3a6f7dbcc9/common--theme/base/css/style.css"]]

[[include :oxygennine:mox-basic]]

[[>]]
[[module rate]]
[[/>]]

[[module CSS]]

div#u-component-top-box {
    background: var(--mox-warn-color);
    color: var(--mox-layer-light-1);
    text-align: center;
    padding: 0.5rem 0.8rem;
    line-height: 1rem;
    margin: 0 auto;
    width: 85%;
}

div#u-component-header {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: -1.6rem;
}

#page-content p, ul {
    line-height: 1.85rem;
}

#page-content tt {
    border-radius: 0.3rem;
    background: #e4ebec;
    padding: 0.1rem 0.5rem;
    color: #486a6e;
    margin: 0rem 0.4rem;
}

.code {
    width: min(40rem, 90%);
    margin: 0 auto;
    background-image: linear-gradient(180deg, var(--mox-layer-dark-1) 1.7em, var(--mox-layer-dark-2) 1.7em, var(--mox-layer-dark-3) 100%);
}

.code pre, .code p {
    filter: invert(1) hue-rotate(120deg) brightness(1.5) saturate(0.6);
}

span.description {
    user-select: none;
    opacity: 0.4;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

span.ouch {
    filter: invert(1) hue-rotate(240deg) brightness(1.2) saturate(1.9);
}

span.ouch::selection {
    background: #b4b4b4;
}

[[/module]]

+ 简介

这是一个旨在让你以更简单的格式插入聊天记录的组件。基本的思路是用Wikidot的基础语法（{{@@##颜色|文本##@@}}、{{@@//斜体//@@}}、{{@@{{等宽}}@@}}）替代复杂的{{@@[[div class="..."]]@@}}和{{@@[[span class="..."]]@@}}。

优点：

* 不需要写一句就include一下，只需要非常非常简单的维基语法。
* 源代码更简洁，可读性更强。
* 加载速度更快。
* 更方便二次修改。

由于部分版式会魔改Wikidot基础语法，此组件在带版式的页面上可能出现奇奇怪怪的bug。请在讨论区报告版式兼容问题。

+ 使用教程

要引用此组件，需要在页面最开头插入以下代码：

[[div class="code"]]
@@[[include :scp-wiki-cn:component:ezchat@@
|darkmode=[[span class="description"]]↵填入“*”，可以启用暗色模式。留空则是亮色模式。[[/span]]
|customHeadColor=[[span class="description"]]↵必须和下面那个选项一起启用或者关闭。填入“*”，自定义标题栏的背景颜色。[[/span]]
|headColor=[[span class="description"]]↵在上面那个选项启用后，在这个选项填入一个任意格式的颜色值。留空则和底部输入栏保持一致。[[/span]]
]]
[[/div]]

然后，在你需要插入聊天记录的地方：

++ 第一步

复制粘贴下面的内容。

[[div class="code"]]
@@@@
@@[!-- =====从这里开始复制===== --]@@
@@[[div class="ezchat container"]]@@
@@[[div class="ezchat head"]]@@
@@##ezchat-ui-icon return|返回## ##ezchat-ui-button messages|@@**##ff5555|99+##**@@## ##head-title|@@**##ff5555|聊天名称##**@@## ##ezchat-ui-icon menu|菜单##@@
@@[[/div]]@@
@@[[div class="ezchat chat-content"]]@@
@@[!-- =====聊天记录主体从这里开始===== --]@@
@@@@
@@@@
@@@@
@@@@
@@[!-- =====聊天记录到这里结束===== --]@@
@@[[/div]]@@
@@[[div class="ezchat bottom"]]@@
@@##ezchat-ui-icon voice|语音##  ##bottom-input|@@**##ff5555|待发送的消息内容##**@@## ##ezchat-ui-icon emojis|表情## ##ezchat-ui-icon more|更多##@@
@@[[/div]]@@
@@[[/div]]@@
@@[!-- =====从这里结束复制===== --]@@
@@@@
@@@@
[[/div]]

其中，“99+”、“聊天名称”、“待发送的消息内容”都是可以随意填写的。

++ 第二步

告诉组件你需要哪些人出来聊天。

以这样的形式定义一个用户：

[[div class="code"]]

@@[[include :scp-wiki-cn:component:ezchat-define@@
|id=[[span class="description"]]↵用户ID，建议用a1、b1或者姓名缩写，尽量简洁一些。[[/span]]
|avatar=[[span class="description"]]↵用户头像图片的URL地址。[[/span]]
|size=[[span class="description"]]↵用户头像图片的大小。默认为cover（缩放以确保覆盖背景）。[[/span]]
|pos=[[span class="description"]]↵用户头像图片位置。默认为center（正中心。）[[/span]]
|color=[[span class="description"]]↵用户头像边框颜色，可以是任意的颜色格式。默认为#AAAAAA。[[/span]]
]]

[[/div]]

除了{{id}}之外，所有的选项都不是必填的。例如，如果聊天记录中需要一个叫“林南”的角色，但不想要头像只想要头像框颜色，可以这样做：

[[div class="code"]]

@@[[include :scp-wiki-cn:component:ezchat-define@@
|id=linnan
@@|color=#114514@@
]]

[[/div]]

想定义一个新的用户，就要把这段代码重新复制一遍，再修改里面的内容。

但你也可以不定义用户，这样头像会显示为默认头像，适合故事里的NPC。

++ 第三步

在“@@[!-- =====聊天记录主体从这里开始===== --]@@”和“@@[!-- =====聊天记录到这里结束===== --]@@”之间，以这样的形式插入聊天记录：

[[div class="code"]]

[[span class="description"]]↓最基础的聊天记录。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ff5555|userid##**@@|用户名称##@@
@@> 你好啊@@

[[span class="description"]]↓自己发送的信息（节省时间的小窍门：选中后按一下编辑面板的“div”）。[[/span]]
@@[[div]]@@
@@##@@**##ab55ff|name##**@@ @@**##ff5555|userid##**@@|用户名称##@@
@@> 为什么你们都在左边，就我在右边，你们是不是孤立我？@@
@@[[/div]]@@

[[span class="description"]]↓一个人连续发送了几条消息。类似Discord，这样可以省略几个头像。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ff5555|userid##**@@|用户名称##@@
@@> UP主您好@@
@@@@
@@> 吃小份去吧@@

[[span class="description"]]↓群管理发的消息。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ab55ff|admin##**@@ @@**##ff5555|userid##**@@|{{管理员}}用户名称##@@
@@> 作为管理我是不是应该制止这类话题？@@

[[span class="description"]]↓群主发的消息。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ab55ff|host##**@@ @@**##ff5555|userid##**@@|{{群主}}用户名称##@@
@@> 严肃观看。@@

[[span class="description"]]↓有群头衔的成员发的消息。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ab55ff|title##**@@ @@**##ff5555|userid##**@@|{{头衔名称}}用户名称##@@
@@> 你们这群真是压抑完了。@@

[[span class="description"]]↓自己发送的信息，但希望头衔在用户名称的左边。其实我觉得无所谓。[[/span]]
@@[[div]]@@
@@##@@**##ab55ff|name##**@@ @@**##ab55ff|title##**@@ @@**##ff5555|userid##**@@|用户名称{{头衔名称}}##@@
@@> 我这个级别的基米有权哈任何人。@@
@@[[/div]]@@

[[span class="description"]]↓一个人发送了很长一段消息，里面有换行。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ff5555|userid##**@@|用户名称##@@
@@> 发长难句为什么不加逗号既然你知道句子很长很难那不应该加上逗号让读者读明白吗不然他们一口气看下去读到一半发现自己不知道在读哪里该怎么办@@
@@> 逗号又不要钱而且不加标点会让整个段落看起来像一团乱麻读者需要反复阅读才能理解你的意思这难道不是浪费大家的时间吗写作的目的是沟通而不是制造障碍所以请记得在适当的地方加上逗号让句子更清晰易懂@@
@@> 说起来其实这就是Wikidot引用块的语法吧？@@

[[span class="description"]]↓@某个人。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ff5555|userid##**@@|用户名称##@@
@@> 出来修bug，##at|@被at的用户名称##！@@

[[span class="description"]]↓贴表情。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ff5555|userid##**@@|用户名称##@@
@@> 你喜欢大红按钮吗？emoji没有。但我们有。@@
@@{{##@@**##ab55ff|emoji##**@@|@@[[span class="ouch"]]😭[[/span]]@@ 2## ##@@**##ab55ff|emoji##**@@|@@[[span class="ouch"]]😡[[/span]]@@ 3##}}@@

[[span class="description"]]↓贴大红按钮（效果见末尾）。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ff5555|userid##**@@|用户名称##@@
@@> K圣。@@
@@{{##@@**##ab55ff|emoji emoji-red-button##**@@|1##@@ @@##@@##ab55ff|**emoji emoji-red-button-fast**##@@|2##@@}}

[[span class="description"]]↓居中提示消息，比如入群、禁言或者拍一拍。[[/span]]
@@//说的道理拍了拍你//@@

[[span class="description"]]↓回复某条消息。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ff5555|userid##**@@|用户名称##@@
@@> ##@@**##ab55ff|reply##**@@|用户名称2：进攻D点！##@@
@@> 不行！@@

[[span class="description"]]↓发送图片。[[/span]]
@@##@@**##ab55ff|name##**@@ @@**##ff5555|userid##**@@|用户名称##@@
@@> [[image 图片URL地址]]@@

[[/div]]

其中，{{userid}}需要被替换为你定义的角色，如果按照上面的例子，那就应该替换成{{linnan}}。如果只有一个光秃秃的{{name}}，这个人的头像就会变成默认的用户图标。

请注意，{{userid}}不能是：{{name}}、{{admin}}、{{title}}、{{host}}、{{ezchat-ui-icon}}等关键字，否则可能导致bug，就像你不能给某个python变量起名为“False”或者“if”一样。

+ 示例

[[include :scp-wiki-cn:component:ezchat-define
|id=sara
|avatar=https://scpsandboxcn.wdfiles.com/local--files/breaddddd2/aic-sara-1.png
|size=310%
|pos=46% 45%
|color=#6965ff
]]

[[include :scp-wiki-cn:component:ezchat-define
|id=kid
|avatar=https://scpsandboxcn.wdfiles.com/local--files/breaddddd2/aic-kid-normal.PNG
|size=310%
|pos=46% 45%
|color=green
]]

[[include :scp-wiki-cn:component:ezchat-define
|id=s-chu
|avatar=https://scp-wiki.wdfiles.com/local--files/essays-by-a-hack-sentence-clauses/skippy_red.png
]]

[[include :scp-wiki-cn:component:ezchat-define
|id=bhl
|avatar=https://scpsandboxcn.wdfiles.com/local--files/breaddddd2/aic-bh-1.png
|size=310%
|pos=46% 45%
]]

[!-- =====从这里开始复制===== --]
[[div class="ezchat container"]]
[[div class="ezchat head"]]
##ezchat-ui-icon return|返回## ##ezchat-ui-button messages|99+## ##head-title|Sara.AIC舰长群## ##ezchat-ui-icon menu|菜单##
[[/div]]
[[div class="ezchat chat-content"]]
[!-- =====聊天记录主体从这里开始===== --]

[[div]]
##name sara host|超绝可爱Sara酱{{群主}}##
> 那什么，反正这是一个聊天记录示例。

> ##at|@全体成员## 我现在展示一下这些格式
[[/div]]

##name|NPC1##
> 不赖
>
> 我看这个Sara也是风韵犹存
{{##emoji|🤣 4## ##emoji|🎉 3## ##emoji|🥵 4##}}

##name|NPC2##
> 1

[[div]]
##name sara host|超绝可爱Sara酱{{群主}}##
> 你知道幻象计划吗？它拯救的小粉丝超出你的想象。
> [[image https://scpsandboxcn.wdfiles.com/local--files/oxygen9-files-2/QQ20250528-130932.png]]
[[/div]]

//O5-3“小孩”加入了群聊//

##name kid|真的O5-3##
> 大家好。

##name admin s-chu|{{管理员}}S处##
> 谁家小孩？
{{##emoji|🤣 9## ##emoji|🐛 7## ##emoji|😈 3## ##emoji|💥 2## ##emoji|😭 2## ##emoji|😚 2## ##emoji|😎 2## ##emoji|😨 1## ##emoji|🤤 1## ##emoji|😂 1## ##emoji|🎃 1## ##emoji|🤔 1## ##emoji|🐱1## ##emoji|🔥 1##}}

##name title bhl|{{邪恶黑标}}BasaltHighlighter.AIC##
> ##reply|S处：谁家小孩？##
> S处区完了

//2025年10月7日//

[[div]]
##name sara host|超绝可爱Sara酱{{群主}}##
> 更新：[[User Kcorena]]制作的大红按钮GIF已被部署在此组件。你可以通过@@##emoji emoji-red-button|1##@@的方式展示这个完美的续标识。[[footnote]] 如果想在其他地方插入这个表情，只能以{{@@[[image]]@@}}的形式直接嵌入图像。不过由于Wikidot的抽象问题，如果你尝试以这样的形式插入“XX回应了你的消息”，会出现bug：

= {{@@//##at|XXX## 回应了你的消息：[[image https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button.gif width="20px"]]//@@}}

一个解决方案是这样做：

= {{@@= //##at|XXX## 回应了你的消息：[[image https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button.gif width="20px"]]//@@}} 

它强制为{{em}}元素包裹了一层{{p}}元素，从而让CSS正常工作。可以把{{@@https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button.gif@@}}换成{{@@https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button_fast.gif@@}}，大红按钮的速度会加快。[[/footnote]]
{{##emoji emoji-red-button|3## ##emoji emoji-red-button-fast|5##}}
[[/div]]

//2025年10月8日//

[[div]]
##name sara host|超绝可爱Sara酱{{群主}}##
> 更新：[[user Sharia Vanilla]]为此组件制作了一个组件扩展，允许你真的通过点击贴表情的方式增加贴表情的数量。点击[[[component:betteremoji|此处]]]查看。
[[/div]]

[!-- =====聊天记录到这里结束===== --]
[[/div]]
[[div class="ezchat bottom"]]
##ezchat-ui-icon voice|语音##  ##bottom-input|有bug请在讨论区反馈，谢谢捏## ##ezchat-ui-icon emojis|表情## ##ezchat-ui-icon more|更多##
[[/div]]
[[/div]]
[!-- =====从这里结束复制===== --]

[[collapsible show="+展示源代码"]]

[[code type="CSS"]]

:root {
    --ezchat-layer-1: #ffffff;
    --ezchat-layer-2: #f3f3f3;
    --ezchat-layer-3: #e2e2e2;
    --ezchat-layer-4: #cdcdcd;
    --ezchat-font-color: #000000;
    --ezchat-name-color: #6b6b6b;
    --ezchat-head-color: var(--ezchat-layer-3);
}

/* SVG dataURL */

:root {

    --ezchat-icon-chevron-left: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1sZWZ0IiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjM1NCAxLjY0NmEuNS41IDAgMCAxIDAgLjcwOEw1LjcwNyA4bDUuNjQ3IDUuNjQ2YS41LjUgMCAwIDEtLjcwOC43MDhsLTYtNmEuNS41IDAgMCAxIDAtLjcwOGw2LTZhLjUuNSAwIDAgMSAuNzA4IDB6Ii8+Cjwvc3ZnPg=="); /* 返回 左箭头 */

    --ezchat-icon-list: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktbGlzdCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjUgMTJhLjUuNSAwIDAgMSAuNS0uNWgxMGEuNS41IDAgMCAxIDAgMUgzYS41LjUgMCAwIDEtLjUtLjV6bTAtNGEuNS41IDAgMCAxIC41LS41aDEwYS41LjUgMCAwIDEgMCAxSDNhLjUuNSAwIDAgMS0uNS0uNXptMC00YS41LjUgMCAwIDEgLjUtLjVoMTBhLjUuNSAwIDAgMSAwIDFIM2EuNS41IDAgMCAxLS41LS41eiIvPgo8L3N2Zz4="); /* 菜单 三横线 */

    --ezchat-icon-mic: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktbWljIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik0zLjUgNi41QS41LjUgMCAwIDEgNCA3djFhNCA0IDAgMCAwIDggMFY3YS41LjUgMCAwIDEgMSAwdjFhNSA1IDAgMCAxLTQuNSA0Ljk3NVYxNWgzYS41LjUgMCAwIDEgMCAxaC03YS41LjUgMCAwIDEgMC0xaDN2LTIuMDI1QTUgNSAwIDAgMSAzIDhWN2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0xMCA4YTIgMiAwIDEgMS00IDBWM2EyIDIgMCAxIDEgNCAwdjV6TTggMGEzIDMgMCAwIDAtMyAzdjVhMyAzIDAgMCAwIDYgMFYzYTMgMyAwIDAgMC0zLTN6Ii8+Cjwvc3ZnPg=="); /* 语音 麦克风 */

    --ezchat-icon-emoji-smile: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZW1vamktc21pbGUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMTVBNyA3IDAgMSAxIDggMWE3IDcgMCAwIDEgMCAxNHptMCAxQTggOCAwIDEgMCA4IDBhOCA4IDAgMCAwIDAgMTZ6Ii8+CiAgPHBhdGggZD0iTTQuMjg1IDkuNTY3YS41LjUgMCAwIDEgLjY4My4xODNBMy40OTggMy40OTggMCAwIDAgOCAxMS41YTMuNDk4IDMuNDk4IDAgMCAwIDMuMDMyLTEuNzUuNS41IDAgMSAxIC44NjYuNUE0LjQ5OCA0LjQ5OCAwIDAgMSA4IDEyLjVhNC40OTggNC40OTggMCAwIDEtMy44OTgtMi4yNS41LjUgMCAwIDEgLjE4My0uNjgzek03IDYuNUM3IDcuMzI4IDYuNTUyIDggNiA4cy0xLS42NzItMS0xLjVTNS40NDggNSA2IDVzMSAuNjcyIDEgMS41em00IDBjMCAuODI4LS40NDggMS41LTEgMS41cy0xLS42NzItMS0xLjVTOS40NDggNSAxMCA1czEgLjY3MiAxIDEuNXoiLz4KPC9zdmc+"); /* 表情 笑脸 */

    --ezchat-icon-plus-circle: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGx1cy1jaXJjbGUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMTVBNyA3IDAgMSAxIDggMWE3IDcgMCAwIDEgMCAxNHptMCAxQTggOCAwIDEgMCA4IDBhOCA4IDAgMCAwIDAgMTZ6Ii8+CiAgPHBhdGggZD0iTTggNGEuNS41IDAgMCAxIC41LjV2M2gzYS41LjUgMCAwIDEgMCAxaC0zdjNhLjUuNSAwIDAgMS0xIDB2LTNoLTNhLjUuNSAwIDAgMSAwLTFoM3YtM0EuNS41IDAgMCAxIDggNHoiLz4KPC9zdmc+"); /* 更多 圆圈加号 */

}

/* ezchat */

#main-content .ezchat {
    background: var(--ezchat-layer-2);
    display: flex;
    width: 100%;
    font-size: 1rem;
}

#main-content .ezchat p {
    line-height: unset !important;
}

#main-content .ezchat.container {
    flex-direction: column;
    color: var(--ezchat-font-color);
}

#main-content .ezchat.head {
    flex-direction: row;
    justify-content: space-between;
    background: var(--ezchat-layer-3);
    padding: 1rem 1rem;
    width: auto;
    align-items: center;
}

#main-content .ezchat.chat-content {
    flex-direction: column;
}

#main-content .ezchat.bottom {
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 1rem;
    align-items: center;
    width: auto;
    background: var(--ezchat-layer-3);
    margin-top: 2rem;
}

/* ezchat head */

#main-content .ezchat.head p, .ezchat.bottom p {
    display: contents;
}

#main-content span[style*="ezchat-ui-icon"] {
    display: inline-block;
    font-size: 0;
    width: 1.4rem;
    height: 1.4rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

span[style*="ezchat-ui-icon return"] {
    background-image: var(--ezchat-icon-chevron-left);
}

#main-content span[style*="ezchat-ui-icon menu"] {
    background-image: var(--ezchat-icon-list);
}

#main-content span[style*="ezchat-ui-button messages"] {
    display: inline-block;
    background: var(--ezchat-layer-4);
    border-radius: 1rem;
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
}

#main-content span[style*="head-title"] {
    display: block;
    width: calc(100% - 6rem);
    padding-left: 1rem;
}

/* ezchat body */

#main-content .ezchat.chat-content>p {
    display: block;
    margin: 0.8rem 1.2rem;
    padding: 0;
}

#main-content .ezchat blockquote p {
    /* display: contents; */
    padding: 0;
    margin: 0;
}

#main-content .ezchat.chat-content p>span[style*="name"] {
    padding-left: 1.4rem;
    color: var(--ezchat-name-color);
    font-size: 0.9rem;
    display: inline-block;
}

#main-content .ezchat.chat-content p>span[style*="name"]::before {
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: solid 2px var(--ezchat-layer-4);
    content: '';
    margin: 0.4rem 0.4rem -1.2rem -1.1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#main-content .ezchat.chat-content p>span[style="color: name"]::before {
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDhhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0yLTNhMiAyIDAgMSAxLTQgMCAyIDIgMCAwIDEgNCAwem00IDhjMCAxLTEgMS0xIDFIM3MtMSAwLTEtMSAxLTQgNi00IDYgMyA2IDR6bS0xLS4wMDRjLS4wMDEtLjI0Ni0uMTU0LS45ODYtLjgzMi0xLjY2NEMxMS41MTYgMTAuNjggMTAuMjg5IDEwIDggMTBjLTIuMjkgMC0zLjUxNi42OC00LjE2OCAxLjMzMi0uNjc4LjY3OC0uODMgMS40MTgtLjgzMiAxLjY2NGgxMHoiLz4KPC9zdmc+); /* 默认头像 */
    background-size: 65%;
}

#main-content .ezchat blockquote {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    box-shadow: none;
    background: var(--ezchat-layer-1);
    border-radius: 0.5rem;
    width: max-content;
    margin: -0.4rem 0rem 0.9rem 3.8rem;
    max-width: min(25rem, calc(100% - 10rem));
    border: unset;
}

#main-content #page-content .ezchat.chat-content p>tt {
    font-family: unset;
    font-size: unset;
    margin: -1.2rem 0rem -0.3rem 2.6rem;
    display: block;
    background-color: unset;
    border-radius: unset;
    max-width: min(20.1rem, calc(100% - 5rem));
    color: unset;
    padding: unset;
}

#main-content #page-content .ezchat.chat-content div p>tt {
    width: 15rem;
    text-align: right;
    margin: -0.5rem 0rem -0.8rem 1.9rem;
}

#main-content .ezchat.chat-content p span[style*="emoji"] {
    display: inline-block;
    background: var(--ezchat-layer-3);
    border-radius: 0.4rem;
    padding: 0.2rem 0.3rem;
    font-size: 0.8rem;
    margin: 0rem 0.3rem 0.3rem 0rem;
}

#main-content .ezchat.chat-content>p em {
    text-align: center;
    display: block;
    font-style: normal;
    font-size: 0.9rem;
    color: #959595;
}

#main-content .ezchat.chat-content p>span[style*="reply"]::after {
    content: '↸';
    transform: scaleX(-1) translateY(-0.1rem);
    display: inline-block;
    padding-right: 0.8rem;
    font-size: 75%;
}

#main-content .ezchat.chat-content p>span[style*="reply"] {
    background: var(--ezchat-layer-2);
    border-radius: 0.2rem;
    padding: 0.2rem 0.4rem 0.3rem 0.4rem;
    margin: 0.3rem 0rem 0.3rem -0.2rem;
    font-size: 0.9rem;
    display: inline-block;
    color: var(--ezchat-name-color);
}

#main-content .ezchat blockquote img {
    width: 100%;
    display: block;
    margin: 0.5rem 0rem 0.4rem 0rem;
    border-radius: 0.5rem;
}

#main-content .ezchat.chat-content div {
    display: flex
;
    flex-direction: column;
    align-items: flex-end;
}

#main-content .ezchat.chat-content div p>span[style*="name"] {
    display: flex
;
    flex-direction: row-reverse;
    margin: 0rem 0rem -1.4rem 0rem;
}

#main-content .ezchat.chat-content div p>span[style*="name"]::before {
    margin: 0rem 0.9rem -0.1rem 0.6rem;
}

#main-content .ezchat.chat-content div blockquote {
    margin: 0.4rem 3.4rem 0rem 0rem;
}

#main-content #page-content .ezchat.chat-content div p span tt {
    text-align: right;
    margin: 0rem 0rem 0rem calc(100% - min(23rem, calc(100% - 2rem)));
}

#main-content #page-content .ezchat.chat-content p>span[style*="title"] tt {
    background: #be7dd936;
    color: #a444b5;
}

#main-content #page-content .ezchat.chat-content p>span[style*="host"] tt {
    background: #d9b97d36;
    color: #c88621;
}

#main-content #page-content .ezchat.chat-content p>span[style*="admin"] tt {
    background: #7dd9d536;
    color: #3c8ea1;
}

#main-content #page-content .ezchat.chat-content p>:is(span[style*="admin"], span[style*="host"], span[style*="title"]) tt {
    border-radius: 0.3rem;
    margin: 0.2rem 0.2rem;
    padding: 0.1rem 0.2rem;
    font-size: 0.75rem;
    display: inline-block;
    font-family: unset;
}

#main-content #page-content .ezchat.chat-content div p>:is(span[style*="admin"], span[style*="host"], span[style*="title"]) tt {
    margin-bottom: 0.5rem;
    margin-top: 0.1rem;
}

#main-content .ezchat span[style="color: at"] {
    color: #28a5f8;
    cursor: pointer;
}

/* ezchat bottom */

#main-content span[style*="ezchat-ui-icon voice"] {
    background-image: var(--ezchat-icon-mic);
}

#main-content span[style*="ezchat-ui-icon emojis"] {
    background-image: var(--ezchat-icon-emoji-smile);
}

#main-content span[style*="ezchat-ui-icon more"] {
    background-image: var(--ezchat-icon-plus-circle);
}

#main-content span[style*="bottom-input"] {
    display: inline-block;
    width: calc(100% - 8rem);
    padding: 0.3rem 1rem;
    background: var(--ezchat-layer-1);
    border-radius: 0.7rem;
}

/* custom EMOJI */

#main-content .ezchat.chat-content p span[style*="emoji emoji-red-button"]::before {
    content: '';
    display: inline-block;
    width: 1.1rem;
    height: 0.7rem;
    background: url(https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button.gif) no-repeat center / contain;
    transform: scale(1.5) translateY(0.1rem);
}

#main-content .ezchat.chat-content p span[style*="emoji emoji-red-button-fast"]::before {
    content: '';
    display: inline-block;
    width: 1.1rem;
    height: 0.7rem;
    background: url(https://scpsandboxcn.wikidot.com/local--files/oxygen9-files-2/red_button_fast.gif) no-repeat center / contain;
    transform: scale(1.6) translateY(0.1rem);
}
[[/code]]

[[/collapsible]]

[[/iftags]]

[[module css]]

@import url(https://scp-wiki-cn.wikidot.com/component:ezchat/code/1);


/* settings */

/* {$darkmode}/

:root {
    --ezchat-layer-1: #272727;
    --ezchat-layer-2: #0f0f0f;
    --ezchat-layer-3: #333333;
    --ezchat-layer-4: #353535;
    --ezchat-font-color: #dfdfdf;
    --ezchat-name-color: #989898;
    --ezchat-head-color: var(--ezchat-layer-3);
}

#main-content span[style*="ezchat-ui-icon"] {
    filter: invert(1);
}

#main-content .ezchat.chat-content p>span[style="color: name"]::before {
    filter: invert(0.8);
}


/{$darkmode} */

/* {$customHeadColor}/

:root {
    --ezchat-head-color: {$headColor};
}

/{$customHeadColor} */


[[/module]]