基金会 主题版式

主题颜色

Payne's Grey--gray-monochrome(66, 66, 72)

Rosewood--bright-accent(133, 0, 5)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Alto--very-light-gray-monochrome(215, 215, 215)

White Smoke--pale-gray-monochrome(244, 244, 244)

Bastille--dark-gray-monochrome(48, 48, 52)

Buccaneer--medium-accent(100, 46, 44)

Maroon--dark-accent(100, 3, 15)

Guardsman Red--light-gray-monochrome(200, 0, 5)

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

使用方法

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

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

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:the-foundation-theme]]

暗色版式选项，如SCP-4485中所见：

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:the-foundation-theme |dark=--]]]

示例

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

---

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

+ 标题

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

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

更多文字

---

一条分割线

嵌套引用块

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

正文字体为 Franklin Gothic URW / 微软雅黑。
页眉字体为 Titling Gothic FB / 方正姚体。
标题字体为 Hypatia Sans Pro / 黑体。
等宽字为 Recursive / Noto Serif SC。

脚注

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

---

+ 显示版式代码

@import url("https://use.typekit.net/cjg4ysl.css");
 
@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: "The-Foundation-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "The Foundation Theme";
        /* set this to your theme's full name */
        --body-font: "franklin-gothic-urw", sans-serif;
        --header-font: "titling-gothic-fb-compressed", sans-serif;
        --title-font: "hypatia-sans-pro", sans-serif;
 
        --header-title: "The Foundation";
 
        --light-gray-monochrome: 200, 0, 5;
 
        --header-gradient-color-bottom: var(--dark-accent);
        --header-gradient-color-middle: var(--black-monochrome);
        --header-gradient-color-top: var(--black-monochrome);
 
        --background-gradient-color: var(--light-gray-monochrome);
        --swatch-topmenu-border-color: var(--black-monochrome);
        --swatch-topmenu-bg-color: var(--dark-accent);
 
        --gradient-topmenu: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, 0) var(--header-height-on-desktop),
                rgba(var(--swatch-topmenu-border-color)) var(--header-height-on-desktop),
                rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + .125rem),
                rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - .125rem),
                rgba(var(--swatch-topmenu-bg-color), 0) calc(100% - .125rem),
                rgba(var(--swatch-topmenu-border-color), 0) 100%);
 
        --gradient-topmenu-mobile: linear-gradient(to bottom,
                rgba(var(--swatch-topmenu-border-color), 1) 0,
                rgba(var(--swatch-topmenu-bg-color), 1) .125rem,
                rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - .125rem),
                rgba(var(--swatch-topmenu-bg-color), 0) calc(var(--topbar-height-on-mobile) - .125rem),
                rgba(var(--swatch-topmenu-border-color), 0) 3rem);
 
        --gradient-header: linear-gradient(to bottom,
                rgb(var(--header-gradient-color-bottom)) 0%,
                rgb(var(--header-gradient-color-middle)) 90%,
                rgb(var(--header-gradient-color-top)) 100%);
 
        --header-background-image-size: 100% var(--header-height-on-desktop);
        --header-height-on-desktop: 12.25rem;
        --header-height-on-mobile: 12.25rem;
        --topbar-height-on-mobile: 2.5rem;
 
        --header-h1-font-size: calc(var(--base-font-size) * 7);
        --max-font-size: 0.9375rem;
    }
 
    :root:lang(cn) {
        --body-font: "franklin-gothic-urw", '微软雅黑', sans-serif;
        --header-font: "titling-gothic-fb-compressed", '方正姚体', sans-serif;
        --title-font: "hypatia-sans-pro", '黑体', sans-serif;
 
        --header-title: "基金会";
    }
 
    #top-bar {
        --mobile-topmenu-sidebar-button-color: var(--swatch-text-tertiary-color);
    }
 
    html,
    body {
        font-feature-settings: "onum"0;
        font-variant-numeric: tabular-nums;
    }
 
    body {
        --wght: 400;
        background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance);
        font-weight: 400;
    }
 
    #header h1 {
        text-transform: uppercase;
        letter-spacing: 0.2em;
    }
 
    #header h2 {
        display: none;
    }
 
    .danger-diamond a,
    .danger-diamond a:hover {
        box-shadow: initial !important;
        color: rgba(0, 0, 0, 0) !important;
    }
 
    #main-content {
        flex-basis: 100%;
    }
 
    #page-title,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        --wght: 900;
        color: rgba(var(--light-gray-monochrome));
        font-family: var(--title-font);
        font-weight: 900;
    }
 
    hr {
        position: relative;
        height: 0.5em;
        overflow: hidden;
        border: initial;
        background-color: rgba(0, 0, 0, 0);
    }
 
    hr::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Athe-foundation-theme/cons_circle.png');
        background-repeat: repeat;
        background-position: top center;
        background-size: 100vh;
        pointer-events: none;
        -webkit-clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
        clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]) {
        margin: -0.15em;
        padding: 0.15em;
        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);
        box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1);
        color: rgb(var(--gray-monochrome));
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]):hover {
        margin: -0.25em;
        padding: 0.3em 0.25em 0.2em 0.25em;
        box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1);
        color: rgb(var(--white-monochrome));
        text-decoration: none
    }
 
    #extra-div-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        background: url('https://scp-wiki.wikidot.com/local--files/theme%3Athe-foundation-theme/foundation-header-img.png');
        background-position: center center;
        pointer-events: none;
    }
 
    #header::before {
        content: none;
    }
 
    #login-status .printuser {
        --wght: 900;
        color: rgb(var(--swatch-text-light));
        font-weight: 900 !important;
    }
 
    #top-bar div.top-bar>ul>li,
    #top-bar div.mobile-top-bar>ul>li {
        --wght: 800;
        font-family: var(--title-font);
        font-weight: 800;
        text-transform: uppercase;
        isolation: isolate;
    }
 
    #top-bar div.top-bar>ul>li::before,
    #top-bar div.mobile-top-bar>ul>li>a::before {
        content: " ";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -webkit-animation-direction: reverse;
        animation-direction: reverse;
        opacity: 0;
        background:
            url('https://scp-wiki.wikidot.com/local--files/theme%3Athe-foundation-theme/foundation-circles-bg.png');
        background-attachment: fixed;
        background-position: center center;
        background-size: 100vh;
        pointer-events: none;
        pointer-events: none;
    }
 
    #top-bar div.top-bar>ul>li:hover::before,
    #top-bar div.mobile-top-bar>ul>li>a:hover::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
    }
 
    #top-bar div.top-bar>ul>li>a::before,
    #top-bar div.top-bar>ul>li>a::after {
        z-index: 1;
        background-color: rgba(var(--dark-gray-monochrome));
        pointer-events: none;
    }
 
    #side-bar {
        --swatch-border-color: rgb(var(--light-gray-monochrome));
        z-index: 10;
        top: 0;
        background-image:
            linear-gradient(to bottom,
                rgba(var(--swatch-menubg-dark-color), 1) 0%,
                rgba(var(--swatch-menubg-dark-color), 0.55) 100%),
            url("https://scp-wiki.wdfiles.com/local--files/theme%3Athe-foundation-theme/cons_circle.png");
        transition:
            background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        background-repeat: no-repeat, no-repeat;
        background-position:
            -2.5rem center,
            calc(-100% + var(--sidebar-width-on-desktop)) center;
        background-size:
            cover,
            125vh;
        background-blend-mode:
            multiply,
            normal;
    }
 
    #side-bar:hover,
    #side-bar:active {
        background-color: rgb(var(--swatch-menubg-dark-color));
        background-position: center center, center center;
    }
 
    #side-bar:focus-within {
        background-color: rgb(var(--swatch-menubg-dark-color));
        background-position: center center, center center;
    }
 
    @media only screen and (max-width:56.25rem) {
        #side-bar:target {
            background-color: rgb(var(--swatch-menubg-dark-color));
            background-position: center center, center center;
        }
    }
 
    #side-bar .heading {
        position: relative;
        padding-top: 0.15em;
        padding-bottom: 0.25em;
        font-family: var(--title-font);
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
        margin: 0.15em 0;
    }
 
    .yui-navset .yui-nav {
        --wght: 600;
        font-family: var(--title-font);
        font-weight: 600;
    }
 
    .yui-navset .yui-nav a::before {
        background-color: transparent;
        background-image:
            radial-gradient(closest-side,
                rgba(var(--tabs-bg), 1),
                rgba(var(--tabs-bg), 0)),
            url("https://scp-wiki.wikidot.com/local--files/theme%3Athe-foundation-theme/foundation-circles-bg.png"),
            radial-gradient(closest-side,
                rgba(var(--tabs-bg), 1),
                rgba(var(--tabs-bg), 0));
        background-blend-mode: normal, overlay, normal;
        background-position: center center, center center;
        background-size: 100% 100%, 100vw, 100% 100%;
        pointer-events: none;
    }
 
    .yui-navset .yui-nav a:hover::before,
    .yui-navset .yui-nav a:active::before {
        background-color: transparent;
        background-image:
            radial-gradient(rgba(var(--tabs-hover-bg), 0),
                rgba(var(--tabs-hover-bg), 1)),
            url("https://scp-wiki.wikidot.com/local--files/theme%3Athe-foundation-theme/foundation-circles-bg.png"),
            radial-gradient(rgba(var(--tabs-hover-bg), 0),
                rgba(var(--tabs-hover-bg), 1));
 
    }
 
    .yui-navset .yui-nav .selected a::before,
    .yui-navset .yui-nav .selected:hover a::before,
    .yui-navset .yui-nav .selected:focus a::before,
    .yui-navset .yui-nav .selected:active a::before {
        background-color: transparent;
        background-image:
            radial-gradient(rgba(var(--tabs-selected-bg), 0),
                rgba(var(--tabs-selected-bg), 1)),
            url("https://scp-wiki.wikidot.com/local--files/theme%3Athe-foundation-theme/foundation-circles-bg.png"),
            radial-gradient(rgba(var(--tabs-selected-bg), 0),
                rgba(var(--tabs-selected-bg), 1));
    }
 
    .yui-navset .yui-nav li a,
    .yui-navset .yui-nav li a em,
    .yui-navset .yui-nav .selected a,
    .yui-navset .yui-nav .selected a em {
        background-color: transparent !important;
    }
 
    .yui-navset .yui-nav li,
    .yui-navset .yui-nav .selected {
        background-color: rgb(var(--swatch-background));
    }
 
    table.wiki-content-table {
        border-collapse: collapse;
    }
 
    table.wiki-content-table th {
        position: relative;
        border-color: rgb(var(--light-gray-monochrome)) !important;
        background-attachment: fixed;
        background-image: url('https://scp-wiki.wikidot.com/local--files/theme%3Athe-foundation-theme/foundation-circles-bg.png');
        background-position: top center;
        background-size: 100vh;
        font-family: var(--title-font);
        font-weight: 600;
        text-transform: uppercase;
    }
 
    @media only screen and (max-width: 56.25rem) {
        #header h1 a {
            text-align: center;
            font-size: 3.5em;
        }
 
        #top-bar {
            font-size: calc(var(--base-font-size) * 0.8);
        }
 
        #top-bar>div.mobile-top-bar>div.open-menu {
            font-size: calc(var(--base-font-size) * 0.65);
        }
 
        #top-bar div.mobile-top-bar>ul>li>a {
            letter-spacing: 0;
        }
 
        #top-bar>div.top-bar>ul>li:last-of-type>ul,
        #top-bar>div.mobile-top-bar>ul>li:last-of-type>ul {
            left: 50%;
        }
 
        #top-bar div.mobile-top-bar>ul>li>ul>li>a {
            white-space: pre-wrap;
        }
 
        #main-content {
            margin-top: 2.1em;
        }
    }
}
 
