블랙 하이라이트이어 테마

블랙 하이라이터 테마 » 블랙 하이라이터 계열 테마 » 블랙 하이라이트이어 테마

테마 색상

Madras--dark-accent36, 65, 103

Chenin--bright-accent255, 185, 97

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

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

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

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

Pacifika--dark-gray-monochrome16, 29, 46

Anzak--medium-accent86, 23, 23

{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}

{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}

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

AAPA Logo

참고: 이 테마는 블랙 하이라이터 기반 테마입니다. 이 테마를 이용하기 위해서는 블랙하이라이터 테마도 임포트해주세요. 자세한 사항은 여기를 참고해주세요.

다른 위키 어디서든:

[[include :scpko:theme:black-highlighter-theme]]
[[include :scpko:theme:black-highlightyear]]

예시

수평줄은 하이픈 5개 "------"를 치면 만들어지며, 따로 들어 있는 곳 (인용 블록 등) 이 없다면 페이지 전체를 가로지릅니다. 이 글에서 섹션을 나누는 줄은 모두 이 수평줄입니다.

제목은 문장 처음에 "+"을 1개부터 6개까지 입력해서 적용할 수 있습니다.

+ 제목

탭뷰입니다.

인용 블록입니다. 문장 처음에 ">"를 붙여서 만들 수 있습니다.
다른 텍스트

요건 수평줄

블록 속의 블록

그리고 또 블록¹

인용 블록 색상은 5개나 있습니다. 검정(black) 기본 색상, 파랑(blue), 분홍(pink), 금색(gold), 보라(purple). 아래 코드를 이용해서 이용할 수 있습니다.

[[div class="blue"]]

[[div class="pink"]]

[[div class="gold"]]

[[div class="purp"]]

이건	표입니다
어떤 식으로	만드는 건진
다 아시죠

헤더 글꼴은 Russo One과 지마켓산스입니다.
제목 글꼴은 Exo와 닉스곤체입니다.
고정폭 글꼴은 PT Mono와 둥근모 입니다.

주²

+ Show component code

- Hide component code

#side-bar {
    /* ===SECONDARY & TERTIARY COLORS=== */
    /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--swatch-menubg-medium-color);
    --swatch-alternate-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);
 
    /* ===SIDE-BAR ELEMENTS=== */
 
    /* ===SIDE-BAR GENERAL=== */
    --sidebar-bg-color: var(--swatch-menubg-dark-color);
    --sidebar-resources-bg-color: 0, 0, 0, 0;
    --sidebar-media-bg-color: 0, 0, 0, 0;
 
    /* ===SIDEBLOCK MENU=== */
    --sideblock-heading-border-color: var(--bright-accent);
    --sideblock-heading-bg-color: 0, 0, 0, 0;
    /* Transparent */
    --sideblock-heading-text-color: var(--swatch-text-tertiary-color);
 
    /* ===MENU-ITEMS=== */
    --sidebar-border-color: var(--swatch-primary), 0.08;
    --sidebar-subtest-color: var(--swatch-text-tertiary-color);
 
    --sidebar-links-text: var(--swatch-text-tertiary-color);
    --sidebar-links-hover-bg-color: var(--bright-accent);
    --sidebar-links-hover-text-color: var(--swatch-text-tertiary-color);
 
    /* ===SIDEBAR COLLAPSIBLES=== */
    /*Folded Colors */
    --sidebar-collapsible-fld-link-bg: var(--swatch-primary), 0.25;
    --sidebar-collapsible-fld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
    /*Unfolded Colors */
    --sidebar-collapsible-ufld-link-bg: var(--swatch-primary-darker), 0.25;
    --sidebar-collapsible-ufld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
    /* Unfolded Body Colors */
    --sidebar-collapsible-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-link-hover-color: var(--swatch-text-tertiary-color);
 
    scrollbar-color:
        rgba(var(--swatch-primary-darker), 0.1)
        /* Thumb */
        rgba(var(--swatch-secondary-color), 0.05);
    /* Track */
 
    border-color: rgba(var(--swatch-secondary-color), 0.4);
}
 
