半影黑标主题版式

由 EstrellaYoshte 制作的半影版式之黑色标记笔版本

主题颜色

WikiJump include 未展开： 本地数据库中没有当前版本（:scp-wiki:component:theme-squares）

使用方法

注意：这是一个基于黑色标记笔的主题版式。若你想使用此版式，你还需要导入黑色标记笔版式。点击这里了解更多。1

在你的作品开头添加如下语法以应用此版式：

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:penumbra-bhl]]

CSS 变量与原版式完全相同以便（大概）在需要时替换。[如下]

只是 --accentColor 需要转换为 rgb 格式。比如 #1EB5E8 需要转换为 30, 181, 232。
这是转换的实用工具。

请勿在转换十六进制色时加上 rgb()。只需要三个数字就好。

:root {
--lgurl: url("自定义标志 url");
--accentColor: 颜色;
}
:root:lang(cn) {
--header-title: "页眉大标题";
--header-subtitle: "页眉副标题";
}

示例

可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。

标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。

+ 标题- 标题

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

分页

长 Tab

空 Tab

此为分页（tab view）。

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

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

[[div class="darkbox"]]

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 及以下时最小化。

页眉字体为 Josefin Sans / 黑体。

等宽字为 Fira Code / 幼圆。

Footnotes

1.看一看将链接高亮时会如何！

+ 显示版式代码- 隐藏版式代码

css

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

