新世代主题版式

这是新世代版式，一个为幻象计划而制作的主题，代码主要由 JakdragonX编写。本主题基于TATTLETALE，这是第一篇提到幻象计划的文章。

新世代版式和它所独有的五种配色：红色，绿色，蓝色，橙色，以及紫色。

这是一个基于黑色标记笔的主题版式，这意味着你必须在你的页面上包含黑色标记笔版式以使新世代版式正常运作。

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:new-age]]

你还可以在其中包括几个可选参数，这些参数将改变主题的外观和感觉。这些参数包括：

[[include :scp-wiki-cn:theme:new-age green=a]]
[[include :scp-wiki-cn:theme:new-age blue=a]]
[[include :scp-wiki-cn:theme:new-age orange=a]]
[[include :scp-wiki-cn:theme:new-age purple=a]]

你也可以使用“hidetitle”参数来去除顶部烦人的文章标题：

[[include :scp-wiki-cn:theme:new-age hidetitle=a]]
[[include :scp-wiki-cn:theme:new-age green/blue/orange/purple=a|hidetitle=a]]

最后，如果你想把标题从“幻象计划/全新连接已建立”改掉，你可使用下列代码（你需要在包含了版式本身之后再更改）:

[[module CSS]]
:root:lang(cn) {
--header-title: "（此处填写主标题）";
--header-subtitle: "（此处填写副标题）";
--logo-image: url(此处填写url¹);
}
[[/module]]

参考下面的内容，查看本文使用默认主题的额外功能和基本格式。

点这里来看一些很酷的东西！

这是个EXPOBLOCK。

我完全是把它从分离式终端主题版式上抢来的，我认为这是我在Wiki上最喜欢的一个主题。还要注意，水平线也会变宽。如要使用，请见下：

[[div class="expoblock"]]
把你的内容放在这里
----
（哦，欢乐的一天）
[[/div]]

你可能还看到了上面用高亮显示的文本，这是使用hilighter span完成的，这也是我偷来的。

[[span class="hilighter"]]text here[[/span]]

这是我不知羞耻地抢来的另一个组件，由

Woedenaz提供的Blacklight Box组件。在这里画一条水平线也会使它变宽。使用它也相当简单：

[[include :scp-wiki-cn:component:blacklight-box-source |inc-section-start= --]
|unique-name=lowercase-nospaces
|display-name=text in label
]]
Insert content of box here.
[[include :scp-wiki-cn:component:blacklight-box-source |inc-section-end= --]]]

来自监督者议会的通知

这是一个很酷的标签，你可以在任何地方使用，是我从玄武岩版式拿来的（还有其他的div块，抱歉）。来试试用这个div吧overwatch_notice。

来自伦理道德委员会的警告

这是另一个很酷的标签。用它来试试吧ethics_alert。

来自记录与信息安全管理部的更新

你开始采取这个方法了吗？这家伙用了raisa_update。

来自分级委员会的警告

这是另一个方法以防你没有采取上一个。用classification_warning来试试。

来自误传部的消息

最后一个。这个用到了miscom_message。

这跟上面基本一样，但更小些。用这些代码来实现：

[[div class="smallmodal"]]
我都快写腻了。
[[/div]]

此外，你现在可以在div中包装表格，使它们成为特定的颜色。默认情况下，这个主题版式的表格将是红色的。要改变颜色，请尝试将表格包装为下列颜色之一：

[[div class="redtable"]]
[[div class="greentable"]]
[[div class="bluetable"]]
[[div class="orangetable"]]
[[div class="purpletable"]]

这有些例子：

你看见这个表格了吗？
我妈妈特意为我准备的。

她说这个挺漂亮的。
但我觉得这真的很傻。

我是说，她的目的是什么？
我们就不能回房间吃饭吗？

但她不喜欢我们这么做。
所以现在我只能饿着肚子坐在这里。

这个主题也接入了半影黑标主题版式（也就是说我也完全偷拿了它的代码）来允许在此主题上使用侧边块。它们的用法就像在半影黑标主题版式里用它们的时候一样：

[[div class="limit"]] <— 设置锚点的起始限制
[[div class="anchor"]] <— 设置 Sidebox 的固定位置
[[div class="sidebox"]]
一些sidebox 内的文本。
[[/div]]
[[/div]]

Sidebox滚动经过的文本。

[[/div]] <— 设置锚点末尾

很高兴你喜欢它们！

示例

情报部标志，由 EstrellaYoshte 制作！

一条水平线可由5个连字符“-----”创建，并且如果代码不在其他任何代码里面（例：在引用框里时），水平线会延长到页面左右尽头。将文档分割为多段的线叫做水平线。²

一个你大概已经访问过的链接，我不清楚³

标题可以用在代码行开头的一至六个加号“+”来创建。

+ 标题

为什么铲子如此特别？

