半影 版式
2020年12月18日
修订 18
评分
62
↑ 65
↓ 3
支持率
96%
总票数 68
Wilson 95% 下界
87.8%
在相同票数下更稳健的支持率估计
争议指数
0.169
评分趋势
按周聚合 加载图表中...
最近修订
1 / 7
最近投票
1 / 7
2025-07-23
2025-05-13
2025-04-19
2025-04-04
2025-01-31
2024-11-10
2024-10-05
2024-09-28
2024-09-03
2024-09-03
相关页面
暂无推荐
页面源码
[[include :scp-wiki:component:toggle-sidebar]]
[[module CSS]]
@import url(https://scp-wiki-cn.wdfiles.com/local--code/theme%3Apenumbra/1);
[[/module]]
[[include :scp-wiki-cn:component:interwiki-style
| type=sidebar
| priority=1
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Apenumbra/1
]]
[[iftags +版式]]
[[>]]
**评分：**
[[module Rate]]
[[/>]]
[[>]]
**评分模块与著作信息模块：**
[[/>]]
[[include :scp-wiki-cn:credit:start]]
页面信息
[[include :scp-wiki-cn:credit:more]]
更多页面信息
[[include :scp-wiki-cn:credit:end]]
这是由 [[*user EstrellaYoshte]] 制作的美学版式，由[[[theme:paperstack|纸堆版式]]]分化而来。
在你的作品开头添加如下语法以应用此版式：
> @@[[include :scp-wiki-cn:theme:penumbra]]@@
你可以在 {{[[include]]}} 之后使用如下 CSS 模块来修改标题、副标题、页眉标志和强调色：
[[div class="darkbox" style="font-family: var(--mono-font);"]]
:root {
@@ --header-title: "页眉大标题";@@
@@ --header-subtitle: "页眉副标题";@@
@@ --lgurl: url("自定义标志 url");@@
@@ --accentColor: 颜色;@@
}
[[/div]]
默认情况下，强调色为 ##1EB5E8|#1EB5E8##。
------
[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Apenumbra/tb.png|caption=图像。|width=200px]]
可通过五个连字符“@@-----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
~~~~
[[collapsible show="折叠 - 点击这里" hide="折叠 - 点击这里"]]
+ 1 级标题
++ 2 级标题
+++ 3 级标题
++++ 4 级标题
+++++ 5 级标题
++++++ 6 级标题
[[/collapsible]]
@@ @@
[[tabview]]
[[tab 分页]]
此为分页（tab view）。
[[/tab]]
[[tab 分页]]
看，这有更多文字。
多么精巧绝伦。
[[/tab]]
[[tab 长 Tab]]
这是一个长的 tab，它有很多文字。[[footnote]]这是一个脚注。[[/footnote]]
这是一个长的 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 及以下时最小化。**（感谢 [[*user Woedenaz]] 的代码！）
------
@@ @@
[[=]]
+++ 页眉字体为 Josefin Sans / 思源黑体。
正文字体为 Roboto / 思源黑体。
@@ @@
{{等宽字为 Fira Code / 思源宋体。}}
[[/=]]
@@ @@
[[footnoteblock]]
------
@@ @@
++ 源代码
[[code type="CSS"]]
/*
Penumbra Theme
[2020 Wikidot Theme]
By EstrellaYoshte
Based on:
Paperstack Theme by EstrellaYoshte
Ad Astra Theme by NatVoltaic and stormbreath
Inkblot Theme by Croquembouche
Anderson Robotics Theme by Croquembouche
BHL Style Collapsible by Monkatraz
*/
@import url('https://api.fonts.coollabs.io/css2?family=Roboto&display=swap');
@import url(https://api.fonts.coollabs.io/css2?family=Fira+Code&display=swap);
@font-face {
font-family: 'Josefin Sans';
src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans.woff2) format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Josefin Sans';
src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Italic.woff2) format("woff2");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Josefin Sans';
src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Bold.woff2) format("woff2");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Josefin Sans';
src: url(https://cdn.jsdelivr.net/gh/SYwaves/Webfont-Archive@master/Josefin-Sans-Bold-Italic.woff2) format("woff2");
font-weight: bold;
font-style: italic;
font-display: swap;
}
:root {
--body-font: 'Roboto', "Noto Sans SC", InterVariable, BlinkMacSystemFont,'Segoe UI',Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
--header-font: 'Josefin Sans', "Noto Sans SC", Verdana, Arial, Helvetica, sans-serif;
--mono-font: 'Fira Code', "Noto Serif SC", 'Andale Mono', 'Courier New', Courier, monospace;
--accentColor: #1EB5E8;
--darkColor: #2F333C;
--darkerColor: #21252E;
--lightColor: #EDEDED;
--lgurl: url("https://scp-wiki.wdfiles.com/local--files/theme%3Apenumbra/logo.png");
}
body {
font-family: var(--body-font);
font-size: .975em;
line-height: 1.375;
color: var(--lightColor);
background-color: var(--darkColor);
background-image: linear-gradient(
to bottom,
var(--darkerColor), var(--darkerColor) 90px,
var(--darkerColor) 90px, var(--darkColor) 200px,
var(--darkColor) 200px, var(--darkColor) 100%);
background-repeat: no-repeat;
accent-color: var(--accentColor);
}
#content-wrap {
margin-top: 1.25rem;
}
input { color-scheme: dark; }
/* ---- SCROLLBAR ---- */
::-webkit-scrollbar {
width: .625rem;
height: .625rem;
background: transparent;
}
::-webkit-scrollbar-track {
background: var(--darkerColor);
}
::-webkit-scrollbar-thumb {
background: var(--accentColor);
border: none;
}
:root {
scrollbar-color: var(--accentColor) var(--darkerColor);
scrollbar-width: thin;
}
/* ---- HEADER ---- */
div#container-wrap {
background-image: none;
}
#header {
background-image: none;
height: 8.75rem;
}
div#extra-div-1 {
height: 164px;
width: 100%;
top: 0;
position: absolute;
background: var(--lgurl);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
z-index: -1;
}
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.45rem; }
#header h1 a {
margin: auto;
width: max-content;
}
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
color: var(--accentColor);
font-family: var(--header-font);
text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
content: var(--header-title, "SCP基金会");
font-weight: 700;
font-size: 1.3em;
}
#header h2::before {
content: var(--header-subtitle, "控制 - 收容 - 保护");
font-weight: 700;
font-size: 1.22em;
}
#login-status {
color: var(--lightColor);
width: 100%;
text-align: right;
}
#login-status a {
color: var(--accentColor);
}
#account-topbutton {
border: none;
margin-left: 0.35em;
padding: 0 0.45em;
font-size: 1em;
position: relative;
}
#account-topbutton::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--accentColor);
opacity: 0.125;
}
#account-options {
width: 6.25rem;
background: var(--darkerColor);
border: none;
border-right: solid 3px var(--accentColor);
}
#account-options::before,
#account-options::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
#account-options::before {
background: rgba(0,0,0, .4);
}
#account-options::after {
background-color: var(--accentColor);
mix-blend-mode: overlay;
}
#account-options > ul {
position: relative;
z-index: 1;
}
#account-options ul a {
color: var(--accentColor);
background-color: transparent;
font-weight: bold;
letter-spacing: 0.01em;
padding: 0.25em 0.5em;
text-align: right;
}
#account-options ul a:hover {
color: var(--darkerColor);
background: var(--accentColor);
}
#footer {
background: transparent;
color: var(--lightColor);
font-size: 0.625rem;
margin-top: 0.25em;
padding: 0.25em 0.35em;
display: flex!important;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
#footer > a[href*="www.wikidot.com"] {
color: var(--lightColor);
padding: 0 0.85ch 0 0.5ch;
border-right: 1px solid currentColor;
}
#footer .options {
float: none;
order: 2;
width: max-content;
font-size: 0;
}
#footer .options a {
color: var(--lightColor);
font-size: 0.625rem;
padding: 0 0.85ch;
border-right: 1px solid currentColor;
}
#footer .options a:last-child {
border-right: none;
padding-right: 0;
}
#license-area {
color: var(--lightColor);
background-color: var(--darkerColor);
border-top: solid 0.1rem var(--accentColor);
}
#footer-bar {
border: none;
padding: 0 0 1em;
margin: 0;
max-width: 100%;
background-color: var(--darkerColor);
}
#footer-bar .units {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#search-top-box {
top: 2.2rem!important;
right: 8px;
z-index: 8;
}
#search-top-box-form > input[type=submit] {
border: solid 1px var(--lightColor);
background: var(--darkerColor)!important;
box-shadow: none;
border-radius: 0;
color: var(--lightColor);
transition: color 0.15s linear;
}
#search-top-box-form input[type=submit]:hover {
border: solid 1px var(--accentColor);
box-shadow: none;
color: var(--accentColor);
appearance: none;
}
#search-top-box-form > input[type=text] { display: none; }
/* ---- TOP BAR ---- */
#top-bar {
top: 8.4rem;
display: flex;
justify-content: center;
right: 0;
}
@media (max-width: 768px) {
.mobile-top-bar {
display: flex;
justify-content: center;
max-width: 100%;
width: 100%;
left: 0;
}
}
#top-bar, #top-bar a {
color: var(--lightColor);
transition: color 0s;
}
#top-bar :is(.top-bar,.mobile-top-bar)>ul>li>a {
letter-spacing: .075ch;
}
#top-bar ul li ul,
#top-bar ul li ul li ul {
border-color: var(--accentColor);
box-shadow: none;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
border-top-color: var(--darkColor);
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
background: var(--darkerColor);
color: var(--lightColor);
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
background: var(--darkerColor); /* top bar hover background color */
color: var(--accentColor);
transition: color 0.1s linear;
}
/* ---- SIDE BAR ---- */
div#side-bar {
background: var(--darkerColor);
clear: both;
width: 17em;
padding:0;
border-radius: 0;
box-shadow: none;
overflow-x: hidden;
direction: rtl;
}
#side-bar .side-block,
#interwiki .side-block {
border: transparent;
border-radius: 0;
padding: 5px 15px;
box-shadow: none;
background-color: transparent;
direction: ltr;
}
/* Commented for not using in CN
#side-bar .side-block.media {
position: relative;
background-color: var(--darkerColor);
margin: 0.75em 0;
}
#side-bar .side-block.media::before,
#side-bar .side-block.media::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
#side-bar .side-block.media::before {
background: rgba(0,0,0, .4);
}
#side-bar .side-block.media::after {
background-color: var(--accentColor);
mix-blend-mode: overlay;
}
#side-bar .side-block.media > * {
display: flex;
justify-content: space-evenly;
position: relative;
z-index: 1;
}
#side-bar .side-block.resources {
background-color: transparent;
position: relative;
margin-bottom: 0.25em;
padding: 0.75em 15px 0.5em;
}
#side-bar .side-block.resources::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
background-color: var(--accentColor);
opacity: 0.125;
}
*/
#side-bar .collapsible-block-unfolded-link {
border-bottom: solid 1px #EDEDED; /* Altered content for CN */
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
color: #EDEDED; /* Altered content for CN */
font-size: 0.94rem; /* Altered content for CN */
}
#side-bar .collapsible-block-folded .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
font-family: var(--header-font);
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
color: #ffffff;
}
/* Altered content for CN */
#side-bar .collapsible-block-folded {
background: none;
}
#side-bar .collapsible-block-folded .collapsible-block-link {
margin-left: 0;
}
/* End */
#side-bar .menu-item img, #interwiki .menu-item img {display: none; }
#side-bar .heading,
#interwiki .heading {
color: var(--lightColor);
font-family: var(--header-font);
font-size: 0.94rem;
border-bottom: solid 1px var(--lightColor);
margin-top: 1.25em;
}
#top-bar div.open-menu a {
border-radius: 0;
box-shadow: none;
color: var(--accentColor);
background-color: var(--darkerColor);
border: solid 1px var(--darkerColor);
}
/* ---- Interwiki ---- */
iframe.scpnet-interwiki-frame, div.scpnet-interwiki-wrapper {
position: relative;
width: auto;
}
div.scpnet-interwiki-wrapper {
margin: 0 -5px 0.75em;
background-color: var(--darkerColor);
}
.scpnet-interwiki-wrapper::before,
.scpnet-interwiki-wrapper::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.scpnet-interwiki-wrapper::before {
background: rgba(0,0,0, .4);
}
.scpnet-interwiki-wrapper::after {
background-color: var(--accentColor);
mix-blend-mode: overlay;
}
#interwiki {
--accentColor: #888888;
background: transparent;
}
#interwiki body {
background: transparent;
}
#interwiki .side-block {
margin-top: 0;
padding: 0 15px;
}
#interwiki .side-block a,
#interwiki .side-block a:visited {
color: var(--accentColor);
}
#interwiki .side-block a:hover,
#interwiki .side-block a:visited:hover {
color: #ffffff;
}
#interwiki .heading {
color: var(--accentColor);
border-bottom-color: currentColor;
}
#interwiki .menu-item img {
display: none;
}
/* ------------------- */
@media (max-width: 767px) {
#main-content {
padding: 0;
margin: 0 5%;
border-left: none;
}
#page-title {
margin-top: 0.7em;
}
#side-bar {
background-color: var(--darkerColor);
}
#side-bar:target {
border: none;
box-shadow: none;
}
#side-bar .close-menu {
transition: width 0.5s ease-in-out 0.1s,
opacity 1s ease-in-out 0s;
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0; left: auto;
background: rgb(0,0,0,0.3);
z-index: -1;
opacity: 0;
pointer-events: none;
}
#side-bar:target .close-menu {
width: calc(100% - 17em);
right: 0;
left: auto;
opacity: 1;
pointer-events: auto;
}
#side-bar {
top: 0;
}
#search-top-box {
top: 107px;
}
}
/* ---- TABS ---- */
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
/* ---- YUI TAB CUSTOMIZATION ----*/
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav{
display: flex;
flex-wrap: wrap;
width: calc(100% - .125rem);
margin: 0 auto;
border-color: var(--accentColor);
box-shadow: none;
}
.yui-navset .yui-nav a, /* ---- Link Modifier ---- */
.yui-navset .yui-navset-top .yui-nav a{
color: var(--lightColor);
font-weight: bold;
/* ---- Tab Background Colour | [UNSELECTED] ---- */
background-color: var(--darkerColor);
border: unset;
box-shadow: none;
box-shadow: none;
transition: background-color 0.15s linear;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus{
color: var(--lightColor);
/* ---- Tab Background Colour | [HOVER] ---- */
background-color: var(--accentColor);
}
.yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
.yui-navset .yui-navset-top .yui-nav li{
position: relative;
display: flex;
flex-grow: 2;
max-width: 100%;
margin: 0;
padding: 0;
color: var(--lightColor);
background-color: var(--darkerColor);
border-color: transparent;
box-shadow: none;
}
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.yui-navset .yui-nav li em{
border: unset;
}
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em{
padding: .35em .75em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
.yui-navset .yui-navset-top .yui-nav .selected{
flex-grow: 2;
margin: 0;
padding: 0;
/* ---- Tab Background Colour | [SELECTED] ---- */
background-color: var(--accentColor);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em{
border: none;
}
.yui-navset .yui-nav .selected a{
width: 100%;
color: var(--darkerColor);
font-weight: bold;
}
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active{
color: var(--darkerColor);
background-color: var(--accentColor);
}
.yui-navset .yui-content {
background-color: var(--darkerColor);
box-shadow: none;
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content{
padding: .5em;
border: none;
}
/*---- TAB ANIMATION by Croquembouche ---- */
.yui-navset .yui-content > div {
display: block;
top: 0;
overflow: hidden;
transform-origin: 0 0;
}
#page-content .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;
animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .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;
animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
@keyframes tab-disappear {
0% { max-height: 9999rem; }
1% { max-height: 100vh; }
100% { max-height: 0; }
}
@keyframes tab-appear {
0% { max-height: 0; }
99% { max-height: 100vh; }
100% { max-height: 9999rem; }
}
/* ---- INFO BAR ---- */
body{
--barColour: var(--darkerColor);
--linkColour: var(--lightColor);
}
.info-container .collapsible-block-content {
padding: 0 .5em 30px;
}
#page-content .info-container > .collapsible-block .collapsible-block-link {
padding: 0;
}
.info-container .collapsible-block-content .wiki-content-table {
width: 100%;
}
/* 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;
}
/* ---- INFO PANE ---- */
#page-content .creditRate{
margin: unset;
margin-top: 4px;
margin-bottom: 4px;
margin-right: 3px;
}
#page-content .rate-box-with-credit-button {
background-color: var(--darkerColor);
border: solid 2px var(--darkerColor);
border-radius: 0;
box-shadow: 3px 0px 0px 0px var(--accentColor);
}
#page-content .rate-box-with-credit-button .creditButton p a {
color: #ffffff;
border-left-color: transparent;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {
border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points {
border-left: 0;
}
.rate-box-with-credit-button .page-rate-widget-box .cancel a:hover {
border-radius: 0;
}
#page-content .rate-box-with-credit-button .fa-info {
color: var(--lightColor);
}
#page-content .rate-box-with-credit-button .fa-info:hover {
color: var(--accentColor);
}
#page-content .creditButtonStandalone p a {
background-color: var(--darkerColor);
border: solid 2px var(--darkerColor);
border-radius: 0;
box-shadow: 3px 0px 0px 0px var(--accentColor);
color: var(--lightColor);
}
#page-content .creditButtonStandalone p a:hover {
color: var(--accentColor);
}
#page-content .modalbox {
background: var(--darkColor) !important;
color: var(--lightColor);
box-shadow: none;
border-radius: 0;
}
/* ---- PAGE RATING ---- */
.page-rate-widget-box {
margin: unset;
border-radius: 0;
border: solid 2px var(--darkerColor);
box-shadow: 3px 0px 0px 0px var(--accentColor);
background-color: var(--darkerColor);
margin-top: 4px;
margin-bottom:4px;
margin-right: 3px;
}
div.page-rate-widget-box .rate-points {
background-color: var(--darkerColor) !important;
border: none;
color: var(--lightColor) !important;
text-transform: capitalize;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: var(--darkerColor);
border-top: none;
border-bottom: none;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
background: transparent;
color: var(--lightColor);
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
background: var(--darkerColor);
color: var(--accentColor);
}
.page-rate-widget-box .cancel {
background: transparent;
background-color: var(--darkerColor);
border: none;
}
.page-rate-widget-box .cancel a {
color: var(--lightColor);
}
.page-rate-widget-box .cancel a:hover {
background: var(--darkerColor);
color: var(--accentColor);
}
/* ---- PAGE ELEMENTS ---- */
.page-source, tt {
font-family: var(--mono-font);
font-size: 0.87rem;
}
.code pre, .code p, .code {
font-family: var(--mono-font);
font-size: 0.87rem;
color: var(--darkerColor);
}
h1 {
color: var(--accentColor);
font-family: var(--header-font);
font-weight: bold;
}
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-family: var(--header-font);
font-weight: bold;
}
#page-title, .meta-title {
color: var(--lightColor);
font-family: var(--header-font);
font-weight: bold;
font-size: 1.75em;
text-align: center;
border-color: currentColor;
}
/* Clicky links */
a,
a.newpage,
a:visited,
#side-bar a,
#side-bar a:visited {
color: var(--accentColor);
transition: color 0.15s linear;
}
a:hover, a.newpage:hover, a:visited:hover, #side-bar a:not(.close-menu):hover {
color: #ffffff;
text-decoration: none;
background-color: var(--accentColor);
}
a.newpage { filter: hue-rotate(180deg); }
/* patch for sidebar media, collapsibles, ACS, info button and ayers module so link doesn't override */
#page-content .collapsible-block-folded a:hover, #page-content .collapsible-block-unfolded-link a:hover, #page-content .rate-box-with-credit-button .fa-info:hover, #side-bar .side-block.media a:hover, .danger-diamond a:hover, .printuser.avatarhover > a:first-child:hover {
background: transparent;
}
#side-bar .side-block[style*="background-color"] {
background: transparent!important;
}
.info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
background: var(--linkColour) !important;
}
/*---------------------------*/
hr {
background-color: var(--accentColor);
margin: 1.5rem 0;
}
blockquote,
div.blockquote,
#toc {
background-color: var(--darkerColor);
border: solid 2px var(--darkColor);
box-shadow: -3px 0px 0px -0.1px var(--accentColor);
}
.code {
background-color: #F8F8F8;
border: solid 3px var(--darkColor);
box-shadow: none;
}
.scp-image-block {
border: solid 8px var(--darkerColor);
border-bottom: solid 0px var(--darkerColor);
box-shadow: 0px 0.26rem 0px 0px var(--accentColor);
box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
background-color: var(--darkerColor);
border: solid 4px var(--darkerColor);
color: var(--lightColor);
font-size: 0.84rem;
}
.scp-image-block.block-left { margin-left: 0; }
.scp-image-block.block-right { margin-right: 0; }
@media (max-width: 540px) {
.scp-image-block.block-left, .scp-image-block.block-right {
float: none; clear: both; margin-left: auto; margin-right: auto;
}
}
#page-content .wiki-content-table tr th {
border: solid 1px var(--accentColor);
color: var(--accentColor);
background-color: var(--darkerColor);
/* set border for table title */
}
#page-content .wiki-content-table tr td {
border: solid 1px var(--accentColor);
/* set border for table content */
}
/* fancy collapsible */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
background: var(--darkerColor);
transition: background 0.25s linear;
width: -moz-fit-content;
width: fit-content;
overflow: hidden;
margin: auto;
box-sizing: border-box;
}
#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 {
display: inline-block;
padding: 0.5rem 1rem;
text-decoration: none;
color: var(--lightColor);
font-weight: bold;
text-align: center;
}
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover {
background: var(--accentColor);
}
#page-content .collapsible-block-unfolded-link {
box-shadow: 0px -0.26rem 0px 0px var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
margin-top: 10px;
margin-bottom: 10px;
}
/* Selection */
::selection {
background: var(--accentColor);
color: #ffffff;
}
/* Footnotes */
.hovertip {
font-size: .9rem;
background-color: var(--darkerColor) !important;
border: solid 1px var(--accentColor) !important;
}
.footnotes-footer {
background-color: var(--darkerColor);
padding-left: 1.4rem;
padding-right: 1.4rem;
padding-bottom: 1.5rem;
box-shadow: -0.24rem 0px 0px 0px var(--accentColor);
}
.footnotes-footer .title {
color: var(--lightColor);
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
display: none;
}
/* Tags */
#main-content .page-tags a {
margin-top: .18rem;
}
.page-tags span {
border-top: 1px solid var(--lightColor);
}
/* Pop-Up Windows */
.owindow {
background-color: var(--darkerColor);
border-color: var(--accentColor);
}
.owindow .modal-header {
background-color: var(--darkerColor);
}
.owindow .modal-body img {
background-color: transparent !important;
}
.owindow .title {
background-color: var(--darkerColor);
color: #var(--accentColor);
border-bottom: 1px solid var(--darkColor);
}
.owindow .button-bar a {
background-color: var(--darkerColor);
border-color: var(--accentColor);
color: var(--lightColor);
}
.owindow .button-bar a:hover {
background-color: var(--accentColor);
}
.owindow.owait .content {
background-image: none;
padding: 0.25rem 1.5rem 1.5rem;
}
.owindow.owait .content::after {
content: " ";
display: block;
width: 1.6rem;
height: 1.6rem;
margin: -1rem auto;
margin-top: 0.85rem;
border-radius: 50%;
border: 0.375rem solid black;
border-color: var(--accentColor) var(--darkColor) var(--darkColor);
animation: loading 0.75s linear infinite;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Edit Buttons */
.buttons .btn {
background-color: var(--darkerColor);
border-color: var(--accentColor);
color: var(--accentColor);
padding: 0.45em 0.625em;
font-weight: bold;
transition: color 0.15s linear;
cursor: pointer;
}
.buttons .btn:hover {
background-color: var(--accentColor);
color: var(--darkerColor);
}
/* Edit Lock Info*/
#lock-info {
background-color: var(--darkerColor);
border-color: var(--lightColor);
}
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
background-color: var(--accentColor);
}
/* History */
.pager .current {
background-color: var(--accentColor);
border-color: var(--lightColor);
}
.pager a,
table.page-history td.optionstd a {
border-color: currentColor;
}
/* History Compare */
.inline-diff ins, .inline-diff del {
color: var(--darkerColor);
}
/* Page Source */
.page-source {
border: none;
padding: 1.5em 1.75em;
background-color: var(--darkerColor);
}
/* ---- CUSTOM SYNTAX ---- */
.darkbox {
background-color: var(--darkerColor);
border-left: solid 0.26rem var(--accentColor);
border-right: solid 0.26rem var(--accentColor);
padding: .4rem;
margin-top: 12px;
margin-bottom:12px;
}
.lightbox {
background-color: var(--lightColor);
color: var(--darkerColor);
border-left: solid 0.26rem var(--accentColor);
border-right: solid 0.26rem var(--accentColor);
padding: .4rem;
margin-top: 12px;
margin-bottom:12px;
}
.lightbox h2, .lightbox h3, .lightbox h4, .lightbox h5, .lightbox h6 {
color: var(--darkerColor);
}
/* author label compatibility */
#page-content .authorlink-wrapper {
margin-top: -0.1rem;
--author-right-adjust: 0;
--swatch-background: 33, 37, 46;
--swatch-text-general: 237, 237, 237;
}
/*------------------------------------*/
.limit {
margin-bottom: -1rem;
z-index: 5;
}
.anchor {
position: sticky;
height:0;
top: 0;
z-index: 5;
}
.sidebox {
background-color: var(--darkerColor);
border-top: solid 2px var(--accentColor);
padding: .14rem;
margin-top: 0;
margin-bottom: 8px;
width: calc((100vw - 870px)/2);
max-height: calc(100vh - 18rem);
position: absolute;
top: 0;
left: 103.5%;
z-index: 5;
overflow: auto;
box-sizing: border-box;
}
/* Sidebox mobile optimization, courtesy of Woed */
@media (max-width: 1290px) {
.sidebox {
--arrow-size: 1.25rem;
width: auto;
max-width: 65vw!important;
border: none;
padding-left: 0.4rem; padding-right: 0.4rem;
top: 0.75rem;
right: calc(((100vw - 45.8rem)/2) * -1);
left: initial;
clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, background-position-x .25s ease-out;
background-image: conic-gradient(from 44.9deg, var(--accentColor) 45deg 90deg, transparent 90.1deg);
background-repeat: no-repeat;
background-size: var(--arrow-size);
background-position-x: 100%;
scrollbar-width: none;
}
.sidebox::-webkit-scrollbar { width: 0px; }
.sidebox > * {
opacity: 0;
transition: opacity 0.2s ease-in-out 0.2s;
}
.sidebox:is(:hover,:focus-within) {
clip-path: inset(-0.125rem -0.25rem 0 0);
background-position-x: calc(100% + var(--arrow-size));
}
.sidebox:is(:hover,:focus-within) > * {
opacity: 1;
}
}
@media (max-width:768px) {
.sidebox, .sidebox:is(:hover,:focus-within) {
right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem);
}
}
[[/code]]
[[/iftags]]