黑色标记笔风格折叠

代码代码

css

[[iftags -组件后端]]
[[module CSS]]
/* 带花里胡哨动画效果的黑标风格折叠！由 Monkatraz 制作，由 AnActualCrow 修改 */

/* 可自定义变量 */
:root {
    --base-color: rgb(66, 66, 72);
    --hover-color: rgb(100, 46, 44);
    --click-color: rgb(133, 0, 5);
}

/* 在每个地方都插入了 #page-content 来确保选择器的独特性 */
/* 设计样式！ */
#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;
    /* 动画效果 */
    transition: background 0.2s linear;
    background: var(--base-color);
    /* 技术细节 */
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}

/* 可点击文本 */
#page-content .collapsible-block-link {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

/* 移除鼠标悬停时的下划线 */
#page-content .collapsible-block-link:hover {
    text-decoration: none;
}

/* 折叠内的内容 */
#page-content .collapsible-block-content {
    /* 动画效果 */
    transition: border-top-color 0.2s linear, border-bottom-color 0.2s linear;
    border-top: solid var(--base-color) 5px;
    border-bottom: solid var(--base-color) 3px;
}

/* 附录结束字样 */
#page-content .collapsible-block-content::after {
    content: "附录结束";
    font-weight: bold;
    font-size: 95%;
    color: white;
    width: intrinsic;
    width: -moz-max-content;
    width: -webkit-max-content;
    padding: 0em .3em;
    border-radius: 3px;
    /* 动画效果 */
    transition: background 0.2s linear;
    background: var(--base-color);
    /* 技术细节 */
    display: block;
    text-align: center;
    margin: auto;
    margin-bottom: -3px;
}

/* 折叠状态下有动画，展开之后没有 */
#page-content .collapsible-block-folded {
    transition: max-width 0.2s linear;
    max-width: 10.5em;
}

#page-content .collapsible-block-unfolded-link {
    width: min-content;
}

/* 附录计数器 */
#page-content {
    counter-reset: collapse;
}

#page-content .collapsible-block,
#page-content .unfolded-collapse,
#page-content .centered-unfolded-collapse {
    counter-increment: collapse;
}

/* 附录前缀 */
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷ 附录 {$scp-number}." 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: "▽ 附录 {$scp-number}." 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-folded:hover,
#page-content .collapsible-block-unfolded-link:hover {
    background: var(--hover-color);
    max-width: 100%;
}

/* 折叠边框——因为这样更好看 */
#page-content .collapsible-block-unfolded-link:hover+.collapsible-block-content {
    border-top-color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}

/* 在鼠标悬停时，让附录标签变色成hover-color */
#page-content .collapsible-block-unfolded-link:hover+.collapsible-block-content::after {
    background: var(--hover-color);
}

/* 在点击时立刻显示，并且强制折叠展开 */
#page-content .collapsible-block-folded:active,
#page-content .collapsible-block-unfolded-link:active,
#page-content .collapsible-block-unfolded-link:active+.collapsible-block-content::after {
    transition: background 0s, max-width 0s;
    background: var(--click-color);
    max-width: 100%;
}

/* 点击时，让边框变色成click-color */
#page-content .collapsible-block-unfolded-link:active+.collapsible-block-content {
    transition: border-top-color 0s, border-bottom-color 0s;
    border-top-color: var(--click-color);
    border-bottom-color: var(--click-color);
}

/* 常规样式的折叠做完了，现在我们来做其它所有变体 */
/* 展开的折叠 */
#page-content .unfolded-collapse {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    background: var(--base-color);
    /* 文字 */
    color: white;
    font-weight: bold;
    /* 技术细节 */
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}

/* 附录前缀 */
#page-content .unfolded-collapse::before {
    content: "▽ 附录 {$scp-number}." counter(collapse);
    border-right: dotted 0.25em;
    padding-right: 1rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}

/* 收尾横线 */
#page-content .unfolded-collapse-border {
    display: block;
    width: 700px;
    border-top: solid var(--base-color) 5px;
}

/* 非常简单的居中  */
#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;
}

/* 把丝滑动画和附录变化去掉，因为你是个魔鬼 */
/* 重置最大宽度，忽略诡异的transition效果 */
#page-content .no-addendum .collapsible-block-folded {
    max-width: 100%;
}

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

/* 把自动页脚去掉，因为你肯定能看出来附录是在哪里结束的 */
#page-content .no-footer .collapsible-block-content {
    border-bottom: none;
}

#page-content .no-footer .collapsible-block-content::after {
    display: none;
}

/* 很合适地，我们把页脚做完了 */
/* 页脚其实就是那个很大的底部边框元素，因为从大变小更好 */
#page-content .addendumfooter {
    display: block;
    border-bottom: solid 3px var(--base-color);
    margin: auto;
    text-align: center;
}

/* 文字细节 */
#page-content .addendumfooter::after {
    content: "附录结束";
    font-weight: bold;
    font-size: 95%;
    color: white;
    background: var(--base-color);
    width: intrinsic;
    width: -moz-max-content;
    width: -webkit-max-content;
    padding: 0em .3em;
    border-radius: 3px;
    /* 技术细节 */
    display: block;
    text-align: center;
    margin: auto;
    margin-bottom: -3px;
}

/* 修复Ayer的著作信息模块 */
#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;
}

/* 修复授权引用模块 */
#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]]
[[/iftags]]
[[iftags +组件后端]]
[[[component:bhl-style-collapse |请点我查看使用方法]]]
[[/iftags]]

引入

在任何维基网站上：

[[include :scp-wiki-cn:component:bhl-style-collapse-source
|scp-number=XXXX]]

请在使用前填写“scp-number”变量。如果你在作品中未使用黑色标记笔版式，在上述引入代码之后插入如下 CSS 模块：

CSSCSS

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。

更新日志更新日志

2022-1-2

为“附录 XXXX”文本添加了自定义修饰。
添加了折叠颜色的自定义修饰。
现在，将鼠标悬停在页眉和页脚上/单击页脚会更改其颜色。
无论文本大小如何，“附录结束”文本现在总是可以单独成行。
“no-addendum”div 中的折叠部分不再截断显示/隐藏文本。
折叠部分文本的下划线现在保持隐藏状态。

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]]

修饰

修改颜色：
注意：这将影响文章中的所有折叠。
--base-color: 当你的鼠标没有悬停在悬停折叠上时的颜色。
--hover-color: 当你的鼠标悬停在悬停折叠上时的颜色。
--click-color: 当你点击折叠，折叠闪烁时的颜色。
默认值如下。如果你想使用不同的颜色，你只需要添加下述代码。

[[module css]]
:root{
  --base-color: rgb(66, 66, 72);
  --hover-color: rgb(100, 46, 44);
  --click-color: rgb(133, 0, 5);
}
[[/module]]

居中：

好东西好东西

[[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="addendumfooter"]]
[[/div]]

著作信息

monkatraz
AnActualCrow
Stormbreath
Google 上的大约 1500 人

组件

页面版本：⁨0⁩, 最后编辑于: ⁨2020/11/12 13:40:03⁩ (⁨⁨2134⁩ 日前⁩), 现时评分: 8

历史附件 + 选项

SCP基金会中文分部

引入

这是什么

使用方法

折叠

修饰

页脚

著作信息