因为这是一项开创性的发明

这是一个引用块，在一行字的起始处加上“> ”来创建。
更多文字

一条分割线

嵌套引用块

这是	表格
你应该老早	就知道怎么
做这个了吧

正文字体为IBM Plex Sans / 思源黑体
标题字体为Archivo
等宽字体为Source Code Pro / 仿宋

源代码：

+ 显示版式代码

- 隐藏版式代码

/*
New Age Theme
[2022 Wikidot Theme]
Created by JakdragonX
Massive props to EstrellaYoshte, Liryn, and Placeholder McD for all the images. Thanks also to Estrella again for the help with the CSS.
 
New Age is based on the Black Highlighter Theme created by Woedenaz and Croquembouche.
The Informatics logo was created by EstrellaYoshte, based off the SCP Foundation logo. Licensed under CC BY SA 3.0.
The node background was created by svgbackgrounds.com, licensed under CC BY 4.0.
All of the other icons in the memo's were also made by Estrella and robbed from the BASALT theme, made by Liryn and Placeholder McD.
*/
 
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@900&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Source+Code+Pro:wght@500&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
 
/* Primary Stuff */
:root:lang(cn) {
    --header-title: "幻象计划";
    --header-subtitle: "全新连接已建立";
    --logo-image: url(https://scp-wiki.wikidot.com/local--files/theme:new-age/logo.png);
}
:root{
    --theme-id: "New Age";
    --theme-name: "New Age";
    --accent-color: var(--deep-crimson);
 
    /* These are the other colors beyond the accented ones. All of the themes uses these values. */
    --pitch-black: 6, 6, 6;
    --dark-midnight: 26, 26, 26;
    --silver-lining: 196, 196, 196;
 
    /* These are the five other values for the accents. Users can also simply just change the "--accent-color" variable to use any colors they want. */
    --deep-crimson: 255, 36, 60;
    --mutant-green: 0, 209, 66;
    --skylight-blue: 0, 184, 240;
    --neon-orange: 255, 142, 20;
    --plum-purple: 225, 101, 236;
 
    /* These are just fonts and other variables I edited to make things work. */
    --body-font: 'IBM Plex Sans', 'Noto Sans SC', sans-serif;
    --header-font: 'Archivo', sans-serif;
    --mono-font: 'Source Code Pro', '仿宋', monospace;
    --swatch-primary: var(--accent-color);
    --swatch-primary-darker: var(--accent-color);
    --swatch-primary-darkest: var(--accent-color);
    --swatch-border-color: var(--accent-color);
    --swatch-text-dark: var(--pitch-black);
    --swatch-text-light: var(--silver-lining);
    --swatch-text-general: var(--silver-lining);
    --swatch-important-text: var(--accent-color);
    --swatch-menubg-color: var(--dark-midnight);
    --swatch-menubg-light-color: var(--dark-midnight);
    --swatch-menubg-medium-color: var(--accent-color);
    --swatch-menubg-medium-dark-color: var(--accent-color);
    --swatch-menubg-dark-color: var(--pitch-black);
    --swatch-menubg-black-color: var(--dark-midnight);
    --swatch-menubg-hover-color: var(--pitch-black);
    --swatch-menutxt-dark-color: var(--dark-midnight);
    --swatch-menutxt-light-color: var(--silver-lining);
    --swatch-menutxt-general-color: var(--silver-lining);
    --swatch-secondary-color: var(--swatch-menubg-light-color);
    --swatch-tertiary-color: var(--swatch-menubg-medium-color);
    --swatch-alternate-color: var(--swatch-menubg-dark-color);
    --swatch-text-secondary-color: var(--swatch-menutxt-light-color);
    --swatch-text-tertiary-color: var(--silver-lining);
    --gradient-header: linear-gradient(to top, rgb(var(--pitch-black)) 0%, rgb(var(--pitch-black)) 90%, rgb(var(--pitch-black)) 100%);
    --diagonal-stripes: none;
    --background-gradient-distance: 0rem;
    --swatch-background: var(--pitch-black);
    --background-gradient-color: var(--dark-midnight);
    --header-gradient-color-bottom: var(--dark-midnight);
    --header-gradient-color-middle: var(--dark-midnight);
    --header-gradient-color-top: var(--black-monochrome);
    --swatch-topmenu-bg-color: var(--pitch-black);
    --swatch-topmenu-border-color: var(--pitch-black);
    --link-color: var(--accent-color);
    --visited-link-color: var(--accent-color);
    --hover-link-color: var(--silver-lining);
    --newpage-color: var(--accent-color);
    --min-font-size: 16px;
    --max-font-size: 16px;
    --toggle-border-color: rgb(var(--accent-color));
    --modal-header-txt: var(--pitch-black);
    --modal-header-stripe: var(--accent-color);
    --hoverblock-bg: var(--dark-midnight);
    --hoverblock-header-txt: var(--pitch-black);
    --ui-button-hover-bg: var(--dark-midnight);
    --pager-selected-link: var(--pitch-black);
    --pager-link-hover: var(--accent-color);
    --pager-hover-bg: var(--dark-midnight);
    --pager-selected-bg: var(--swatch-primary);
    --hoverblock-footer-bg: var(--swatch-tertiary-color);
    --rating-module-text-hover-color: var(--pitch-black);
}
 
/* The logo image is way too bright. I figured I'd just bring down it's opacity in case someone wants to use a different logo image that's also insanely bright. */
#header::before {
    opacity: 0.3;
}
 