/* Hover Scrollbar Behavior */
#side-bar:hover,
#side-bar:active {
    scrollbar-color:
        rgb(var(--swatch-primary-darker), 1)
        /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1);
    /* Track */
}
 
#side-bar:focus-within {
    scrollbar-color:
        rgb(var(--swatch-primary-darker), 1)
        /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1);
    /* Track */
}
 
#side-bar::-webkit-scrollbar-track {
    background-color: rgba(var(--swatch-tertiary-color), 0.8);
}
 
#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
    background-color: rgba(var(--swatch-menubg-dark-color), 0);
}
 
#side-bar .side-block.media a:-webkit-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a:-moz-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a:any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a::before {
    background: rgb(var(--social-color));
}
 
#side-bar .side-block.media a[href*="tiktok"]::before,
#side-bar .side-block.media a[href*="tiktok"]::after {
    transition:
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::before,
#side-bar .side-block.media a[href*="tiktok"]:active::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}
 
#side-bar .side-block.media a[href*="tiktok"]:focus-within::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}
 
#side-bar .side-block.media a[href*="tiktok"]::after {
    --clip-path:
        polygon(0 0,
            0 0,
            0 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::after,
#side-bar .side-block.media a[href*="tiktok"]:active::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a[href*="tiktok"]:focus-within::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a img {
    -webkit-filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
            filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
    transition: -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a:hover img,
#side-bar .side-block.media a:active img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
#side-bar .side-block.media a:focus-within img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
html:not(:lang(cn)) div.scpnet-interwiki-wrapper p::before {
    box-shadow: inherit;
}
 
#side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) {
    -webkit-filter: invert(1);
            filter: invert(1);
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after {
    background-color: rgb(var(--swatch-menubg-dark-color));
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
    mix-blend-mode: lighten;
}

<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
        function sendStyle() {
            try {
                window.parent.window.interwikiFrame.bhlDark();
            } catch(e) {}
        }
        sendStyle();
        </script>
    </body>
</html>

+ Theme Code

- Close

/* Black Highlightyear | To The Stars */
/* 2019 Wikidot Theme */
/* By Rounderhouse, based off Ad Astra theme by Stormbreath and NatVoltaic*/
/* Logo licensed under CC BY SA 3.0 */
/* Header background by NASA, public domain. */
 
/* Fonts */
 
@import url('https://fonts.googleapis.com/css?family=Lato:400,900|PT+Mono|Poppins:600,800');
@import url('https://fonts.googleapis.com/css?family=Exo:400,800');
@import url('https://fonts.googleapis.com/css?family=Russo+One&display=swap');
 
/* All Vars Used */
 
:root {
    /* S-CSS-P Integration */
    /* If you're making a new CSS theme, please include the following three variables at minimum. */
    --theme-base: "nuscp";
    /* must be either "nuscp" or "sigma9" */
    --theme-id: "black-highlightyear-theme";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Black Highlightyear";
    /* set this to your theme's full name */
 
    /* Header */
    --logo-image: url("https://scp-wiki.wdfiles.com/local--files/component:pride-highlighter/tg_logo_blk.svg");
    --header-title: "Ad Astra Per Aspera";
    --header-subtitle: "To The Stars Through Hardship";
 
    /* Typefaces */
    --body-font: 'Lato', sans-serif;
    --header-font: 'Russo One', sans-serif;
    --title-font: 'Exo', sans-serif;
    --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;
 
    /* Standard Colors */
    /* white */
    --white-monochrome: 252, 252, 252;
    /* v light gray for blockquotes and stuff */
    --pale-gray-monochrome: 204, 204, 204;
    /* light accent gray for login status */
    --light-gray-monochrome: 170, 170, 170;
    /* gray */
    --gray-monochrome: 27, 48, 77;
    /* dark accent gray for sidebar background */
    --dark-gray-monochrome: 16, 29, 46;
    /* black */
    --black-monochrome: 12, 12, 12;
    /* pale orange */
    --pale-accent: 255, 185, 97;
    /* bright gold */
    --bright-accent: 255, 185, 97;
    /* maroon */
    --medium-accent: 86, 23, 23;
    /* dark blue */
    --dark-accent: 36, 65, 103;
 
    /* Ad Astra-Specific Accents */
    --purple-accent: 38, 21, 46;
    --gold-accent: 68, 47, 3;
    --pink-accent: 92, 29, 36;
    --alt-accent: 221, 102, 17;
 
    --swatch-primary: var(--pale-accent);
 
    /* ===GENERAL TEXT COLORS=== */
    --swatch-text-light: var(--pale-gray-monochrome);
    --swatch-text-general: var(--swatch-text-light);
 
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--dark-gray-monochrome);
 
    --swatch-topmenu-border-color: var(--swatch-primary);
    --swatch-topmenu-bg-color: var(--medium-accent);
 
    /* ===SECONDARY & TERTIARY COLORS=== */
    /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--dark-gray-monochrome);
    --swatch-tertiary-color: var(--swatch-menubg-medium-color);
    --swatch-alternate-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(--dark-gray-monochrome);
    --swatch-text-tertiary-color: var(--pale-accent);    
 
    --rating-module-button-color: var(--swatch-primary);
    --rating-module-text-color: var(--swatch-primary);
 
    /* Spacing Measurements */
    --offset-from-page-top: 1.2rem;
 
    /* space between the top of the page and the start of the header */
    --background-gradient-color: var(--gray-monochrome);
    --background-gradient-distance: 10rem;
 
    --diagonal-stripes: none;
}
 