@supports(display: grid) {
    :root {
        /* S-CSS-P Integration */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighter";
        /* must be either "black-highlighter" or "sigma9" */
        --theme-id: "penumbra-bhl";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "Penumbra BHL Theme";
        /* set this to your theme's full name */

        --lgurl: var(--logo-image);

        --header-subtitle: "SECURE - CONTAIN - PROTECT";

        /* Typefaces */
        --header-font: "Josefin Sans", sans-serif;
        --title-font: "Josefin Sans", sans-serif;
        --mono-font: "Fira Code", "Andale Mono", "Courier New", Courier, monospace;

        --ui-wght: 600;
        --ui-hvr-wght: 800;

        /* Standard Colors */
        --white-monochrome: 248, 248, 248;
        /* white */
        --pale-gray-monochrome: 237, 237, 237;
        /* v light gray for blockquotes and stuff */
        --light-pale-gray-monochrome: 237, 237, 237;
        /* very light pale gray for misc. use */
        --very-light-gray-monochrome: 215, 215, 215;
        /* very light accent gray for misc. use */
        --light-gray-monochrome: 160, 160, 160;
        /* light accent gray for login status */
        --gray-monochrome: 66, 66, 72;
        /* gray */
        --dark-gray-monochrome: 47, 51, 60;
        /* dark accent gray for sidebar background */
        --black-monochrome: 33, 37, 46;
        /* black */
        --accentColor: 30, 181, 232;
        /*Penumbra Accent Color*/
        --pale-accent: var(--accentColor);
        /* light red, for visited links */
        --bright-accent: var(--accentColor);
        /* bright red */
        --medium-accent: var(--accentColor);
        /* medium red - the "default" accent color */
        --dark-accent: var(--accentColor);
        /* dark red */
        --alt-accent: 221, 102, 17;
        /* pale orange, for newpage links */

        /* Background and Header Colors */
        --background-gradient-color: var(--black-monochrome);

        /* Primary Theme Colors */
        --swatch-background: var(--dark-gray-monochrome);

        /* Primary Text Colors */
        --swatch-text-light: var(--pale-gray-monochrome);
        --swatch-text-general: var(--swatch-text-light);

        /* Primary Menu Colors */
        --swatch-menubg-color: var(--black-monochrome);
        --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);

        --swatch-alternate-color: var(--swatch-menubg-dark-color);

        /* Primary Header Colors */
        --swatch-headerh1-color: var(--bright-accent);
        --swatch-headerh2-color: var(--bright-accent);

        /* Link Colors */
        --sidebar-links-text: var(--bright-accent);

        /* Rating Module Colors */
        --rating-module-button-color: var(--white-monochrome);
        --rating-module-text-color: var(--swatch-menutxt-light-color);

        /* Header Gradients */
        --diagonal-stripes: initial;

        /* header measurements */
        --header-height-on-desktop: 8.750rem;
        --header-height-on-mobile: 8.750rem;

        --header-h1-font-size: calc(2rem + (2.75 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
        --header-h2-font-size: calc(var(--base-font-size) * 1.15);

        /* Toggle Sidebar Variable */
        --toggle-border-color: rgb(var(--swatch-primary));
        --toggle-icon-color: rgb(var(--swatch-primary));
        --toggle-roundness: 0;
    }

    :root:lang(cn) {
        --header-subtitle: "控制 - 收容 - 保护";

        /* Typefaces */
        --header-font: "Josefin Sans", '黑体', sans-serif;
        --title-font: "Josefin Sans", '黑体', sans-serif;
        --mono-font: "Fira Code", "Andale Mono", "Courier New", Courier, '幼圆', monospace;
    }

    /* ===PAGE ELEMENTS COLORS=== */
    :root {
        /* ===UI BUTTON COLORS=== */
        --ui-button-bg: var(--swatch-menubg-medium-dark-color);
        --ui-button-txt: var(--swatch-text-secondary-color);
        --ui-button-hover-txt: var(--swatch-text-secondary-color);

        /* ===MODALS COLORS=== */
        --modal-bg: var(--black-monochrome);
        --modal-body-text: var(--swatch-text-secondary-color);
        --modal-body-header-txt: var(--swatch-primary);
        --modal-header-bg: var(--black-monochrome);

        /* ===FOOTNOTES HOVER BLOCK COLORS=== */
        --hoverblock-bg: var(--swatch-menubg-medium-dark-color);
        --hoverblock-txt: var(--swatch-text-general);
    }

    #main-content {
     /* ===TABS===*/
     --tabs-bg: var(--swatch-menubg-medium-dark-color);
     --tabs-content-bg-color: var(--swatch-menubg-medium-dark-color), 1;
     /* ===BLOCKQUOTES=== */
     --blockquote-bg-color: var(--swatch-menubg-medium-dark-color), 1;
    }

    #header {
     /* Primary Header Colors */
     --swatch-headerh1-color: var(--bright-accent);
     --swatch-headerh2-color: var(--bright-accent);
    }

    #footer {
        --footer-link-hover-color: var(--swatch-text-tertiary-color);
    }

    ::-moz-selection {
        background: rgba(var(--swatch-primary), 1);
        color: rgb(var(--black-monochrome)) !important;
        text-shadow: none;
    }

    ::selection {
        background: rgba(var(--swatch-primary), 1);
        color: rgb(var(--black-monochrome)) !important;
        text-shadow: none;
    }

    html,
    body {
        scrollbar-color: rgb(var(--swatch-primary)) rgb(var(--black-monochrome));
    }

    body {
        background-image: var(--gradient-background);
        background-size: 100% var(--background-gradient-distance);
    }

    .danger-diamond a,
    .danger-diamond a:hover {
        color: rgba(0, 0, 0, 0) !important;
        box-shadow: initial !important;
    }

    #header::before {
        background-image: var(--lgurl);
        opacity: 0.15;
        background-size: auto 9.5rem;
    }

    #header h1 a {
        text-transform: uppercase;
    }

    #header h1,
    #header h1 a,
    #header h1 a::before {
        top: 0.35rem;
    }

    #header h2 {
     top: calc(var(--header-h2-font-size) * 0.9);
    }

    #side-bar .heading {
     background: none;
     flex-basis: 90%;
     margin: 0.5rem auto 0.125rem;
     font-family: var(--header-font);
    }

    #side-bar .heading p,
    #side-bar .side-block>.collapsible-block .collapsible-block-link {
     text-transform: none;
     text-align: left;
     font-size: 0.94rem;
     text-indent: 0;
    }

    #page-content {
        font-size: 0.9rem !important;
    }

    #page-title {
        color: rgb(var(--swatch-text-general));
        border-color: rgb(var(--swatch-text-general));
        padding: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: rgb(var(--swatch-primary));
    }

    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
        color: rgb(var(--white-monochrome));
    }

    #login-status #my-account {
        --wght: 400;
        font-weight: 400;
    }

    #top-bar div.mobile-top-bar>ul>li>ul>li>a,
    #top-bar div.top-bar>ul>li>ul>li>a {
        --wght: 400;
        font-weight: 400;
    }

    #top-bar div.mobile-top-bar>ul>li>ul>li:hover a,
    #top-bar div.top-bar>ul>li>ul>li:hover a {
        color: rgb(var(--black-monochrome));
    }

    #page-content a:not([href*="user"]):not([href*="javascript:;"]) {
     padding: 0.15em;
     margin: -0.15em;
     color: rgb(var(--white-monochrome));
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
     box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 1);
     transition: box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    #page-content a:not([href*="user"]):not([href*="javascript:;"]):hover {
     padding: 0.3em 0.25em 0.2em 0.25em;
     margin: -0.25em;
     box-shadow: inset 0 -1.5em 0 0 rgba(var(--swatch-primary), 1);
     text-decoration: none;
     color: rgb(var(--black-monochrome))
    }

    .page-rate-widget-box {
     background: rgb(var(--black-monochrome));
    }

    /* Ayer's info-bar patch by Monkatraz */
    #page-content .info-container .collapsible-block-folded,
    #page-content .info-container .collapsible-block-unfolded-link {
     width: 100%;
     max-width: 100%;
     margin: 0 auto;
     box-shadow: none;
    }

    #page-content .info-container .collapsible-block-link {
     padding: 0;
    }

    #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;
    }

    #u-author_block>p>a {
     background-color: rgb(var(--black-monochrome));
     border-radius: 0;
    }

    :is(blockquote, .blockquote, div.blockquote, [class*="blockquote"]),
    #toc {
     background-color: rgb(var(--black-monochrome));
     border: solid 0.125rem rgb(var(--dark-gray-monochrome));
     box-shadow: -0.188rem 0rem 0rem -0.006rem rgb(var(--swatch-primary));
    }

    /* Code Block */
    :root {
        --swatch-code-text-reserved: 194,112,233;
        --swatch-code-text-identifier: 43,143,219;
        --swatch-code-text-special: 15,116,233;
    }

    .code {
     background-color: rgb(var(--black-monochrome));
     border: solid 0.1875rem rgb(var(--dark-gray-monochrome));
     box-shadow: none;
     font-size: .95em;
    }

    .code pre,
    .code p,
    .code {
     background-color: rgb(var(--black-monochrome));
     color: rgb(var(--swatch-text-general));
    }

    .code pre {
     white-space: pre-wrap;
    }

    #page-content .yui-navset .yui-nav {
     width: 100%;
    }

    #page-content .yui-navset .yui-nav a {
     transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    #page-content .yui-navset .yui-nav li,
    #page-content .yui-navset .yui-navset-top .yui-nav li {
     box-shadow: initial;
    }

    #page-content .yui-navset .yui-nav li {
     background-color: rgb(var(--black-monochrome));
     padding-top: 0.25em;
     -webkit-animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     animation: tab-active 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -webkit-animation-iteration-count: 1;
     animation-iteration-count: 1;
     -webkit-animation-fill-mode: forward;
     animation-fill-mode: forward;
     -webkit-animation-play-state: paused;
     animation-play-state: paused;
    }

    #page-content .yui-navset .yui-nav li:hover {
     background-color: rgb(var(--swatch-primary));
    }

    #page-content .yui-navset .yui-nav li em {
     transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
     color: rgb(var(--swatch-menutxt-light-color));
    }

    #page-content .yui-navset .yui-nav li:hover em {
     color: rgb(var(--swatch-menutxt-dark-color));
    }

    #page-content .yui-navset .yui-nav .selected {
     margin-top: -0.5em;
     padding-top: 0.5em;
     margin-right: 0.0625rem;
     background-color: rgb(var(--swatch-primary));
     -webkit-animation-iteration-count: 1;
     animation-iteration-count: 1;
     -webkit-animation-fill-mode: backwards;
     animation-fill-mode: backwards;
     -webkit-animation-play-state: running;
     animation-play-state: running;
    }

    #page-content .yui-navset .yui-nav .selected a em {
     transform: translateY(-0.25em);
     color: rgb(var(--black-monochrome));
    }

    #page-content .yui-navset .yui-nav a,
    #page-content .yui-navset .yui-nav a:hover,
    #page-content .yui-navset .yui-nav a:active,
    #page-content .yui-navset .yui-nav a:focus-within {
     background: rgba(0, 0, 0, 0) !important;
     font-family: var(--title-font);
     font-weight: 700;
     isolation: isolate;
    }

    #page-content .yui-navset .yui-nav a::before,
    #page-content .yui-navset .yui-nav a::after {
     content: " ";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 1;
     pointer-events: none;
    }

    #page-content .yui-navset .yui-nav a:hover::before,
    #page-content .yui-navset .yui-nav a:focus::before,
    #page-content .yui-navset .yui-nav .selected a::before {
     -webkit-mask-position: center 0rem !important;
     mask-position: center 0rem !important;
     background-position: 100% 200vh;
    }

    #page-content .yui-navset .yui-nav a:hover::after,
    #page-content .yui-navset .yui-nav a:focus::after,
    #page-content .yui-navset .yui-nav .selected a::after {
     opacity: 0;
     -webkit-animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     animation: fade 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -webkit-animation-direction: backwards;
     animation-direction: backwards;
     -webkit-animation-iteration-count: 1;
     animation-iteration-count: 1;
    }

    #page-content :is(.yui-navset, .yui-navset-top, .yui-navset-bottom) .yui-content {
     background: rgb(var(--black-monochrome));
     border: none;
     margin-top: 0;
    }

    #page-content table.wiki-content-table tr {
     border: none !important;
    }

    #page-content table.wiki-content-table th {
     background-color: rgb(var(--black-monochrome));
     color: rgb(var(--swatch-primary));
     ;
     font-family: var(--title-font);
     font-weight: 700;
     text-transform: uppercase;
     padding-top: 0.4em;
    }

    #page-content table.wiki-content-table th,
    #page-content table.wiki-content-table td {
     border: solid 0.0625rem rgb(var(--swatch-primary)) !important;
    }

    hr {
     border-color: rgb(var(--accentColor));
     background-color: rgb(var(--accentColor));
    }

    /*---- TAB ANIMATION by Croquembouche ---- */
    #page-content .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;
     -webkit-animation: tab-disappear 0.5s ease-in-out 0s 1 both;
     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;
     -webkit-animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
     animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
    }

    @-webkit-keyframes tab-disappear {
     0% {
     max-height: 9999rem;
     }

     1% {
     max-height: 100vh;
     }

     100% {
     max-height: 0;
     }
    }

    @keyframes tab-disappear {
     0% {
     max-height: 9999rem;
     }

     1% {
     max-height: 100vh;
     }

     100% {
     max-height: 0;
     }
    }

    @-webkit-keyframes tab-appear {
     0% {
     max-height: 0;
     }

     99% {
     max-height: 100vh;
     }

     100% {
     max-height: 9999rem;
     }
    }

    @keyframes tab-appear {
     0% {
     max-height: 0;
     }

     99% {
     max-height: 100vh;
     }

     100% {
     max-height: 9999rem;
     }
    }

    /* fancy collapsible */
    #page-content .collapsible-block-folded,
    #page-content .collapsible-block-unfolded-link {
     background: rgb(var(--black-monochrome));
     transition: background 0.25s linear;
     width: -moz-fit-content;
     width: -webkit-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;
     text-align: center;
     color: rgb(var(--white-monochrome));
     font-weight: 700;
    }

    #page-content .collapsible-block-link:hover {
     color: rgb(var(--black-monochrome));
    }

    #page-content .collapsible-block-folded:hover,
    #page-content .collapsible-block-unfolded-link:hover {
     background: rgb(var(--swatch-primary));
    }

    #page-content .collapsible-block-unfolded-link {
     box-shadow: 0rem -0.26rem 0rem 0rem rgb(var(--swatch-primary));
    }

    #page-content .collapsible-block-folded,
    #page-content .collapsible-block-unfolded-link {
     margin-top: 0.625rem;
     margin-bottom: 0.625rem;
    }

    :is(div.image-block, div.scp-image-block) {
     border: solid 0.5rem rgb(var(--black-monochrome));
     border-bottom: solid 0rem rgb(var(--black-monochrome));
     box-shadow: 0rem 0.26rem 0rem 0rem rgb(var(--accentColor));
     box-sizing: border-box;
    }

    :is(div.image-block, div.scp-image-block) :is(.image-caption, .scp-image-caption) {
     background-color: rgb(var(--black-monochrome));
     border: solid 0.25rem rgb(var(--black-monochrome));
     color: rgb(var(--pale-gray-monochrome));
     font-size: 0.84rem;
     box-shadow: none;
    }

    a.footnoteref {
     padding: 0.05em;
     color: rgb(var(--swatch-primary));
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
     box-shadow: inset 0 0 0 0rem rgba(var(--swatch-primary), 1);
     transition: box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    a.footnoteref:hover {
     box-shadow: inset 0 -1.25em 0 0 rgba(var(--swatch-primary), 1);
     text-decoration: none;
     color: rgb(var(--black-monochrome))
    }

    .footnotes-footer a[href*="javascript"]::before,
    .bibitems .bibitem::after,
    .footnotes-footer {
     background-color: rgb(var(--black-monochrome));
    }

    /* Tags */
    .page-tags span {
     border-top: 0.0625rem solid rgb(var(-white-monochrome));
    }

    .page-tags span a {
     padding: 0.25em;
     color: rgb(var(--white-monochrome));
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
     box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 1);
     transition: color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .page-tags span a:hover {
     text-decoration: none;
     color: rgb(var(--black-monochrome))
    }

    div#page-options-bottom-2>a,
    div#page-options-bottom>a {
     border-color: rgba(var(--swatch-primary-darkest), 1);
     background-color: rgba(var(--swatch-menubg-dark-color), 1);
     color: rgb(var(--white-monochrome));
     border-radius: 0;
    }

    div#page-options-bottom-2>a:active,
    div#page-options-bottom-2>a:hover,
    div#page-options-bottom>a:active,
    div#page-options-bottom>a:hover {
     border-color: rgba(var(--swatch-menubg-dark-color), 1);
     background-color: rgba(var(--swatch-primary-darkest), 1);
     color: rgb(var(--black-monochrome));
     border-radius: 0;
    }

    #who-rated-page-area>div>span[style*="color"] {
     color: rgb(var(--swatch-text-secondary-color)) !important;
    }

    #footer {
     color: rgb(var(--black-monochrome));
    }

    #license-area {
     color: rgb(var(--white-monochrome));
    }

    input.text,
    textarea {
     background-color: rgb(var(--black-monochrome));
     color: rgb(var(--swatch-text-general));
     border-color: rgb(var(--swatch-menubg-dark-color));
    }

    .page-source {
     background: transparent;
    }

    #action-area:has(form[onsubmit*=setParent],#who-rated-page-area,form[onsubmit*=PageTagsModule],table.page-files,#edit-meta-addbutton,ul[style="list-style: none"],#page-block-checkbox,#rename-option-rename,#rename-option-delete) p:not(:has(a[id*=backlinks],a[onclick*=showWho],a.btn)) {
     background-color: rgb(var(--black-monochrome));
    }

    #lock-info {
     background-color: rgb(var(--black-monochrome));
     color: rgb(var(--swatch-text-general));
     border-color: rgb(var(--swatch-menubg-dark-color));
    }

    /* Pop-Up Windows */
    .owindow {
     background-color: rgb(var(--black-monochrome));
     border-color: rgb(var(--swatch-primary));
    }

    .owindow .modal-header {
     background-color: rgb(var(--black-monochrome));
    }

    .owindow .modal-body img {
     background-color: transparent !important;
    }

    .owindow .title {
     background-color: rgb(var(--black-monochrome));
     color: var(--swatch-primary);
     border-bottom: 0.0625rem solid rgb(var(--swatch-primary));
    }

    .owindow .button-bar a {
     background-color: rgb(var(--black-monochrome));
     border-color: rgb(var(--swatch-primary));
     color: rgb(var(--white-monochrome));
    }

    .owindow .button-bar a:hover {
     background-color: rgb(var(--swatch-primary));
    }

    /* ---- Darkbox/Lightbox ---- */

    .darkbox,
    .lightbox {
     border-left: solid 0.26rem rgb(var(--swatch-primary));
     border-right: solid 0.26rem rgb(var(--swatch-primary));
     padding: .4rem;
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
    }

    .darkbox {
     background-color: rgb(var(--black-monochrome));
    }

    .lightbox {
     background-color: rgb(var(--white-monochrome));
     color: rgb(var(--black-monochrome));
    }

    .lightbox h2,
    .lightbox h3,
    .lightbox h4,
    .lightbox h5,
    .lightbox h6 {
     color: rgb(var(--black-monochrome));
    }

    /* Custom Assets by EstrellaYoshte */
    .limit {
     margin-bottom: -1rem;
    }

    .anchor {
     position: -webkit-sticky;
     position: sticky;
     height: 0;
     top: 0;
     z-index: 9999;
    }

    .sidebox {
     background-color: rgb(var(--black-monochrome));
     border-top: solid 0.125rem rgb(var(--swatch-primary));
     padding: .14rem 1rem .14rem;
     margin-top: 0;
     margin-bottom: 0.5rem;
     width: calc((100vw - (var(--body-width-on-desktop) + 10rem))/2);
     max-height: calc(100vh - 18rem);
     position: absolute;
     top: 0;
     left: 103.5%;
     z-index: 5;
     overflow: auto;
     box-sizing: border-box;
    }

    .hovertip {
     color: rgb(var(--swatch-text-general));
    }

    @media (max-width: 80.625rem) {
     .sidebox {
     width: auto;
     max-width: 50vw;
     color: rgba(0, 0, 0, 0);
     background-color: rgba(0, 0, 0, 0);
     box-shadow: 0 0 0 0 rgb(var(--swatch-primary));
     border: none;
     right: calc(((100vw - 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(--swatch-primary));
     transition: border 0.1s ease-in-out 0.1s;
     z-index: 10;
     }

     .sidebox::after {
     top: 0;
     max-width: 0.75rem;
     width: 100%;
     height: 100%;
     box-shadow: 0.125rem 0 0 0 rgb(var(--swatch-primary));
     max-height: calc(100vh - 18rem);
     background-color: rgb(var(--black-monochrome));
     z-index: -1;
     transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s, border-top-left-radius 0.5s ease-in-out 0.1s, border-bottom-left-radius 0.5s ease-in-out 0.1s;
     }

     .sidebox:hover,
     .sidebox:active {
     color: rgb(var(--swatch-text-general));
     background-color: rgb(var(--black-monochrome));
     pointer-events: all;
     overflow-y: scroll;
     transition: max-width 0.5s ease-in-out 0.2s, color 0.5s ease-in-out 0.2s, box-shadow 0.5s ease-in-out 0.1s, background-color 0s ease-in-out 0.6s, right 0.5s ease-in-out 0.1s;
     }

     .sidebox:hover *,
     .sidebox:active * {
     opacity: 1;
     transition: opacity 0.5s ease-in-out 0.2s;
     }

     .sidebox:hover::before,
     .sidebox:active::before {
     border-top: 0vw solid transparent;
     border-bottom: 0vw solid transparent;
     }

     .sidebox:hover::after,
     .sidebox:active::after {
     box-shadow: 0 -0.125rem 0 0 rgb(var(--swatch-primary));
     right: 0;
     max-width: 100%;
     border-top-left-radius: 0rem;
     border-bottom-left-radius: 0rem;
     }
    }

    @media only screen and (max-width:56.25rem) {
     :root {
     --body-width-on-desktop: 100vw;
     --header-h1-font-size: calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
     --header-h2-font-size: var(--base-font-size);
     }

     #header h1,
     #header h1 a,
     #header h1 a::before {
     top: 0.5rem;
     }

     #header h2,
     #header h2 a,
     #header h2 a::before {
     top: 0.35rem;
     }

     .anchor {
     top: calc(var(--topbar-height-on-mobile) + 0.75rem);
     }

     .sidebox,
     .sidebox:hover,
     .sidebox:active {
     right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.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);
     }
    }
}

