半影 黑标主题版式
2021年6月6日
修订 9
核心指标
评分
10
↑ 10
↓ 0
支持率
100%
总票数 10
Wilson 95% 下界
72.2%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
加载图表中...
最近修订
1 / 4
最近投票
1 / 1
2024-09-04
2022-12-24
2022-11-29
2022-09-22
2021-08-14
2021-06-25
2021-06-25
2021-06-25
2021-06-25
2021-06-25
页面源码
源码字符数 32185文字字数 2809
[[iftags +版式]]
[[module CSS]]
@import url("https://cdn.jsdelivr.net/gh/Nu-SCPTheme/Black-Highlighter@gh-pages/css/min/normalize.min.css");
@import url("https://cdn.jsdelivr.net/gh/Nu-SCPTheme/Black-Highlighter@gh-pages/css/min/black-highlighter.min.css");
#page-title, #breadcrumbs {
text-align: center !important;
}
.scp-image-block.block-right {
margin: 1em 0 1em 2em;
}
.scp-image-block > a:first-of-type {
background: var(--gradient-header);
}
.scp-image-block .printuser img.small {
width: initial;
}
.scp-image-block img {
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5em;
}
[[/module]]
[[include :scp-wiki-cn:component:interwiki-style
| priority=0
| override=1
| type=sidebar
| theme=https://interwiki.scpwikicn.com/css/style-bhl.css
]]
[[=]]
++ 由 [[*user EstrellaYoshte]] 制作的[[[theme:penumbra|半影版式]]]之黑色标记笔版本
------
+ 主题颜色
[[/=]]
[[include :scp-wiki:component:theme-squares -=-
| color1-name=Tuna
| color1-variable=--gray-monochrome
| color1-info=(47, 51, 60)
| color1-has-light-text=1
| color2-name=Summer Sky
| color2-variable=--bright-accent
| color2-info=(30, 181, 232)
| color2-has-light-text=1
| subcolor1-name=White Smoke
| subcolor1-variable=--white-monochrome
| subcolor1-info=(248, 248, 248)
| subcolor2-name=Alto
| subcolor2-variable=--very-light-gray-monochrome
| subcolor2-info=(215, 215, 215)
| subcolor3-name=Black Rock
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(47, 51, 60)
| subcolor3-has-light-text=1
| subcolor4-name=Cinder
| subcolor4-variable=--black-monochrome
| subcolor4-info=(33, 37, 46)
| subcolor4-has-light-text=1
]]
[[div_ style="display:inline-flex;width:100%;filter:invert(1);"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Ablack-highlighter-theme/black-highlighter-logo.svg]]
[[/div]]
+ 使用方法
++ 注意：这是一个基于黑色标记笔的主题版式。若你想使用此版式，你还需要导入黑色标记笔版式。[[[theme:black-highlighter-theme|点击这里了解更多]]]。[[footnote]]看一看将链接高亮时会如何！[[/footnote]]
在你的作品开头添加如下语法以应用此版式：
[[div class="code"]]
@@[[include :scp-wiki-cn:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki-cn:theme:penumbra-bhl]]@@
[[/div]]
[[=]]
**CSS 变量与原版式完全相同以便（大概）在需要时替换。[如下]**
**只是 {{--accentColor}} 需要转换为 rgb 格式。比如 {{#1EB5E8}} 需要转换为 {{30, 181, 232}}。
[https://www.rapidtables.com/convert/color/hex-to-rgb.html 这是转换的实用工具。]**
**请勿在转换十六进制色时加上 {{rgb()}}。只需要三个数字就好。**
[[/=]]
[[div class="code"]]
:root {
@@ --lgurl: url("自定义标志 url");@@
@@ --accentColor: 颜色;@@
}
:root:lang(cn) {
@@ --header-title: "页眉大标题";@@
@@ --header-subtitle: "页眉副标题";@@
}
[[/div]]
+ 示例
可通过五个连字符“@@-----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
-----
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
[[collapsible show="+ 标题" hide="- 标题"]]
+ 1 级标题
++ 2 级标题
+++ 3 级标题
++++ 4 级标题
+++++ 5 级标题
++++++ 6 级标题
[[/collapsible]]
@@ @@
[[tabview]]
[[tab 分页]]
此为分页（tab view）。
[[/tab]]
[[tab 分页]]
看，这有更多文字。
多么精巧绝伦。
[[/tab]]
[[tab 长 Tab]]
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[/tabview]]
> 这是一个引用块，在一行字的起始处加上“> ”来创建。
>
> 更多文字
> -----
> 一条分割线
>
>> 嵌套引用块
||~ 这是 ||~ 表格 ||
|| 你应该老早 || 就知道怎么 ||
|||| 做这个了吧 ||
@@ @@
[[div class="darkbox"]]
{{@@[[div class="darkbox"]]@@}}
[[/div]]
[[div class="lightbox"]]
{{@@[[div class="lightbox"]]@@}}
[[/div]]
------
{{sidebox}} div 元素结构如下所示：
[[div class="darkbox"]]
@@[[div class="limit"]]@@ {{<-- 设置锚点的起始限制}}
@@[[div class="anchor"]]@@ {{<-- 设置 sidebox 的固定位置}}
@@[[div class="sidebox"]]@@
sidebox 内的文本。
@@[[/div]]@@
@@[[/div]]@@
sidebox 滚动经过的文本。
@@[[/div]]@@ {{<-- 设置锚点末尾}}
[[/div]]
[[collapsible show="示例" hide="示例"]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox"]]
利用技巧，也可以
[[/div]]
[[/div]]
人类到如今已经繁衍了 250000 年，只有最近的 4000 年是有意义的。
所以，我们在将近 250000 年中在干嘛？我们躲在山洞中，围坐在小小的篝火边，畏惧那些我们不懂得的事物——那些关于太阳如何升起的解释，那些人头鸟身的怪物，那些有生命的石头。所以我们称他们为“神”和“恶魔”，并向他们祈求宽恕和祈祷拯救。
之后，他们的数量在减少，我们的数量在增加。当我们恐惧的事物越来越少，我们开始更理智的看待这个世界。然而，不能解释的事物并没有消失，好像宇宙故意要表现出荒谬与不可思议一样。
@@ @@
[[/div]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox"]]
像这样
[[/div]]
[[/div]]
人类不能再生活在恐惧中。没有东西能保护我们，我们必须保护我们自己。
当其他人在阳光下生活时，我们必须在阴影中和它们战斗，并防止它们暴露在大众眼中，这样其他人才能生活在一个理智的，普通的世界中。
我们控制，我们收容，我们保护。
— The Administrator
@@ @@
[[/div]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox"]]
添加多个 sidebox。
[[/div]]
[[/div]]
于世界各地的暗处活动，基金会的目标是收容异常物品，个体及现象，而且其本身运作不受各个主要国家政府的司法管辖权，授权和委托的干扰。这些异常透过物理或心理危害对全球安全造成显著威胁。
基金会维持常态，从而使世界各地的平民得以生存并免受恐惧，不信或对个人信念的怀疑的影响，并从地外、异次元和外层空间的影响中维持人类的独立自主。
[[/div]]
[[/collapsible]]
@@ @@
若没有 {{limit}} div 元素，{{anchor}} 在超出自身固定位置后，会基于整个页面内容固定。
**注意 {{sidebox}} div 元素会在屏幕宽度 1290px 及以下时最小化。**
------
@@ @@
[[=]]
+++ 页眉字体为 Josefin Sans / 黑体。
正文字体为 Roboto。
@@ @@
{{等宽字为 Fira Code / 幼圆。}}
[[/=]]
@@ @@
[[footnoteblock]]
-----
[[collapsible show="+ 显示版式代码" hide="- 隐藏版式代码"]]
[[code type="CSS"]]
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
@supports(display: grid) {
:root {
/* S-CSS-P Integration */
/* If you're making a new CSS theme, please include the following three variables at minimum. */
--theme-base: "black-highlighter";
/* must be either "black-highlighter" or "sigma9" */
--theme-id: "penumbra-bhl";
/* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
--theme-name: "Penumbra BHL Theme";
/* set this to your theme's full name */
--lgurl: var(--logo-image);
--header-subtitle: "SECURE - CONTAIN - PROTECT";
/* Typefaces */
--body-font: "Roboto", sans-serif;
--header-font: "Josefin Sans", sans-serif;
--title-font: "Josefin Sans", sans-serif;
--mono-font: "Fira Code", "Andale Mono", "Courier New", Courier, monospace;
--ui-wght: 600;
--ui-hvr-wght: 800;
/* Standard Colors */
--white-monochrome: 248, 248, 248;
/* white */
--pale-gray-monochrome: 237, 237, 237;
/* v light gray for blockquotes and stuff */
--light-pale-gray-monochrome: 237, 237, 237;
/* very light pale gray for misc. use */
--very-light-gray-monochrome: 215, 215, 215;
/* very light accent gray for misc. use */
--light-gray-monochrome: 160, 160, 160;
/* light accent gray for login status */
--gray-monochrome: 66, 66, 72;
/* gray */
--dark-gray-monochrome: 47, 51, 60;
/* dark accent gray for sidebar background */
--black-monochrome: 33, 37, 46;
/* black */
--accentColor: 30, 181, 232;
/*Penumbra Accent Color*/
--pale-accent: var(--accentColor);
/* light red, for visited links */
--bright-accent: var(--accentColor);
/* bright red */
--medium-accent: var(--accentColor);
/* medium red - the "default" accent color */
--dark-accent: var(--accentColor);
/* dark red */
--alt-accent: 221, 102, 17;
/* pale orange, for newpage links */
/* Background and Header Colors */
--background-gradient-color: var(--black-monochrome);
/* Primary Theme Colors */
--swatch-background: var(--dark-gray-monochrome);
/* Primary Text Colors */
--swatch-text-light: var(--pale-gray-monochrome);
--swatch-text-general: var(--swatch-text-light);
/* Primary Menu Colors */
--swatch-menubg-color: var(--black-monochrome);
--swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
--swatch-alternate-color: var(--swatch-menubg-dark-color);
/* Primary Header Colors */
--swatch-headerh1-color: var(--bright-accent);
--swatch-headerh2-color: var(--bright-accent);
/* Link Colors */
--sidebar-links-text: var(--bright-accent);
/* Rating Module Colors */
--rating-module-button-color: var(--white-monochrome);
--rating-module-text-color: var(--swatch-menutxt-light-color);
/* Header Gradients */
--diagonal-stripes: initial;
/* header measurements */
--header-height-on-desktop: 8.750rem;
--header-height-on-mobile: 8.750rem;
--header-h1-font-size: calc(2rem + (2.75 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
--header-h2-font-size: calc(var(--base-font-size) * 1.15);
/* Toggle Sidebar Variable */
--toggle-border-color: rgb(var(--swatch-primary));
--toggle-icon-color: rgb(var(--swatch-primary));
--toggle-roundness: 0;
}
:root:lang(cn) {
--header-subtitle: "控制 - 收容 - 保护";
/* Typefaces */
--body-font: "Roboto", sans-serif;
--header-font: "Josefin Sans", '黑体', sans-serif;
--title-font: "Josefin Sans", '黑体', sans-serif;
--mono-font: "Fira Code", "Andale Mono", "Courier New", Courier, '幼圆', monospace;
}
/* ===PAGE ELEMENTS COLORS=== */
:root {
/* ===UI BUTTON COLORS=== */
--ui-button-bg: var(--swatch-menubg-medium-dark-color);
--ui-button-txt: var(--swatch-text-secondary-color);
--ui-button-hover-txt: var(--swatch-text-secondary-color);
/* ===MODALS COLORS=== */
--modal-bg: var(--black-monochrome);
--modal-body-text: var(--swatch-text-secondary-color);
--modal-body-header-txt: var(--swatch-primary);
--modal-header-bg: var(--black-monochrome);
/* ===FOOTNOTES HOVER BLOCK COLORS=== */
--hoverblock-bg: var(--swatch-menubg-medium-dark-color);
--hoverblock-txt: var(--swatch-text-general);
}
#footer {
--footer-link-hover-color: var(--swatch-text-tertiary-color);
}
::-moz-selection {
background: rgba(var(--swatch-primary), 1);
color: rgb(var(--black-monochrome)) !important;
text-shadow: none;
}
::selection {
background: rgba(var(--swatch-primary), 1);
color: rgb(var(--black-monochrome)) !important;
text-shadow: none;
}
html,
body {
scrollbar-color: rgb(var(--swatch-primary)) rgb(var(--black-monochrome));
}
body {
background-image: var(--gradient-background);
background-size: 100% var(--background-gradient-distance);
}
.danger-diamond a,
.danger-diamond a:hover {
color: rgba(0, 0, 0, 0) !important;
box-shadow: initial !important;
}
#header::before {
background-image: var(--lgurl);
opacity: 0.15;
background-size: auto 9.5rem;
}
#header h1 a {
text-transform: uppercase;
}
#header h1,
#header h1 a,
#header h1 a::before {
top: 0.35rem;
}
#header h2,
#header h2 span,
#header h2 apan::before {
top: calc(var(--header-h2-font-size) * 0.6);
;
}
#side-bar .heading,
#side-bar .side-block>.collapsible-block:first-child .collapsible-block-folded {
background: none;
border-bottom: 0.0625rem solid rgb(var(--pale-gray-monochrome));
flex-basis: 90%;
margin: 0.5rem auto 0.125rem;
font-family: var(--header-font);
}
#side-bar .heading p,
#side-bar .side-block>.collapsible-block .collapsible-block-link {
text-transform: none;
text-align: left;
text-indent: 1rem;
font-size: 0.94rem;
}
#page-content {
font-size: 0.9rem !important;
}
#page-title {
color: rgb(var(--swatch-text-general));
border-color: rgb(var(--swatch-text-general));
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: rgb(var(--swatch-primary));
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: rgb(var(--white-monochrome));
}
#login-status #my-account {
--wght: 400;
font-weight: 400;
}
#top-bar div.mobile-top-bar>ul>li>ul>li>a,
#top-bar div.top-bar>ul>li>ul>li>a {
--wght: 400;
font-weight: 400;
}
#top-bar div.mobile-top-bar>ul>li>ul>li:hover a,
#top-bar div.top-bar>ul>li>ul>li:hover a {
color: rgb(var(--black-monochrome));
}
#page-content a:not([href*="user"]):not([href*="javascript:;"]) {
padding: 0.15em;
margin: -0.15em;
color: rgb(var(--white-monochrome));
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 1);
transition:
box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
#page-content a:not([href*="user"]):not([href*="javascript:;"]):hover {
padding: 0.3em 0.25em 0.2em 0.25em;
margin: -0.25em;
box-shadow: inset 0 -1.5em 0 0 rgba(var(--swatch-primary), 1);
text-decoration: none;
color: rgb(var(--black-monochrome))
}
.page-rate-widget-box {
background: rgb(var(--black-monochrome));
}
/* Ayer's info-bar patch by Monkatraz */
#page-content .info-container .collapsible-block-folded,
#page-content .info-container .collapsible-block-unfolded-link {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0;
box-shadow: none;
}
#page-content .info-container .collapsible-block-link::before,
#page-content .info-container .collapsible-block-unfolded-link::before {
content: " ";
display: none;
}
#page-content .info-container .collapsible-block-content::after {
display: none;
}
blockquote,
div.blockquote,
#toc {
background-color: rgb(var(--black-monochrome));
border: solid 0.125rem rgb(var(--dark-gray-monochrome));
box-shadow: -0.188rem 0rem 0rem -0.006rem rgb(var(--swatch-primary));
}
.code {
background-color: rgb(var(--black-monochrome));
border: solid 0.1875rem rgb(var(--dark-gray-monochrome));
box-shadow: none;
}
.code pre,
.code p,
.code {
font-size: 0.87rem;
background-color: rgb(var(--black-monochrome));
color: rgb(var(--swatch-text-general));
}
.code pre {
white-space: pre-wrap;
}
.code pre span[class*="hl-"] {
-webkit-filter: invert(1) hue-rotate(180deg);
filter: invert(1) hue-rotate(180deg);
}
.yui-navset .yui-nav {
width: 100%;
}
.yui-navset .yui-nav a {
transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
box-shadow: initial;
}
.yui-navset .yui-nav li {
background-color: rgb(var(--black-monochrome));
padding-top: 0.25em;
-webkit-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forward;
animation-fill-mode: forward;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.yui-navset .yui-nav li:hover {
background-color: rgb(var(--swatch-primary));
}
.yui-navset .yui-nav li em {
transition:
transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
color: rgb(var(--swatch-menutxt-light-color));
}
.yui-navset .yui-nav li:hover em {
color: rgb(var(--swatch-menutxt-dark-color));
}
.yui-navset .yui-nav .selected {
margin-top: -0.5em;
padding-top: 0.5em;
margin-right: 0.0625rem;
background-color: rgb(var(--swatch-primary));
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.yui-navset .yui-nav .selected a em {
transform: translateY(-0.25em);
color: rgb(var(--black-monochrome));
}
.yui-navset .yui-nav a,
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:active,
.yui-navset .yui-nav a:focus-within {
background: rgba(0, 0, 0, 0) !important;
font-family: var(--title-font);
font-weight: 700;
isolation: isolate;
}
.yui-navset .yui-nav a::before,
.yui-navset .yui-nav a::after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
pointer-events: none;
}
.yui-navset .yui-nav a:hover::before,
.yui-navset .yui-nav a:focus::before,
.yui-navset .yui-nav .selected a::before {
-webkit-mask-position: center 0rem !important;
mask-position: center 0rem !important;
background-position: 100% 200vh;
}
.yui-navset .yui-nav a:hover::after,
.yui-navset .yui-nav a:focus::after,
.yui-navset .yui-nav .selected a::after {
opacity: 0;
-webkit-animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
-webkit-animation-direction: backwards;
animation-direction: backwards;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.yui-navset .yui-content {
background: rgb(var(--black-monochrome));
border: none;
margin-top: 0.25rem;
}
table.wiki-content-table tr {
border: none !important;
}
table.wiki-content-table th {
background-color: rgb(var(--black-monochrome));
color: rgb(var(--swatch-primary));
;
font-family: var(--title-font);
font-weight: 700;
text-transform: uppercase;
padding-top: 0.4em;
}
table.wiki-content-table th,
table.wiki-content-table td {
border: solid 0.0625rem rgb(var(--swatch-primary)) !important;
}
hr {
border-color: rgb(var(--accentColor));
background-color: rgb(var(--accentColor));
}
/*---- TAB ANIMATION by Croquembouche ---- */
.yui-navset .yui-content>div {
display: block;
top: 0;
overflow: hidden;
transform-origin: 0 0;
}
.yui-navset .yui-content>div[style*="none"] {
display: block !important;
flex: 0;
max-height: 0;
padding: 0 0.5em;
border-width: 0;
/* The following transition affects the one that DISAPPEARS */
transition: padding 0s linear 0.5s,
border-width 0s linear 0.5s,
flex 0.5s cubic-bezier(.18, .51, .54, .9) 0s;
-webkit-animation: tab-disappear 0.5s ease-in-out 0s 1 both;
animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
.yui-navset .yui-content>div[style*="block"] {
display: block !important;
flex: 1;
max-height: 9999rem;
/* The following transition affects the one that APPEARS */
transition: padding 0s linear 0.5s,
border-width 0s linear 0.5s,
flex 0.5s cubic-bezier(.18, .51, .54, .9) 0.5s;
-webkit-animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
@-webkit-keyframes tab-disappear {
0% {
max-height: 9999rem;
}
1% {
max-height: 100vh;
}
100% {
max-height: 0;
}
}
@keyframes tab-disappear {
0% {
max-height: 9999rem;
}
1% {
max-height: 100vh;
}
100% {
max-height: 0;
}
}
@-webkit-keyframes tab-appear {
0% {
max-height: 0;
}
99% {
max-height: 100vh;
}
100% {
max-height: 9999rem;
}
}
@keyframes tab-appear {
0% {
max-height: 0;
}
99% {
max-height: 100vh;
}
100% {
max-height: 9999rem;
}
}
/* fancy collapsible */
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
background: rgb(var(--black-monochrome));
transition: background 0.25s linear;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
white-space: nowrap;
overflow: hidden;
margin: auto;
}
#page-content .collapsible-block-folded .collapsible-block-link::before {
content: "▷ ";
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
content: "▽ ";
}
#page-content .collapsible-block-link {
text-decoration: none;
color: rgb(var(--white-monochrome));
font-weight: 700;
}
#page-content .collapsible-block-link:hover {
color: rgb(var(--black-monochrome));
}
#page-content .collapsible-block-folded:hover,
#page-content .collapsible-block-unfolded-link:hover {
background: rgb(var(--swatch-primary));
}
#page-content .collapsible-block-unfolded-link {
box-shadow: 0rem -0.26rem 0rem 0rem rgb(var(--swatch-primary));
}
#page-content .collapsible-block-folded,
#page-content .collapsible-block-unfolded-link {
margin-top: 0.625rem;
margin-bottom: 0.625rem;
}
.scp-image-block {
border: solid 0.5rem rgb(var(--black-monochrome));
border-bottom: solid 0rem rgb(var(--black-monochrome));
box-shadow: 0rem 0.26rem 0rem 0rem rgb(var(--accentColor));
box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
background-color: rgb(var(--black-monochrome));
border: solid 0.25rem rgb(var(--black-monochrome));
color: rgb(var(--pale-gray-monochrome));
font-size: 0.84rem;
}
a.footnoteref {
padding: 0.05em;
color: rgb(var(--swatch-primary));
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
box-shadow: inset 0 0 0 0rem rgba(var(--swatch-primary), 1);
transition:
box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
a.footnoteref:hover {
box-shadow: inset 0 -1.25em 0 0 rgba(var(--swatch-primary), 1);
text-decoration: none;
color: rgb(var(--black-monochrome))
}
.footnotes-footer a[href*="javascript"]::before,
.bibitems .bibitem::after,
.footnotes-footer {
background-color: rgb(var(--black-monochrome));
}
/* Tags */
.page-tags span {
border-top: 0.0625rem solid rgb(var(-white-monochrome));
}
.page-tags span a {
padding: 0.25em;
color: rgb(var(--white-monochrome));
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 1);
transition:
box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.page-tags span a:hover {
padding: 0.3em 0.25em 0.2em 0.25em;
box-shadow: inset 0 -1.75em 0 0 rgba(var(--swatch-primary), 1);
text-decoration: none;
color: rgb(var(--black-monochrome))
}
div#page-options-bottom-2>a,
div#page-options-bottom>a {
border-color: rgba(var(--swatch-primary-darkest), 1);
background-color: rgba(var(--swatch-menubg-dark-color), 1);
color: rgb(var(--white-monochrome));
border-radius: 0;
}
div#page-options-bottom-2>a:active,
div#page-options-bottom-2>a:hover,
div#page-options-bottom>a:active,
div#page-options-bottom>a:hover {
border-color: rgba(var(--swatch-menubg-dark-color), 1);
background-color: rgba(var(--swatch-primary-darkest), 1);
color: rgb(var(--black-monochrome));
border-radius: 0;
}
#who-rated-page-area>div>span[style*="color"] {
color: rgb(var(--swatch-text-secondary-color)) !important;
}
#footer {
color: rgb(var(--black-monochrome));
}
#license-area {
color: rgb(var(--white-monochrome));
}
input.text,
textarea {
background-color: rgb(var(--black-monochrome));
color: rgb(var(--swatch-text-general));
border-color: rgb(var(--swatch-menubg-dark-color));
}
#lock-info {
background-color: rgb(var(--black-monochrome));
color: rgb(var(--swatch-text-general));
border-color: rgb(var(--swatch-menubg-dark-color));
}
/* Pop-Up Windows */
.owindow {
background-color: rgb(var(--black-monochrome));
border-color: rgb(var(--swatch-primary));
}
.owindow .modal-header {
background-color: rgb(var(--black-monochrome));
}
.owindow .modal-body img {
background-color: transparent !important;
}
.owindow .title {
background-color: rgb(var(--black-monochrome));
color: var(--swatch-primary);
border-bottom: 0.0625rem solid rgb(var(--swatch-primary));
}
.owindow .button-bar a {
background-color: rgb(var(--black-monochrome));
border-color: rgb(var(--swatch-primary));
color: rgb(var(--white-monochrome));
}
.owindow .button-bar a:hover {
background-color: rgb(var(--swatch-primary));
}
.darkbox,
.lightbox {
border-left: solid 0.26rem rgb(var(--swatch-primary));
border-right: solid 0.26rem rgb(var(--swatch-primary));
padding: .4rem;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.darkbox {
background-color: rgb(var(--black-monochrome));
}
.lightbox {
background-color: rgb(var(--white-monochrome));
color: rgb(var(--black-monochrome));
}
.lightbox h2,
.lightbox h3,
.lightbox h4,
.lightbox h5,
.lightbox h6 {
color: rgb(var(--black-monochrome));
}
/* Custom Assets by EstrellaYoshte */
.limit {
margin-bottom: -1rem;
}
.anchor {
position: -webkit-sticky;
position: sticky;
height: 0;
top: 0;
z-index: 9999;
}
.sidebox {
background-color: rgb(var(--black-monochrome));
border-top: solid 0.125rem rgb(var(--swatch-primary));
padding: .14rem 1rem .14rem;
margin-top: 0;
margin-bottom: 0.5rem;
width: calc((100vw - (var(--body-width-on-desktop) + 10rem))/2);
max-height: calc(100vh - 18rem);
position: absolute;
top: 0;
left: 103.5%;
z-index: 5;
overflow: auto;
box-sizing: border-box;
}
.hovertip {
color: rgb(var(--swatch-text-general));
}
@media (max-width: 80.625rem) {
.sidebox {
width: auto;
max-width: 50vw;
color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgb(var(--swatch-primary));
border: none;
right: calc(((100vw - var(--body-width-on-desktop)) / 2) * -1);
left: initial;
pointer-events: none;
transition:
max-width 0.2s ease-in-out 0.1s,
color 0.2s ease-in-out 0.1s,
box-shadow 0.5s ease-in-out 0.1s,
background-color 0s ease-in-out 0s;
overflow-x: hidden;
overflow-y: hidden;
scrollbar-width: thin;
}
.sidebox::-webkit-scrollbar {
width: 0.5em;
}
.sidebox * {
opacity: 0;
transition:
opacity 0.2s ease-in-out 0.1s;
}
.sidebox::before,
.sidebox::after {
content: " ";
position: absolute;
pointer-events: all;
right: 0;
}
.sidebox::before {
top: calc(50% - 0.75rem);
width: 0;
height: 0;
border-top: 0.75rem solid transparent;
border-bottom: 0.75rem solid transparent;
border-right: 0.75rem solid rgb(var(--swatch-primary));
transition:
border 0.1s ease-in-out 0.1s;
z-index: 10;
}
.sidebox::after {
top: 0;
max-width: 0.75rem;
width: 100%;
height: 100%;
box-shadow: 0.125rem 0 0 0 rgb(var(--swatch-primary));
max-height: calc(100vh - 18rem);
background-color: rgb(var(--black-monochrome));
z-index: -1;
transition:
box-shadow 0.5s ease-in-out 0.1s,
max-width 0.5s ease-in-out 0.1s,
border-top-left-radius 0.5s ease-in-out 0.1s,
border-bottom-left-radius 0.5s ease-in-out 0.1s;
}
.sidebox:hover,
.sidebox:active {
color: rgb(var(--swatch-text-general));
background-color: rgb(var(--black-monochrome));
pointer-events: all;
overflow-y: scroll;
transition:
max-width 0.5s ease-in-out 0.2s,
color 0.5s ease-in-out 0.2s,
box-shadow 0.5s ease-in-out 0.1s,
background-color 0s ease-in-out 0.6s,
right 0.5s ease-in-out 0.1s;
}
.sidebox:hover *,
.sidebox:active * {
opacity: 1;
transition:
opacity 0.5s ease-in-out 0.2s;
}
.sidebox:hover::before,
.sidebox:active::before {
border-top: 0vw solid transparent;
border-bottom: 0vw solid transparent;
}
.sidebox:hover::after,
.sidebox:active::after {
box-shadow: 0 -0.125rem 0 0 rgb(var(--swatch-primary));
right: 0;
max-width: 100%;
border-top-left-radius: 0rem;
border-bottom-left-radius: 0rem;
}
}
@media only screen and (max-width:56.25rem) {
:root {
--body-width-on-desktop: 100vw;
--header-h1-font-size: calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
--header-h2-font-size: var(--base-font-size);
}
#header h1,
#header h1 a,
#header h1 a::before {
top: 0.5rem;
}
#header h2,
#header h2 a,
#header h2 a::before {
top: 0.35rem;
}
.anchor {
top: calc(var(--topbar-height-on-mobile) + 0.75rem);
}
.sidebox,
.sidebox:hover,
.sidebox:active {
right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.75rem);
}
.sidebox::before,
.sidebox::after {
content: " ";
position: absolute;
pointer-events: all;
right: 0;
}
.blockquote,
[class*="blockquote"],
blockquote,
div.blockquote {
margin: 0;
}
}
@media only screen and (min-width: 48.0625rem) {
#search-top-box-form input[type="submit"],
#search-top-box-form input[type="submit"]:focus,
#search-top-box-form input[type="submit"]:hover {
border-left: 0.0625rem solid rgba(var(--swatch-primary-darkest), 0);
}
#search-top-box-form input[type="submit"] {
background: rgba(var(--swatch-primary-darkest), 0.5);
}
}
}
[[/code]]
[[code type="CSS"]]
:root {
--body-font: "Roboto", sans-serif;
--header-font: "Josefin Sans", '黑体', sans-serif;
--title-font: "Josefin Sans", '黑体', sans-serif;
--ui-wght: 600;
--ui-hvr-wght: 800;
--white-monochrome: 248, 248, 248;
--pale-gray-monochrome: 237, 237, 237;
--black-monochrome: 33, 37, 46;
--accentColor: 30, 181, 232;
--bright-accent: var(--accentColor);
--medium-accent: var(--accentColor);
--dark-accent: var(--accentColor);
--swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
}
::-moz-selection {
background: rgba(var(--swatch-primary), 1);
color: rgb(var(--black-monochrome)) !important;
}
::selection {
background: rgba(var(--swatch-primary), 1);
color: rgb(var(--black-monochrome)) !important;
}
.side-block .heading {
background: none;
border-bottom: 0.0625rem solid rgb(var(--pale-gray-monochrome));
flex-basis: 90%;
margin: 0.5rem auto 0.125rem;
font-family: var(--header-font);
}
.side-block .heading p {
text-transform: none;
text-align: left;
text-indent: 1rem;
font-size: 0.94rem;
}
[[/code]]
[[/collapsible]]
[[/iftags]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:component:centered-header-bhl]]
[[module CSS]]
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme%3Apenumbra-bhl/1");
[[/module]]
[[include :scp-wiki-cn:component:interwiki-style
| priority=1
| type=sidebar
| theme=https://scp-wiki-cn.wdfiles.com/local--code/theme%3Apenumbra-bhl/2
]]