Broken World Theme

Theme Colors

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

May Black--bright-accent(0, 0, 0)

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

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

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

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

Solder Paste--light-gray-monochrome(150,150,150)

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

Metal Powder--dark-gray-monochrome(35, 35, 35)

Iron Sheet--swatch-menubg-light-color(180, 180, 180)

Still Black--dark-accent(0,0,0)

Scarlet King--newpage-color(105,32,32)

{$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}

---

▼  How does this theme look in Firefox  ▼

---

Rating

Rating:

Rating w/ Info Pane:

Info

---

Info about your page.

---

Usage

This is a Black Highlighter based theme, meaning you will need to import the Black Highlighter theme as well in order to use this theme. To learn more, go here.

To import this theme, simply add the following to your page:

[[include :scp-wiki:theme:black-highlighter-theme]]

[[include :scp-wiki:theme:broken-world]]

Examples

The Broken Church

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

Titles can be created by putting between one and six plus "+" at the start of the line

▼ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

Just use your imagination and pretend there's Lorem Ipsum here.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

NOTICE: customize your logo

---

Presets

---

1. Broken Church

by SunnyClockwork

2. Cogwork Orthodox

by SunnyClockwork

3. Maxwellism

by SunnyClockwork

4. Xia Anomalous Group

by SunnyClockwork

5. CN Dragon

by

Deer Kylin(design)
agent (Vector)

6. SCP

by Aelanna

---

CODE

---

Beginning of include ↦

Write true, and enable custom logo ↦

Serial numbers of logos, see above.¹ ↦

Url of your logo ↦

End of include ↦

[[include :scp-wiki:theme:broken-world

|my-logo=true

|set-logo=1~6, 0

|set-url=

]]

Special style：Golden header

[[include :scp-wiki-cn:theme:broken-world
|my-golden-header=true
]]

NOTICE: customize your header title

---

CODE

---

Beginning of include ↦

BIG HEADER TITLE ↦

small header subtitle ↦

HEADER TITLE in phone ↦

header subtitle in phone ↦

End of include ↦

[[include :scp-wiki:theme:broken-world

|header-title='text'²

|header-subtitle='text'

|mob-title='text'

|mob-subtitle='text'

]]

▼ Copy codes

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:broken-world
|header-title='text'
|header-subtitle='text'
|mob-title='text'
|mob-subtitle='text'
|my-logo=true
|set-logo=1~6, 0
|set-url=
]]

---

This is a blockquote, created by putting "> " at the start of each line.

More text

---

That's a horizontal rule

Nested blockquotes

And another³

This is a	table
You should know	how to make these
already

The body font is Iceland.
The Header font is Iceberg.
The Page title font is Black Ops One.
The Title font is Kumar One.
The monospace font is Space Mono.

Code

+ CODE 

/*
=========================================================
⚙️  Broken World Theme  ⚙️
    [2019 Wikidot Theme]
    Created by Etinjat
    Based on Black Highlighter Theme created by Woedenaz and Croquembouche.
    The COBG logos was created by Sunnyclockwork. Licensed under CC BY SA 3.0.
==========================================================
*/
 
/* ICON */
@import url('https://scp-wiki.wikidot.com/fragment:broken-world/code/1');
 
/* FONTs */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kumar+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Iceland&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Iceberg&display=swap');
 
/* 
============================================
ROOT
============================================
*/
 