/* Variables for the header. */
#header {
    --swatch-headerh1-color: var(--accent-color);
    --swatch-headerh2-color: var(--swatch-text-light);
    --search-icon-color: var(--silver-lining);
    --search-icon-hover-color: var(--dark-midnight);
    --search-icon-hover-bg-color: var(--accent-color);
    --search-textbox-text-color: var(--silver-lining);
    --search-icon-focus-color: var(--accent-color);
    --search-icon-focus-bg-color: var(--accent-color);
    --search-focus-outline-color: var(--dark-midnight);
    --search-focus-textbox-bg-color: var(--dark-midnight);
    --search-focus-textbox-text-color: var(--pitch-black);
    --login-line-divider-color: var(--accent-color);
    --login-username-color: var(--silver-lining);
    --login-myaccount-color: var(--silver-lining);
    --login-myaccount-hover-color: var(--pitch-black);
    --login-myaccount-underline-color: transparent;
    --login-myaccount-hover-bg-color: var(--swatch-primary-darkest);
    --login-arrow-color: var(--accent-color);
    --login-dropdown-bg-color: var(--dark-midnight);
    --login-dropdown-bg-image: none;
    --login-dropdown-border-color: var(--accent-color);
    --login-dropdown-text-color: var(--swatch-text-secondary-color);
    --login-dropdown-text-hover-color: var(--pitch-black);
    --login-dropdown-bg-hover-color: var(--accent-color);
    --login-mobile-icon-color: var(--search-icon-color);
    --login-mobile-icon-hover-color: var(--search-icon-hover-color);
    --login-mobile-icon-hover-bg-color: var(--search-icon-hover-bg-color);
    --gradient-topmenu-mobile: linear-gradient(to bottom, rgba(var(--accent-color), 1) 0, rgba(var(--accent-color), 1) 0.125rem, rgba(var(--accent-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.125rem), rgba(var(--swatch-topmenu-border-color), 1) var(--topbar-height-on-mobile));
}
 
/* Like the pretty lines in the background? Thank this guy for doing it. */
#container-wrap:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23C4C4C4' stroke-width='1.5'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23262626'%3E%3Ccircle cx='769' cy='229' r='6'/%3E%3Ccircle cx='539' cy='269' r='6'/%3E%3Ccircle cx='603' cy='493' r='6'/%3E%3Ccircle cx='731' cy='737' r='6'/%3E%3Ccircle cx='520' cy='660' r='6'/%3E%3Ccircle cx='309' cy='538' r='6'/%3E%3Ccircle cx='295' cy='764' r='6'/%3E%3Ccircle cx='40' cy='599' r='6'/%3E%3Ccircle cx='102' cy='382' r='6'/%3E%3Ccircle cx='127' cy='80' r='6'/%3E%3Ccircle cx='370' cy='105' r='6'/%3E%3Ccircle cx='578' cy='42' r='6'/%3E%3Ccircle cx='237' cy='261' r='6'/%3E%3Ccircle cx='390' cy='382' r='6'/%3E%3C/g%3E%3C/svg%3E");
    background-size: unset;
    background-repeat: repeat;
    background-attachment: fixed;
    z-index: -1;
    opacity: 0.15;
    aspect-ratio: unset;
    object-view-box: unset;
}
 
/* Additional header stuff. */
 
#header h1 a,
#header h1 a:before {
    font-size: 65px;
}
 
#header h2 span {
    margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 0.015em);
    font-size: 20px;
}
 
@media (max-width: 580px) {
 
    #header h1 a,
    #header h1 a:before {
     font-size: 40px;
    }
 
    #header h2 span {
     margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 1.4em);
     font-size: 16px;
    }
}
 
@media (max-width: 380px) {
 
    #header h1 a,
    #header h1 a:before {
     font-size: 38px;
    }
 
    #header h2 span {
     margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 1.4em);
     font-size: 14px;
    }
}
 