css

:root {
    --header-font: "Josefin Sans", '黑体', sans-serif;
    --title-font: "Josefin Sans", '黑体', sans-serif;
    --ui-wght: 600;
    --ui-hvr-wght: 800;
    --white-monochrome: 248, 248, 248;
    --pale-gray-monochrome: 237, 237, 237;
    --black-monochrome: 33, 37, 46;
    --accentColor: 30, 181, 232;
    --bright-accent: var(--accentColor);
    --medium-accent: var(--accentColor);
    --dark-accent: var(--accentColor);
    --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
}
::-moz-selection {
    background: rgba(var(--swatch-primary), 1);
    color: rgb(var(--black-monochrome)) !important;
}
::selection {
    background: rgba(var(--swatch-primary), 1);
    color: rgb(var(--black-monochrome)) !important;
}
.side-block .heading {
    background: none;
    border-bottom: 0.0625rem solid rgb(var(--pale-gray-monochrome));
    flex-basis: 90%;
    margin: 0.5rem auto 0.125rem;
    font-family: var(--header-font);
}
.side-block .heading p {
    text-transform: none;
    text-align: left;
    text-indent: 1rem;
    font-size: 0.94rem;
}

版式

页面版本：⁨0⁩, 最后编辑于: ⁨2021/6/6 08:02:38⁩ (⁨⁨1928⁩ 日前⁩), 现时评分: 10

历史附件 + 选项

SCP基金会中文分部