:root,
:root:lang(cn) {
    --theme-base: "black-highlighter";
    --theme-id: " broken-world-bhl";
    --theme-name: "Etinjats Broken world BHL theme";
 
    /* ------------- Fonts  ------------- */
    --body-font: 'Iceland', 'Iceberg', sans-serif;
    --header-font: 'Iceberg', 'Iceland', sans-serif;
    --sub-header-font: 'Iceberg', 'Iceland', 'Kumar One', 'Iceberg', 'Iceland', sans-serif;
    --page-title-font: 'Black Ops One', 'Kumar One', 'Iceberg', 'Iceland', sans-serif;
    --title-font: 'Kumar One', 'Black Ops One', 'Iceberg', 'Iceland', sans-serif;
    --mono-font: "Space Mono", monospace;
 
    /* -------------  Header text ------------- */
    --header-title: "Church of the Broken God";
    --header-subtitle: "To Repair This Broken World";
    --phone-title: "Broken Church";
    --phone-subtitle: "Repair This World";
 
    /* logo cover*/
    --gradient-logo-under: linear-gradient(180deg, #2e2c2c 0%, #333 0%, #000 0%);
 
    --gradient-logo-cover: linear-gradient(rgb(145, 145, 145, 0.5) 0%, rgb(44, 46, 44, 0.8) 30%, rgb(51, 51, 51, 0.8) 100%);
 
    /* Header  cover*/
    --gradient-header: linear-gradient(50deg, #151515, #141414, #3b3b3b, #342f2f, #2a2a2a, #000);
 
    --gradient-header-line: repeating-linear-gradient(50deg, hsla(0, 0%, 90%, 0), hsla(0, 0%, 100%, 0) .25vh, rgba(88, 88, 88, 0.1) .35vh, rgba(88, 88, 88, 0.2) .4vh);
 
    --header-title-cover: linear-gradient(120deg, #e8e8e8 0%, #a2a2a2 10%, #fff 50%);
 
    --gradient-header-webkit: -webkit-linear-gradient(50deg, #151515, #141414, #3b3b3b, #342f2f, #2a2a2a, #000);
    --header-title-cover-webkit: -webkit-linear-gradient(120deg, #e8e8e8 0%, #a2a2a2 10%, #fff 50%);
 
    /* sidebar cover*/
 
    --gradient-sidebar-cover: linear-gradient(150deg, #2e2c2c 0%, #333 20%, #000 100%);
 
    --gradient-sidebar-line: repeating-linear-gradient(60deg, hsla(0, 0%, 90%, 0), hsla(0, 0%, 100%, 0) .25vh, rgba(88, 88, 88, 0.1) .35vh, rgba(88, 88, 88, 0.2) .6vh);
 
    --gradient-sidebar-btn: linear-gradient(10deg, rgba(44, 46, 46, 0.1), rgba(88, 76, 26, 0.2), rgba(0, 0, 0, 0.6));
 
    --gradient-sidebar-txt-line: repeating-linear-gradient(20deg, hsla(0, 0%, 90%, 0), hsla(0, 0%, 100%, 0) .25vh, rgba(88, 88, 88, 0.1) .35vh, rgba(88, 88, 88, 0.2) .6vh);
 
    /*------------------ colors ---------------------- */
    --bright-accent: 0, 0, 0;
    --medium-accent: grey;
    --dark-accent: 0, 0, 0;
 
    --white-monochrome: 250, 250, 250;
    --pale-gray-monochrome: 244, 244, 244;
    --light-pale-gray-monochrome: 225, 225, 225;
    --very-light-gray-monochrome: 215, 215, 215;
    --light-gray-monochrome: 150, 150, 150;
    --black-monochrome: 5, 5, 5;
    --swatch-menubg-light-color: 180, 180, 180;
    --tabs-selected-txt: #000;
 
    /* rating*/
    --rating-module-button-plus-color: none;
    --rating-module-button-negative-color: none;
    --rating-module-button-cancel-color: none;
 
    /* link */
    --link-color: 118, 36, 36;
    --visited-link-color: 90, 90, 90;
    --hover-link-color: 165, 42, 42;
    --newpage-color: 105, 32, 32;
    --sidebar-links-text: 255, 255, 255;
    --sidebar-headlink-color: grey;
 
    /*------------------ image ---------------------- */
 
    --logo-image: var(--cobg-image);
 
    --ironhide-image: url("https://scp-wiki.wikidot.com/local--files/theme:broken-world/ICON_iron-sheet.png");
 
    /* -------------------------- info box -----------------------*/
    --linkColour: #999 !important;
    --barColour: linear-gradient(0deg, #555, #3b3b3b, #342f2f, #2a2a2a, #333) !important;
 
    /* -------------------------- scrollbar -----------------------*/
    scrollbar-color: rgba(128, 128, 128, 1) rgba(51, 51, 51, 0.50);
}
 
/*
=====================================
BODY
=====================================
*/
 
#page-content {
    letter-spacing: 0.3px;
}
 
#page-content p {
    font-size: 130%;
}
 
form#edit-page-form #edit-page-textarea {
    font-family: var(--mono-font);
}
 
#page-content .code p {
    font-size: 90%;
}
 
@media (max-width: 479px) {
    #page-content {
        letter-spacing: auto;
    }
}
 
/* 
============================================
HEADER
============================================
*/
div#container-wrap {
    background-image: var(--gradient-header-line);
}
 
#header h2 span {
    line-height: 2.5;
    font-weight: 500;
    padding: 0.05rem 0rem 0rem 0.2rem;
    font-family: var(--sub-header-font);
}
 
@media (max-width: 500px) {
    #header h1 a::before {
        padding: 0 0 0 0.5rem;
        content: var(--header-title);
        content: var(--phone-title);
    }
 
    #header h2 span::before {
        content: var(--header-subtitle);
        content: var(--phone-subtitle);
    }
 
    #header h1 a::before,
    #header h2 span {
        font-size: 120%;
 
    }
 
    #header h2 span {
        font-size: 100%;
    }
}
 
/* 
============================================
3D HEADER
============================================
*/
 
/* ----------------- WIDE SCREEN  ------------------------ */
 