/* Don't think I forgot the top bar! Oh, you're so silly! */
#top-bar {
    --topmenu-category-color: var(--pitch-black);
    --topmenu-category-hover-color: var(--silver-lining);
    --topmenu-category-hover-bg: var(--dark-midnight);
    --topmenu-hover-border-color: var(--accent-color);
    --mobile-topmenu-sidebar-button-color: var(--pitch-black);
    --dropdown-bg-color: var(--dark-midnight);
    --dropdown-border-color: var(--accent-color);
    --dropdown-links-color: var(--swatch-text-secondary-color);
    --dropdown-links-bg-color: 0, 0, 0, 0;
    --dropdown-links-hover-color: var(--pitch-black);
    --dropdown-links-hover-bg-color: var(--swatch-primary);
}
 
/* My ex used to call me this. Lots of these are just variables or small fixes to things like the text or something. */
#main-content {
    --ui-icon-color: var(--accent-color);
    --ui-icon-bg: var(--pitch-black);
    --ui-icon-hover-color: var(--pitch-black);
    --ui-icon-hover-bg: var(--accent-color);
    --editor-icon-color: var(--swatch-menutxt-general-color);
    --editor-icon-hover-color: var(--swatch-background);
    --editor-icon-hover-bg: var(--swatch-primary);
    --editor-icon-submenu-bg: var(--swatch-secondary-color);
    --tabs-bg: var(--dark-midnight);
    --tabs-txt: var(--silver-lining);
    --tabs-hover-bg: var(--swatch-primary-darker);
    --tabs-hover-txt: var(--pitch-black);
    --tabs-selected-bg: var(--swatch-primary);
    --tabs-selected-txt: var(--pitch-black);
    --tabs-selected-outline: var(--accent-color);
    --tabs-bottom-border-color: var(--swatch-primary-darker);
    --tabs-content-bg-color: var(--dark-midnight);
    --tabs-content-border-color: var(--dark-midnight);
    --tables-header-bg: var(--swatch-primary-darkest);
    --tables-header-txt: var(--pitch-black);
    --tables-border: var(--swatch-tertiary-color);
    --tables-body-bg: var(--dark-midnight);
    --tables-body-txt: var(--swatch-text-general);
    --blockquote-bg-color: var(--dark-midnight);
    --blockquote-border-color: var(--pitch-black);
    --blockquote-colorbar-color: var(--accent-color);
    --footnotes-footer-bg-color: var(--swatch-secondary-color);
    --footnotes-footer-colorbar-color: var(--swatch-primary-darkest);
    --footnotes-footer-title-bg-color: var(--swatch-primary-darkest);
    --footnotes-footer-title-text-color: var(--pitch-black);
    --footnotes-footer-num-color: var(--link-color);
    --footnotes-footer-num-hover-color: var(--hover-link-color);
    --footnotes-footer-text-color: var(--swatch-text-general);
    --pagetags-title-text: var(--pitch-black)
}
 
#header div#top-bar {
    background-color: rgb(var(--accent-color));
    border-radius: 4px;
}
 
#interwiki,
#side-bar {
    --sidebar-links-hover-text-color: var(--pitch-black);
 
}
 
#footer {
    --footer-bg-color: var(--accent-color);
    --footer-text-color: var(--pitch-black);
    --footer-link-color: var(--pitch-black);
    --footer-link-hover-color: var(--silver-lining);
    --footer-link-hover-bg-color: var(--dark-midnight);
}
 
.bibitems .title,
.footnotes-footer .title {
    border-radius: 4px;
}
 
.bibitems,
.footnotes-footer {
    border-radius: 4px;
}
 
#license-area {
    --license-bg-color: var(--dark-midnight);
    --license-text-color: var(--swatch-text-secondary-color);
    --license-link-color: var(--silver-lining);
    --license-link-hover-color: var(--pitch-black);
    --license-link-hover-bg-color: var(--accent-color);
}
 
#body {
    font-size: 16px;
    --barColour: rgb(var(--accent-color));
}
 
tt,
tt * {
    font-size: inherit;
}
 
/* Code for the fancy lines underneath the collapsibles and links. */
a.collapsible-block-link {
    padding: 0.15em;
    margin: -0.15em;
    color: inherit;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--accent-color));
    transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), color 200ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 200ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
a.collapsible-block-link:hover {
    padding: 0.3em 0.25em 0.2em 0.25em;
    margin: -0.25em;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--accent-color));
    text-decoration: none;
    color: rgb(var(--pitch-black))
}
 
.info-container .collapsible-block-folded,
.info-container .collapsible-block-unfolded-link {
    background: rgb(var(--accent-color));
}
 
.info-container .collapsible-block-unfolded {
    border: 3px solid rgb(var(--accent-color));
    border-top: none;
    background-color: rgb(var(--pitch-black));
}
 
.info-container .collapsible-block-folded .collapsible-block-link,
.info-container .collapsible-block-link {
    background: rgb(var(--pitch-black));
}
 
#page-content .info-container a.collapsible-block-link:hover {
    box-shadow: none;
}
 