/*  ===============================
    ======= SPECIFIC COLORS =======
    ===============================
/* Colors for Buttons, Tabs, Tables, Footnotes Hover/Modal, Etc. */ 
 
:root {
    --swatch-background: var(--dark-gray-monochrome);
}
 
#header {
    /* ===HEADER ELEMENTS=== */
        /* ===HEADER TITLES=== */
        /* Header H1 and H2 colors */
    --swatch-headerh1-color: var(--white-monochrome);
    --swatch-headerh2-color: var(--swatch-primary);
 
    /* ===SEARCH ELEMENT=== */
    --search-icon-color: var(--swatch-primary);
    --search-icon-bg-color: var(--dark-accent);
    --search-icon-hover-color: var(--dark-accent);
    --search-icon-hover-bg-color: var(--swatch-primary);
            /* Focus is when the search box has been clicked on */
    --search-icon-focus-color: var(--dark-accent);
 
        /* ===LOGIN BOX ELEMENT=== */
    --login-username-color: var(--swatch-primary);
    --login-myaccount-color: var(--pale-gray-monochrome);
    --login-myaccount-underline-color: 0,0,0,0;
            /* Dropdown Box when arrow is clicked */
    --login-dropdown-text-color: var(--swatch-text-tertiary-color);
    --login-dropdown-text-hover-color: var(--swatch-text-secondary-color);
}
 
#top-bar {
    /* ===TOPBAR ELEMENTS=== */
 
        /* ===TOPBAR CATEGORIES=== */
    --topmenu-category-color: var(--swatch-text-tertiary-color);
    --topmenu-category-hover-color: var(--swatch-text-tertiary-color);
 
    --mobile-topmenu-sidebar-button-color: var(--swatch-text-tertiary-color);
 
        /* ===DROPDOWN MENU=== */
    --dropdown-bg-color: var(--swatch-primary-darker), 0.9;
    --dropdown-border-color: var(--swatch-primary), 0.5;
    --dropdown-links-color: var(--swatch-text-tertiary-color);
    --dropdown-links-bg-color: 0,0,0,0; /* Transparent */
    --dropdown-links-hover-color: var(--swatch-text-tertiary-color);
    --dropdown-links-hover-bg-color: var(--swatch-primary-darkest);
}
 
#side-bar {
    /* ===SIDE-BAR ELEMENTS=== */
    --swatch-menubg-light-color: var(--swatch-primary);
        /* ===SIDE-BAR GENERAL=== */
    --sidebar-resources-bg-color: 0,0,0,0;
    --sidebar-media-bg-color: 0,0,0,0;
 
        /* ===SIDEBLOCK MENU=== */
    --sideblock-heading-border-color: var(--swatch-primary-darker);
    --sideblock-heading-text-color: var(--swatch-primary);
 
        /* ===MENU-ITEMS=== */
    --sidebar-border-color: var(--swatch-primary), 0.08;
    --sidebar-subtest-color: var(--swatch-primary);
 
    --sidebar-links-text: var(--pale-accent);
    --sidebar-links-hover-bg-color: var(--bright-accent),0.25;
    --sidebar-links-hover-text-color: var(--pale-accent);
}
 