@media screen and (min-width: 475px) {
 
    #header h1 a::before,
    #header h2 span::before {
        background-image: var(--header-title-cover);
        background-size: cover;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        overflow-wrap: normal;
 
        --tt-text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, ));
        text-shadow: .063rem .063rem .063rem #0c0c0c;
        text-shadow: .063rem .063rem .063rem var(--tt-text-shadow);
 
        filter: brightness(160%);
        -webkit-filter: brightness(160%);
    }
}
 
@media screen and (max-width: 475px) {
 
    #header h1 a::before,
    #header h2 span {
        font-size: 120%;
    }
 
    #header h2 span a:before {
        font-size: 100%;
        padding: 0;
        margin: 0;
    }
}
 
/*
============================================
LOGO
base on Woedenaz
============================================
*/
 
/* ----------------- WIDE SCREEN  ------------------------ */
@media screen and (min-width: 500px) {
    #header {
        background-image: none;
    }
 
    /* BACKGROUND IMG*/
 
    #header #header-extra-div-1,
    #header #header-extra-div-2 {
        display: flex;
        position: absolute;
        width: 6.250rem;
        height: 6.250rem;
        display: flex;
        position: absolute;
        left: 0.15rem;
        top: 0.55rem;
    }
 
    #header #header-extra-div-1::before,
    #header #header-extra-div-2::before {
        content: "";
        width: 6.250rem;
        height: 6.250rem;
        position: absolute;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        flex: 1;
    }
 
    /* SHEET 1 */
    #header #header-extra-div-1::before {
        z-index: 1;
        background: var(--ironhide-image),
            var(--gradient-logo-under);
        -webkit-mask: var(--logo-image);
        mask: var(--logo-image);
        mask-size: cover;
        -webkit-mask: var(--logo-image);
        -webkit-mask-size: cover;
        background-size: cover;
    }
 
    /* 层叠2 滤镜*/
    #header #header-extra-div-2::before {
        background: var(--gradient-logo-cover);
        -webkit-mask: var(--logo-image);
        mask: var(--logo-image);
        mask-size: cover;
        -webkit-mask: var(--logo-image);
        -webkit-mask-size: cover;
        z-index: 2;
    }
}
 
/* 
============================================
TITLE
============================================
*/
 
#page-title,
.meta-title {
    font-family: var(--page-title-font);
    font-size: 300%;
    /*! text-align: center ; */
    /*! font-weight: normal ; */
    text-shadow: 0 0.2rem 1rem #7b7b7b;
    padding: 0.8rem 0;
    margin: 1.5rem 0;
    border-bottom: 3px double #666;
}
 
#page-title::after,
.meta-title::after,
#page-title::before,
.meta-title::before {
    flex-grow: 1;
    content: "  ";
    height: 40%;
    margin: 0 1rem;
    background-color: #444;
    background-repeat: repeat-x;
    /*! content: " "; */
}
 
#page-title::before,
.meta-title::before {
    transform: scaleX(-1);
}
 
@media (max-width: 500px) {
 
    #page-title,
    .meta-title {
        border-top: 0px solid #333;
    }
}
 
#breadcrumbs,
.pseudocrumbs {
    align-items: center;
}
 
/* 
============================================
SEARCH AND USER 
============================================
*/
 
#account-topbutton {
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
#login-status {
    font-family: var(--header-font);
}
 
#login-status #account-options {
 
    overflow: visible;
    background: #e8e8e8;
    color: #333;
    border: 4px double #444;
}
 
#login-status #account-options ul li a {
    color: #333;
    border: 4px double #666;
    padding: 0.1rem 0.5rem;
    width: auto;
    display: block;
    overflow: hidden;
    padding-left: 1rem
}
 
#login-status #account-options ul li a:hover {
    color: #fff;
    border: 4px double #888;
}
 
#login-status #account-options ul li a:before {
    left: -5%;
    width: 110%;
}
 
#login-status #account-options ul,
#login-status #account-options ul li {
    display: block;
    overflow: hidden;
}
 
#login-status #account-options li>a[href*="/messages"] {
    position: relative;
    top: 0;
    height: 100%;
    font-size: 0.8rem;
    color: inherit;
    width: 82.5%;
}
 
#login-status #account-options li a:hover::after,
#login-status #account-options li>a[href*="/messages"]:hover::after {
    position: absolute;
    content: ' ⌖';
    margin-left: 0.2rem;
    left: 0
}
 
#login-status #account-options li>a[href*="/messages"]::after {
    content: "";
}
 
#login-status #account-options ul,
#login-status #account-options ul li {
    font-size: 0.8rem;
 
}
 
@media only screen and (max-width: 56.25rem) {
    div.mobile-top-bar {
        z-index: 10;
    }
}
 
#login-status #account-options ul {
    z-index: 100;
    position: relative;
}
 
/* 
============================================
INFO BOX
============================================
*/
 
.info-container {
    background: #f4f4f4;
}
 