.collection .collapsible-block-unfolded-link a,
.collection .collapsible-block-folded a:hover {
    box-shadow: none;
}
 
.collection .collapsible-block-unfolded-link a,
.collection .collapsible-block-folded a {
    box-shadow: none;
}
 
#page-content .rate-box-with-credit-button,
.page-rate-widget-box {
    border: 0.0625rem solid rgba(var(--dark-midnight));
    border-radius: 2px;
    background-color: rgb(var(--dark-midnight));
    box-shadow: 0 0.125rem 0 0 rgb(var(--accent-color));
}
 
hr {
    height: 0.0925rem;
    border-top: 0.0625rem solid rgba(var(--accent-color));
    background-color: rgba(var(--accent-color));
}
 
#page-title::after,
.meta-title::after,
#page-title::before,
.meta-title::before {
    height: 0.19rem;
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(.fa-info):not([href*="https://www.scp-wiki.net/classification-committee-memo"]):not([href="https://scp-wiki.wikidot.com/anomaly-classification-system-guide"]):not([href="/classification-committee-memo"]) {
    padding: 0.15em;
    margin: -0.15em;
    color: inherit;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--accent-color));
    transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1), color 200ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 200ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="https://www.scp-wiki.net/classification-committee-memo"]):not([href="https://scp-wiki.wikidot.com/anomaly-classification-system-guide"]):not([href="/classification-committee-memo"]):not(.fa-info):hover {
    padding: 0.3em 0.25em 0.2em 0.25em;
    margin: -0.25em;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--accent-color));
    text-decoration: none;
    color: rgb(var(--pitch-black));
}
 
.blockquote,
[class*=blockquote],
blockquote,
div.blockquote {
    background-color: rgba(var(--blockquote-bg-color));
    border-top: 1px solid rgb(var(--pitch-black));
    border-right: 1px solid rgb(var(--pitch-black));
    border-bottom: 1px solid rgb(var(--pitch-black));
    border-left: 5px solid rgb(var(--accent-color));
    box-shadow: 4px 0px 8px 0px rgba(var(--pitch-black), 0.8);
    border-radius: 4px;
}
 
/* Title and image block stuff. */
@media (max-width: 360px) {
 
    div#page-title,
    div#meta-title {
     border-bottom: 3px solid rgb(var(--accent-color));
     padding-bottom: 0.5rem;
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
     background: none;
    }
}
 
.image-block,
.scp-image-block {
    box-shadow: none;
}
 
.image-block .image-caption,
.scp-image-block .scp-image-caption {
    background-color: rgb(var(--dark-midnight));
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: 3px solid rgb(var(--accent-color));
    box-shadow: none;
}
 
form#edit-page-form:not(.data-form) {
    border: 3px solid rgb(var(--accent-color));
}
 
form#edit-page-form table.form:first-of-type td:last-of-type {
    box-shadow: none;
}
 
form#edit-page-form table.form:first-of-type td:last-of-type input:not(:-moz-placeholder-shown) {
    background-color: rgba(var(--dark-midnight));
}
 
form#edit-page-form table.form:first-of-type td:last-of-type input:not(:placeholder-shown) {
    background-color: rgba(var(--dark-midnight));
}
 
form#edit-page-form .wd-editor-toolbar-panel {
    background-color: rgb(var(--swatch-background));
    border-bottom: 3px solid rgb(var(--accent-color));
    border-top: 3px solid rgb(var(--accent-color));
}
 
input[type=text]:not(:-moz-placeholder-shown), textarea:not(:-moz-placeholder-shown) {
    background-color: rgb(var(--dark-midnight));
}
 
input[type=text]:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
    background-color: rgb(var(--dark-midnight));
}
 
form#edit-page-form #wd-editor-toolbar-panel+div {
    border-bottom: 3px solid rgb(var(--accent-color));
}
 
form#edit-page-form .edit-help-34 {
    background-color: rgb(var(--dark-midnight));
}
 
form#edit-page-form .edit-page-bottomtable tr>td:first-of-type>div:first-of-type {
    box-shadow: none;
}
 
form#edit-page-form .edit-page-bottomtable tr>td:first-of-type>div:first-of-type textarea:not(:-moz-placeholder-shown) {
    background-color: rgba(var(--dark-midnight));
    color: rgb(var(--swatch-menutxt-general-color));
    border: none;
}
 
form#edit-page-form .edit-page-bottomtable tr>td:first-of-type>div:first-of-type textarea:not(:placeholder-shown) {
    background-color: rgba(var(--dark-midnight));
    color: rgb(var(--swatch-menutxt-general-color));
    border: none;
}
 
