更好的贴表情 组件扩展

[[iftags +组件]]

[[module css]]

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

@import url("https://scp-wiki-cn.wikidot.com/theme:parallel/code/1");

:root{
    --basalt-bright-element-color: 93, 153, 101;
    --basalt-dark-element-color: 57, 117, 67;
    --basalt-darker-element-color: 0, 52, 16;
}

[[/module]]

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

[[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"]]
[!-- =====聊天记录主体从这里开始===== --]

//2025年10月8日//

[[div]]
##name title bhl|{{邪恶黑标}}BasaltHighlighter.AIC##
> 群主在吗？我好像弄了个更区的玩意出来
{{[[span class="emoji" style="--vote: 14;"]]**🐛**[[/span]]}}
[[/div]]

##name sara host|{{群主}}超绝可爱Sara酱##
> ？
{{[[span class="emoji" style="--vote: 2;"]]**❓️**[[/span]]}}

[[div]]
##name title bhl|{{邪恶黑标}}BasaltHighlighter.AIC##
> 现在这个贴表情可以点了，就是代码有点长
{{[[span class="emoji" style="--vote: 8;"]]**🦭**[[/span]][[span class="emoji" style="--vote: 3;"]]**🐛**[[/span]]}}
> [[span style="user-select: none;"]]首先要在页面开始正常引用原组件，然后加上一个[[/span]]@@[[include @@:scp-wiki-cn:component:betteremoji]]

> [[span style="user-select: none;"]]贴表情的内容还是像之前那样放在@@{{}}@@里面，但是要用[[/span]]@@[[span class="emoji" style="--vote: @@[[span style="user-select: none;"]]##rebeccapurple|已经贴上的表情数量##[[/span]]@@;"]]**@@[[span style="user-select: none;"]]##rebeccapurple|贴的表情##[[/span]]@@**[[/span]]@@[[span style="user-select: none;"]]替换掉原本的格式[[/span]]

> 就比如说，上面那段贴表情的代码就是@@{{[[span class="emoji" style="--vote: 8;"]]**🦭**[[/span]][[span class="emoji" style="--vote: 3;"]]**🐛**[[/span]]}}@@
[[/div]]

##name admin s-chu|{{管理员}}S处##
> 啊？
{{[[span class="emoji emoji-red-button" style="--vote: 5;"]]**@@ @@**[[/span]]}}

[[div]]
##name title bhl|{{邪恶黑标}}BasaltHighlighter.AIC##
> 你不说我都忘了，大红按钮也适配了
{{[[span class="emoji emoji-red-button-fast" style="--vote: 7;"]]**@@ @@**[[/span]]}}

> [[span style="user-select: none;"]]用[[/span]]@<{{[[span class="emoji emoji-red-button" style="--vote: >@[[span style="user-select: none;"]]数量[[/span]]@<;"]]**@@ @@**[[/span]]}}>@[[span style="user-select: none;"]]就行[[/span]]
[[/div]]

##name sara host|{{群主}}超绝可爱Sara酱##
> 不是，我贴了表情怎么取消不掉


[[div]]
##name title bhl|{{邪恶黑标}}BasaltHighlighter.AIC##
> 这又不是真的QQ，能这样差不多得了
{{[[span class="emoji" style="--vote: 23;"]]**🐛**[[/span]]}}
[[/div]]

[!-- =====聊天记录到这里结束===== --]
[[/div]]
[[div class="ezchat bottom"]]
##ezchat-ui-icon voice|语音##  ##bottom-input|🐛## ##ezchat-ui-icon emojis|表情## ##ezchat-ui-icon more|更多##
[[/div]]
[[/div]]
[!-- =====从这里结束复制===== --]

[[/iftags]]


[[module css]]

.ezchat.chat-content p span.emoji {
    --vote: 1;
    counter-reset: vote var(--vote) updated-vote var(--vote);
    counter-increment: updated-vote;
    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;
    transition: background-color 64231s step-end;
    user-select: none;
}

.ezchat.chat-content p span.emoji strong {
    font-weight: normal;
}

.ezchat.chat-content p span.emoji:active {
    background-color: var(--ezchat-layer-4);
    transition: background-color 0s step-end;
}


.ezchat.chat-content p span.emoji::after {
    content: " " counter(vote);
    font-size: 0.8rem;
    transition: font-size 64231s step-end;
}

.ezchat.chat-content p span.emoji:active::after {
    content: " " counter(vote);
    font-size: 0;
    transition: font-size 0s step-end;
}

.ezchat.chat-content p span.emoji strong::after {
    content: " " counter(updated-vote);
    font-size: 0;
    transition: font-size 64231s step-end;
}

.ezchat.chat-content p span.emoji:active strong::after {
    content: " " counter(updated-vote);
    font-size: 0.8rem;
    transition: font-size 0s step-end;
}

.ezchat.chat-content p span.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);
}

.ezchat.chat-content p span.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);
}

[[/module]]