.info-containere {
    background-image: var(--ironhide-image) !important;
    background-size: contain;
}
 
.info-container .list-pages-item iframe {
    background: var(--ironhide-image);
    border: 0.5rem groove #333;
}
 
/* 
============================================
RATING
============================================
*/
#page-content .rate-box-with-credit-button,
.page-rate-widget-box {
    background: grey;
    border: 0.2rem ridge grey;
}
 
.page-rate-widget-box>span.rate-points {
    font-family: var(--header-font);
    align-items: center;
}
 
.creditButton p,
.page-rate-widget-box>span.rate-points,
.page-rate-widget-box .rateup,
.page-rate-widget-box .cancel,
.page-rate-widget-box .ratedown {
    background: radial-gradient(#ecd5d5, #afb3af, grey);
    border-left: 0.1rem groove grey;
    border-right: 0.1rem groove grey;
    -webkit-filter: brightness(1) drop-shadow(1px 3px 1px #333);
    filter: brightness(1) drop-shadow(1px 3px 1px #333);
    bottom: 0.15rem;
    height: auto;
    width: auto;
}
 
.creditButton p:hover,
.page-rate-widget-box .rateup:hover,
.page-rate-widget-box .cancel:hover,
.page-rate-widget-box .ratedown:hover {
    border: 0.1rem outset grey;
    filter: brightness(1) drop-shadow(2px 1px 1px #333);
    -webkit-filter: brightness(1) drop-shadow(2px 1px 1px #333);
 
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover {
    background: radial-gradient(#ecd5d5, grey, #afb3af);
}
 
.creditButton p:hover a:before {
    background: #e8e8e8 !important;
}
 
.creditButton a:hover,
.upbtn .rateup a:hover,
.downbtn .ratedown a:hover,
.cancelbtn .cancel a:hover {
    /*width: 30px;
     height: 30px;*/
    border-radius: 5px;
    color: #bab8b5;
    background-color: transparent !important;
}
 
/* 
============================================
SELECTION 
============================================
*/
::-moz-selection {
    color: #e8e8e8;
    background: #4d4d4d;
    color: rgb(var(--pale-gray-monochrome));
    background: rgb(var(--gray-monochrome));
}
 
::selection {
    color: #e8e8e8;
    background: #4d4d4d;
    color: rgb(var(--pale-gray-monochrome));
    background: rgb(var(--gray-monochrome));
}
 
::-moz-selection {
    color: #e8e8e8;
    background: #4d4d4d;
    color: rgb(var(--pale-gray-monochrome));
    background: rgb(var(--gray-monochrome));
}
 
/* 
============================================
TOP BAR
============================================
*/
#top-bar ul li a {
    color: gainsboro;
}
 
#top-bar ul li a:hover {
    color: grey;
}
 
#top-bar ul li ul a {
    color: #000;
 
}
 
#top-bar ul li:hover a:hover {
    background: #000;
    color: #f4f4f4;
    color: rgb(var(--pale-gray-monochrome));
    text-decoration: none;
}
 
/*
============================================
SIDE BAR
============================================
*/
 
.side-bar-container {
    background-color: var(--gradient-sidebar-line);
}
 
/* 
-------------------------------
NORMAL
------------------------------
 */
 
/* -----------BACKGROUND COLOR----------------*/
 
#side-bar,
#side-bar:hover {
    border: 0.5em groove #2e2c2c;
    background-color: grey;
    background-image: var(--gradient-sidebar-line);
}
 
/* -----------GUIDE TEXT----------------*/
 
#side-bar .heading,
#side-bar {
    color: #600;
    border: groove 0.5rem #4D4D4D;
    padding-left: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    background-color: #2c2e2e;
    background-image: var(--gradient-sidebar-txt-line);
}
 
#side-bar .sub-text,
#side-bar .side-block span {
    color: #969696;
    width: 95%;
}
 
#side-bar .heading p {
    color: #fff;
    font-size: 1rem;
    height: auto;
    padding: 0.1rem 0rem;
    margin: 0;
}
 
#side-bar .heading {
    display: block;
    text-align: center;
}
 
/* ----------- MENU BLOCK ----------------*/
 
#side-bar .side-block {
    width: 100%;
    padding: 0px;
    margin: auto 0rem auto 0;
 
    border: 1rem ridge #555;
    border-radius: 0px;
    box-shadow: 2px 2px 6px var(--dark-gray-monochrome);
    /*background-color: #2e2c2c; */
 
    background-image: repeating-linear-gradient(20deg, hsla(0, 0%, 90%, 0), hsla(0, 0%, 100%, 0) .25vh, rgba(88, 88, 88, 0.1) .35vh, rgba(88, 88, 88, 0.2) .8vh);
 
    background-image:
        var(--ironhide-image),
        var(--gradient-sidebar-cover);
    background-blend-mode: overlay, normal;
    background-size: cover, 100% 260%;
 
}
 