:not(.page-rate-widget-box):not(#search-top-box-form)>.btn,
:not(.page-rate-widget-box):not(#search-top-box-form)>.button,
:not(.page-rate-widget-box):not(#search-top-box-form)>.owindow .button-bar a,
:not(.page-rate-widget-box):not(#search-top-box-form)>button,
:not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input,
:not(.page-rate-widget-box):not(#search-top-box-form)>input.button {
    outline: 0 solidrgb(var(--swatch-primary));
    background-color: rgb(var(--accent-color));
    border: 3px solid rgb(var(--accent-color));
    color: rgb(var(--pitch-black));
}
 
table.page-history tr:nth-of-type(2) td:not(:nth-of-type(7)):before {
    color: rgb(var(--pitch-black));
}
 
.change-textarea-size {
    background-color: rgb(var(--dark-midnight));
}
 
#odialog-container .owindow :not(.page-rate-widget-box):not(#search-top-box-form)>a.btn,
#odialog-container .title.modal-header :not(.page-rate-widget-box):not(#search-top-box-form)>a.btn {
    background-color: rgb(var(--accent-color));
    color: rgb(var(--pitch-black));
}
 
.blbf-main>div {
    border: 0.45rem rgb(var(--swatch-primary-darkest, 144, 25, 1)) solid;
    margin-left: auto;
    border-radius: 4px;
    background-color: rgb(var(--pitch-black));
}
 
.blbf-main>div::before {
    top: -0.45rem;
    left: -0.25em;
    color: rgb(var(--pitch-black));
    border-radius: 4px;
}
 
.blbf-main hr {
    border-top: 0.45rem solid rgba(var(--accent-color));
}
 
.blbf-main>div>p:last-of-type {
    margin-top: 1.5rem;
}
 
.expoblock {
    box-sizing: border-box;
    border: solid 0.55rem rgb(var(--accent-color));
    padding: 1rem;
    border-radius: 4px;
    background-color: rgb(var(--pitch-black));
}
 
.expoblock hr {
    border-top: 0.45rem solid rgba(var(--accent-color));
}
 
span.hilighter {
    background-color: rgb(var(--accent-color));
    color: rgb(var(--pitch-black));
    font-weight: bold;
    padding: 0.2em;
    font-size: 108%;
    line-height: 1.2;
    border-radius: 4px;
}
 
.overwatch_notice {
    background: url(https://scp-wiki.wikidot.com/local--files/theme:new-age/O5_logo.png), rgb(var(--dark-midnight));
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    width: auto;
    padding: 10px 20px 5px 20px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    border: 0.3rem solid rgb(var(--deep-crimson));
    color: rgb(var(--silver-lining));
    border-radius: 4px;
    width: 90%;
    min-height: 4rem;
    max-height: 100rem;
}
 
.overwatch_notice h1,
.overwatch_notice h2,
.overwatch_notice h3,
.overwatch_notice h4,
.overwatch_notice h5,
.overwatch_notice h6 {
    color: rgb(var(--silver-lining));
}
 
.overwatch_notice hr {
    border-top: 0.0625rem solid rgb(var(--deep-crimson));
    background-color: rgba(var(--deep-crimson));
    margin: 0.25rem;
}
 
.overwatch_notice span.hilighter {
    color: rgb(var(--pitch-black));
    background-color: rgb(var(--deep-crimson));
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0;
}
 
.overwatch_notice p {
    line-height: 24px;
    font-weight: 500;
}
 
.ethics_alert {
    background: url(https://scp-wiki.wikidot.com/local--files/theme:new-age/ethics_logo.png), rgb(26 26 26);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    width: auto;
    padding: 10px 20px 5px 20px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    border: 0.3rem solid rgb(var(--mutant-green));
    color: rgb(var(--silver-lining));
    border-radius: 4px;
    width: 90%;
    min-height: 4rem;
    max-height: 100rem;
}
 
.ethics_alert h1,
.ethics_alert h2,
.ethics_alert h3,
.ethics_alert h4,
.ethics_alert h5,
.ethics_alert h6 {
    color: rgb(var(--silver-lining));
}
 
.ethics_alert hr {
    border-top: 0.0625rem solid rgb(var(--mutant-green));
    background-color: rgb(var(--mutant-green));
    margin: 0.25rem;
}
 
.ethics_alert span.hilighter {
    color: rgb(var(--pitch-black));
    background-color: rgb(var(--mutant-green));
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0;
}
 
.ethics_alert p {
    line-height: 24px;
    font-weight: 500;
}
 
.raisa_update {
    background: url(https://scp-wiki.wikidot.com/local--files/theme:new-age/RAISA_Logo.png), rgb(26 26 26);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    width: auto;
    padding: 10px 20px 5px 20px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    border: 0.3rem solid rgb(var(--skylight-blue));
    color: rgb(var(--silver-lining));
    border-radius: 4px;
    width: 90%;
    min-height: 4rem;
    max-height: 100rem;
}
 
.raisa_update h1,
.raisa_update h2,
.raisa_update h3,
.raisa_update h4,
.raisa_update h5,
.raisa_update h6 {
    color: rgb(var(--silver-lining));
}
 
.raisa_update hr {
    border-top: 0.0625rem solid rgb(var(--skylight-blue));
    background-color: rgba(var(--skylight-blue));
    margin: 0.25rem;
}
 
.raisa_update span.hilighter {
    color: rgb(var(--pitch-black));
    background-color: rgb(var(--skylight-blue));
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0;
}
 
.raisa_update p {
    line-height: 24px;
    font-weight: 500;
}
 
.classification_warning {
    background: url(https://scp-wiki.wikidot.com/local--files/theme:new-age/CLASS_logo.png), rgb(26 26 27);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    width: auto;
    padding: 10px 20px 5px 20px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    border: 0.3rem solid rgb(var(--neon-orange));
    color: rgb(var(--silver-lining));
    border-radius: 4px;
    width: 90%;
    min-height: 4rem;
    max-height: 100rem;
}
 
.classification_warning h1,
.classification_warning h2,
.classification_warning h3,
.classification_warning h4,
.classification_warning h5,
.classification_warning h6 {
    color: rgb(var(--silver-lining));
}
 
.classification_warning hr {
    border-top: 0.0625rem solid rgb(var(--neon-orange));
    background-color: rgb(var(--neon-orange));
    margin: 0.25rem;
}
 
.classification_warning span.hilighter {
    color: rgb(var(--pitch-black));
    background-color: rgb(var(--neon-orange));
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0;
}
 
.classification_warning p {
    line-height: 24px;
    font-weight: 500;
}
 
.miscom_message {
    background: url(https://scp-wiki.wikidot.com/local--files/theme:new-age/MISCOM_Logo.png), rgb(26 26 27);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    width: auto;
    padding: 10px 20px 5px 20px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    border: 0.3rem solid rgb(var(--plum-purple));
    color: rgb(var(--silver-lining));
    border-radius: 4px;
    width: 90%;
    min-height: 4rem;
    max-height: 100rem;
}
 
.miscom_message h1,
.miscom_message h2,
.miscom_message h3,
.miscom_message h4,
.miscom_message h5,
.miscom_message h6 {
    color: rgb(var(--silver-lining));
}
 
.miscom_message hr {
    border-top: 0.0625rem solid rgb(var(--plum-purple));
    background-color: rgb(var(--plum-purple));
    margin: 0.25rem;
}
 
.miscom_message span.hilighter {
    color: rgb(var(--pitch-black));
    background-color: rgb(var(--plum-purple));
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0;
}
 
.miscom_message p {
    line-height: 24px;
    font-weight: 500;
}
 
form#edit-page-form .edit-page-bottomtable tr>td:first-of-type>div:first-of-type:before {
    background-color: transparent;
}
 
form#edit-page-form .edit-help-34>a:hover {
    color: rgb(var(--silver-lining));
}
 
.modal,
.smallmodal {
    padding: 15px 15px 15px 15px;
    box-shadow: 0px 0px 3px rgb(0 0 0 / 30%);
    width: auto;
    margin: 1rem auto 1rem auto;
    background: rgb(var(--dark-midnight));
    border: solid 2px rgb(var(--dark-midnight));
    border-radius: 4px;
}
 
.smallmodal {
    width: 75%;
}
 
#page-content .greentable tr th {
    background-color: rgb(var(--mutant-green));
}
 
#page-content .greentable tr {
    --tables-border: var(--mutant-green);
}
 
#page-content .bluetable tr th {
    background-color: rgb(var(--skylight-blue));
}
 
#page-content .bluetable tr {
    --tables-border: var(--skylight-blue);
}
 
#page-content .orangetable tr th {
    background-color: rgb(var(--neon-orange));
}
 
#page-content .orangetable tr {
    --tables-border: var(--neon-orange);
}
 
