黑色标记笔风格折叠

注意

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

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

---

代码

[[module css]]
/* BHL styled collapsibles with fancy-schamncy animations! By Monkatraz */
/* #page-content is shoved everywhere to make sure it's the most specific thingy */
/* Styling! */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    /* Animated things */
    transition: background 0.2s linear;
    background: rgb(66, 66, 72);
    /* Technical bits */
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
/* The Clicky Text */
#page-content .collapsible-block-link {
    color: white;
    font-weight: bold;
}
/* Gets rid of the underline when hovering over the collapsible */
#page-content .collapsible-block-link:hover {
    text-decoration: none
}
/* Collapsible content */
#page-content .collapsible-block-content {
    border-bottom: solid 3px rgb(66,66,72);
    /* Animated things */
    transition: border-top-color 0.2s linear;
    border-top: solid rgb(66, 66, 72) 5px;
}
/* End of addendum tag */
#page-content .collapsible-block-content::after {
    content:"附录结束";
    font-weight: bold;
    font-size: 95%;
    color:white;
    background: rgb(66, 66, 72);
    width: 150px;
    border-radius: 3px;
    /* Technical bits */
    display: block;
    text-align: center;
    margin:auto;
    margin-bottom: -3px;
}
/* Folded blocks are animated, unfolded ones are not */
#page-content .collapsible-block-folded {
    transition: max-width 0.2s linear;
    max-width: 7.75em;
}
#page-content .collapsible-block-unfolded-link{
    width: min-content;
}
/* Addendum counter */
#page-content {
    counter-reset: collapse;
}
#page-content .collapsible-block, #page-content .unfolded-collapse, #page-content .centered-unfolded-collapse{
    counter-increment: collapse;
}
 
/* Addendum prefixes */
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷ 附录 XXXX." counter(collapse);
    border-right: dotted 0.25em;
    padding-right: 1rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽ 附录 XXXX." counter(collapse);
    border-right: dotted 0.25em;
    padding-right: 1rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
/* Hovering effects */
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover{
    background: rgb(100, 46, 44);
    max-width: 100%;
}
/* Top of the collapsible border - because it looks prettier this way */
#page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content{
    border-top-color: rgb(100, 46, 44);
}
/* Accent flash when clicking, also forces the collapsible to expand */
#page-content .collapsible-block-folded:active, #page-content .collapsible-block-unfolded-link:active{
    transition: background 0s, max-width 0s;
    background: rgb(133, 0, 5);
    max-width: 100%;
}
/* Done with normal collapsibles, now we do all the variations */
/* Unfolded collapsible */
#page-content .unfolded-collapse{
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    background: rgb(66, 66, 72);
    /* Text */
    color: white;
    font-weight: bold;
    /* Technical bits */
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
/* Addendum prefix */
#page-content .unfolded-collapse::before {
    content: "▽ 附录 XXXX." counter(collapse);
    border-right: dotted 0.25em;
    padding-right: 1rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
/* Bottom border */
#page-content .unfolded-collapse-border {
    display: block;
    width: 700px;
    border-top: solid rgb(66, 66, 72) 5px;
}
/* Centering, very simple */
#page-content .center-collapse .collapsible-block-folded, #page-content .center-collapse .collapsible-block-unfolded-link, #page-content .center-collapse .unfolded-collapse{
    margin:auto;
    margin-top: 10px;
}
/* Removing the slick animation and addendum number because you're a monster */
/* Set back the max width and just ignore the transition screwyness */
#page-content .no-addendum .collapsible-block-folded {
    max-width: none;
}
/* Prefixes */
#page-content .no-addendum .collapsible-block-unfolded .collapsible-block-link::before, #page-content .no-addendum .unfolded-collapse::before {
    content: "▽";
    border-right: none;
    padding-right: 0rem;
}
#page-content .no-addendum .collapsible-block-folded .collapsible-block-link::before {
    content: "▷";
    border-right: none;
    padding-right: 0rem;
}
/* Kill the automatic footer because you haven no trouble figuring out where your addendums end */
#page-content .no-footer .collapsible-block-content{
    border-bottom: none;
}
#page-content .no-footer .collapsible-block-content::after{
    display:none;
}
/* Fittingly, we finish with the footer object */
/* The footer is actually the giant bottom border object because larger -> smaller works better */
#page-content .addendumfooter{
    display: block;
    border-bottom: solid 3px rgb(66,66,72);
    margin:auto;
    text-align: center;
}
/* Texty bits */
#page-content .addendumfooter::after{
    content: "附录结束";
    font-weight: bold;
    font-size: 95%;
    color:white;
    background: rgb(66, 66, 72);
    width: 150px;
    border-radius: 3px;
    /* Technical bits */
    display: block;
    text-align: center;
    margin:auto;
    margin-bottom: -3px;
}
/* Ayer's info-bar patch */
#page-content .info-container .collapsible-block {
    counter-increment: none;
}
#page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link {
    transition: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    background: var(--barColour);
}
#page-content .info-container .collapsible-block-folded::before, #page-content .info-container .collapsible-block-unfolded-link::before {
    content: "";
    display: none;
}
#page-content .info-container .collapsible-block-content {
    border-bottom: none;
    transition: none;
    border-top: none;
}
#page-content .info-container .collapsible-block-content::after {
    display: none;
}
 
