Theme Tổ Chức SCP Trung Quốc In-Universe

Bảng Màu Theme

Tundora--gray-monochrome(72,66,66)

Vermilion--bright-accent(203,90,204)

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

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

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

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

Gallery--pale-gray-monochrome(234,224,224)

Nobel--light-gray-monochrome(160,150,150)

Bright Red--medium-accent(171,0,5)

Rosewood--dark-accent(80,0,2)

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

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

Logo chi nhánh Trung Quốc

Hướng dẫn

Lưu ý: Đây là theme dựa trên Black Highlighter. Bạn sẽ cần import cả theme Black Highlighter để sử dụng theme này. Để tìm hiểu thêm bấm vào đây.

Để sử dụng theme này, thêm đoạn sau vào bài viết:

[[include :scp-vn:theme:black-highlighter-theme]]
[[include :scp-vn:theme:ch-scp-theme]]

Nếu đang dùng Tiêu Đề Giữa hãy sử dụng theo cách này:

[[include :scp-vn:theme:black-highlighter-theme]]
[[include :scp-vn:theme:ch-scp-theme]]
[[include :scp-vn:component:centered-header-bhl |ch-scp=--]]]

Ví dụ

Một dòng kẻ ngang có thể được tạo với 5 dấu gạch ngang "-----" và giãn ra cả trang nếu nó không được đặt trong bất kì thứ gì (ví dụ một blockquote). Các đường chia phần của tài liệu là các dòng kẻ ngang.

---

Đề mục có thể được tạo bằng cách đặt giữa một và sáu dấu cộng "+" ở đầu dòng

+ Đề mục

Đề mục 1

Đề mục 2

Đề mục 3

Đề mục 4

Đề mục 5

Đề mục 6

Tab

Đây là tab.

Tabb

Nhìn này, có thêm chữ.

Thật kỳ.

Tab Dài

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Đây là tab dài. Nó có rất nhiều chữ.

Tab Trống

Tab Trống

Tab Trống

Tab Trống

Tab Trống

Tab Trống

Đây là blockquote, tạo bằng cách đưa "> " vào đầu mỗi dòng.
Thêm chữ

---

Đó là một dòng kẻ ngang

Blockquote trong blockquote

Đây là cái	bảng
Bạn cần biết	cách làm bảng
rồi chứ

---

+ Mã nguồn

/* Fonts */
 
@import url("https://use.typekit.net/rbw6esf.css");
 