@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}
 
@keyframes fade {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}

@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: "The-Foundation-Dark-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "The Foundation Dark Theme";
        /* set this to your theme's full name */
 
        --swatch-background: var(--black-monochrome);
        --header-subtitle: "Office of the Overseer";
        --rating-module-text-color: var(--swatch-menutxt-light-color);
        --rating-module-button-color: var(--swatch-menutxt-light-color);
        --swatch-text-general: var(--swatch-text-light);
        --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
        /* ===SECONDARY & TERTIARY COLORS=== */
        /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
        --swatch-secondary-color: var(--swatch-menubg-dark-color);
        --swatch-tertiary-color: var(--swatch-menubg-light-color);
 
        /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
        --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
        --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
    }
 
    :root:lang(cn) {
        --header-subtitle: "监督者办公室";
    }
 
    ::-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;
    }
 
    #page-title,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: rgb(var(--swatch-text-light)) !important;
    }
 
    #page-title {
        --wght: 600;
        margin-top: 1rem;
        font-family: var(--title-font);
        text-transform: uppercase;
    }
 
    #page-title::before,
    #page-title::after {
        background-image: url('https://scp-wiki.wikidot.com/local--files/theme%3Athe-foundation-theme/foundation-circles-bg.png');
        background-size: 100vh;
        background-attachment: fixed;
        background-position: top center;
    }
 
    #header h2,
    #header h2 span {
        --wght: 500;
        font-weight: 500;
        font-family: var(--header-font);
        text-transform: uppercase;
        letter-spacing: 0.5em;
    }
 
    #login-status,
    #login-status span.printuser,
    #header div[class*="top-bar"]>ul>li>a,
    #header div[class*="top-bar"]>ul>li>ul li>a {
        color: rgb(var(--white-monochrome))
    }
 
    .danger-diamond a,
    .danger-diamond a:hover {
        color: rgba(0, 0, 0, 0) !important;
        box-shadow: initial !important;
    }
 
    .danger-diamond>.arrows {
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 160 160' xml:space='preserve'%3E%3Cpath fill='%23fcfcfc' d='M136.1,133.3l23.9-23.9V51.2l-24-24l19.1-19.1l4.9,4.9l0-12.9l-12.9,0l4.9,4.9L133,24.2l-24-24H51l-24,24 L8,5.2l4.9-4.9L0,0.2l0,12.9l4.9-4.9L24,27.3l-24,24v58.2l23.9,23.9l-19,19L0,147.3l0,12.9l12.9,0L8,155.3l19-19l23.9,23.9h58.4 l23.9-23.9l19,19l-4.9,4.9l12.9,0l0-12.9l-4.9,4.9L136.1,133.3z M155.7,53v54.6l-22.6,22.6l-50-50L133,30.3L155.7,53z M52.8,4.5 h54.4l22.7,22.7L80,77.2L30.1,27.3L52.8,4.5z M4.3,107.6V53L27,30.3L77,80.2l-50,50L4.3,107.6z M107.4,155.9H52.6L30,133.3l50-50 l50,50L107.4,155.9z'/%3E%3C/svg%3E%0A");
    }
 
    table.wiki-content-table {
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
 
    table.wiki-content-table tbody tr th {
        justify-content: center;
    }
 
    table.wiki-content-table tr,
    table.wiki-content-table th {
        --wght: 700;
        width: 100%;
        display: inline-flex;
        align-items: stretch;
        margin: 0;
    }
 
    table.wiki-content-table td {
        margin: 0;
        width: 100%;
        color: rgb(var(--white-monochrome));
        line-height: 1;
    }
 
    blockquote,
    .blockquote {
        background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]) {
        color: rgb(var(--light-gray-monochrome)) !important;
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]):hover {
        color: rgb(var(--black-monochrome)) !important;
        box-shadow: inset 0 -1.5em 0 0 rgba(var(--light-gray-monochrome), 1) !important;
    }
 
    .code {
        background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    .scp-image-block {
        box-shadow: initial;
    }
 
    .scp-image-block .scp-image-caption {
        background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    @media only screen and (max-width: 56.25rem) {
        table.wiki-content-table tr>td {
            min-width: 100%;
            font-size: 1rem;
            padding: 0.5rem;
        }
    }
}

:root {
    --body-font: "franklin-gothic-urw", '微软雅黑', sans-serif;
    --title-font: "hypatia-sans-pro", '黑体', sans-serif;
}
.side-block .heading {
    position: relative;
    padding-top: 0.15em;
    padding-bottom: 0.25em;
    font-family: var(--title-font);
}
.side-block div.menu-item a {
    margin: 0.15em 0;
}

---

+ Show component code

:root {
        --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 56.25rem) {
        #content-wrap {
            display: flex;
            position: initial;
            flex-direction: row;
            flex-grow: 2;
            width: calc(100vw - (100vw - 100%));
            max-width: inherit;
            height: auto;
            min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
            margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
        }
 
        #main-content {
            position: initial;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            max-height: 100%;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        #side-bar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            grid-area: side-bar;
            width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            max-height: 100vh;
            padding-right: 2.5rem;
            padding-left: 0.5rem;
            overflow-y: scroll;
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                padding 300ms linear,
                margin 300ms linear;
            border: none;
            border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
            translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
            direction: rtl;
            scrollbar-width: thin;
            -ms-scroll-chaining: none;
                overscroll-behavior: contain;
            scrollbar-color: 
                rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
                rgba(var(--swatch-tertiary-color), 0.05); /* Track */
        }
 
        #side-bar::-webkit-scrollbar-track {
            background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
        }
 
        #side-bar::-webkit-scrollbar,
        #side-bar::-webkit-scrollbar-thumb,
        #side-bar::-webkit-scrollbar-corner {
            width: 0.5rem;
            border-right-width: calc(100vw + 100vh);
            border-right-style: inset;
            border-color: inherit;
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        }
 
        #side-bar:is(:hover, :active, :focus-within) {
            margin-right: 2.25rem;
            padding-right: 0.25rem;
            overflow-x: hidden;
            overflow-y: auto;
            border-color: rgba(var(--swatch-primary-darker), 1);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
            translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
            scrollbar-color: 
                rgba(170, 170, 170, 1)  /* Thumb */
                rgba(252, 252, 252, 1); /* Track */
            scrollbar-color: 
                rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
                rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        }
 
        #main-content::after {
            content: " ";
            display: flex;
            position: fixed;
            top: 0;
            left: 1rem;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 100%;
            max-height: 100%;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center left 1rem;
            background-size: 1rem 12.875rem;
            pointer-events: none;
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::after {
            left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            width: 0rem;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0;
            background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            font-size: 0em;
        }
 
        #main-content::before {
            content: " ";
            position: absolute;
            z-index: 9;
            top: var(--final-header-height-on-desktop, 0);
            left: 0;
            width: var(--sidebar-width-on-desktop, 14.5rem);
            height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
            margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0.5;
            background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
            pointer-events: none;
            translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::before {
            translate: 0;
            opacity: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1em;
            padding-left: 0.25em;
            border-right-width: 0rem;
            border-left-width: 0rem;
            border-radius: 0;
            background-color: rgb(0, 0, 0, 0);
            direction: ltr;
        }
 
        #side-bar .scpnet-interwiki-wrapper {
            direction: ltr;
        }
 
        /* Print Friendly Formatting by Estrella */
        body.print-body { 
            --sidebar-width-on-desktop: 0; 
        } 
        body.print-body #main-content::before,
        body.print-body #main-content::after { 
            display: none; 
        }
    }