/* License Box Patch */
#page-content .licensebox .collapsible-block-link {
    color: inherit;
}
#page-content .licensebox .collapsible-block-link:hover {
    text-decoration: underline;
}
#page-content .licensebox .collapsible-block {
    counter-increment: none;
}
#page-content .licensebox .collapsible-block-folded,
#page-content .licensebox .collapsible-block-unfolded-link {
    transition: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    background: none;
}
#page-content .licensebox .collapsible-block-folded::before,
#page-content .licensebox .collapsible-block-unfolded-link::before {
    content: "";
    display: none;
}
#page-content .licensebox .collapsible-block-content {
    border-bottom: none;
    transition: none;
    border-top: none;
}
#page-content .licensebox .collapsible-block-folded .collapsible-block-link::before,
#page-content .licensebox .collapsible-block-unfolded .collapsible-block-link::before,
#page-content .licensebox .unfolded-collapse::before {
    display: none;
}
#page-content .licensebox .collapsible-block-content::after {
    display: none;
}
[[/module]]

引入

在任何维基网站上：

[[include :scp-wiki-cn:component:bhl-style-collapse-source]]

如果你在作品中未使用黑色标记笔版式，在上述引入代码之后插入如下 CSS 模块：

CSS

[[module css]]
/* bhl-style-collapse Sigma-9 Compatiblity Patch */
#page-content .collapsible-block-folded {
    max-width: 7.25em;
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded, #page-content .unfolded-collapse{
    line-height: 1.4;
}
#page-content .collapsible-block-folded .collapsible-block-link::before, #page-content .collapsible-block-unfolded .collapsible-block-link::before, #page-content .unfolded-collapse::before {
    font-family: monospace;
    font-size: 130%;
    margin-left: -0.4em
}
[[/module]]

这是什么

这是一个非官方的黑色标记笔版式组件，用于在你的作品中添加平滑、动态的黑标风格折叠栏。它会影响现有的 [collapsible] 元素。你的作品只需稍作修改即可兼容。

点击这里！

特点：

• 流畅、华丽的动画肯定会让至少几个人猛击好评按钮
• 兼容移动设备
• 可自定义化（详见下文）
• 真正地替你为附录计数，笑尿
• 为那些不在乎可点击部分的人准备的独立定制 div 装饰
• 在折叠打开的时候朝向右侧的箭头转向了下方这特喵的有多酷！？
• 你知道一旦你得到了足够多的好评，或许最终你会觉得一切都索然无味。拜托，引入这个组件吧。这就是你需要的。

限制：

• 它会影响所有折叠。如果你有自定义的折叠，你需要学会一些 CSS 编辑。
• 在设置“hideLocation”为“both”时它会显得很蠢。
• 它并没有魔法般地为多重折叠提供支持。这只是 CSS。

更新日志

2020-7-9

• 添加了 Sigma-9 兼容性补丁
• 修复了与 Ayer 的信息模块的冲突

---

使用方法

折叠

通常：
此组件基于标准折叠修改，因此它们完全一样。非常推荐你将“show”和“hide”字段保持一致。

提示：“附录 XXXX.N”会自动添加，并根据先前的折叠数量递增。也可以将之移除，见于下方。

好东西

[[collapsible show="好东西" hide="好东西"]]
这玩意儿！
[[/collapsible]]

保持打开：
需要澄清的是，这真的只是一个“静态”装饰元素。你并没有实际上将你的文章放置于这个“折叠”中。

注意：“附录 XXXX.N”计数器仍然会根据这些折叠递增。

好东西

[[div_ class="unfolded-collapse"]]
好东西
[[/div]]
[[div_ class="unfolded-collapse-border"]]
[[/div]]

---

修饰

居中：

好东西

[[div_ class="center-collapse"]]
[[collapsible show="好东西" hide="好东西"]]
这玩意儿！
[[/collapsible]]
[[/div]]

好东西

[[div_ class="center-collapse"]]
[[div_ class="unfolded-collapse"]]
好东西
[[/div]]
[[div_ class="unfolded-collapse-border"]]
[[/div]]
[[/div]]

移除“附录”和动画：
注意：“附录 XXXX.N”计数器仍然会根据这些折叠递增。

好东西

[[div_ class="no-addendum"]]
[[collapsible show="好东西" hide="好东西"]]
这玩意儿！
[[/collapsible]]
[[/div]]

好东西

[[div_ class="no-addendum"]]
[[div_ class="unfolded-collapse"]]
好东西
[[/div]]
[[div_ class="unfolded-collapse-border"]]
[[/div]]
[[/div]]

移除页脚：

好东西

[[div_ class="no-footer"]]
[[collapsible show="好东西" hide="好东西"]]
这玩意儿！
[[/collapsible]]
[[/div]]

---

页脚

[[div_ class="addendumfooter"]]
[[/div]]

著作信息

• Monkatraz
• Google 上的大约 1500 人