#side-bar .side-block.resources,
#side-bar .side-block.media {
 
    background-image: repeating-linear-gradient(20deg, hsla(0, 0%, 90%, 0), hsla(0, 0%, 100%, 0) .25vh, rgba(88, 88, 88, 0.1) .35vh, rgba(88, 88, 88, 0.2) .8vh);
    background-image:
        var(--ironhide-image),
        var(--gradient-sidebar-cover);
    background-blend-mode: overlay, normal;
    background-size: cover, 100% 260%;
    margin: 0;
}
 
#side-bar .menu-item.small {
    font-size: 0;
}
 
/* ----------- MENU LINK----------------*/
#side-bar div.menu-item a {
    background-image: var(--gradient-sidebar-btn);
    -webkit-filter: brightness(1) drop-shadow(5px 3px 1px #000);
    filter: brightness(1) drop-shadow(5px 3px 1px #000);
    border: 0.2rem outset #2c2e2e;
}
 
#side-bar div.menu-item a:hover {
    color: gray;
    -webkit-filter: brightness(2) drop-shadow(2px 2px 1px #000);
    filter: brightness(2) drop-shadow(2px 2px 1px #000);
    border: 0.2rem inset #2c2e2e;
    top: 0.2rem;
}
 
/* ----------- MENU BLOCK ----------------*/
#side-bar .heading,
#side-bar .menu-item {
    margin: 0.2rem 0;
}
 
#side-bar .heading p {
    margin-top: 0.5rem;
}
 
/* ----------- LINKS ----------------*/
#container #side-bar a {
    color: #fff;
}
 
#side-bar a:visited {
    color: #e8e8e8;
}
 
#side-bar div.menu-item.inactive a {
    color: #fff;
}
 
#interwiki div.heading a::before,
#side-bar div.heading a::before,
#container #side-bar .heading a:hover {
    border: none;
    background: none;
    top: 0;
    color: var(--sidebar-headlink-color) !important;
    -webkit-filter: none;
    filter: none;
    text-shadow: none
}
 
/* 
---------------------------
SIDEBAR IMAGE
---------------------------
*/
 
#container #side-bar div.side-block.media a {
    display: inline-flex;
    margin: 0 0.2rem;
}
 
#container #side-bar div.side-block.media img {
    display: block;
}
 
/* 
---------------------------
FLEX LAYOUT
---------------------------
*/
#side-bar .side-block,
#side-bar div[style*="center"],
#side-bar div[style*="center"]>div {
    display: block;
}
 
#content-wrap #side-bar * {
    height: auto;
}
 
#side-bar div.menu-item.scp-series a,
#side-bar div.menu-item.scp-tales a,
#side-bar div.menu-item a[href*="scp-series"] {
    justify-content: center;
    width: auto;
    text-indent: 0;
    white-space: wrap !important;
    display: block !important;
    text-align: center;
}
 
/*  HOVER LINK */
#side-bar div.menu-item a::before,
#side-bar div.menu-item a:hover::before {
    width: 220%;
}
 
/* 
---------------------------
MEDIA
---------------------------
*/
 
#container #side-bar .collapsible-block a {
    padding: 0.5rem 0;
    margin: 0rem;
}
 
#container #side-bar .collapsible-block .menu-item:first-child a {
    margin: 0.5rem 0 0 0;
}
 
#container #side-bar .collapsible-block .menu-item a {
    padding: 0 0.5rem;
    margin: 0.05rem;
 
}
 
.collapsible-block-content {
    width: 100%;
    margin-left: 0.2rem;
    ;
}
 
/* 
-----------------------------
INTERWIKI
-----------------------------
*/
 
#content-wrap #side-bar .scpnet-interwiki-wrapper {
    margin-left: -0.8rem;
}
 
/* 
-----------------------------
FIT POSITION
-----------------------------
*/
#side-bar .side-block.resources,
#side-bar .side-block.media,
#side-bar .side-block {
    margin-right: -0.5rem
}
 
/* 
-----------------------------
SIDEBAR - MOB
-----------------------------
*/
 
.mobile-top-bar .open-menu a::after {
    display: block !important;
    width: 100% !important;
}
 
@media (max-width: 479px) {
 
    #side-bar,
    #side-bar:hover {
        border: none;
        padding: 0 0.5rem 0 0rem;
    }
 
    #side-bar:target .close-menu {
        border-left: 0.2rem solid #2e2c2c;
    }
 
    #side-bar {
        /*  height: 700px;*/
        overflow: scroll;
        border: none !important;
 
    }
 
    #side-bar div.menu-item a {
        width: 85% !important;
        word-wrap: break-word;
        word-break: normal;
        text-align: center !important;
    }
 
    #side-bar:not(#side-bar:target) {
        left: -20rem !important;
    }
 
    #side-bar:target~#side-bar {
        left: 0rem !important;
    }
 
    #container #side-bar:target .close-menu {
        width: 100%;
        height: 100%;
    }
 
    #content-wrap #side-bar .scpnet-interwiki-wrapper {
        margin-left: 0rem;
    }
 
    #side-bar .side-block {
        border: none;
        border-right: 1rem groove #888;
        width: 100%
    }
}
 
