查看“模板:气泡对话”的源代码

<noinclude>
<pre>
{{气泡对话|左|{{filepath:对话头像-夏以昼-1.png}}|头像=对话头像-夏以昼-1.png}}
{{气泡对话|右|这是右边说的话|头像=对话头像-夏以昼-1.png}}
{{气泡对话|右|{{filepath:活动头像-倾心漫游记-哈特.png}}|class=hate}}
{{气泡对话|左|{{filepath:活动头像-倾心漫游记-哈特.png}}|class=hate}}
{{气泡对话|左|{{filepath:活动头像-倾心漫游记-剪影-男.png}}|class=jy-nan npc}}
{{气泡对话|左|{{filepath:活动头像-倾心漫游记-剪影-女.png}}|class=jy-nv npc}}
{{气泡对话|左|祁煜头像{{filepath:活动头像-倾心漫游记-祁煜-1.png}}|class=qy a}}
</pre>
{{气泡对话|左|{{filepath:对话头像-夏以昼-1.png}}|头像=对话头像-夏以昼-1.png}}
{{气泡对话|右|这是右边说的话|头像=对话头像-夏以昼-1.png}}
{{气泡对话|右|{{filepath:活动头像-倾心漫游记-哈特.png}}|class=hate}}
{{气泡对话|左|{{filepath:活动头像-倾心漫游记-哈特.png}}|class=hate}}
{{气泡对话|左|{{filepath:活动头像-倾心漫游记-剪影-男.png}}|class=jy-nan npc}}
{{气泡对话|左|{{filepath:活动头像-倾心漫游记-剪影-女.png}}|class=jy-nv npc}}
{{气泡对话|左|祁煜头像{{filepath:活动头像-倾心漫游记-祁煜-1.png}}|class=qy a}}
{{#tag:bstyle|/*{{#tag:pre|*/
<!-- 气泡修改 -->
.hate .chat-content {
border-image-source: url("{{filepath:活动气泡-倾心漫游记-哈特.png}}")
}
.npc .chat-content {
border-image-source: url("{{filepath:活动气泡-倾心漫游记-npc.png}}")
}
.sxh .chat-content {
border-image-source: url("{{filepath:活动气泡-倾心漫游记-沈星回.png}}")
}
.ls .chat-content {
border-image-source: url("{{filepath:活动气泡-倾心漫游记-黎深.png}}")
}
.qy .chat-content {
border-image-source: url("{{filepath:活动气泡-倾心漫游记-祁煜.png}}")
}
.qc .chat-content {
border-image-source: url("{{filepath:活动气泡-倾心漫游记-秦彻.png}}")
}
.xyz .chat-content {
border-image-source: url("{{filepath:活动气泡-倾心漫游记-夏以昼.png}}")
}
<!-- 头像框修改（用头像框替代头像） -->
.hate .head-img-border{
background-image: url("{{filepath:活动头像-倾心漫游记-哈特.png}}")
}
.jy-nan .head-img-border{
background-image:url("{{filepath:活动头像-倾心漫游记-剪影-男.png}}")
}
.jy-nv .head-img-border{
background-image:url("{{filepath:活动头像-倾心漫游记-剪影-女.png}}")
}
.jy-xh .head-img-border{
background-image:url("{{filepath:活动头像-倾心漫游记-剪影-小孩.png}}")
}
.jy-xia .head-img-border{
background-image:url("{{filepath:活动头像-倾心漫游记-剪影-虾.png}}")
}
.jy-xie .head-img-border{
background-image:url("{{filepath:活动头像-倾心漫游记-剪影-蟹.png}}")
}
.jy-sm .head-img-border{
background-image:url("{{filepath:活动头像-倾心漫游记-剪影-水母.png}}")
}
.qy.a .head-img-border{
background-image:url("{{filepath:活动头像-倾心漫游记-祁煜-1.png}}")
}
/*}}*/}}
</noinclude><includeonly><div class="head-chat {{#switch:{{{1}}}|左=left|右=right}} {{{class|}}}">
<div class="head-img-box">{{#if:{{{头像|}}}|[[file:{{{头像|}}}|class=head-img]]}}<div class="head-img-border"></div></div>
<div class="chat-content"><span class="chat-content-text">{{{2}}}</span></div>
</div>{{#if:{{#var:气泡对话CSS}}||{{#vardefine:气泡对话CSS|1}}<bstyle>/*<pre>*/
:root {
    --img-head-top-border: url("https://patchwiki.biligame.com/images/lysk/thumb/5/52/mc2ecqx9553tdwzunswa83wnlf4tuan.png/100px-%E9%95%8C%E7%BE%BD%E6%88%90%E5%A5%91.png");
    --img-head-end-border: url("https://patchwiki.biligame.com/images/lysk/thumb/5/52/mc2ecqx9553tdwzunswa83wnlf4tuan.png/100px-%E9%95%8C%E7%BE%BD%E6%88%90%E5%A5%91.png");
    /* 图片大小435x97  上边框下边框均为45px 左右边框均为180px*/
    --img-chat-border: url("https://assets.papegames.com/nikkiweb/deepspace/deepspace-activity-i18n/img/783596a27e9e1c1b1ad7.png");
}
/* 对话容器 */
.head-chat {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    max-width: 90%;
    clear: both;
    font-weight:normal;
    font-size:16px;
}

.head-chat.left {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: auto;
}

.head-chat.right {
    justify-content: flex-start;
    flex-direction: row-reverse;
    margin-left: auto;
    margin-right: 0;
}

/* 头像容器 */
.head-img-box {
    height: 80px;
    min-width: 80px;
    position: relative;
    flex-shrink: 0;
    align-self: flex-start;
}

/* 当没有图片时，头像容器保持固定宽度 */
.head-img-box:not(:has(img)) {
    width: 80px;
}

.head-img-box img {
    height: 100%;
    width: auto;
    border-radius: 50%;
    object-fit: cover;
}

/* 头像边框 */
.head-img-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--img-head-top-border);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* 对话气泡 */
.chat-content {
    padding: 12px 16px;
    margin: 0 10px;
    word-wrap: break-word;
    line-height: 1.4;
    min-height: auto;
    height: auto;

    /* 九宫格气泡：上下45px 左右180px */
    border-image-source: var(--img-chat-border);
    border-image-slice: 48 180 48 180 fill;
    border-image-width: 48px 180px 48px 180px;
    border-image-repeat: stretch;
    
    min-height: 60px;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    /* 文字居中 */
    display: flex;
    align-items: center;
}
.head-chat.right .chat-content {
    transform: scaleX(-1);
}

.head-chat.right .chat-content span {
    transform: scaleX(-1);
    display: inline-block;
    direction: ltr;
}


@media (max-width: 465px) {
    .head-chat{
        max-width:100%;
        font-size:14px;
    }
}
/*</pre>*/</bstyle>
}}</includeonly>