“示例文本”
深潜吧,深潜者。
tha·las·so·pho·bi·a.
/θˌalɐsəfˈə͡ʊbi͡ə/
名词
对海洋或者深水的非理性恐惧。
这个版式为 Fish Council 的 72 号深海站而生,一个关于二十世纪中期,基金会建造海洋设施来探索、收容海面之下数千米的多人企划。想一想你在《生化奇兵》里见过的深海潜艇、声纳技术与黄铜潜水服。
当然,这个版式不限于此。如果你试图模拟深海的恐惧,或者营造一种水下的氛围,那你就没有走错。带上这个版式,祝你好运。
越发阴冷,越发黑暗。
海草缠身之图标。迷失。无力回天。
这是 Fish^12 黑色标记笔 - 深海恐惧症版式的变体,同时也是对 EstrellaYoshte 半影的扩展。
将这些东西复制走来使用版式:
[[include :scp-wiki-cn:theme:thalassophobia-sigma]]
这个版式内置了更好的脚注与Sigma-9 居中页眉。
同时它也对 Woed 的分级栏做了修改,使其在暗色背景中可见。
在引用版式后加上以下模块,你可以改变 LOGO、版头标题、副标题,以及从技术上来讲,主题颜色:1
[[module CSS]]
:root {
--lgurl: url(你的图片地址);
--header-title: "标题";
--header-subtitle: "副标题";
--accentColor: 颜色;
}
[[/module]]
铜色模式
加上 |copper-mode=a 来启用本模式。
铜色链接
加上 |copper-links=a 来启用本模式。
格式示例
这是什么?一条分割线!“-----”用四条连字符来创建。
标题。但不是副标题。也不是版头标题。用“+”来创建。
快,想象这里写着“示例文本”。
哦看,更多文本。
多么古雅。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
这是一个长分页。它包含很多文本。
SCP-7714-A 长约 11 千米,但由于其 37% 都掩于海床以下,确切尺寸难以测量。
SCP-7714-A 腐烂的尸体释放出了极端大量的 CH4,若放任不管,则可能对帷幕产生威胁。
SCP-7714-A-1 指代由居住于 SCP-7714-A 内部的人性种族所建造的巨型建筑物。这些建筑已被确认为住宅,且周围发现了原始农业的证据。
你知道可以不用 > 来创建这个东西吗?
看着这条分割线。
就像这样![[div class="blockquote"]]
什么?变深了!
更深!全速向底!2
更深!!!更深!!!.我是一条“更好的脚注”,我在这里还活着!
你 | 为什么 |
---|---|
想要 | 用 |
表格? |
作为半影的拓展,这里还是有几个 div 样式的,比如……
黑色的 [[div class="darkbox"]] div……
白色的 [[div class="lightbox"]] div..……
还有侧边框 div!
比如这个!
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox"]]
这里放一些侧边框文本。
[[/div]]
[[/div]]
这些文本所处位置的对应正文。
[[/div]]
/* 深海恐惧症(Sigma)版式 [2022 Wikidot Theme] 作者:TheDarkArtist 深海恐惧症版式的 Sigma-9 版本,以及半影的拓展版式。 */ :root { --lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Athalassophobia-sigma/logo); --header-title: "72 号深海站"; --header-subtitle: "守护深海于光明之下"; --accentColor: #E8BA56; --fnColor: #00AABD; } #header h1 a::before{ font-weight: bold; color: var(--accentColor); text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; } #header h2::before{ font-weight: bold; color: var(--accentColor); text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; } body { background: linear-gradient(-90deg, #020411, #000000, #020411, #000000); color: var(--accentColor); } ::selection {color: #020411;} div#container-wrap { background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Athalassophobia-sigma/gradient); } div#extra-div-1 { background: none; } #header::before{ opacity: 80%; } #page-title { display: none; } h1, h2, h3, h4, h5, h6 { color: var(--accentColor); } blockquote, div.blockquote, #toc { background-color: transparent; border: solid 1px #3a3a40; box-shadow: 0px 0px 0px -0.1px var(--accentColor); } a, a.newpage, #side-bar a, #sidebar a:visited { color: #00AABD; transition: none; } a:visited { color: rgb(1, 131, 157); transition: none; } a:hover, a.newpage:hover, a:visited:hover, #side-bar a:visited:hover { color: #00AABD; background: transparent; text-decoration: underline; } .fncon { background: linear-gradient(-90deg, #010507, #000000, #001012, #020411); border: solid 1px #3a3a40; } /* ---- Link Modifier ---- */ .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a{ color: var(--accentColor); background-color: #010507; border-bottom: 3px solid var(--accentColor); } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus{ color: #010507; background-color: var(--accentColor); } .yui-navset .yui-content { background: transparent; border-bottom: 3px dotted var(--accentColor); } .darkbox { background-color: #010507; border-left: solid 0.26rem #6E4B00; border-right: solid 0.26rem #6E4B00; } .lightbox { border-left: solid 0.26rem #BA7F00; border-right: solid 0.26rem #BA7F00; } .hovertip { font-size: .9rem; background-color: #010507 !important; border: solid 1px #BA7F00 !important; } .footnotes-footer { background-color: #010507; box-shadow: -0.24rem 0px 0px 0px #6E4B00; } .footnotes-footer .title { color: var(--accentColor); } .scp-image-block { border: solid 8px #010507; border-bottom: solid 0px #010507; box-shadow: 0px 0.26rem 0px 0px var(--accentColor); box-sizing: border-box; background: linear-gradient(-90deg, #080808, #001012, #080808, #001012); } .scp-image-block .scp-image-caption { background-color: #010507; border: solid 4px #010507; color: var(--accentColor); font-size: 0.84rem; } .page-rate-widget-box { border: solid 1px #3a3a40; background-color: #010507; } div.page-rate-widget-box .rate-points { background-color: #010507 !important; color: var(--accentColor) !important; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #010507; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { color: var(--accentColor); } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { background: #000000; color: #00AABD; } .page-rate-widget-box .cancel { background-color: #010507; } .page-rate-widget-box .cancel a { color: var(--accentColor); } .page-rate-widget-box .cancel a:hover { background: #000000; color: #00AABD; } .page-tags span { border-top: 1px solid var(--accentColor); } #page-content .wiki-content-table tr th { border: solid 1px var(--accentColor); color: #010507; background-color: var(--accentColor); } #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link { background: #010507; border: solid 1px #3a3a40 } #page-content .collapsible-block-link { color: var(--accentColor); } #page-content .collapsible-block-unfolded-link { box-shadow: 0px -0.26rem 0px 0px var(--accentColor); } .sidebox { background-color: #010507; } @media (max-width: 1290px) { .sidebox::after { background-color: #010507; } } ::-webkit-scrollbar-track { background: #010507; } ::-webkit-scrollbar-thumb { background: #00AABD; } #top-bar, #top-bar a { color: var(--accentColor); } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { border-top-color: #010507; } #top-bar ul li.sfhover a, #top-bar ul li:hover a { background: #010507; color: var(--accentColor); } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: var(--accentColor); color: #010507; } #search-top-box-form > input[type=submit] { border: solid 1px var(--accentColor); background: #010507!important; color: var(--accentColor); } .scale, .level-text, .class-text, .itemnum { color: var(--accentColor)!important; } .obj-text { color: #010507; } div.scale { --woedbar-lvl1-color: var(--accentColor); --woedbar-lvl2-color: var(--accentColor); --woedbar-lvl3-color: var(--accentColor); --woedbar-lvl4-color: var(--accentColor); --woedbar-lvl5-color: var(--accentColor); --woedbar-lvl6-color: var(--accentColor); --woedbar-class-bar-color: var(--accentColor); } div#side-bar{ background: #010507; } #side-bar .heading{ color: var(--accentColor); border-bottom: solid 1px var(--accentColor); } #side-bar .side-block, #side-bar .side-block.media, #side-bar .side-block.resources { background-color:#010507; } #top-bar div.open-menu a { background-color: #010507; border: solid 1px #010507; } #side-bar .collapsible-block-unfolded { color: #00AABD; } .fnnum:hover::after { color: #010507; } .fncon::before { color: #010507; } div#side-bar .collapsible-block-unfolded-link, div#side-bar .collapsible-block-unfolded-link .collapsible-block-link { color: #00AABD; border-color: #00AABD; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { color: #00AABD; }
评分模块与著作信息模块:
这是由 EstrellaYoshte 制作的美学版式,由纸堆版式分化而来。
在你的作品开头添加如下语法以应用此版式:
[[include :scp-wiki-cn:theme:penumbra]]
你可以在 [[include]] 之后使用如下 CSS 模块来修改标题、副标题、页眉标志和强调色:
:root {
--header-title: "页眉大标题";
--header-subtitle: "页眉副标题";
--lgurl: url("自定义标志 url");
--accentColor: 颜色;
}
默认情况下,强调色为 #1EB5E8。