/* ===FOOTER=== */
#footer {
    --footer-bg-color: var(--swatch-primary);
    --footer-link-hover-color: var(--swatch-primary-darkest);
    --footer-link-hover-bg-color: var(--swatch-tertiary-color);
}
 
    /* ===LICENSE AREA=== */
#license-area {
    --license-bg-color: var(--swatch-secondary-color);
    --license-text-color: var(--swatch-text-tertiary-color);
    --license-link-color: var(--swatch-text-tertiary-color);
}
 
#main-content {
    /* ===MAIN CONTENT UI ELEMENTS */
        /* ===UI ICONS=== */
            /* ===PAGE OPTIONS ICONS=== */
    --ui-icon-color: var(--swatch-primary-darker);
    --ui-icon-bg: var(--swatch-primary);
    --ui-icon-hover-color: var(--swatch-primary-darkest);
 
            /* ===TEXT EDITOR ICONS=== */
    --editor-icon-color: var(--swatch-text-tertiary-color);
 
        /* ===TABS=== */
    --tabs-bg: var(--dark-gray-monochrome);
    --tabs-hover-txt: var(--swatch-text-tertiary-color);
    --tabs-bottom-border-color: var(--swatch-primary);
 
    --tabs-content-bg-color: var(--gray-monochrome), 1;
    --tabs-content-border-color: var(--swatch-tertiary-color);
 
        /* ===TABLES=== */
    --tables-header-bg: var(--gray-monochrome), 0.5;
    --tables-header-txt: var(--swatch-text-tertiary-color);
    --tables-border: var(--swatch-tertiary-color);
    --tables-body-bg: var(--dark-gray-monochrome);
 
        /* ===BLOCKQUOTES=== */
    --blockquote-bg-color: var(--purple-accent), 0.25;
    --blockquote-border-color: var(--swatch-alternate-color);
 
        /* ===FOOTNOTES/BIBLIOGRAPHY FOOTER=== */
    --footnotes-footer-bg-color: var(--dark-gray-monochrome);
    --footnotes-footer-colorbar-color: var(--swatch-alternate-color);
    --footnotes-footer-title-bg-color: var(--swatch-alternate-color);
 
        /* ===TOC=== */
    --toc-header-bg-color: var(--swatch-primary);
 
        /* ===PAGE TAGS=== */
    --pagetags-title-bg: var(--swatch-alternate-color);
}
 
/* ===GLOBAL ELEMENTS=== */
:root {
        /* ===UI BUTTONS=== */
    --ui-button-bg: var(--swatch-primary-darker);
    --ui-button-hover-bg: var(--swatch-primary);
    --ui-button-hover-outline: var(--dark-gray-monochrome);
 
        /* ===RATING MODULE=== */
    --rating-module-bg-color: var(--swatch-primary-darker);
    --rating-module-text-color: var(--swatch-primary);
    --rating-module-text-hover-color: var(--swatch-menutxt-dark-color);    
 
        /* ===MODALS=== */
    --modal-header-bg: var(--swatch-primary-darker);
    --modal-header-stripe: var(--dark-gray-monochrome);
 
        /* ===FOOTNOTES HOVER BLOCK=== */
    --hoverblock-header-bg: var(--swatch-alternate-color);
}
 
#skrollr-body {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ablack-highlightyear/hubble.png');
    background-repeat: repeat-x;
    background-size: inherit;
}
 
::-moz-selection {
    background: rgba(var(--swatch-primary));
    color: rgb(var(--swatch-text-dark));
}
 
::selection {
    background: rgba(var(--swatch-primary));
    color: rgb(var(--swatch-text-dark));
}
 
html,
body,
#side-bar:hover {
    scrollbar-color: rgb(var(--bright-accent)) rgb(var(--dark-accent));
}
 