#page-content .redtable tr th {
    background-color: rgb(var(--deep-crimson));
}
 
#page-content .redtable tr {
    --tables-border: var(--deep-crimson);
}
 
#page-content .purpletable tr th {
    background-color: rgb(var(--plum-purple));
}
 
#page-content .purpletable tr {
    --tables-border: var(--plum-purple);
}
 
.hl-identifier,
.hl-code {
    color: rgb(var(--silver-lining));
}
 
div.scale {
    --woedbar-class-bar-color: rgb(var(--dark-midnight));
    --woedbar-lvl6-color: rgb(var(--accent-color));
    --woedbar-lvl5-color: rgb(var(--accent-color));
    --woedbar-lvl4-color: rgb(var(--accent-color));
    --woedbar-lvl3-color: rgb(var(--accent-color));
    --woedbar-lvl2-color: rgb(var(--accent-color));
    --woedbar-lvl1-color: rgb(var(--accent-color));
}
 
.collection .collapsible-block-unfolded-link a,
.collection .collapsible-block-folded a {
    border: 3px solid rgb(var(--accent-color));
}
 
.collection .collapsible-block-unfolded-link a,
.collection .collapsible-block-folded a {
    background-color: rgba(var(--dark-midnight));
    color: rgb(var(--accent-color));
}
 