/**/
 
#container #side-bar .collapsible-block {
    padding: 0.5rem 0;
    min-height: 3rem;
}
 
#side-bar .collapsible-block {
    padding: 0.5rem 0;
    min-height: 3rem;
}
 
#side-bar div.collapsible-block div.collapsible-block-folded>a.collapsible-block-link::after {
    display: none;
}
 
/* 
-----------------------------
 COLLAPSIBLE SIDEBAR
-----------------------------
*/
 
@media only screen and (min-width: 47.9375rem) {
    #page-content {
        max-width: 100%;
    }
}
 
#page-content {
    width: 100%;
}
 
#main-content {
    min-width: {$main-width};
}
 
@media (max-width: 700px) {
    #main-content {
        min-width: 0rem;
    }
}
 
#side-bar,
#side-bar:hover {
    border: 0.5rem groove #2e2c2c;
    background-color: grey;
    background-image: var(--gradient-sidebar-line);
}
 
#side-bar {
    opacity: 0;
}
 
#side-bar:hover {
    opacity: 1;
}
 
@media screen and (max-width: 475px) {
 
    #side-bar,
    #side-bar:not(:target) {
        opacity: 0;
        transition: all 0.5s;
    }
 
    #side-bar:target {
        opacity: 1;
        transition: all 0.5s;
    }
}
 
/* 
============================================
TABS
============================================
*/
 
.yui-navset .yui-content {
    border: 0.2rem inset #5E5E5E;
}
 
/*  TAB：BORDER*/
.yui-navset .yui-nav a,
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav a {
    border: 0.2rem outset #5E5E5E;
    color: #444;
}
 
.yui-nav {
    background: #888;
    font-family: var(--header-font);
 
}
 
/*  TAB：UNSEL */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    filter: drop-shadow(2px 10px 10px #333);
    -webkit-filter: drop-shadow(2px 10px 10px #333);
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a,
.yui-navset .yui-nav a::before,
.yui-navset .yui-nav a:hover::before,
.yui-navset .yui-nav .selected:active a::before,
.yui-navset .yui-nav .selected:focus a::before,
.yui-navset .yui-nav .selected:hover a::before,
.yui-navset .yui-nav .selected a::before {
    background: radial-gradient(#ecd5d5, #afb3af, grey);
    transition: none;
}
 
/*  TAB：SEL*/
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selecteda:focus,
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    filter: sepia(15%) drop-shadow(0px -3px 1px #333);
    -webkit-filter: sepia(15%) drop-shadow(0px -3px 1px #333);
}
 
.yui-navset .yui-nav .selected {
    z-index: 10;
    margin: 0;
    padding: 0;
    box-shadow: none;
}
 
/* TAB：HOVER*/
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    filter: sepia(15%) drop-shadow(2px 8px 8px #000);
    -webkit-filter: sepia(15%) drop-shadow(2px 8px 8px #000);
}
 
/*  tab：hover & sel */
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav li:hover,
.yui-navset .yui-nav .selected {
    color: #333;
}
 
.yui-navset .yui-nav li:hover,
.yui-navset .yui-nav .selected {
    color: #333;
 
    transform-origin: bottom;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
 
    transform: rotateX(25deg);
    -webkit-transform: rotateX(25deg);
    -moz-transform: rotateX(25deg);
}
 
/*  tab：nav text */
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
    color: #000 !important;
}
 
/*
============================
TABLE & TOC
============================
*/
 
#toc #toc-action-bar,
#toc .title,
#page-content div.b-tables table.wiki-content-table th,
#page-content table.wiki-content-table th {
    background-color: rgb(85, 83, 83);
}
 
/*
============================================
 PAGE INFO
============================================
 */
 
#page-info-break {
    margin-top: 2rem;
}
 
#page-options-container #page-info,
#page-options-container .page-watch-options {
    width: 100%;
    max-width: 80vw;
    padding-right: 5rem;
    margin-right: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
#page-info span,
.page-watch-options a[href*="faq:watching"] {
    padding-right: 0.5rem;
    margin-right: 0rem;
}
 
.page-watch-options:not(a) {
    font-size: 0;
}
 
.page-watch-options a {
    font-size: 0.8rem;
}
 
.page-watch-options a:after {
    font-size: 0.8rem;
    content: ' |';
}
 
#page-info :after {
    content: '  ';
    border-top: 2px solid #444;
    border-right: 2px solid #444;
    position: absolute;
    height: 2.3rem;
    width: 3rem;
    margin-left: -2.6rem;
    margin-top: -1.2rem;
}
 
@media (max-width:700px) {
    #page-info :after {
        margin-top: -2.5em;
    }
}
 
