短信样式（By JaonHax）

注意

此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

---

JaonHax 制作

使用示例

John Jacob Jingleheimer Schmidt

这是测试消息。

哇哦，真的吗？
这可真酷！
这是多行消息吗？

你真的这么想？
那可太好了！
对，它有多个行！

耶！
多谢，JaonHax！
等等，我是不是弄坏了它的滚动功能？

是啊。
我想是的。

那，好吧。
我猜 JaonHax 不得不让这玩意儿没有最大高度限制，嗯？

对，我想也是。
不管怎样，我们大概应该让读到这里的好人们继续去忙他们自己的事情。

拜，好人！

嗯，拜！

使用方法

+ 为那些想摆弄代码的专家们准备的 CSS 代码

/* 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;
}

所以，你想用我的这个东西，嗯哼？那么首先，你需要在你的页面顶端版式下方添加如下组件（任何维基均可使用）：

[[include :scp-wiki:component:text-style]]

接着，在你想要的地方添加如下语法。也可以在一个页面中添加多次。

[[div class="text-container-wrap"]]
+++ 你的发信人名称
[[div class="text-container"]]

[!-- 记住这个地方 --]

[[/div]]
[[/div]]

确保将“你的发信人名称”替换为你想要出现在顶端的名称——或者根本没有！如果你不添加发信人名称，文本消息框会自动调整为不显示发信人的形式！它也能根据不同大小的标题自动调整高度！

+ 显示这种情况下的示例

标准尺寸标题

这是占位符短信框…

这样你能明白我的意思吧！

这是占位符短信框…
这一个没有标题…

这样你能明白我的意思吧！

更大的标题

这是占位符短信框…

这样你能明白我的意思吧！

非常极其超级小的标题

这是占位符短信框…

这样你能明白我的意思吧！

现在，还记得不到 5 秒之前我让你记住的那个地方吗？你需要将所有短信置于其中。方法如下（根据发送（sent）或接受（received）短信，将“sent/recv”改为“sent”或“recv”）：

单独短信：

[[div class="sent/recv"]]
[[span class="text"]]只有我一个人...[[/span]]
[[/div]]

多行短信：

[[div class="sent/recv"]]
[[span class="text"]]我是 _
多行 _
短信！！[[/span]]
[[/div]]

一系列附加短信：

[[div class="sent/recv"]]
[[span class="text"]]这是一系列[[/span]]
[[span class="text"]]附加短信！[[/span]]
[[/div]]

一系列非附加短信（但是来自于同一个人）：

[[div class="sent/recv"]]
[[span class="text"]]这是一系列[[/span]]
[[/div]]
[[div class="sent/recv"]]
[[span class="text"]]非附加短信！[[/span]]
[[/div]]

对于最后一种情况，你需要确保将所有 sent/recv 改为相同的值，这样它们才能显示为来自同一个人。

就这样了！你现在已经知道怎么使用这个了！现在回去用它来做些很酷的东西吧！

+ 更新计划

• 添加图像/附件支持
• 添加用时间戳标记消息的功能
• 添加插入日期/时间分隔符的功能（带有日期/时间的水平线，从而表示时间的进展）
• 将来我能想到的其他东西