短信样式(By JaonHax)

注意


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

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


JaonHax JaonHax 制作

使用示例

John Jacob Jingleheimer Schmidt

这是测试消息。

哇哦,真的吗?
这可真酷!
这是多行消息吗?

你真的这么想?
那可太好了!
对,它有多个行!

耶!
多谢,JaonHax!
等等,我是不是弄坏了它的滚动功能?

是啊。
我想是的。

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

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

拜,好人!

嗯,拜!

使用方法

/*Basicmessagecode*/
.text-container.text{border-radius:18px;
 text-align:left;
 display:inline-block;
 padding:8px12px;
 font-weight:500;
 margin:1.5px10px;
 max-width:300px;
}
 
/*Containerfor "received" messages*/
.recv{text-align:left;
 margin-right:20px;
}
 
/*Containerfor "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;
}
 
/*Fancystuffonthecornersofmessageswithanothermessagefromsamepersonabovethem*/
.sent.text:not(:first-child) {border-top-right-radius:4px;
}.recv.text:not(:first-child) {border-top-left-radius:4px;
}.text-containerp{margin:0015px;
}
/*Messageareastuff*/
/*Headerstyling*/
.text-container-wraph1, .text-container-wraph2, .text-container-wraph3, .text-container-wraph4, .text-container-wraph5, .text-container-wraph6{color:black;
 font-weight:bold;
 margin:0auto10px;
 position:relative;
 top:-8px;
}
 
/*Externalbox*/
.text-container-wrap{text-align:center;
 margin:auto;
 display:block;
 margin-top:25px;
 width:400px;
 padding-top:25px;
 border-radius:10px;
 border:3pxsolid#666;
 background-color:#fff;
 overflow:none;
 box-sizing:border-box;
 pointer-events:none!important;
 position:relative;
}
 
/*Makeitsoitlookslikeausercan'thighlightthetext (eventhoughtheycan), soitfeelsmorebelievable*/
.text-container-wrap*::selection{background-color:transparent!important;
 color:inherit!important;
}
 
/*Internalbox*/
.text-container{box-shadow:1px1px7px#aaainset;
 margin:0pxauto25px;
 width:350px;
 display:block;
 padding:25px0px6px;
 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 改为相同的值,这样它们才能显示为来自同一个人。

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

  • 添加图像/附件支持
  • 添加用时间戳标记消息的功能
  • 添加插入日期/时间分隔符的功能(带有日期/时间的水平线,从而表示时间的进展)
  • 将来我能想到的其他东西
页面版本: 0, 最后编辑于: 11 Nov 2020 15:05
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License
点击编辑本页内容。
点击显示页面各部分的编辑按钮(如果可能)。 在标题边会出现"编辑"按钮。
在不编辑全部页面源代码的情况下添加内容。
查看本页过去是如何沿革的。
若您想要讨论本页内容,这是最简单的方法。
检视并管理本页附件。
管理网站的实用工具。
变更页面名称(及 URL 地址,或许会影响分类)。
在不编辑的情形下检视维基源代码。
检视 / 设定父页面(用以建立浏览足迹与结构化​​配置)。
向管理员举报本页有令人反感的内容。
事情不如预期?看看您可以做些什么。
通用的 Wikidot.com 文件与说明。
Wikidot.com 服务条款 — 您可以做的事,您不该做的事之类的。
Wikidot.com 隐私政策。

AltStyle によって変換されたページ (->オリジナル) /