@media (max-width:410px) {
    #page-options-container #page-info span:after {
        margin-left: 0;
        padding-right: 0rem;
        right: 5.8vw;
    }
 
    #page-options-container #page-info,
    #page-options-container .page-watch-options {
        left: -5rem;
        margin-left: -5%;
    }
}
 
@media (max-width:310px) {
    #page-info span:after {
        margin-left: -15.5em;
    }
}
 
/*
============================================
 TAGS
============================================
 */
 
#main-content .page-tags::before {
    content: "\f02c  TAGs";
    padding: 0.5rem 0.5rem 0.2rem 0.5rem;
    top: -2rem;
    width: 4rem;
    font-size: 0.8rem;
    font-family: FontAwesome, var(--body-font);
    letter-spacing: 0.1rem;
    margin: 0;
    background-image: linear-gradient(-110deg, transparent 0rem, transparent 1.5rem, #333 1.6rem, #000 100%);
    background-color: transparent;
}
 
#main-content .page-tags span {
    margin: 0 0 0 0rem;
}
 
#main-content .page-tags,
#main-content .page-tags span {
    height: auto;
}
 
#main-content .page-tags a {
    color: #000;
    transition: all 0.5s;
    margin: 0.2rem;
    text-decoration: none;
    font-size: 120%;
    height: 100%;
}
 
#main-content .page-tags a:hover {
    transition: all 0.5s;
 
    border: 2px double grey;
    color: #f4f4f4;
 
    color: rgb(var(--pale-gray-monochrome));
    background-color: rgb(var(--dark-gray-monochrome));
}
 
.page-watch-options a {
    color: #242424;
    color: rgb(var(--gray-monochrome));
 
}
 
#main-content .page-tags a::after {
    content: '○';
    display: block;
    left: 0;
    color: #333;
    font-size: 60%;
    left: 0.3rem;
    position: absolute;
}
 
#main-content .page-tags a:hover::after {
    content: '●';
    display: block;
    left: 0;
    color: #e8e8e8;
    font-size: 60%;
    left: 0.3rem;
    position: absolute;
 
}
 
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]),
#main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]) {
    padding: 0.2rem 0.5rem 0.2rem 1rem;
    margin-right: 0.4rem;
}
 
#main-content .page-tags,
#main-content .page-tags span {
    display: block;
    height: auto;
    width: 100%;
    visibility: visible;
    -webkit-clip-path: none;
    clip-path: none;
    display: block;
}
 
#main-content .page-tags span a,
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):not(:last-child),
#main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]):not(:last-child) {
    border: 2px solid #333;
    border-right: 2px solid #333;
}
 
@media (max-width: 600px) {
    #main-content .page-tags::before {
        padding: 0.5rem 0.5rem 0.1rem 0.5rem;
        top: -1.5rem;
        width: 3.5rem;
        font-size: 0.6rem;
    }
}
 
/* 
============================================
BOTTOM BOTTON
============================================
*/
 
.page-options-bottom a {
    display: inline-block;
    white-space: nowrap;
}
 
div[id*="page-options-bottom"] {
    justify-content: flex-end;
    margin-top: 0rem;
}
 
#main-content .page-options-bottom a,
#main-content #action-area div #edit-page-form .buttons.alignleft input {
    cursor: pointer;
    padding: 0.2rem;
    margin: 0.1rem;
    text-decoration: none;
    transition: -webkit-filter 0.5s;
    transition: filter 0.5s;
    transition: filter 0.5s, -webkit-filter 0.5s;
    filter: drop-shadow(2px 2px 3px #000);
    -webkit-filter: drop-shadow(2px 2px 3px #000);
}
 
#content-wrap #main-content .page-options-bottom a,
#content-wrap #main-content #action-area div #edit-page-form .buttons.alignleft input {
    border: 3px double #343434;
}
 
#content-wrap #main-content .page-options-bottom a:hover,
#main-content .page-options-bottom a:hover {
    border: 3px double #e8e8e8;
    filter: drop-shadow(0.4em 0.6em 0.1em #333);
    -webkit-filter: drop-shadow(2px 5px 2px #333);
}
 
#content-wrap #main-content .page-options-bottom a:hover:before,
#main-content .page-options-bottom a:hover:before {
    content: '|';
    color: #e8e8e8;
    position: absolute;
    left: 1.4em;
    font-size: 1.2rem;
}
 
@media (max-width: 500px) {
    div[id*="page-options-bottom"] {
        justify-content: center;
    }
 
    #content-wrap #main-content .page-options-bottom a:hover:before,
    #main-content .page-options-bottom a:hover:before {
        left: calc(var(--icon-size) - .6em);
    }
}
 
