短信样式（By JaonHax）

[[iftags +样版]] [[=]] > [[size 125%]]**[[*user JaonHax]] 制作**[[/size]] [[/=]] [[size 125%]] + 使用示例 [[/size]] [[div class="text-container-wrap"]] +++ John Jacob Jingleheimer Schmidt [[div class="text-container"]] [[div class="sent"]] [[span class="text"]]这是测试消息。[[/span]] [[/div]] [[div class="recv"]] [[span class="text"]]哇哦，真的吗？[[/span]] [[span class="text"]]这可真酷！ _ 这是多行消息吗？[[/span]] [[/div]] [[div class="sent"]] [[span class="text"]]你真的这么想？[[/span]] [[span class="text"]]那可太好了！[[/span]] [[span class="text"]]对，它有多个行！[[/span]] [[/div]] [[div class="recv"]] [[span class="text"]]耶！[[/span]] [[span class="text"]]多谢，JaonHax！ _ 等等，我是不是弄坏了它的滚动功能？[[/span]] [[/div]] [[div class="sent"]] [[span class="text"]]是啊。[[/span]] [[span class="text"]]我想是的。[[/span]] [[/div]] [[div class="recv"]] [[span class="text"]]那，好吧。[[/span]] [[span class="text"]]我猜 JaonHax 不得不让这玩意儿没有最大高度限制，嗯？[[/span]] [[/div]] [[div class="sent"]] [[span class="text"]]对，我想也是。[[/span]] [[span class="text"]]不管怎样，我们大概应该让读到这里的好人们继续去忙他们自己的事情。[[/span]] [[/div]] [[div class="recv"]] [[span class="text"]]拜，好人！[[/span]] [[/div]] [[div class="sent"]] [[span class="text"]]嗯，拜！[[/span]] [[/div]] [[/div]] [[/div]] [[size 125%]] + **使用方法** [[/size]] [[collapsible show="+ 为那些想摆弄代码的专家们准备的 CSS 代码" hide="- 哇哦，这可真多，伙计。我不知道我能不能应付得了所有这些。"]] [[module CSS show="true"]] /* Basic message code */ .text-container .text {   border-radius: 18px;   text-align: left;   display:inline-block;   padding:8px 12px;   font-weight:500;   margin:1.5px 10px;   max-width: 300px; } /* Container for "received" messages */ .recv {   text-align: left;   margin-right:20px; } /* Container for "sent" messages */ .sent {   text-align: right;   margin-left:20px; } .sent .text {   border-bottom-right-radius: 3px;   background-color: #267AE9;   color: white; } .recv .text {   border-bottom-left-radius: 3px;   background-color: #dadada;   color: black; } /* Fancy stuff on the corners of messages with another message from same person above them */ .sent .text:not(:first-child) {   border-top-right-radius: 4px; } .recv .text:not(:first-child) {   border-top-left-radius: 4px; } .text-container p {   margin:0 0 15px; } /* Message area stuff */ /* Header styling */ .text-container-wrap h1, .text-container-wrap h2, .text-container-wrap h3, .text-container-wrap h4, .text-container-wrap h5, .text-container-wrap h6 {   color: black;   font-weight: bold;   margin:0 auto 10px;   position:relative;   top:-8px; } /* External box */ .text-container-wrap {   text-align:center;   margin:auto;   display:block;   margin-top: 25px;   width:400px;   padding-top: 25px;   border-radius:10px;   border:3px solid #666;   background-color:#fff;   overflow:none;   box-sizing:border-box;   pointer-events:none!important;   position:relative; } /* Make it so it looks like a user can't highlight the text (even though they can), so it feels more believable */ .text-container-wrap *::selection {   background-color:transparent!important;   color:inherit!important; } /* Internal box */ .text-container {   box-shadow:1px 1px 7px #aaa inset;   margin:0px auto 25px;   width:350px;   display:block;   padding:25px 0px 6px;   background-color:#f7f7f7; } [[/module]] [[/collapsible]] 所以，你想用我的这个东西，嗯哼？那么首先，你需要在你的页面顶端版式下方添加如下组件（任何维基均可使用）： > {{@@[[include :scp-wiki:component:text-style]]@@}} 接着，在你想要的地方添加如下语法。也可以在一个页面中添加多次。 [[code]] [[div class="text-container-wrap"]] +++ 你的发信人名称 [[div class="text-container"]] [!-- 记住这个地方 --] [[/div]] [[/div]] [[/code]] 确保将“你的发信人名称”替换为你想要出现在顶端的名称——或者根本没有！如果你不添加发信人名称，文本消息框会自动调整为不显示发信人的形式！它也能根据不同大小的标题自动调整高度！ [[collapsible show="+ 显示这种情况下的示例" hide="- 非常好，很棒！"]] [[div class="text-container-wrap"]] +++ 标准尺寸标题 [[div class="text-container"]] [[div class="sent"]] [[span class="text"]]这是占位符短信框...[[/span]] [[/div]] [[div class="recv"]] [[span class="text"]]这样你能明白我的意思吧！[[/span]] [[/div]] [[/div]] [[/div]] [[div class="text-container-wrap"]] [[div class="text-container"]] [[div class="sent"]] [[span class="text"]]这是占位符短信框...[[/span]] [[span class="text"]]这一个没有标题...[[/span]] [[/div]] [[div class="recv"]] [[span class="text"]]这样你能明白我的意思吧！[[/span]] [[/div]] [[/div]] [[/div]] [[div class="text-container-wrap"]] + 更大的标题 [[div class="text-container"]] [[div class="sent"]] [[span class="text"]]这是占位符短信框...[[/span]] [[/div]] [[div class="recv"]] [[span class="text"]]这样你能明白我的意思吧！[[/span]] [[/div]] [[/div]] [[/div]] [[div class="text-container-wrap"]] ++++++ 非常极其超级小的标题 [[div class="text-container"]] [[div class="sent"]] [[span class="text"]]这是占位符短信框...[[/span]] [[/div]] [[div class="recv"]] [[span class="text"]]这样你能明白我的意思吧！[[/span]] [[/div]] [[/div]] [[/div]] [[/collapsible]] 现在，还记得不到 5 秒之前我让你记住的那个地方吗？你需要将所有短信置于其中。方法如下（根据发送（sent）或接受（received）短信，将“{{sent/recv}}”改为“{{sent}}”或“{{recv}}”）： 单独短信： [[code]] [[div class="sent/recv"]] [[span class="text"]]只有我一个人...[[/span]] [[/div]] [[/code]] 多行短信： [[code]] [[div class="sent/recv"]] [[span class="text"]]我是 _ 多行 _ 短信！！[[/span]] [[/div]] [[/code]] 一系列附加短信： [[code]] [[div class="sent/recv"]] [[span class="text"]]这是一系列[[/span]] [[span class="text"]]附加短信！[[/span]] [[/div]] [[/code]] 一系列非附加短信（但是来自于同一个人）： [[code]] [[div class="sent/recv"]] [[span class="text"]]这是一系列[[/span]] [[/div]] [[div class="sent/recv"]] [[span class="text"]]非附加短信！[[/span]] [[/div]] [[/code]] 对于最后一种情况，你需要确保将所有 {{sent/recv}} 改为相同的值，这样它们才能显示为来自同一个人。 就这样了！你现在已经知道怎么使用这个了！现在回去用它来做些很酷的东西吧！ [[collapsible show="+ 更新计划" hide="- 好吧，告诉我你有多关心开发进度 😢"]] * 添加图像/附件支持 * 添加用时间戳标记消息的功能 * 添加插入日期/时间分隔符的功能（带有日期/时间的水平线，从而表示时间的进展） * 将来我能想到的其他东西 [[/collapsible]] [[/iftags]] [[iftags -样版]] [[div style="margin: 2em 0; border: solid 2px #FFC107;"]] [[div_ style="display: inline-block; padding: 0 3px; font-size: 1.5em; background: #FFC107; color: #ffffff; font-weight: bold;"]] [[span class="fa fa-exclamation-triangle" style="font-size: 1.4em;"]]@<&nbsp;>@[[/span]]出错了！ [[/div]] [[div_ style="padding: 5px 7px;"]] 你所使用的 {{[[include]]}} 地址有误，请使用 {{[[include :scp-wiki:component:text-style]]}}。 [[/div]] [[/div]] [[/iftags]]