图像。
可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。3
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这也是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
[[div class="darkbox"]]
[[div class="lightbox"]]
sidebox div 元素结构如下所示:
[[div class="limit"]] <— 设置锚点起始
[[div class="anchor"]] <— 设置 sidebox 的固定位置
[[div class="sidebox"]]
sidebox 内的文本。
[[/div]]
[[/div]]
sidebox 滚动经过的文本。
[[/div]] <— 设置锚点末尾
利用技巧,也可以
人类到如今已经繁衍了 250000 年,只有最近的 4000 年是有意义的。
所以,我们在将近 250000 年中在干嘛?我们躲在山洞中,围坐在小小的篝火边,畏惧那些我们不懂得的事物——那些关于太阳如何升起的解释,那些人头鸟身的怪物,那些有生命的石头。所以我们称他们为“神”和“恶魔”,并向他们祈求宽恕和祈祷拯救。
之后,他们的数量在减少,我们的数量在增加。当我们恐惧的事物越来越少,我们开始更理智的看待这个世界。然而,不能解释的事物并没有消失,好像宇宙故意要表现出荒谬与不可思议一样。
像这样
人类不能再生活在恐惧中。没有东西能保护我们,我们必须保护我们自己。
当其他人在阳光下生活时,我们必须在阴影中和它们战斗,并防止它们暴露在大众眼中,这样其他人才能生活在一个理智的,普通的世界中。
我们控制,我们收容,我们保护。
— The Administrator
添加多个 sidebox。
于世界各地的暗处活动,基金会的目标是收容异常物品,个体及现象,而且其本身运作不受各个主要国家政府的司法管辖权,授权和委托的干扰。这些异常透过物理或心理危害对全球安全造成显著威胁。
基金会维持常态,从而使世界各地的平民得以生存并免受恐惧,不信或对个人信念的怀疑的影响,并从地外、异次元和外层空间的影响中维持人类的独立自主。
若没有 limit div 元素,anchor 在超出自身固定位置后,会基于整个页面内容固定。
注意 sidebox div 元素会在屏幕宽度 1290px 及以下时最小化。(感谢 Woedenaz 的代码!)
页眉字体为 Josefin Sans / 思源黑体。
正文字体为 Roboto / 思源黑体。
等宽字为 Fira Code / 思源宋体。
源代码
/* 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://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'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@100;300;400;500;700;900&display=swap'); :root { --body-font: 'Roboto', "Noto Sans SC", Inter, 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; --lgurl: url("https://scp-wiki.wdfiles.com/local--files/theme%3Apenumbra/logo.png"); } body { font-family: var(--body-font); font-size: .9325rem; color: #EDEDED; 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: 300; font-size: 1.3em; } #header h2::before { content: var(--header-subtitle, "控制 - 收容 - 保护"); font-weight: 600; font-size: 1.22em; } #login-status { color: #ededed; width: 100%; text-align: right; z-index: 9; } #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: #ededed; 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: #ededed; 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: #ededed; 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: #ededed; 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 #ededed; background: var(--darkerColor)!important; box-shadow: none; border-radius: 0; color: #ededed; 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: #ededed; transition: color 0s; } #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: #ededed; } #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: 19em; 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: #ededed; font-family: var(--header-font); font-size: 0.94rem; border-bottom: solid 1px #ededed; 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); left: -19em; } #side-bar:target { width: 19em; 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: rgba(0,0,0,0.3); background-position: 19em 50%; z-index: -1; opacity: 0; pointer-events: none; } #side-bar:target .close-menu { width: calc(100% - 19em); 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: #ededed; 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: #ededed; /* ---- 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: #ededed; 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: #ededed; } .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: #ededed; } #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: #ededed; } #page-content .creditButtonStandalone p a:hover { color: var(--accentColor); } #page-content .modalbox { background: var(--darkColor) !important; color: #ededed; 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: #ededed !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: #ededed; } .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: #ededed; } .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: #EDEDED; font-family: var(--header-font); font-weight: bold; } #page-title, .meta-title { color: #ededed; font-family: var(--header-font); font-size: 1.75em; text-align: center; border-color: #ededed; } /* 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: #ededed; 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: #ededed; 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: #ededed; } .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 #ededed; } /* 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: #ededed; } .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: #ededed; } /* 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: #ededed; } .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: #ededed; 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 { 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; -webkit-clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem)); clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem)); -webkit-transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; -o-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; 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; 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, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s; scrollbar-width: none; } .sidebox::-webkit-scrollbar { width: 0px; } .sidebox::before, .sidebox::after { content: " "; position: absolute; 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 var(--accentColor); 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.15rem 0 0 0 var(--accentColor); max-height: calc(100vh - 18rem); background-color: var(--darkerColor); z-index: -1; transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s; } .sidebox > * { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out 0.2s; -o-transition: opacity 0.2s ease-in-out 0.2s; transition: opacity 0.2s ease-in-out 0.2s; } .sidebox:is(:hover,:focus-within) { -webkit-clip-path: inset(-0.125rem -0.25rem 0 0); clip-path: inset(-0.125rem -0.25rem 0 0); -webkit-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; -o-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s; transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s; } .sidebox:is(:hover,:focus-within)::before { border-top: 0 solid transparent; border-bottom: 0 solid transparent; } .sidebox:is(:hover,:focus-within)::after { box-shadow: 0 -0.125rem 0 0 var(--accentColor); right: 0; max-width: 100%; } .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); } }
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap); /* Centered Header Sigma-9 * [2021 Wikidot Component] * By Lt Flops (CC BY-SA 3.0) * Forked from: * Penumbra Theme by EstrellaYoshte * Also based on: * Centered Header BHL by Woedenaz **/ /* ---- VARS ---- */ :root{ --titleColor: hsl(0, 0%, 95%); --subtitleColor: hsl(60, 62%, 85%); --lgurl: url(https://scp-wiki.wdfiles.com/local--files/component%3Acentered-header-sigma-9/logo.svg); } /* ---- SITE HEADER ---- */ div#header{ background-image: none; } #header::before{ position: absolute; width: 100%; height: 100%; top: .45rem; left: 0; content: " "; background-image: var(--lgurl); background-position: center top; background-repeat: no-repeat; background-size: auto 8rem; opacity: .35; pointer-events: none; z-index: -1; } #header h1, #header h2{ float: none; margin-left: 0; text-align: center; } /* Move the Subtitle Down a Smidge */ #header h2{ margin-top: .45rem; } /* Hide the Existing Text */ #header h1 span, #header h2 span{ display: none; font-size: 0; } /* Style the New Text */ #header h1 a::before, #header h2::before{ font-family: "Montserrat", "Arial", sans-serif; text-shadow: none; } #header h1 a::before{ position: relative; bottom: .15em; color: var(--titleColor); } #header h2::before{ position: relative; bottom: .3em; color: var(--subtitleColor); } /* Set the New Text's Content From Variable */ #header h1 a::before{ content: var(--header-title, "SCP基金会"); font-size: 115%; font-weight: bold; } #header h2::before{ content: var(--header-subtitle, "控制 - 收容 - 保护"); font-size: 130%; font-weight: 600; } /* ---- LOGIN ---- */ #login-status{ top: .5rem; left: 0; right: initial; z-index: 1; } /* ---- SEARCH ---- */ #search-top-box{ top: .5rem; right: 0; } #search-top-box-input{ border-radius: 0; } #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{ border-radius: 0; box-shadow: none; font-size: unset; } /* ---- TOP BAR ---- */ #top-bar{ display: flex; justify-content: center; right: 0; } #top-bar ul li ul{ box-shadow: none; overflow: hidden; } /* ---- PAGE TITLE ---- */ .meta-title, #page-title{ text-align: center; } /* ---- BREADCRUMBS ---- */ .pseudocrumbs, #breadcrumbs{ text-align: center; } /* ---- MOBILE DISPLAY ---- */ @media (max-width: 767px){ #login-status{ left: 5.15rem; z-index: 20; } #search-top-box{ width: unset; } .mobile-top-bar{ position: relative; display: flex; justify-content: center; left: 0; } }