::-webkit-scrollbar,
#side-bar:hover::-webkit-scrollbar {
    background-color: rgb(var(--dark-accent));
}
 
::-webkit-scrollbar-thumb,
#side-bar:hover::-webkit-scrollbar-thumb {
    background-color: rgb(var(--bright-accent));
}
 
.scp-image-block .scp-image-caption {
    background-color: rgb(27, 48, 77);
    color: rgb(var(--bright-accent));
    font-size: .8em;
}
 
h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgb(var(--pale-accent));
}
 
#search-top-box, 
#search-top-box * {
    border-radius: 0 0.5em 0 0.5em;
}
 
#search-top-box input.empty {
    background-color: rgb(var(--medium-accent));
    color: rgb(var(--pale-accent));
}
 
#search-top-box-input,
#search-top-box-input {
    background: rgb(var(--medium-accent));
}
 
span.printuser {
    color: rgb(var(--pale-accent));
}
 
span.h-span {
    color: rgb(var(--pale-accent));
    font-weight: bold;
    word-break: unset;
}
 
#page-title {
    border-color: rgb(var(--pale-accent));
    color: rgb(var(--pale-accent));
    font-variant: small-caps;
    text-transform: uppercase;
}
 
@media only screen and (max-width: 48rem) {
    #header h2 {
        height: 100%;
        overflow: hidden;
        pointer-events: none;
    }
 
    #header h1 span {
        font-size: 75%;
    }
 
    #top-bar {
        font-size: calc(var(--base-font-size)*0.70);
    }
 
    #skrollr-body {
        width: 100%;
        overflow: hidden;
        background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ablack-highlightyear/hubblemobile.png');
        background-size: inherit;
    }
}
 
#side-bar * {
    border-radius: 0 0.75rem 0 0.75rem;
}
 
/* Rating Module */
.page-rate-widget-box {
    padding: .1em;
    border-radius: 0 0.625rem 0 0.625rem;
    box-shadow: 0px 0px 0px 0.125rem rgb(var(--pale-accent));
 
}
 
.page-rate-widget-box .rate-points {
    text-transform: uppercase;
}
 
#page-content .page-rate-widget-box .rateup a, 
#page-content .page-rate-widget-box .ratedown a, 
#page-content .page-rate-widget-box .cancel a,
#page-content .rate-box-with-credit-button > .creditButton > p > a,
#page-content .page-rate-widget-box .rateup a::after, 
#page-content .page-rate-widget-box .ratedown a::after, 
#page-content .page-rate-widget-box .cancel a::after,
#page-content .rate-box-with-credit-button > .creditButton > p > a::after{
    border-radius: 0 0.625rem 0 0.625rem;
}
 
/* Tabs */
.yui-navset .yui-nav a::before,
.yui-navset .yui-nav .selected a::before{
    transition:
        background-color 50ms cubic-bezier(0.4, 0, 0.2, 1), 
        border-radius 150ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        background-color 50ms cubic-bezier(0.4, 0, 0.2, 1), 
        border-radius 150ms cubic-bezier(0.4, 0, 0.2, 1),
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        background-color 50ms cubic-bezier(0.4, 0, 0.2, 1), 
        border-radius 150ms cubic-bezier(0.4, 0, 0.2, 1),
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), 
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
.yui-navset .yui-nav .selected {
    transform: translateY(-0.25em);
    box-shadow: 0 0.25em 0 0 rgb(var(--swatch-primary));
}
 
.yui-navset .yui-nav .selected a::before {
    border-radius: 0 0.625rem 0 0.625rem;
}
 
element>.img {
    border: 0.125rem solid rgb(var(--pale-accent)) !important;
    background-color: transparent !important;
}
 
.hovertip,
.hovertip::before,
.hovertip::after {
    border-radius: 0 1rem 0 1rem;
    box-shadow: 0 0 0 0.25rem rgb(var(--swatch-alternate-color));
}
 
.footnotes-footer,
.bibitems {
    border-radius: 0 1rem 0 1rem;
    box-shadow: inset 0 0 0 0.25rem rgb(var(--swatch-alternate-color));
}
 
