Flop风格：浅色
2023年12月5日
修订 18
评分
11
↑ 11
↓ 0
支持率
100%
总票数 11
Wilson 95% 下界
74.1%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
按周聚合 加载图表中...
最近修订
1 / 7
SOURCE_CHANGED
5 个月前
您已成功地回复本页至修订版本编号 14
SOURCE_CHANGED
5 个月前
您已成功地回复本页至修订版本编号 15
SOURCE_CHANGED
5 个月前
最近投票
1 / 2
2025-09-15
2025-08-08
2024-09-03
2024-09-03
2024-09-03
2024-09-03
2024-09-03
2024-09-03
2024-09-03
2024-09-03
相关页面
暂无推荐
页面源码
[[iftags -版式]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="authorbox"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= **作者：** %%created_by_linked%% ||
||~ 发布于 %%created_at|%Y 年 %m 月 %d 日%% ||
[[/module]]
[[/iftags]]
[[iftags +版式]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="authorbox"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= **作者：** [[*user Lt Flops]] ||
||~ 发布于 2020 年 5 月 23 日 ||
[[/module]]
[[div class="flavorbox"]]
这是[[span class="keycap"]]authorbox[[/span]]的一个使用例子。参阅**[#Sideboxes 侧边框]**小节以获得更多信息。
[[/div]]
= ⮤ 这是一个[[span class="keycap"]]flavorbox[[/span]] ⮥
[[=]]
如果要创建一个[[span class="ruby"]]额外作者栏[[span class="rt"]]flavorbox[[/span]][[/span]]，复制以下div[[footnote]]**译注：**任何一个div都需要对应的@@[[/div]]@@，否则将不会生效。[[/footnote]]
然后把它粘贴到[[span class="keycap"]]authorbox[[/span]]里：
[[/=]]
= [[span class="keycap"]]@@[[div class="flavorbox"]]@@[[/span]]
[[/iftags]]
[[/div]]
[[/div]]
[[/div]]
[[iftags +版式]]
[[>]]
**评分模块：**
[[module Rate]]
**带著作信息的评分模块：**
[[include :scp-wiki-cn:credit:start]]
[[<]]
感谢[[*user stormbreath]]的帮助，还有感谢[[*user Croquembouche]]对版式的审查。
选择的CSS样式基于[[[scp-style-resource|SCP格式资源]]]（在需要时标注作者）。
[[/<]]
[[include :scp-wiki-cn:credit:end]]
[[/>]]
[[div class="templateInfo"]]
+ 示例格式
[[/div]]
@@ @@
[[=]]
[[collapsible show="▷ 显示额外功能 ◁" hide="△ 隐藏额外功能 △"]]
[[/=]]
@@ @@
[[tabview]]
[[tab 自定义div块]]
[[note]]
**每个div块示例都包含：**
[[<]]
* 可见的外观。
* 使用方法。
* 有些还可能包括对预期用途的简要描述。
[[/<]]
[[/note]]
@@ @@
[[div class="raisa-header"]]
++++* RAISA通知版头
-- Maria Jones，RAISA主管
----
[[div class="code slim"]]
@@[[div class="raisa-header"]]@@
@@++++* 标题@@
@@----@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="pink-header"]]
++++* 漂亮的版头
-- Maria Jones，主管，//像个童话// ✧･ﾟ: *✧･ﾟ:*
----
[[div class="code slim"]]
@@[[div class="pink-header"]]@@
@@++++* 标题@@
@@----@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="oracle-header"]]
[[div class="img-resize"]]
[[image https://scp-wiki.wdfiles.com/local--files/spc-993/spcheader.png]]
[[/div]]
@@ @@
++++* 来自Desk of ORACLE版头
-- Nathan Jones，CICAPOCO委员长
@@ @@
----
[[div class="code slim"]]
@@[[div class="oracle-header"]]@@
@@[[div class="img-resize"]]@@
@@[[image URL_HERE]]@@
@@[[/div]]@@
@@++++* 标题@@
@@----@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="cicapoco-header"]]
[[div class="img-resize"]]
[[image https://scp-wiki.wdfiles.com/local--files/spc-993/spcheader.png]]
[[/div]]
@@ @@
++++* 来自中央情报协调和项目行动指挥部（CICAPOCO）的通知
@@ @@
----
[[div class="code slim"]]
@@[[div class="cicapoco-header"]]@@
@@[[div class="img-resize"]]@@
@@[[image URL_HERE]]@@
@@[[/div]]@@
@@++++* 来自中央情报协调和项目行动指挥部（CICAPOCO）的通知@@
@@----@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="content-warning"]]
⚠️ **内容警告** ⚠️
[[div class="code slim"]]
@@[[div class="content-warning"]]@@
@@⚠️ **内容警告** ⚠️@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="blockquote"]]
常规引用框
----
[[div class="code slim"]]
@@[[div class="blockquote"]]@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="alt-blockquote"]]
变体引用框
----
[[div class="code slim"]]
@@[[div class="alt-blockquote"]]@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="lightweight" style="text-align: center;"]]
轻量版引用框
----
[[div class="code slim"]]
@@[[div class="lightweight"]]@@
文本
@@[[/div]]@@
[[/div]]
@@ @@
[[/div]]
[[div class="card-block" style="text-align: center;"]]
带装饰的引用框
----
[[div class="code slim"]]
@@[[div class="card-block"]]@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="log-header"]]
+++* 记录版头
//用于采访/探索记录//
----
[[div class="code slim"]]
@@[[div class="log-header"]]@@
@@+++* 标题@@
@@----@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="report-box"]]
+++* 报告框
//用于内部文档//
----
[[div class="code slim"]]
@@[[div class="report-box"]]@@
@@+++* 标题@@
@@----@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="report-box realistic-shadow"]]
+++* 带阴影的报告框
----
[[div class="code slim"]]
@@[[div class="report-box realistic-shadow"]]@@
[[/div]]
[[/div]]
报告框变体：
[[div class="report-box red-tint"]]
[[div class="code slim"]]
@@[[div class="report-box red-tint"]]@@
[[/div]]
[[/div]]
[[div class="report-box orange-tint"]]
[[div class="code slim"]]
@@[[div class="report-box orange-tint"]]@@
[[/div]]
[[/div]]
[[div class="report-box yellow-tint"]]
[[div class="code slim"]]
@@[[div class="report-box yellow-tint"]]@@
[[/div]]
[[/div]]
[[div class="report-box green-tint"]]
[[div class="code slim"]]
@@[[div class="report-box green-tint"]]@@
[[/div]]
[[/div]]
[[div class="report-box cyan-tint"]]
[[div class="code slim"]]
@@[[div class="report-box cyan-tint"]]@@
[[/div]]
[[/div]]
[[div class="report-box blue-tint"]]
[[div class="code slim"]]
@@[[div class="report-box blue-tint"]]@@
[[/div]]
[[/div]]
[[div class="report-box magenta-tint"]]
[[div class="code slim"]]
@@[[div class="report-box magenta-tint"]]@@
[[/div]]
[[/div]]
[[div class="report-box grey-tint"]]
[[div class="code slim"]]
@@[[div class="report-box grey-tint"]]@@
[[/div]]
[[/div]]
[[div class="o5-box"]]
监督者文档框
----
[[div class="code slim"]]
@@[[div class="o5-box"]]@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="faux-source"]]
假的“页面源代码”框
----
[[div class="code slim"]]
@@[[div class="faux-source"]]@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="narration justified indented"]]
= 旁白框
//差燃洲终输理批路源建低。没拿问商鲁督后形。掉拉关激容物费态实呼星标这。孩何盾般法由冲静村深法措兴，怎染附给真置均卫离型。测策乡轻协流使之前红布人准章技比。//[[footnote]]**译注：**此处为乱数假文，即随机生成的文本。[[/footnote]]
//机看宁员连威毫短城上孩知十高。号粉和固领举小威。坏律并染径补观府冷属。续蒸静低向验衡何真大著脸实切门冷吸，乡毫轮映人华培断。括在扩希用延织平缺轮多计控单构能。家制未冲经各保呼缺苏。//
----
[[div class="code slim" style="text-indent: 0;"]]
@@[[div class="narration justified indented"]]@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="warning-notice"]]
+* 警告：提醒框
----
//用于吓飞你的读者//
----
[[div class="code slim"]]
@@[[div class="warning-notice"]]@@
@@+* 警告@@
@@----@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="journal"]]
__**主题：__ 日记框**
@@ @@
//用于增加代入感//
@@ @@
[[div class="code slim"]]
@@[[div class="journal"]]@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="journal"]]
__**提醒：__**这个div不允许你创建双换行符。想实现双换行符的效果，按下面做：
@@ @@
[[<]]
1.在每行文本末尾按回车键。
2.在新的一行中，用两组（即每边一组）的{{@@}}围住一个空格。[[footnote]]**译注：**即“@<@@ @@>@”，不要加引号。[[/footnote]]
3.再按下回车键然后继续你的写作。
[[/<]]
[[/div]]
[[div class="sms-message"]]
短信框😳
[[div class="code slim"]]
@@[[div class="sms-message"]]@@
文本
@@[[/div]]@@
[[/div]]
[[/div]]
[[div class="sms-message"]]
如果是单个短信框，在框下加入以下代码。
如果是多个短信框，在最后一个框下加入以下代码。
[[div class="code slim"]]
@@[[div style="clear: left;"]]@@
@@[[/div]]@@
[[/div]]
[[/div]]
[[div style="clear: left;"]]
[[/div]]
[[/tab]]
[[tab 特殊格式]]
[[note]]
**每个特殊格式示例都包含：**
[[<]]
* 可见的外观。
* 使用方法。
[[/<]]
[[/note]]
@@ @@
,,//红色文档修订文本//,,
[[span class="rev-red"]] 接种已传播。 [[/span]]
[[div class="code slim"]]
@@[[span class="rev-red"]] 文本 [[/span]]@@
[[/div]]
----
,,//绿色文档修订文本//,,
[[span class="rev-green"]] 过时的信息以__绿色__显示。 [[/span]]
[[div class="code slim"]]
@@[[span class="rev-green"]] 文本 [[/span]]@@
[[/div]]
----
,,//蓝色文档修订文本//,,
[[span class="rev-blue"]] 接种已完成！ [[/span]]
[[div class="code slim"]]
@@[[span class="rev-blue"]] 文本 [[/span]]@@
[[/div]]
----
,,//黄色文档修订文本//,,
[[span class="rev-yellow"]] 载入已暂停。是否刷新？ [[/span]]
[[div class="code slim"]]
@@[[span class="rev-yellow"]] 文本 [[/span]]@@
[[/div]]
----
,,//计算机终端文本//,,
[[span class="terminal-span"]] [已编辑] [[/span]]
[[span class="terminal-span"]] [已删除] [[/span]]
[[span class="terminal-span"]] [数据丢失] [[/span]]
[[div class="code slim"]]
@@[[span class="terminal-span"]] [文本] [[/span]]@@
[[/div]]
----
,,//闪烁文本光标//,,
[[span class="blinkbar"]]_[[/span]]
__或者__
[[span class="blinkbar"]]|[[/span]]
[[div class="code slim"]]
@@[[span class="blinkbar"]]|[[/span]]@@
[[/div]]
----
,,//特殊标题区域1//,,
[[div class="lite-heading"]]
----
++* 标题
+++* 副标题
----
[[/div]]
[[div class="code slim"]]
@@[[div class="lite-heading"]]@@
@@----@@
@@++* 标题@@
@@+++* 副标题@@
@@----@@
@@[[/div]]@@
[[/div]]
----
,,//特殊标题区域2//,,
[[div class="lite-heading"]]
----
++* 附加材料
----
[[/div]]
[[div class="code slim"]]
@@[[div class="lite-heading"]]@@
@@----@@
@@++* 附加材料@@
@@----@@
@@[[/div]]@@
[[/div]]
----
,,//变体型图片展示框//,,
[[div class="image-showcase block-center"]]
[[=image https://scp-wiki.wdfiles.com/local--files/theme:classic/base_image_frame.png]]
[[/div]]
[[div class="code slim"]]
@@[[div class="image-showcase block-center"]]@@
@@[[=image 图像链接]]@@
@@[[/div]]@@
[[/div]]
----
,,//花哨情节间断//,,
[[=image https://scp-wiki.wdfiles.com/local--files/component%3Atheme/logo.png class="scene-break"]]
[[div class="code slim"]]
@@[[=image 图像链接 class="scene-break"]]@@
[[/div]]
----
,,//ListPages导航//,,
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
**下一迭代 ▷**
[[/div]]
[[div class="listPagesNav-prev"]]
**◁ 返回**
[[/div]]
[[/div]]
[[div class="code slim"]]
@@[[div class="listPagesNav"]]@@
@@[[div class="listPagesNav-next"]]@@
@@[[>]]@@
@@**下一迭代 ▷**@@
@@[[/>]]@@
@@[[/div]]@@
@@[[div class="listPagesNav-prev"]]@@
@@**◁ 返回**@@
@@[[/div]]@@
@@[[/div]]@@
[[/div]]
----
,,//淡出渐变//,,
[[div class="fade-away"]]
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
[[/div]]
[[div class="code slim"]]
@@[[div class="fade-away"]]@@
@@ @@
@@ @@
@@ @@
@@[[/div]]@@
[[/div]]
----
,,//页脚//,,
[[div class="footing"]]
[[/div]]
[[div class="code slim"]]
@@[[div class="footing"]]@@
@@[[/div]]@@
[[/div]]
----
,,//相关文章框//,,
[[div class="related-flex"]]
[[div class="related" text]]
**__也看看：__**
* **[[[main|主页 - SCP基金会]]]**
[[/div]]
[[/div]]
[[div class="code slim"]]
@@[[div class="related-flex"]]@@
@@[[div class="related"]]@@
@@**__也看看：__**@@
@@* **[[[页面链接|自定义文本]]]**@@
@@[[/div]]@@
@@[[/div]]@@
[[/div]]
----
,,//系列导航//,,
[[div class="series-nav"]]
<< 上一篇 | [[size 120%]]当前文章[[/size]] | 下一篇 >>
[[/div]]
[[div class="code slim"]]
@@[[div class="series-nav"]]@@
<< 上一篇 | @@[[size 120%]]当前文章[[/size]]@@ | 下一篇 >>
@@[[/div]]@@
[[/div]]
[[/tab]]
[[tab 高级警告版头]]
[[div class="orderwrapper"]]
[[div class="council"]]
[[/div]]
[[div class="ordertitle"]]
+* 标题 / 警告
[[/div]]
[[div class="orderdescription"]]
_
+* 副标题 / 仅供相关人员查阅 / 文档类型
此文档为X级/XXXX机密。
禁止未经授权的访问。
[[/div]]
[[div class="itemno"]]
+* 项目编号 / 计划名称
[[/div]]
[[/div]]
__源代码__
[[div class="code"]]
@@----@@
@@[[div class="orderwrapper"]]@@
@@[[div class="council"]]@@
@@[[/div]]@@
@@[[div class="ordertitle"]]@@
@@+* 标题 / 警告@@
@@[[/div]]@@
@@[[div class="orderdescription"]]@@
@@ _@@
@@+* 副标题 / 仅供相关人员查阅 / 文档类型@@
@@此文档为X级/XXXX机密。@@
@@禁止未经授权的访问。@@
@@[[/div]]@@
@@[[div class="itemno"]]@@
@@+* 项目编号 / 计划名称@@
@@[[/div]]@@
@@[[/div]]@@
@@----@@
[[/div]]
[[/tab]]
[[/tabview]]
[[/collapsible]]
@@ @@
[[div class="templateInfo"]]
+ 这是什么？
----
这是一个[[*user Lt Flops]]创建的版式。它是Sigma-10（维基的版式[[footnote]]**译注：**此处指英文维基，中文维基的版式为Sigma-9。[[/footnote]]）的美学改进和扩展。
你只应该在知道你在做什么的时候才使用这个。
这个版式**__不兼容__**于**黑色标记笔**、**玄武岩**和**Sigma+**。
[[/div]]
@@ @@
[[div class="templateInfo"]]
+++* 深色模式的对应版式
= [[size 200%]] **[[[theme:flopstyle-dark|Flop风格：深色]]]** [[/size]]
[[/div]]
@@ @@
[[div class="templateInfo"]]
+ 如何使用
----
要使用这个版式，请复制以下代码并粘贴到你的页面顶部：
[[div class="code terminal"]]
= **##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle##**##var(--c-keyword)|]]##**
[[/div]]
如果你想把这个版式与其他的Sigma版式一起用，__**先**__粘贴Flop风格，然后在下一行粘贴你选择的其他版式。可能还需要一些微调。
另外，还请注意本版式使用了以下组件：
# [[[component:croqstyle|Croq 风格 CSS]]]，作者[[*user Croquembouche]]
# [[[component:fade-in|渐显]]]（设置在{{speed=1}}），作者[[*user Croquembouche]]
# [[[component:toggle-sidebar|切换侧边栏]]]，作者[[*user EstrellaYoshte]]
[[/div]]
@@ @@
[[div class="templateInfo"]]
= **本版式被设计成可以与以下组件一同使用……**
[[/div]]
@@ @@
[[div class="templateInfo"]]
+++* [[[component:centered-header-sigma-9|居中页眉 Sigma-9]]]
----
要使用这个组件，请将以下代码粘贴到Flop风格//之后//。如果你的页面使用了别的自定义Sigma版式，请将以下代码粘贴到这个自定义Sigma版式//之后//：
[[div class="code terminal"]]
= **##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:component:centered-header-sigma-9##**##var(--c-keyword)|]]##**
[[/div]]
你可以根据需要来修改标题、副标题、标题颜色、副标题颜色和版头标志。只需要把以下代码粘贴到居中页眉的{{include}}//之后//，然后进行相应的版式设置：
[[div class="code terminal"]]
**##var(--c-keyword)|[[module##** ##var(--c-builtin)|CSS##**##var(--c-keyword)|]]##**
@@ @@##var(--c-symbol)|:root##{
@@ @@##var(--c-builtin)|@@--@@header-title##: ##var(--c-value)|"标题"##;
@@ @@##var(--c-builtin)|@@--@@header-subtitle##: ##var(--c-value)|"副标题"##;
@@ @@##var(--c-builtin)|@@--@@titleColor##: ##var(--c-value)|标题颜色##;
@@ @@##var(--c-builtin)|@@--@@subtitleColor##: ##var(--c-value)|副标题颜色##;
@@ @@##var(--c-builtin)|@@--@@lgurl##: ##var(--c-builtin)|url##(##var(--c-string)|@@版头标志的图像链接@@##);
}
**##var(--c-keyword)|[[/module]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++* [[[component:flops-header|Flops的版头 样版]]]
----
[[div class="code terminal"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:component:flops-header##
**##var(--c-keyword)||####var(--c-builtin)|item####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|containment####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|level####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|security####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|disruption####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|disruption-bg-color####var(--c-keyword)|=##**
**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
[[# Sideboxes]]
+++* 侧边框
----
= //改编自[[*user EstrellaYoshte]]的[[[theme:penumbra|半影 版式]]]。//
侧边框是内置组件，有两种类型：
# [[span class="keycap"]]authorbox[[/span]]
# [[span class="keycap"]]sidebox[[/span]]
使用说明因类型而异。
* [[span class="keycap"]]authorbox[[/span]]不会在[[span class="keycap"]]width=1280px[[/span]][[footnote]]**译注：**即宽度等于1280像素，下同。[[/footnote]]和更小的屏幕上显示，这包含了手机屏幕。它可以被用于显示页面和作者信息。
* [[span class="keycap"]]sidebox[[/span]]会在[[span class="keycap"]]width=1280px[[/span]]和更小的屏幕上折叠到页面边缘。在这些屏幕上，可以通过点击或将光标悬停在其上来查看内容。它可以被用于显示额外的信息。
在设置这些之前，请你思考一下——很大一部分的SCP维基用户使用移动设备来浏览维基。
----
++++* 1.[[span class="ruby"]]作者栏[[span class="rt"]]authorbox[[/span]][[/span]]
+++++* （看左上方）
----
默认情况下，[[span class="keycap"]]authorbox[[/span]]被**__强制使用__**。它会在所有包含了Flop风格：浅色的页面上预载。如果你想//删除//它，请把以下代码：
[[div class="code terminal"]]
= **##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle##**##var(--c-keyword)|]]##**
[[/div]]
修改为以下代码：
[[div class="code terminal centered"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|style####var(--c-operator)|=####var(--c-string)|"display: none;"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]
**替代选项1：**在删除[[span class="keycap"]]authorbox[[/span]]后，你可以将其//重建//为一个显示你想要的信息的自定义版本。此功能对于合著、重写或翻译的页面特别有用。这里有一份创建[[span class="keycap"]]authorbox[[/span]]的代码可供你参考：
[[div class="card-block"]]
@@[[div class="anchor"]]@@[[span class="pointer"]]设定作者栏的固定位置。[[/span]]
@@[[div class="authorbox"]]@@
@@[[module ListPages name="="]]@@
@@||~ %%title%% ||@@
@@||= **作者：** %%created_by_linked%% ||@@
@@||~ 发布于 %%created_at|%Y 年 %m 月 %d 日%% ||@@
@@[[/module]]@@
@@|| 可选的额外文本 ||@@
@@[[/div]]@@
@@[[/div]]@@[[span class="pointer"]]设置限制锚点的结束位置。[[/span]]
[[/div]]
默认情况下，[[span class="keycap"]]authorbox[[/span]]使用ListPages来自动显示数据[[footnote]]**译注：**关于ListPages的更多信息，详见[*https://www.wikidot.com/doc-modules:listpages-module ListPages Module]。[[/footnote]]。理论上你可以复制[[span class="keycap"]]authorbox[[/span]]里ListPages的部分然后粘贴到//任何//维基页面上，这些字段将以该页面特有的方式填充。当然，你可以根据需要更改这些字段中的任何一个。
你也可以编辑你的[[span class="keycap"]]authorbox[[/span]]来让它显示你页面的独特文本，比如一个给读者的提醒。
一个[[span class="keycap"]]authorbox[[/span]]示例就在页面左边。
[[span class="keycap"]]flavorbox[[/span]]是你唯一一个应该用在[[span class="keycap"]]authorbox[[/span]]里的div。
**替代选项2：**如果你想，你可以把[[span class="keycap"]]authorbox[[/span]]移到页面右手边。想要这种效果的话，复制以下代码并把他粘贴到一个CSS模块里，并放在页面顶端[[footnote]]**译注：**实际上还是要放在此版式的include的下方，真放在最顶端是不会起效的。[[/footnote]]：
[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|authorbox##{
@@ @@##var(--c-builtin)|right##: ##var(--c-value)|unset##;
@@ @@##var(--c-builtin)|left##: ##var(--c-value)|103.5%##;
@@ @@##var(--c-builtin)|padding##: ##var(--c-value)|0 0 0 1em##;
}
[[/div]]
如果你有一个这样做了的页面，我建议//不要//在同一页面里继续插入任何一个[[span class="keycap"]]sidebox[[/span]]，否则页面会变得相当混乱。
如果你打算在你的页面上插入[[span class="keycap"]]sidecontainers[[/span]][[footnote]]**译注：**此版式没有定义sidecontainer，不过在深色版本中有。[[/footnote]]，我强烈建议在此时使用默认[[span class="keycap"]]authorbox[[/span]]。原因是，当右侧[[span class="keycap"]]authorbox[[/span]]和[[span class="keycap"]]sidecontainer[[/span]]被一同使用时，它们会重叠，看着会很凌乱。这可能会让读者感到困惑，所以，最好还是不要立于危墙之下。
----
++++* 2.[[span class="ruby"]]侧框栏[[span class="rt"]]Sidebox[[/span]][[/span]]
----
[[span class="keycap"]]sidebox[[/span]]是**__可选项__**。它要像这样设置：
[[div class="card-block"]]
@@[[div class="limit"]]@@ [[span class="pointer"]]设置限制锚点的开始位置。[[/span]]
@@[[div class="anchor"]]@@ [[span class="pointer"]]设定侧框栏的固定位置。[[/span]]
@@[[div class="sidebox"]]@@
你想要的[[span class="keycap"]]sidebox[[/span]]内的文本。
@@[[/div]]@@
@@[[/div]]@@
与[[span class="keycap"]]sidebox[[/span]]关联的文本。
@@[[/div]]@@ [[span class="pointer"]]设置限制锚点的结束位置。[[/span]]
[[/div]]
我建议在[[span class="keycap"]]sidebox[[/span]]的关联文本后插入手动换行符。你可以通过用两组（即每边一组）的[[span class="keycap"]]@@[[/span]]围住一个空格来实现这个效果。[[footnote]]**译注：**与译注3相同。即“@<@@ @@>@”，不要加引号。[[/footnote]]当页面滚动过去时，[[span class="keycap"]]sidebox[[/span]]会出现在此文本旁边。
[[/div]]
@@ @@
[[=]]
[[collapsible hideLocation="both" show="▷ 显示示例 ◁" hide="△ 隐藏示例 △"]]
[[<]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox"]]
通过一些技巧，你可以
[[/div]]
[[/div]]
础於善存行州妒故培。跳星映关刘贵人接果令。居再法色谈啊责罪杨怕营交异乐，听次面六此应米某务旧读，能集操青报二消直创。待丰希松粒促请响井检布汉制业九，害道军系评温久耐决如略。具棉庆呼绝攻规让朝府产歌秋混证斤。关燃府然配坐粉虽久环垂乡里。粒养右总决鸡针足验射货岁共交。[[footnote]]**译注：**同译注2相同，此处也是乱数假文。[[/footnote]]
迅般破陈校识医稳游参川关读良新率。义急音径岁中蒸波垂称承否据室题。交毛负顾月省歌稳波是乡乎静。据岁吧氢露础市西冲常流陆汽平旧。物针六车子末爱千识银兰明安。相前病花去也造鲁钢家率护单呼杨於文。械下处争备令流黑字虽领所创。纸指伯盟冲期转极剂到，职友铁主造自倍耐杂切任而状。晶践察阻夜策煤意模道历！苏市波微神营终击只复号。
[[/div]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox"]]
有多个侧框栏，
[[/div]]
[[/div]]
识挥走冲水践众医。劳专变道母受鲁轴打若展烧群选研之材。通乙促举宪包夜笑进制微！古响名化欢动调母视任突。演延宜石圆职尽模剂朝。我仅雨意器讲坚黄仍证，接的双备合孩永际费益计动核反。心白资拿氢苏尼看边表使上信装。养冷显球宽格发判为配明怀离材，同重额书家愿必附说马草谓教。
将品粒配杀端甲东构都停结西茶路。波也两别装适型妒证。原节革处划顶细怀，病船混用相距血七华架利够财既怀胜。态聚却母溶至占要料。病基族富属简味调伯航言。财季纪钟航苦精边伟啊门察是。倍星损球发早据位永挥，纸度仍思达海抓必面练二代化。类海之高析练延配就重肥余写斯国。女施并命几较密思叶严松李践台止，才弦派冲击金对部西找想下片挥。
[[/div]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox"]]
它们会像这样运作。
[[/div]]
[[/div]]
语散卫你祖谈花陆渐重后！顺误情乐则移离做，析肉食冷探机字末卫油教束还战宣，快茶量祖共刚房设。犯二待员著林列材已队住。愿英今供假我酒守女放处候青架表假考，找诉袁制毫公意乾计与林仅滑然。师读国环仍掉系会缩区你核，里注三露父细香曾作亲品注轴早！
语滑状界达呀我意边适阳公身。题普卫卫论起送轮布度，资验来部刑破晶磁能止，包底苦室包脱章认。脱射担社钟值协云复州实染第的祖！之倍留改载年责举凯喜视提征准。跟营护该还理长季艺源位况。委病轮压长宗听文项德次由模。屋含停衣卫完千找南差。牛时具帮液待及厂。束胡假逐势写留吸影变精差宜。
[[/div]]
@@ @@
[[/<]]
[[/collapsible]]
[[/=]]
[[div class="templateInfo"]]
记住[[span class="keycap"]]limit[[/span]]这个div。没有[[span class="keycap"]]limit[[/span]]，[[span class="keycap"]]anchor[[/span]]就会导致当你滚动到它的起始位置后持续在页面中显示。
[[/div]]
[[div class="templateInfo"]]
+++* 其他的可修改部分
----
如果有必要，你还可以编辑这些CSS属性中的任何一个，以更好地适配你的页面。[[footnote]]**译注：**以下方的隐藏页面标题举例，你应该这样使用：
[[div class="faux-source"]]
@@[[module css]]@@
@@ #page-title{@@
@@ display: none;@@
@@}@@
@@[[/module]]@@
[[/div]]
~~~~
也就是在代码的上方添加@@[[module css]]@@，在代码的下方添加@@[[/module]]@@。
[[/footnote]][[footnote]]**译注：**以下所有##var(--c-value)|此种颜色##的文本（在源代码中以@@##var(--c-value)|文本##@@呈现）都是可以修改的值。但我不推荐修改其中未改为中文的值，除非你十分清楚你在做什么。[[/footnote]][[footnote]]**译注：**以下所有##var(--c-comment)|此种颜色##的，两边被@@/*@@和@@*/@@包围的文本（在源代码中以@@##var(--c-comment)|/*文本*/##@@呈现）都是注释，在使用时可以不进行复制。[[/footnote]]这个列表//没有//包含Flop风格提供的所有样式——但至少这是个好的起点。
@@ @@
++++* 更改著作信息栏属性
[[div class="code terminal"]]
@@ @@##var(--c-symbol)|body##{ ##var(--c-comment)|/* @@--@@ 根据网站版式重新着色 @@--@@ */##
@@ @@##var(--c-builtin)|@@--@@barColour##: ##var(--c-value)|信息栏颜色##;
}
@@ @@##var(--c-symbol)|#u-author_block##{
@@ @@##var(--c-builtin)|display##: ##var(--c-value)|none##;
}
@@ @@##var(--c-keyword)|.####var(--c-symbol)|translation_block##{
@@ @@##var(--c-builtin)|display##: ##var(--c-value)|none##;
}
[[/div]]
@@ @@
++++* 更改版头副标题颜色
[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|lite-heading h3##{ ##var(--c-comment)|/* @@--@@ 根据网站版式重新着色 @@--@@ */##
@@ @@##var(--c-builtin)|color##: ##var(--c-value)|版头颜色##;
}
[[/div]]
@@ @@
++++* 更改带装饰的引用框和左侧边栏颜色
[[div class="code terminal"]]
@@ @@##var(--c-symbol)|:root##{
@@ @@##var(--c-builtin)|@@--@@accentColor##: ##var(--c-value)|颜色##;
}
[[/div]]
@@ @@
++++* 更改简单警告版头标志
= （图片必须是透明的）
[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|warning-notice##{
@@ @@##var(--c-builtin)|background-image##: ##var(--c-builtin)|url##(##var(--c-string)|@@图像链接@@##);
@@ @@##var(--c-builtin)|background-size##: ##var(--c-value)|400px##;
}
[[/div]]
@@ @@
++++* 更改高级警告版头标志
= （图片必须是透明的）
[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|council##{
@@ @@##var(--c-builtin)|background-image##: ##var(--c-builtin)|url##(##var(--c-string)|@@图像链接@@##);
}
[[/div]]
@@ @@
++++* 更改系列导航背景[[footnote]]**译注：**第一颜色在不修改时的默认值为hsla(0, 0%, 100%, 1)。[[/footnote]]
[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|series-nav##{
@@ @@##var(--c-builtin)|background##: ##var(--c-builtin)|linear-gradient##(##var(--c-value)|to bottom right, 第一颜色, 第二颜色##);
}
[[/div]]
@@ @@
++++* 隐藏页面标题
[[div class="code terminal"]]
@@ @@##var(--c-symbol)|#page-title##{
@@ @@##var(--c-builtin)|display##: ##var(--c-value)|none##;
}
[[/div]]
@@ @@
++++* 隐藏脚注页脚
[[div class="code terminal"]]
@@ @@##var(--c-keyword)|.####var(--c-symbol)|footnotes-footer##{
@@ @@##var(--c-builtin)|display##: ##var(--c-value)|none##;
}
[[/div]]
[[/div]]
@@ @@
[[div class="templateInfo"]]
+* 源代码
[[/div]]
@@ @@
[[=]]
[[collapsible show="▷ 展示源代码 ◁" hide="△ 隐藏源代码 △"]]
[[<]]
@@ @@
[[code type="CSS"]]
/* ==== FONTS ==== */
/**
* Architects Daughter
*
* By
* Kimberly Geswein
* License
* Open Font License (OFL)
* Source Link
* https://fonts.google.com/specimen/Architects+Daughter/about
**/
@import url(https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap);
/**
* Montserrat
*
* By
* Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly
* License
* Open Font License (OFL)
* Source Link
* https://fonts.google.com/specimen/Montserrat/about
**/
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);
[[/code]]
[[code type="CSS"]]
/* ==== Flopstyle: LITE ==== */
/**
* [2020 Wikidot Theme]
* Created by Lt Flops
* Select CSS Styles Are Credited Where Necessary
**/
/* ==== HEADER AREA ==== */
/* == COMMON == */
:root {
/* = COLOUR SCHEME = */
--alpha: hsl(0, 0%, 100%);
--key: hsl(0, 0%, 5%);
--accentColor: hsl(0, 100%, 30%);
--vivid-lime-green: hsl(112, 77%, 48%);
}
:root {
/* = YUI TAB COLOUR SCHEME = */
--darkAccent: hsl(360, 94%, 20%);
--liteAccent: hsl(360, 100%, 27%);
--alfaAccent: hsl(360, 100%, 95%);
}
:root {
/* = FONTS = */
--header-font: "Montserrat", sans-serif;
--script-font: "Architects Daughter", cursive;
}
body {
color: var(--key);
}
#search-top-box,
#top-bar,
#login-status {
right: 0;
}
/* == SITE BANNER == */
#header h1 a,
#header h1 a::before {
color: hsl(0, 0%, 93%);
font-family: var(--header-font);
font-weight: 800;
text-shadow: none;
}
#header h2 span,
#header h2 span::before {
color: hsl(60, 62%, 85%);
font-family: var(--header-font);
font-weight: 400;
text-shadow: none;
}
/* == SEARCH == */
#search-top-box-input,
#search-top-box-form input[type="submit"] {
background: hsl(0, 0%, 20%);
border-color: hsl(0, 0%, 60%);
border-radius: 0;
}
#search-top-box-form input[type="submit"] {
font-size: unset;
}
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type="submit"]:hover,
#search-top-box-form input[type="submit"]:focus {
background: hsl(0, 0%, 30%);
border-color: hsl(0, 0%, 70%);
}
/* == TOP MENU == */
#top-bar ul li ul {
top: 22px;
}
/* == SIDE MENU == */
#top-bar .open-menu a {
border-radius: unset;
}
#side-bar .side-block {
border-color: hsl(0, 0%, 20%);
border-radius: 0;
}
#side-bar .heading {
color: var(--key);
border-bottom: 1px solid hsl(0, 0%, 20%);
}
/* == INTERWIKI == */
div.scpnet-interwiki-wrapper {
margin-bottom: 2rem;
}
iframe.scpnet-interwiki-frame {
width: 15.127rem;
min-height: 8rem;
margin-left: 4px;
background: hsl(127, 050%, 94%);
border: 1px solid hsl(0, 0%, 20%);
}
#interwiki body {
overflow: hidden;
}
#interwiki .side-block {
padding: 5px;
background: 0;
border: 0;
box-shadow: none;
}
#interwiki .heading {
color: var(--key);
border-bottom: 1px solid hsl(0, 0%, 20%);
}
#interwiki .menu-item img {
display: none;
}
/* ==== CONTENT AREA ==== */
/* == SIDEBOXES == */
/**
* Adapted From
* Penumbra Theme by EstrellaYoshte
**/
.limit {
line-height: 1.5;
z-index: 5;
}
.limit br {
display: block;
}
.anchor {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 5;
}
.authorbox,
.sidebox {
position: absolute;
width: calc((100vw - 870px) / 2);
max-height: calc(100vh - 18rem);
margin-right: 8px;
padding: .3rem 1.5rem;
box-sizing: border-box;
z-index: 5;
}
.authorbox {
top: .5rem;
right: 103.5%;
max-width: calc((100vw - 921.2px) / 2) !important;
padding-right: 1rem;
font-size: 95%;
}
.sidebox {
left: 103.5%;
margin-left: 1rem;
padding-left: 1rem;
background: var(--alpha);
border: 1px solid hsl(0, 0%, 73%);
border-left: 8px solid var(--accentColor);
}
.authorbox tr :is(th, td),
.sidebox tr :is(th, td) {
padding: .2rem !important;
}
.flavorbox {
width: 75%;
margin: auto auto 5px;
padding: 0 1rem;
border: 1px solid #888;
}
/* == SIDEBOX MOBILE CUSTOMIZATION == */
/**
* Courtesy Of
* Woedenaz
**/
@media (max-width: 767.9px) {
.sidebox,
.sidebox:hover {
right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1rem);
}
}
@media (max-width: 1199.9px) {
.authorbox {
display: none;
visibility: hidden;
}
.sidebox {
top: .75rem;
right: calc(((100vw - 45.8rem) / 2) * -1);
left: initial;
width: auto;
max-width: 65vw !important;
padding: 0 .4rem;
background: var(--accentColor);
border: 1px solid hsl(0, 0%, 73%);
border-left: 8px solid var(--accentColor);
border-radius: 0;
overflow: visible;
-webkit-clip-path: inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
clip-path: inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
-webkit-transition:
color .2s ease-in-out .1s,
-webkit-box-shadow .5s ease-in-out .1s,
-webkit-clip-path .5s ease-in-out .1s;
-o-transition:
color .2s ease-in-out .1s,
box-shadow .5s ease-in-out .1s,
clip-path .5s ease-in-out .1s;
transition:
color .2s ease-in-out .1s,
box-shadow .5s ease-in-out .1s,
clip-path .5s ease-in-out .1s,
-webkit-box-shadow .5s ease-in-out .1s,
-webkit-clip-path .5s ease-in-out .1s;
}
.sidebox::before,
.sidebox::after {
content: " ";
position: absolute;
right: 0;
}
.sidebox::before {
top: calc(50% - .75rem);
width: 0;
height: 0;
border-top: .75rem solid transparent;
border-right: .75rem solid var(--accentColor);
border-bottom: .75rem solid transparent;
transition: border .1s ease-in-out .1s;
z-index: 10;
}
.sidebox::after {
width: 100%;
max-width: .75rem;
height: 100%;
max-height: calc(100vh - 18rem);
top: 0;
background: var(--alpha);
transition:
max-width .5s ease-in-out .1s,
box-shadow .5s ease-in-out .1s;
z-index: -1;
}
.sidebox > * {
opacity: 0;
-webkit-transition: opacity .2s ease-in-out .2s;
-o-transition: opacity .2s ease-in-out .2s;
transition: opacity .2s ease-in-out .2s;
}
.sidebox:hover {
overflow: visible;
-webkit-clip-path: inset(-.125rem -.25rem 0 0);
clip-path: inset(-.125rem -.25rem 0 0);
-webkit-transition:
right .5s ease-in-out .1s,
color .5s ease-in-out .2s,
-webkit-box-shadow .5s ease-in-out .1s,
-webkit-clip-path .5s ease-in-out .1s;
-o-transition:
right .5s ease-in-out .1s,
color .5s ease-in-out .2s,
box-shadow .5s ease-in-out .1s,
clip-path .5s ease-in-out .1s;
transition:
right .5s ease-in-out .1s,
color .5s ease-in-out .2s,
box-shadow .5s ease-in-out .1s,
clip-path .5s ease-in-out .1s,
-webkit-box-shadow .5s ease-in-out .1s,
-webkit-clip-path .5s ease-in-out .1s;
}
.sidebox:hover::before {
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
}
.sidebox:hover::after {
right: 0;
max-width: 100%;
}
.sidebox:hover > * {
opacity: 1;
}
}
/* == COLLAPSIBLES == */
.collapsible-block-link {
font-size: 120%;
font-weight: bold;
}
:is(div) .collapsible-block {
/* = For Collapsibles Inside Divs = */
padding: 1rem 0;
}
.licensebox .collapsible-block-folded,
.licensebox .collapsible-block-unfolded-link {
margin: auto;
text-align: center;
}
.licensebox .collapsible-block-content {
text-align: center
}
.licensebox :is(blockquote, div.blockquote) {
text-align: left;
}
/* == INFO BAR == */
.info-container {
--barColour: hsl(0, 89%, 18%);
}
.info-container .collapsible-block-link {
font-size: 100%;
}
.info-container div.collapsible-block-content {
padding: 0 .6rem 3rem;
}
.info-container .wiki-content-table {
width: 90%;
}
/* == PAGE RATING == */
.page-rate-widget-box,
div.page-rate-widget-box .rate-points {
border-radius: 0;
text-transform: capitalize;
}
.page-rate-widget-box {
margin-right: 0;
}
.page-rate-widget-box .cancel,
.page-rate-widget-box .cancel a:hover {
border-radius: 0 !important;
}
/* == INFO MODULE == */
.creditRate {
margin-right: 0 !important;
}
.rate-box-with-credit-button {
border-radius: 0 !important;
box-shadow: none !important;
}
:is(.creditButton, .creditButtonStandalone) p a:hover {
color: var(--vivid-lime-green) !important;
}
div.credit.first .wiki-content-table {
width: 100%;
}
/* == FORMATTING | [GENERAL] == */
#page-title,
.meta-title {
padding-bottom: 0;
font-family: var(--header-font);
font-weight: 600;
}
#page-content :is(h1, h2, h3, h4, h5, h6) {
display: flex;
flex-direction: column;
justify-content: center;
font-family: var(--header-font);
font-weight: 600;
line-height: 1.2;
text-align: center;
text-underline-offset: 25%;
word-break: unset;
}
#page-content h2 {
font-weight: bold;
}
#page-content a {
padding-bottom: 1px;
border-bottom: thin solid;
}
#page-content :is(.disruptionHeader, .footnoteref, .bibcite),
#page-content :is(.rateup a, .ratedown a, .cancel a, .yui-nav a) {
/* = Avoid Special Links = */
border: 0;
}
#page-content :is(.creditButton, .creditButtonStandalone) p a {
/* = Avoid Special Links = */
border-bottom: 0;
}
#page-content a:hover {
border-bottom-width: 2px;
text-decoration: none;
}
#page-content .footnoteref a:hover {
text-decoration: underline;
}
#main-content :is(#breadcrumbs, #page-options-container) a:hover,
:is(#footer, #license-area) a:hover {
padding-bottom: 1px;
border-bottom: thin solid;
text-decoration: none;
}
hr {
height: 0;
margin: 1rem 0;
background: 0;
border-top: 1px solid hsl(0, 0%, 67%);
}
ol li {
margin: 0 0 1rem;
}
ul {
margin: 1rem 0;
}
li, p {
text-underline-offset: 30%;
}
#toc {
line-height: 1.5;
}
.footnotes-footer,
.bibitems {
padding: 0 0 .5rem;
}
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus,
#top-bar ul li ul,
#side-bar .side-block,
.page-rate-widget-box,
.scp-image-block {
box-shadow: none;
}
/* == IMAGE BLOCK == */
.scp-image-block .scp-image-caption {
font-size: 95%;
line-height: 1.35;
text-underline-offset: 30%;
}
.scp-image-block.block-right {
margin: 0 0 1rem 2rem;
}
/* == CUSTOM DIV BLOCKS == */
.raisa-header,
.pink-header,
.oracle-header,
.cicapoco-header {
margin-bottom: 1rem;
padding: 0 .5rem;
border: 1px solid;
text-align: center;
}
.raisa-header {
/* = RAISA Notice Header = */
background: hsl(60, 65%, 85%);
border-color: hsl(0, 0%, 60%);
}
.pink-header {
/* = Pretty Header = */
background: hsl(350, 100%, 85%);
border-color: hsl(0, 4%, 36%);
}
.pink-header hr {
border-color: hsl(0, 4%, 36%);
}
.oracle-header {
/* = SPC From the Desk of ORACLE Header = */
color: hsl(208, 100%, 97%);
background: hsl(208, 67%, 44%);
border-color: var(--key);
}
.oracle-header hr {
border-color: hsl(208, 100%, 97%);
}
.img-resize img {
/* = Header Icons = */
float: left;
width: auto;
height: 8rem;
margin: .5rem;
}
.cicapoco-header {
/* = SPC's RAISA-Equivalent Header = */
background: lightblue;
border-color: hsl(195, 50%, 39%);
}
.cicapoco-header hr {
border-color: hsl(195, 50%, 39%);
}
.content-warning {
/* = Content Warning = */
width: 75%;
margin: 1rem auto;
padding: 0 1rem;
background: var(--alpha);
border: 3px double var(--key);
text-align: center;
}
blockquote, div.blockquote,
.alt-blockquote, .lightweight {
margin: 1rem 3rem;
padding: 0 1rem;
}
blockquote, div.blockquote {
/* = Regular Quote Block = */
background: hsl(0, 0%, 96%);
border: 3px double hsl(0, 0%, 60%);
}
:is(blockquote, div.blockquote) table.wiki-content-table th {
background: hsl(0, 0%, 89%);
}
.alt-blockquote {
/* = Alternative Quote Block = */
background: hsl(0, 0%, 96%);
border: 1px solid hsl(0, 0%, 60%);
border-radius: 1rem;
}
.lightweight {
/* = Lightweight Quote Block = */
background: hsl(0, 0%, 90%);
}
.card-block {
/* = Decorative Quote Block = */
margin: 1rem 0;
padding: .6rem 1.2rem;
background: hsl(220, 15%, 93%);
border-left: 8px solid var(--accentColor);
border-radius: .5rem;
}
blockquote hr, div.blockquote hr, .alt-blockquote hr, .lightweight hr, .card-block hr {
border-color: hsl(0, 0%, 67%);
}
.log-header {
/* = Interview/Exploration Log Header = */
margin-bottom: 1rem;
padding: 0 1rem;
background: hsl(0, 0%, 96%);
border: 3px dashed hsl(0, 0%, 60%);
border-radius: 2rem;
}
.report-box {
/* = Report Block = */
margin: 1rem 0;
padding: 0 1rem;
background: var(--alpha);
border: medium solid var(--key);
}
.report-box hr {
border-color: var(--key);
}
.realistic-shadow {
/* = Better Shadows = */
margin: 1rem 0 2rem;
box-shadow:
0 1px 1px hsla(0, 0%, 0%, .23),
0 2px 2px hsla(0, 0%, 0%, .18),
0 4px 4px hsla(0, 0%, 0%, .15),
0 8px 8px hsla(0, 0%, 0%, .13);
}
.report-box.red-tint {
/* = Alternative Report Block Variants = */
background: hsl(360, 91%, 86%);
border-color: hsl(360, 62%, 66%);
}
.report-box.red-tint hr {
border-color: hsl(360, 62%, 66%);
}
.report-box.orange-tint {
background: hsl(30, 91%, 86%);
border-color: hsl(30, 62%, 66%);
}
.report-box.orange-tint hr {
border-color: hsl(30, 62%, 66%);
}
.report-box.yellow-tint {
background: hsl(60, 91%, 86%);
border-color: hsl(60, 62%, 66%);
}
.report-box.yellow-tint hr {
border-color: hsl(60, 62%, 66%);
}
.report-box.green-tint {
background: hsl(120, 91%, 86%);
border-color: hsl(120, 62%, 66%);
}
.report-box.green-tint hr {
border-color: hsl(120, 62%, 66%);
}
.report-box.cyan-tint {
background: hsl(180, 91%, 86%);
border-color: hsl(180, 62%, 66%);
}
.report-box.cyan-tint hr {
border-color: hsl(180, 62%, 66%);
}
.report-box.blue-tint {
background: hsl(240, 91%, 86%);
border-color: hsl(240, 62%, 66%);
}
.report-box.blue-tint hr {
border-color: hsl(240, 62%, 66%);
}
.report-box.magenta-tint {
background: hsl(300, 91%, 86%);
border-color: hsl(300, 62%, 66%);
}
.report-box.magenta-tint hr {
border-color: hsl(300, 62%, 66%);
}
.report-box.grey-tint {
background: hsl(210, 9%, 86%);
border-color: hsl(210, 15%, 42%);
}
.report-box.grey-tint hr {
border-color: hsl(210, 15%, 42%);
}
.report-box:is(.red-tint, .orange-tint, .yellow-tint, .green-tint, .cyan-tint, .blue-tint, .magenta-tint, .grey-tint) blockquote hr,
.report-box:is(.red-tint, .orange-tint, .yellow-tint, .green-tint, .cyan-tint, .blue-tint, .magenta-tint, .grey-tint) div.blockquote hr {
border-color: hsl(0, 0%, 67%);
}
div.o5-box {
/* = Overseer Document Block = */
margin: 1rem 6rem;
padding: 0 1rem;
background: hsl(0, 0%, 75%);
border: medium solid var(--key);
}
div.o5-box hr {
border-color: var(--key);
}
.faux-source {
/* = Mimics Page Source = */
margin-bottom: 1rem;
padding: 0 2rem;
background: var(--alpha);
border: 1px dashed hsl(0, 0%, 67%);
font-family: var(--mono-font);
}
.narration {
/* = Mimics the Pages of a Book = */
margin: 1rem 0;
padding: 0 1rem;
background: var(--alpha);
border: 1px solid hsl(0, 0%, 63%);
}
.warning-notice {
/* = Simple Warning Block (Adapted From SCP-3143) = */
padding: 0 1rem;
background: var(--alpha);
background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
background-position: center;
background-repeat: no-repeat;
border: medium solid var(--key);
text-align: center;
}
.warning-notice hr {
border-color: var(--key);
}
.journal {
/* = Journal Block (Adapted From SCP-4003) = */
margin: 1rem 0;
padding: .9rem;
background-image:
linear-gradient(to top,
hsl(201, 33%, 84%) 0%,
hsl(60, 29%, 89%) 8%);
background-position: 0 8px;
background-size: 100% 1.3rem;
border: 1px solid hsl(0, 0%, 80%);
border-radius: .9rem;
font-family: var(--script-font);
}
.journal p {
margin: 0;
font-size: 1.3rem;
line-height: 1.3rem;
}
.sms-message {
/* = SMS Message Block = */
float: left;
clear: left;
width: 22.4rem;
margin: 0 0 1rem;
padding: 0 1.2rem;
background: hsl(0, 0%, 75%);
border-radius: 2rem;
font-size: 112.5%;
text-align: center;
}
/* == FORMATTING | [SPECIAL] == */
.centered {
/* = Center-Aligns Text = */
text-align: center;
}
.justified {
/* = Justify-Aligns Text = */
text-align: justify;
}
.indented {
/* = Indents Block by ⅜-inch (Use Within Other Divs) = */
text-indent: 2rem;
}
.indented :is(h1, h2, h3, h4, h5, h6, ol, ul, .bibcite, .bibitems, .footnoteref, .scp-image-block, .image-container, .centered, .fncon, .fncon::before) {
text-indent: 0;
}
.rev-red,
.rev-green,
.rev-blue,
.rev-yellow,
.terminal-span {
font-weight: bold;
}
.rev-red {
/* = Red Document Revision Text = */
color: var(--liteAccent);
}
.rev-green {
/* = Green Document Revision Text = */
color: hsl(120, 100%, 27%);
}
.rev-blue {
/* = Blue Document Revision Text = */
color: hsl(240, 100%, 27%);
}
.rev-yellow {
/* = Yellow Document Revision Text = */
color: hsl(40, 100%, 40%);
}
.terminal-span {
/* = Computer Terminal Text = */
font-family: var(--mono-font);
font-size: 110%;
letter-spacing: .3px;
}
/* == Blinking Text Cursor == */
/**
* Adapted From
* Your Very First SCP! by The Great Hippo
**/
.blinkbar{color: var(--key); animation: blink 1.5s infinite;}
@keyframes blink{to{opacity:.0}}
@keyframes flicker{0%{opacity:.9890}5%{opacity:.5842}10%{opacity:.9865}20%{opacity:.0412}20%{opacity:.6255}25%{opacity:.3157}30%{opacity:.7328}35%{opacity:.4654}40%{opacity:.9128}45%{opacity:.2449}50%{opacity:.5485}55%{opacity:.6438}60%{opacity:.1180}65%{opacity:.9085}70%{opacity:.0266}75%{opacity:.6795}80%{opacity:.7812}85%{opacity:.0117}90%{opacity:.2239}95%{opacity:.8897}100%{opacity:.2260}}
@keyframes overlay-anim{0%{visibility:hidden}10%{visibility:hidden}11%{visibility:visible}50%{visibility:hidden}100%{visibility:hidden}}
.lite-heading {
/* = Special Heading Area (Adapted From SCP-4058) = */
clear: both;
margin: 3.6rem auto;
}
.lite-heading h3 {
color: var(--liteAccent);
}
.lite-heading hr {
width: 55%;
margin: auto;
border-width: medium;
}
div.image-showcase {
/* = Alternative Image Showcase = */
width: 25rem;
margin-bottom: 1rem;
background: var(--alpha);
border: 3px ridge var(--key);
}
div.image-showcase.block-center {
margin-right: auto;
margin-left: auto;
}
.scene-break {
/* = Fancy Scene/Section Break = */
width: 3.6rem;
margin: 2rem 0;
}
.listPagesNav {
margin-bottom: 5rem;
}
.listPagesNav-prev,
.listPagesNav-next {
/* = ListPages Navigation (Adapted from SCP-5552) = */
width: 45%;
margin: 0 0 1rem;
padding: 0 2%;
background: hsl(0, 0%, 90%);
border: 1px solid hsl(0, 0%, 60%);
}
.listPagesNav-prev {
float: left;
text-align: left;
}
.listPagesNav-next {
float: right;
text-align: right;
}
.fade-away {
background:
linear-gradient(
to bottom,
var(--alpha),
var(--key));
}
.footing::before {
/* = Page Footing = */
content: " ";
position: absolute;
right: 0;
bottom: 1px;
left: 0;
border-bottom: 2px solid hsl(0, 0%, 47%);
}
.footing {
position: relative;
bottom: -2px;
margin-bottom: 2px;
border-bottom: 1px solid hsl(0, 0%, 47%);
}
.related-flex {
/* = Related Articles Box = */
display: flex;
justify-content: center;
}
.related {
margin: 1rem 0;
padding: 0 1rem;
background: var(--alpha);
border: thick solid hsla(0, 0%, 60%, .5);
text-align: left;
}
.series-nav {
/* = Series Navigation = */
margin: .5rem 0;
background:
linear-gradient(to bottom right,
hsla(0, 0%, 100%, 1),
hsla(0, 0%, 50%, .5));
border: outset 1.5px var(--key);
border-radius: 2rem;
font-size: 85%;
font-weight: bold;
text-align: center;
}
/* == ADVANCED WARNING HEADER == */
/**
* Adapted From
* SCP-001-JP - indonootoko's Proposal by indonootoko
**/
.orderwrapper {
position: relative;
width: auto;
text-align: center;
}
.council {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 295px;
height: 295px;
margin: auto;
background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
background-position: center;
background-repeat: no-repeat;
background-size: 295px 295px;
}
.ordertitle {
position: absolute;
top: 27px;
right: 0;
left: 0;
}
.ordertitle h1 {
color: var(--key);
font-size: 220%;
line-height: 90%;
}
.orderdescription {
position: absolute;
top: 93px;
right: 0;
left: 0;
width: 100%;
}
.orderdescription h1 {
color: var(--key);
font-size: 120%;
}
.orderdescription p {
color: var(--key);
font-size: 90%;
}
.itemno {
position: absolute;
right: 0;
bottom: 18px;
left: 0;
}
.itemno h1 {
color: var(--key);
font-size: 170%;
}
/* ==== YUI TABS ==== */
/* == YUI TAB BASE == */
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css);
/* == YUI TAB CUSTOMIZATION == */
/**
* Adapted From
* Black Highlighter Theme by Woedenaz
**/
.yui-navset * {
transition:
color 80ms cubic-bezier(.4, 0, .2, 1),
background 80ms cubic-bezier(.4, 0, .2, 1);
}
:is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav {
display: flex;
flex-wrap: wrap;
border-color: var(--darkAccent);
}
:is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav a {
/* = Link Modifier = */
color: var(--key);
/* = Tab Background Colour | [UNSELECTED] = */
background: var(--alfaAccent);
/* == */
}
:is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav li {
/* = Listitem Modifier = */
display: flex;
flex-grow: 2;
margin: 0;
padding: 0;
color: var(--alpha);
background: var(--darkAccent);
font-size: 1.05rem;
}
:is(.yui-navset, .yui-navset-top, .yui-navset-bottom) .yui-nav li a {
width: 100%;
border: 0;
}
:is(.yui-navset, .yui-navset .yui-navset-top) .yui-nav .selected {
/* = Selection Modifier = */
flex-grow: 2;
margin: 0;
padding: 0;
color: var(--alpha);
/* = Tab Background Colour | [SELECTED] = */
background: var(--darkAccent);
/* == */
}
.yui-navset .yui-nav li em {
border: 0;
}
.yui-navset :is(.yui-nav, .yui-nav .selected, .yui-navset-top .yui-nav) a em {
padding-top: .47rem;
padding-bottom: .47rem;
text-align: center;
}
.yui-navset :is(.yui-content, .yui-navset-top .yui-content) {
padding: .53rem;
border-color: hsl(0, 0%, 60%);
line-height: 1.5;
}
.yui-navset .yui-nav .selected a {
color: var(--alpha);
background: var(--darkAccent);
}
.yui-navset .yui-nav a:is(:hover, :focus) {
color: var(--alpha);
/* = Tab Background Colour | [HOVER] = */
background: var(--liteAccent);
/* == */
}
.yui-navset .yui-nav .selected :is(a, a em) {
border: 0;
}
.yui-navset .yui-nav .selected a:is(:hover, :active, :focus) {
background: var(--darkAccent);
cursor: default;
}
/* == WIKIWALK NAVIGATOR == */
.footer-wikiwalk-nav {
text-align: center;
}
/* == BETTERFOOTNOTES PATCH == */
:root {
--posX: calc(50% - 358px - 13rem) !important;
--fnLinger: 1.5s !important;
}
.fnnum {
font-size: 90%;
}
.fnnum:hover + .fncon {
right: calc(-8vw - 4rem) !important;
}
/* == CROQSTYLE PATCH == */
#edit-page-textarea {
font-family: unset;
}
tt {
margin: unset;
padding: unset;
background: unset;
border-radius: unset;
font-size: unset;
}
/* == FLOPS HEADER PATCH == */
#page-content .disruptionHeader {
padding-bottom: .4em;
}
/* == PAGE TAGS == */
#main-content .page-tags {
border-top: 1px solid hsl(0, 0%, 73%);
}
#main-content .page-tags a {
display: inline-block;
height: .8125rem;
margin: 0 0 .5rem .75rem;
padding: .1875rem .3125rem .1875rem 0;
color: hsl(0, 0%, 95%);
background: hsl(0, 0%, 27%);
border-bottom-right-radius: .25rem;
border-top-right-radius: .25rem;
font-size: .6875rem; /* 11px */
font-weight: normal;
line-height: .8125rem; /* 13px */
}
#main-content .page-tags a::before {
width: 0;
height: 0;
top: -.1875rem;
left: -.625rem;
padding: 0 .0625rem .1875rem;
border-color: transparent hsl(0, 0%, 27%) transparent transparent;
border-style: solid;
border-width: .5rem .5rem .5rem 0;
}
#main-content .page-tags a::before,
#main-content .page-tags a::after {
content: "";
position: relative;
float: left;
}
#main-content .page-tags a::after {
top: .2813rem;
left: -.5rem;
width: .25rem;
height: .25rem;
background: var(--alpha);
border-radius: .125rem;
}
#main-content .page-tags span {
max-width: 100%;
border-top: .5rem solid transparent;
}
/* == SHOW-CHANGES HIGHLIGHTS == */
.inline-diff ins::before {
color: hsl(240, 100%, 93%);
}
.inline-diff del::before {
color: hsl(0, 100%, 90%);
}
.inline-diff ins + del::before,
.inline-diff del + ins::before {
color: transparent;
}
.inline-diff br + ins::before,
.inline-diff br + del::before,
.inline-diff ins:first-of-type::before,
.inline-diff del:first-of-type::before {
content: "\f111";
position: absolute;
left: -1rem;
display: inline-block;
font: normal normal normal 16px/1 "FontAwesome";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: auto;
}
/* ==== BREAKPOINTS ==== */
/* == BREAKPOINTS KEY == */
/**
* Dbl-Extra-Small: ≤383.9px
* Extra-Small: 384px … 575.9px
* Small: 576px … 767.9px
* Medium: 768px … 983.9px
* Large: 984px … 1199.9px
* Extra-Large: 1200px … 1391.9px
* Dbl-Extra-Large: ≥1392px
**/
/* == DBL-EXTRA-SMALL MEDIA QUERY == */
@media (max-width: 383.9px) {
#header h1 a {
font-size: 75%;
}
div.image-showcase {
width: 90%;
}
div.o5-box {
margin: 1rem 0;
}
}
/* == EXTRA-SMALL MEDIA QUERY == */
@media (min-width: 384px) and (max-width: 575.9px) {
#header h1 a {
font-size: 85%;
}
div.image-showcase {
width: 100%;
}
div.o5-box {
margin: .5rem;
}
}
/* == SMALL MEDIA QUERY == */
@media (max-width: 767.9px) {
.open-menu a:hover {
box-shadow: none;
}
.info-container div.collapsible-block-content div {
margin-right: 0;
margin-left: 0;
}
blockquote, div.blockquote,
.alt-blockquote, .lightweight {
margin: 1rem 0;
}
}
/* == REDUCED MOTION ACCESSIBILITY == */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001s !important;
animation-iteration-count: 1 !important;
transition-duration: .001s !important;
}
}
[[/code]]
[[module CSS]]
/* ==== DOCUMENTATION ==== */
.code {
text-align: left;
}
.code.slim {
width: 60%;
margin: 1rem auto;
color: black;
}
.templateInfo {
margin: 1rem 0;
padding: 0 1rem;
background: hsla(0, 0%, 97%);
border: thin solid;
border-bottom-width: medium;
border-color: hsl(0, 0%, 87%) hsl(0, 0%, 73%);
}
/* ==== UNADAPTED STYLING BY WOEDENAZ ==== */
:root {
--white-monochrome: hsl(0, 0%, 95%);
}
span.pointer {
font-family: var(--mono-font);
display: inline-block;
height: .8125rem;
line-height: .75rem;
line-height: .8125rem;
font-size: .625rem;
font-size: .6875rem;
background: var(--accentColor);
color: var(--white-monochrome);
-webkit-border-bottom-right-radius: .25rem;
-moz-border-radius-bottomright: .25rem;
border-bottom-right-radius: .25rem;
-webkit-border-top-right-radius: .25rem;
-moz-border-radius-topright: .25rem;
border-top-right-radius: .25rem;
margin: 0 0 0 .75rem;
padding: .1875rem .3125rem .1875rem 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span.pointer::before, span.pointer::after {
float: left;
position: relative;
}
span.pointer::before {
content: "";
top: -.1875rem;
left: -.625rem;
width: 0;
height: 0;
border-color: transparent var(--accentColor) transparent transparent;
border-style: solid;
border-width: .5rem .5rem .5rem 0;
padding: 0 .0625rem .1875rem;
}
span.pointer::after {
content: "";
top: 0;
left: -.5rem;
width: .5rem;
height: 1rem;
color: var(--white-monochrome);
font-size: 1rem;
line-height: .6em;
-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1rem auto;
mask-size: 1rem auto;
background: var(--white-monochrome);
}
@media only screen and (max-width: 575.9px) {
span.pointer {
width: -webkit-calc(100% - 1rem);
width: -moz-calc(100% - 1rem);
width: calc(100% - 1rem);
height: auto;
padding-left: .5rem;
line-height: 1.5em;
}
span.pointer::after {
-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
-webkit-mask-size: contain;
mask-size: contain;
mask-position: center center;
}
}
[[/module]]
[[/<]]
[[/collapsible]]
[[/=]]
[[footnoteblock]]
[!-- 此处预留给未来可能添加的版权模块。 --]
@@ @@
[[/iftags]]
[[include :scp-wiki-cn:component:croqstyle]]
[[include :scp-wiki-cn:component:fade-in speed=1]]
[[include :scp-wiki-cn:component:toggle-sidebar]]
[[module CSS]]
@import url(https://scp-wiki-cn.wdfiles.com/local--code/theme%3Aflopstyle/1);
@import url(https://scp-wiki-cn.wdfiles.com/local--code/theme%3Aflopstyle/2);
[[/module]]
[[include :scp-wiki-cn:component:interwiki-style
|priority=2
|type=sidebar
|theme=https://scp-wiki-cn.wdfiles.com/local--code/theme%3Aflopstyle/2
]]