.collection .collapsible-block {
    background-color: rgb(var(--dark-midnight));
    border-radius: 4px;
}
 
.namerow {
    background-color: rgb(var(--accent-color));
    color: rgb(var(--pitch-black));
}
 
.namerow {
    border: 2px solid rgb(var(--accent-color));
    border-radius: 4px;
}
 
.titlecolumn {
    border: 3px solid rgb(var(--accent-color));
    border-radius: 4px;
}
 
.titlecolumn {
    background-color: rgb(var(--accent-color));
    color: rgb(var(--dark-midnight));
}
 
.articlecolumn {
    background-color: rgb(var(--dark-midnight));
}
 
/* 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 - 1em - 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(--accent-color));
     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(--dark-midnight));
     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.5em);
    }
 
    .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);
    }
}
 
#page-content .rate-box-with-credit-button,
.page-rate-widget-box {
    border: 0.0625rem solid rgba(var(--pitch-black));
}
 
div.page-rate-widget-box .rate-points {
    border: none;
}
 
#breadcrumbs a:active,
#breadcrumbs a:hover,
.pseudocrumbs a:active,
.pseudocrumbs a:hover {
  color: rgb(var(--dark-midnight));
}
 
#search-top-box {
     box-shadow: none;
}

‡ 授权 / 引用

+ Show component code

- Hide component code

@supports(display: grid) {
    :root {
        --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            opacity: 1;
            pointer-events: all;
            z-index: -1;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
            pointer-events: none;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            transition:
                opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
            padding: inherit;
        } }
 
        #content-wrap {
            display: flex;
            flex-direction: row;
            width: calc(100vw - (100vw - 100%));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            margin: 0 auto;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        @supports (-webkit-hyphens:none) { 
            #side-bar {
                transition:
                    left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                    padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                    background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                padding-right: 0;
                background-color: rgb(0, 0, 0, 0);
                pointer-events: all;
                overflow-x: visible;
                overflow-y: visible;
                z-index: 999;
            }
 
            #side-bar::-webkit-scrollbar {
                opacity: 0;
                -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            }
 
            #side-bar .close-menu::before {
                z-index: 999;
            }
 
            #side-bar .close-menu::after {
                z-index: 998;
            }
 
            #side-bar:hover .close-menu::before,
            #side-bar:hover .close-menu::after {
                opacity: 0;
            }
 
            #side-bar:hover {
                left: 0;
                background-color: rgba(var(--swatch-menubg-color), 1);
                padding-right: 0;
            }
 
            #side-bar:hover::-webkit-scrollbar {
                opacity: 1;
            }
 
            #side-bar:hover~#main-content::before {
                width: calc(100% - var(--sidebar-width-on-desktop));
                opacity: 1;
                pointer-events: all;
            }
        }
    }
}

+ Show component code

- Hide component code

@supports(display: grid) {
    :root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}

版式

页面版本: 11, 最后编辑于: 07 Feb 2023 13:05

编辑评分 (+3) 标签讨论 (6) 历史记录附件打印网站工具 + 选项

SCP基金会

控制，收容，保护

这是新世代版式，一个为幻象计划而制作的主题，代码主要由 JakdragonX编写。本主题基于TATTLETALE，这是第一篇提到幻象计划的文章。

这是个EXPOBLOCK。

来自监督者议会的通知

来自伦理道德委员会的警告

来自记录与信息安全管理部的更新

来自分级委员会的警告

来自误传部的消息

示例

1级标题

2级标题

3级标题

4级标题

5级标题

6级标题

源代码：

其它有趣的网站

R·u·nitlight

communism

一个故事

final fantasy XIV wiki encyclopédie en français

SCP基金会

控制，收容，保护

这是新世代版式，一个为幻象计划而制作的主题，代码主要由JakdragonX编写。本主题基于TATTLETALE，这是第一篇提到幻象计划的文章。

这是个EXPOBLOCK。

来自监督者议会的通知

来自伦理道德委员会的警告

来自记录与信息安全管理部的更新

来自分级委员会的警告

来自误传部的消息

示例

1级标题

2级标题

3级标题

4级标题

5级标题

6级标题

源代码：

其它有趣的网站

R·u·nitlight

communism

一个故事

final fantasy XIV wiki encyclopédie en français

这是新世代版式，一个为幻象计划而制作的主题，代码主要由 JakdragonX编写。本主题基于TATTLETALE，这是第一篇提到幻象计划的文章。