/* Code */
.code {
    border: 0.0625rem dashed rgb(var(--gray-monochrome));
    background-color: transparent;
 
    font-family: var(--mono-font);
    font-size: 0.875rem;
}
 
blockquote,
.blockquote,
[class*="blockquote"] {
    border-radius: 0 1em 0 1em;
    box-shadow: 
        inset 0 0 0 0.125rem rgb(var(--swatch-alternate-color)),
        0 0 0 0.125rem rgb(var(--swatch-alternate-color));
}
 
#main-content .page-tags::before {
    border-radius: 0 1em 0 0;
}
 
#main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"])::before {
    border-radius: 0 0.5em 0 0.5em;
}
 
#main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"])::before {
    border-radius: 0 0.5em 0 0.5em;
}
 
#main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"])::before {
    border-radius: 0 0.5em 0 0.5em;
}
 
/* Buttons */
*:not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a,
*:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input,
*:not(.page-rate-widget-box):not(#search-top-box-form) > input.button,
*:not(.page-rate-widget-box):not(#search-top-box-form) > button,
*:not(.page-rate-widget-box):not(#search-top-box-form) > .button,
*:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input,
*:not(.page-rate-widget-box):not(#search-top-box-form) > input.button,
*:not(.page-rate-widget-box):not(#search-top-box-form) > button,
*:not(.page-rate-widget-box):not(#search-top-box-form) > .btn {
    border-radius: 0 1em 0 1em;
}
 
/* code highlighter stuff */
 
.hl-identifier,
.hl-code,
.hl-brackets {
    color: rgb(102, 102, 102);
}
 
.hl-var {
    color: rgb(33, 255, 0);
}
 
.hl-special {
    color: rgb(255, 255, 0);
}
 
.hl-reserved {
    color: rgb(0, 178, 255);
}
 
.hl-number,
.hl-string {
    color: rgb(255, 0, 32);
}
 
del {
    color: rgb(51, 51, 51);
}
 
ins {
    color: rgb(51, 51, 51);
}
 
.close-credits,
.credit-back {
    -webkit-filter: hue-rotate(60deg) brightness(400%);
            filter: hue-rotate(60deg) brightness(400%);
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]) {
    display: inline-block;
    position: relative;
    transform: translateX(0);
    transition: 
        color 150ms ease-in-out,
        box-shadow 200ms ease-in-out,
        transform 200ms ease-in-out;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):hover {
    transform: translateX(1em);
    background-color: rgb(var(--bright-accent));
    box-shadow: 
        0.5ch 0 0 0 rgb(var(--bright-accent)),
        -1.25ch 0 0 0 rgb(var(--bright-accent));
    color: rgb(var(--swatch-primary-darkest));
    text-decoration: underline;
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"])::before {
    content: "> ";
    position: absolute;
    left: 0;
    transform: translateX(-1.25ch);
    transition: transform 200ms ease-in-out;
    opacity: 0;
    color: rgb(var(--swatch-primary-darkest));
    pointer-events: none;
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):hover::before {
    transform: translateX(-1ch);
    opacity: 1;
}
 
/* Ayer's Info Module */
:root {
    --barColour: rgb(var(--medium-accent));
    --linkColour: rgb(var(--pale-accent));
}
 
.info-container .collapsible-block-unfolded {
    border-color: rgb(var(--pale-accent));
}
 
/* PAGE ELEMENTS */
.blue blockquote {
    background-color: rgb(var(--gray-monochrome));
}
 
.pink blockquote {
    background-color: rgb(var(--pink-accent));
}
 
.gold blockquote {
    background-color: rgb(var(--gold-accent));
}
 
.purp blockquote {
    background-color: rgb(var(--purple-accent));
}

- Close

+ Show component code

- Hide component code

#side-bar {
    /* ===SECONDARY & TERTIARY COLORS=== */
    /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--swatch-menubg-medium-color);
    --swatch-alternate-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);
 
    /* ===SIDE-BAR ELEMENTS=== */
 
    /* ===SIDE-BAR GENERAL=== */
    --sidebar-bg-color: var(--swatch-menubg-dark-color);
    --sidebar-resources-bg-color: 0, 0, 0, 0;
    --sidebar-media-bg-color: 0, 0, 0, 0;
 
    /* ===SIDEBLOCK MENU=== */
    --sideblock-heading-border-color: var(--bright-accent);
    --sideblock-heading-bg-color: 0, 0, 0, 0;
    /* Transparent */
    --sideblock-heading-text-color: var(--swatch-text-tertiary-color);
 
    /* ===MENU-ITEMS=== */
    --sidebar-border-color: var(--swatch-primary), 0.08;
    --sidebar-subtest-color: var(--swatch-text-tertiary-color);
 
    --sidebar-links-text: var(--swatch-text-tertiary-color);
    --sidebar-links-hover-bg-color: var(--bright-accent);
    --sidebar-links-hover-text-color: var(--swatch-text-tertiary-color);
 
    /* ===SIDEBAR COLLAPSIBLES=== */
    /*Folded Colors */
    --sidebar-collapsible-fld-link-bg: var(--swatch-primary), 0.25;
    --sidebar-collapsible-fld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
    /*Unfolded Colors */
    --sidebar-collapsible-ufld-link-bg: var(--swatch-primary-darker), 0.25;
    --sidebar-collapsible-ufld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
    /* Unfolded Body Colors */
    --sidebar-collapsible-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-link-hover-color: var(--swatch-text-tertiary-color);
 
    scrollbar-color:
        rgba(var(--swatch-primary-darker), 0.1)
        /* Thumb */
        rgba(var(--swatch-secondary-color), 0.05);
    /* Track */
 
    border-color: rgba(var(--swatch-secondary-color), 0.4);
}
 
/* Hover Scrollbar Behavior */
#side-bar:hover,
#side-bar:active {
    scrollbar-color:
        rgb(var(--swatch-primary-darker), 1)
        /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1);
    /* Track */
}
 