/* 
============================================
BOTTOM BAR
============================================
 */
#footer {
    background: linear-gradient(120deg, #030303, #2c2c2c, #323131, #545353, #1c1919, #1b1818);
    width: inherit;
    flex-wrap: revert;
}
 
#footer .options {
    width: 100%;
}
 
#license-area {
    background-color: #666;
}
 
/* 
============================================
OTHERS
============================================
*/
 
/* FONT */
#top-bar li,
.yui-navset .yui-nav {
    font-family: var(--header-font);
}
 
#container #side-bar a,
.page-tags * {
    font-family: var(--body-font);
}
 
#page-options-container,
#page-options-container #page-options-bottom a,
#page-options-container #page-options-bottom-2 a,
.hovertip * {
    font-family: var(--header-font);
}
 
table.wiki-content-table th {
    background: #bfbfbf;
    color: #000;
}
 
/* AUTHOR TOOL */
.list-pages-box div.preview {
    display: block;
}
 
/* SOURCE CHANGED */
div.inline-diff del {
    background-color: #FCC;
}
 
div.inline-diff ins {
    background-color: #DDF;
}
 
/* HOVERTIP */
.footnote blockquote,
.footnote div.blockquote {
    background-color: rgb(var(--light-gray-monochrome));
    border: 1px solid rgb(var(--dark-gray-monochrome));
}
 
.footnote .f-heading {
    font-family: var(--body-font);
    background-color: rgb(var(--dark-gray-monochrome));
}
 
.footnote .f-content {
    letter-spacing: 0.5px
}

/* 
============================================
INTERWIKI
22222222222222222222222
============================================
*/
:root {
    --ironhide-image: url("http://scp-wiki-cn.wdfiles.com/local--files/theme:broken-world/Bgr-wanderers-goldfoil.png");
    --gradient-sidebar-cover: linear-gradient(150deg, #2e2c2c 0%, #333 20%, #000 100%);
    --gradient-sidebar-line: repeating-linear-gradient(60deg, hsla(0, 0%, 90%, 0), hsla(0, 0%, 100%, 0) .25vh, rgba(88, 88, 88, 0.1) .35vh, rgba(88, 88, 88, 0.2) .6vh);
    --gradient-sidebar-btn: linear-gradient(10deg, rgba(44, 46, 46, 0.1), rgba(88, 76, 26, 0.2), rgba(0, 0, 0, 0.6));
    --gradient-sidebar-txt-line: repeating-linear-gradient(20deg, hsla(0, 0%, 90%, 0), hsla(0, 0%, 100%, 0) .25vh, rgba(88, 88, 88, 0.1) .35vh, rgba(88, 88, 88, 0.2) .6vh);
 
    --bright-accent: 0, 0, 0;
    --medium-accent: 250, 250, 250;
    --sidebar-links-text: 255, 250, 255;
    --swatch-menutxt-general-color: 200, 200, 200;
 
}
 
#interwiki .side-block {
    height: 100%;
    margin: 0rem 0rem 0 0rem;
    border: 1rem ridge #555 !important;
    background-image: var(--ironhide-image), var(--gradient-sidebar-cover);
    background-blend-mode: overlay, normal;
    background-size: cover, 100% 260%;
    border-radius: 0;
}
 
#interwiki .heading {
    color: #fff;
    border: groove 0.5rem #4D4D4D;
    background-color: #2c2e2e;
    background-image: var(--gradient-sidebar-txt-line);
}
 
#interwiki .heading p {
    width: 100%;
    text-align: center;
    font-size: 120% !important;
}
 
#interwiki div.menu-item a {
    color: #fff;
    text-decoration: none;
    padding: 0.2rem 0.5rem;
}
 
#interwiki .side-block div.menu-item a:first-of-type {}
 
#interwiki .side-block div.menu-item {
    margin: 0.2rem 0;
}
 
.side-block div.menu-item img {
    display: none;
}
 
#interwiki div.menu-item a {
    display: block;
    width: 100%;
    background-image: var(--gradient-sidebar-btn);
    -webkit-filter: brightness(1) drop-shadow(2px 3px 1px #000);
    filter: brightness(1) drop-shadow(2px 3px 1px #000);
    border: 0.2rem outset #2c2e2e;
}
 
#interwiki div.menu-item a:hover {
    -webkit-filter: brightness(2) drop-shadow(2px 2px 1px #000);
    filter: brightness(2) drop-shadow(2px 2px 1px #000);
    border: 0.2rem inset #2c2e2e;
    top: 0.2rem;
}
 
@media screen and (max-width: 230px) {
    #interwiki .side-block {
        border: none !important;
    }
}

---

---

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

Footnotes

1. If you write 0, the following custom options will be enabled.

2. Don't delete the quotation marks.

3. And here's a footnote!