/* All Vars Used */
@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 "nuscp" or "sigma9" */
     --theme-id: "chscp-theme";
     /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
     --theme-name: "Theme BHL Trung Quốc";
     /* set this to your theme's full name */
 
     /* Header */
     --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/scpchlogonotagline.png");
     --header-title: "Tổ Chức";
     --header-subtitle: " ";
 
     /* Typefaces */
     --header-font: great-primer-sc, 'Poppins', sans-serif;
     --title-font: great-primer-sc, 'Poppins', sans-serif;
     --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;
 
     /* Standard Colors */
     --white-monochrome: 252, 252, 252;
     /* white */
     --pale-gray-monochrome: 234, 224, 224;
     /* v light gray for blockquotes and stuff */
     --light-gray-monochrome: 160, 150, 150;
     /* light accent gray for login status */
     --gray-monochrome: 72, 66, 66;
     /* gray */
     --dark-gray-monochrome: 0, 0, 0;
     /* dark accent gray for sidebar background */
     --black-monochrome: 0, 0, 0;
     /* black */
     --bright-accent: 195, 7, 7;
     /* bright red */
     --medium-accent: 171, 0, 5;
     /* medium red */
     --dark-accent: 80, 0, 2;
     /* dark red */
     --newpage-color: 210, 74, 32;
     /* pale orange */
 
     /* Primary Theme Colors */
     --swatch-background: var(--white-monochrome);
     --swatch-primary: var(--bright-accent);
     --swatch-primary-darker: var(--medium-accent);
     --swatch-primary-darkest: var(--dark-accent);
     /* Primary Text Colors */
     --swatch-text-dark: var(--black-monochrome);
     --swatch-text-light: var(--white-monochrome);
     --swatch-important-text: var(--bright-accent);
 
     /* Primary Menu Colors */
     --swatch-menubg-color: var(--white-monochrome);
     --swatch-menubg-light-color: var(--pale-gray-monochrome);
     --swatch-menubg-medium-color: var(--light-gray-monochrome);
     --swatch-menubg-medium-dark-color: var(--gray-monochrome);
     --swatch-menubg-dark-color: var(--dark-gray-monochrome);
     --swatch-menubg-black-color: var(--black-monochrome);
     --swatch-menubg-hover-color: var(--black-monochrome);
     --swatch-menutxt-dark-color: var(--black-monochrome);
     --swatch-menutxt-light-color: var(--white-monochrome);
     --swatch-border-color: var(--black-monochrome);
     /* Primary Header Colors */
     --swatch-headerh1-color: var(--white-monochrome);
     --swatch-headerh2-color: var(--white-monochrome);
     --swatch-topmenu-border-color: var(--black-monochrome);
     --swatch-topmenu-bg-color: var(--gray-monochrome);
 
     --rating-module-button-color: var(--black-monochrome);
     --rating-module-text-color: var(--swatch-menutxt-dark-color);
 
     /* Header Gradients */
 
     --gradient-header: linear-gradient(to top,
     rgba(var(--bright-accent), 0.97) 0%,
     rgb(var(--medium-accent)) 70%,
     rgb(var(--medium-accent)) 100%);
     --gradient-topmenu: linear-gradient(to bottom,
     white 0%,
     white var(--header-height-on-desktop),
     rgba(var(--swatch-topmenu-border-color), 0.05) var(--header-height-on-desktop),
     rgba(var(--swatch-topmenu-bg-color), 0.05) calc(var(--header-height-on-desktop) + 0.125rem),
     rgba(var(--swatch-topmenu-bg-color), 0.05) calc(100% - 0.125rem),
     rgba(var(--swatch-topmenu-bg-color), 0.05) calc(100% - 0.125rem),
     rgba(var(--swatch-topmenu-border-color), 0.05) 100%);
     --gradient-topmenu-mobile: linear-gradient(to bottom,
     rgba(208, 208, 208, 1) 0,
     rgba(217, 217, 217, 1) 0.125rem,
     rgba(217, 217, 217, 1) calc(3rem - 0.125rem),
     rgba(217, 217, 217, 1) calc(3rem - 0.125rem),
     rgba(208, 208, 208, 1) 3rem);
     --diagonal-stripes: initial;
     --gradient-sidemenu-header: linear-gradient(10deg,
     rgba(var(--dark-accent), 0.85) 0%,
     rgba(var(--bright-accent), 0.95) 100%);
     --gradient-background: linear-gradient(to bottom,
     rgba(var(--background-gradient-color), 1) calc(calc(0 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.987) calc(calc(0.8 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.951) calc(calc(2.9 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.896) calc(calc(6.4 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.825) calc(calc(11 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.741) calc(calc(16.6 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.648) calc(calc(23.1 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.55) calc(calc(30.4 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.45) calc(calc(38.3 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.352) calc(calc(46.7 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.259) calc(calc(55.4 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.175) calc(calc(64.4 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.104) calc(calc(73.5 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.049) calc(calc(82.5 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.013) calc(calc(91.4 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0) calc(calc(100 / 100) * var(--background-gradient-distance)));
     --header-background-image-size: 100% var(--header-height-on-desktop);
 
     /* Spacing Measurements */
     --offset-from-page-top: 0.75rem;
     /* space between the top of the page and the start of the header */
     --body-width-on-desktop: 44.25rem;
     --sidebar-width-on-desktop: calc(var(--base-font-size)*16);
     --sidebar-width-on-mobile: 14rem;
     --scrollbar-width: 0.5625rem;
     --border-styling: solid 0.0625rem rgb(var(--swatch-border-color));
     --border-radius-width: 0.0625rem;
 
     /* Box-Shadow 1px Borders */
     --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color));
     --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color));
     --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color));
     --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color));
     --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color));
 
     /* Sidebar */
     --sidebar-transition-timing: 0.5s ease-in-out 0.1s;
     --sidebar-internal-border-thickness: 0.125rem;
 
     --background-gradient-color: 215, 215, 215;
     --background-gradient-distance: 40rem;
    }
 
    a,
    a:active,
    a:visited {
     color: rgb(var(--swatch-primary-darker));
    }
 
    #header {
     background-position: left .75rem top .65rem;
     background-size: auto 6.375rem;
     -webkit-filter: unset;
     filter: unset;
    }
 
    #header h1 a {
     margin-left: 7.75rem;
    }
 
    #header h1 a::before {
     text-shadow: unset;
    }
 
    #header h2 {
     background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/scpchtag.png');
     background-repeat: no-repeat;
     background-clip: border-box;
     background-size: contain;
     top: 4.5rem;
     left: 8rem;
     height: 2rem;
    }
 
    #top-bar {
     margin: var(--header-height-on-desktop) 0 1.75rem 0;
     height: 1.875rem;
     font-size: calc(var(--base-font-size) * .75);
    }
 
    #top-bar div.top-bar>ul>li>a,
    #top-bar div.mobile-top-bar>ul>li>a {
     color: rgb(var(--swatch-menutxt-dark-color)) !important;
     font-family: var(--header-font);
     text-transform: uppercase;
    }
 
    #top-bar div.top-bar>ul>li:hover>a,
    #top-bar div.top-bar>ul>li:focus-within>a,
    #top-bar div.mobile-top-bar>ul>li:hover>a,
    #top-bar div.mobile-top-bar>ul>li:focus-within>a {
     color: rgb(var(--swatch-menutxt-light-color)) !important;
    }
 
    #top-bar div.top-bar>ul>li:hover,
    #top-bar div.top-bar>ul>li:focus-within,
    #top-bar div.mobile-top-bar>ul>li:hover,
    #top-bar div.mobile-top-bar>ul>li:focus-within {
     background-color: rgba(var(--swatch-primary-darker), 0.93);
     background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png');
     background-blend-mode: overlay;
     background-size: auto 5.625rem;
    }
 
    #top-bar div.top-bar>ul>li>ul,
    #top-bar div.mobile-top-bar>ul>li>ul {
     margin-top: 1.875rem;
     background: rgba(var(--swatch-primary-darker), 0.93);
     background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png');
     background-blend-mode: overlay;
     background-size: auto 5.625rem;
    }
 
    #top-bar div.top-bar>ul>li>a::before {
     height: calc(0.0625rem * 3);
    }
 
    #top-bar div.top-bar>ul>li>a::after {
     height: calc(0.0625rem * 2);
    }
 
    #top-bar div.top-bar>ul>li>a::before,
    #top-bar div.top-bar>ul>li>a::after {
     background-color: rgba(var(--swatch-border-color), 1);
    }
 
    #top-bar div.top-bar>ul>li>ul>li>a,
    #top-bar div.mobile-top-bar>ul>li>ul>li>a {
     font-weight: 600;
     font-size: calc(var(--base-font-size) * 0.9);
    }
 
    #skrollr-body::before {
     background-image:
     linear-gradient(to bottom,
     rgba(var(--bright-accent), 0.5) 0,
     rgba(var(--bright-accent), 0.25) 10rem,
     rgba(var(--white-monochrome), 1) 22rem,
     rgba(var(--white-monochrome), 1) 100%);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center top var(--final-header-height-on-desktop);
     content: " ";
     width: 100%;
     height: 100%;
     position: absolute;
     pointer-events: none;
     z-index: -2;
    }
 
    #container-wrap-wrap::before {
     content: " ";
     width: 100%;
     height: 25%;
     position: absolute;
     top: var(--final-header-height-on-desktop);
     background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png');
     background-blend-mode: overlay;
     background-size: 5.625rem;
     background-repeat: repeat;
     background-position: 0 0;
     pointer-events: none;
     z-index: -1;
    }
 
    div#container-wrap {
     background-image: unset;
    }
 
    div#container-wrap::before {
     background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ach-scp-theme/subtle_white_mini_waves.png');
     background-size: auto;
     background-repeat: repeat;
     background-position: 0 0;
     background-blend-mode: soft-light;
     content: " ";
     height: var(--final-header-height-on-desktop);
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     pointer-events: none;
    }
 
    #side-bar {
     overflow-y: auto;
     overflow-x: hidden;
    }
 
    #side-bar .close-menu::before {
     font-family: var(--title-font) !important;
    }
 
    #side-bar .heading,
    #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded {
     letter-spacing: .15em;
    }
 
    #side-bar .heading p,
    #side-bar .side-block>.collapsible-block .collapsible-block-link {
     font-family: var(--header-font);
     text-shadow: unset;
    }
 
    .code {
     font-size: calc(var(--base-font-size) * 0.8);
    }
 
    textarea,
    input {
     font-family: var(--body-font);
    }
 
    #search-top-box-form input[type="submit"] {
     font-size: calc(var(--base-font-size) * 0.9);
    }
 
    #page-title,
    .meta-title,
    .meta-title span {
     font-family: var(--header-font);
     color: rgb(255, 237, 6);
    }
 
    /* Sky Sermon Nav CSS */
 
    .skysermon-nav {
     --text-shadow: rgba(var(--black-monochrome), 0.35);
     --box-shadow: rgb(var(--gray-monochrome));
     --border-color: rgb(var(--newpage-color));
     color: rgb(var(--white-monochrome));
     text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow);
     border-radius: 0.0625rem;
     border: double 0.188rem var(--border-color);
     background-color: rgb(var(--bright-accent));
     box-shadow: 0.09375rem 0.09375rem 0.188rem var(--box-shadow);
     padding: 0 0.125rem;
     margin: 0.625rem 0 0.938rem;
     margin-bottom: 1.250rem;
    }
 
    .skysermon-nav a {
     color: rgb(255, 237, 6);
     display: inline-block;
     position: relative;
     width: 100%;
     height: 100%;
     padding-top: 0.45em;
     padding-bottom: 0.35em;
    }
 
    .skysermon-nav a::before {
     display: flex;
     position: absolute;
     align-items: center;
     height: 100%;
     font-size: calc(var(--base-font-size) * 1.1);
     line-height: calc(var(--base-font-size) * 0.7);
     font-weight: 800;
     top: 0;
    }
 
    .skysermon-nav .footer-wikiwalk-nav {
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 400;
     letter-spacing: 0.025em;
     font-size: 75%;
    }
 
    .skysermon-nav .footer-wikiwalk-nav * {
     line-height: 1em;
    }
 
    .skysermon-nav .footer-wikiwalk-nav .center {
     flex-basis: 8em;
     text-align: center;
    }
 
    .skysermon-nav .footer-wikiwalk-nav .left,
    .skysermon-nav .footer-wikiwalk-nav .right {
     flex-basis: calc(50% - 5em);
     display: inline-flex;
     align-items: center;
     font-size: calc(var(--base-font-size) * 0.8);
     position: relative;
    }
 
    .skysermon-nav .footer-wikiwalk-nav .left {
     text-align: right;
     justify-content: flex-end;
     border-right: 0.0625rem solid rgb(var(--black-monochrome));
     padding-left: 1em;
     padding-right: 0.5em;
     margin: 0.35em 0 0.35em 0.35em;
    }
 
    .skysermon-nav .left>a::before {
     content: "«";
     left: -0.75em;
     transition: left 1s ease-in-out;
     -webkit-animation: bounce-left 1.7s infinite;
     animation: bounce-left 1.7s infinite;
     -webkit-animation-play-state: paused;
     animation-play-state: paused;
    }
 
    .skysermon-nav .left>a:hover::before {
     -webkit-animation-play-state: running;
     animation-play-state: running;
    }
 
    .skysermon-nav .footer-wikiwalk-nav .right {
     text-align: left;
     justify-content: flex-start;
     border-left: 0.0625rem solid rgb(var(--black-monochrome));
     padding-left: 0.5em;
     padding-right: 1em;
     margin: 0.35em 0.35em 0.35em 0;
    }
 
    .skysermon-nav .right>a::before {
     content: "»";
     right: -0.75em;
     transition: left 1s ease-in-out;
     -webkit-animation: bounce-right 1.7s infinite;
     animation: bounce-right 1.7s infinite;
     -webkit-animation-play-state: paused;
     animation-play-state: paused;
    }
 
    .skysermon-nav .right>a:hover::before {
     -webkit-animation-play-state: running;
     animation-play-state: running;
    }
 
    /* Rating Box */
 
    .page-rate-widget-box .rate-points,
    .page-rate-widget-box .rateup,
    .page-rate-widget-box .ratedown,
    .page-rate-widget-box .cancel,
    .page-rate-widget-box .rateup a,
    .page-rate-widget-box .ratedown a,
    .page-rate-widget-box .cancel a {
     font-weight: 400;
    }
 
    @media only screen and (max-width: 56.25rem) {
     #header h1 {
     font-size: calc(var(--base-font-size) * 1.25);
     }
 
     #header h1 a {
     margin-top: calc(0.8rem + var(--offset-from-page-top));
     }
 
     #header h2 {
     height: 1.15rem;
     }
 
     #side-bar {
     left: calc(-17rem - var(--scrollbar-width));
     }
 
     #side-bar:target {
     overflow-x: hidden;
     }
 
     #top-bar>div.mobile-top-bar>div.open-menu>p>a {
     color: rgb(var(--swatch-menutxt-dark-color)) !important;
     }
 
     #skrollr-body:target #side-bar {
     left: 0;
     }
 
     #side-bar:target .close-menu {
     margin-left: calc(15.5rem + 2 * var(--scrollbar-width) + 0.125rem);
     }
 
     #skrollr-body:target #container {
     transform: none;
     }
 
     #skrollr-body:target #container-wrap-wrap {
     overflow: hidden;
     }
 
     #top-bar div.top-bar>ul>li>ul,
     #top-bar div.mobile-top-bar>ul>li>ul {
     transform: translate(-50%, 0);
     display: flex;
     }
 
     #top-bar div.mobile-top-bar>ul>li>ul>li {
     max-height: calc(99vh / 15);
     max-width: calc(98vw + 1px);
     display: flex;
     width: calc(98vw + 1px);
     flex-grow: 2;
     flex-basis: calc(98vw / 2);
     }
 
     #top-bar div.top-bar>ul>li>ul>li>a,
     #top-bar div.mobile-top-bar>ul>li>ul>li>a {
     height: 100%;
     width: 100%;
     line-height: 1em;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: calc(var(--base-font-size) * 0.8);
     }
 
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(1)>a::before,
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(11)>a::before,
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(21)>a::before,
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(31)>a::before,
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(41)>a::before,
     #top-bar>div.mobile-top-bar>ul>li:nth-child(1)>ul>li:nth-child(51)>a::before {
     display: flex;
     align-items: center;
     justify-content: center;
     }
    }
 
    @-webkit-keyframes bounce-left {
     0% {
     left: -0.75em;
     }
 
     50% {
     left: -0.50rem;
     }
 
     100% {
     left: -0.75em;
     }
    }
 
    @keyframes bounce-left {
     0% {
     left: -0.75em;
     }
 
     50% {
     left: -0.50rem;
     }
 
     100% {
     left: -0.75em;
     }
    }
 
    @-webkit-keyframes bounce-right {
     0% {
     right: -0.75em;
     }
 
     50% {
     right: -0.50rem;
     }
 
     100% {
     right: -0.75em;
     }
    }
 
    @keyframes bounce-right {
     0% {
     right: -0.75em;
     }
 
     50% {
     right: -0.50rem;
     }
 
     100% {
     right: -0.75em;
     }
    }
}