#side-bar:focus-within {
    scrollbar-color:
        rgb(var(--swatch-primary-darker), 1)
        /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1);
    /* Track */
}
 
#side-bar::-webkit-scrollbar-track {
    background-color: rgba(var(--swatch-tertiary-color), 0.8);
}
 
#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
    background-color: rgba(var(--swatch-menubg-dark-color), 0);
}
 
#side-bar .side-block.media a:-webkit-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a:-moz-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a:any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a::before {
    background: rgb(var(--social-color));
}
 
#side-bar .side-block.media a[href*="tiktok"]::before,
#side-bar .side-block.media a[href*="tiktok"]::after {
    transition:
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::before,
#side-bar .side-block.media a[href*="tiktok"]:active::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}
 
#side-bar .side-block.media a[href*="tiktok"]:focus-within::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}
 
#side-bar .side-block.media a[href*="tiktok"]::after {
    --clip-path:
        polygon(0 0,
            0 0,
            0 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::after,
#side-bar .side-block.media a[href*="tiktok"]:active::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a[href*="tiktok"]:focus-within::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a img {
    -webkit-filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
            filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
    transition: -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a:hover img,
#side-bar .side-block.media a:active img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
#side-bar .side-block.media a:focus-within img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
html:not(:lang(cn)) div.scpnet-interwiki-wrapper p::before {
    box-shadow: inherit;
}
 
#side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) {
    -webkit-filter: invert(1);
            filter: invert(1);
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after {
    background-color: rgb(var(--swatch-menubg-dark-color));
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
    mix-blend-mode: lighten;
}

<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
        function sendStyle() {
            try {
                window.parent.window.interwikiFrame.bhlDark();
            } catch(e) {}
        }
        sendStyle();
        </script>
    </body>
</html>

+ 테마 코드

en 테마

페이지 내역: 49, 마지막 수정: 22 Aug 2021 10:41

편집 평가 (+3) 태그 토론하기 (1) 내역 파일 인쇄 사이트 도구 + 설정

SCP 재단

확보, 격리, 보호

테마 색상

참고: 이 테마는 블랙 하이라이터 기반 테마입니다. 이 테마를 이용하기 위해서는 블랙하이라이터 테마도 임포트해주세요. 자세한 사항은 여기를 참고해주세요.

예시

제목 1단계

제목 2단계

제목 3단계

제목 4단계

제목 5단계

제목 6단계