소용돌이치는 재 테마

정보

---

소용돌이치는 재 테마(Swirling Ashes Theme )
원작: http://www.scpwiki.com/theme:swirling-ashes
저자: Croquembouche
역자: Salamander724

---

[[iftags +theme -nobhl]]

This component is currently ACTIVE

Usage

On any wiki:

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

블랙 하이라이터 계열 테마

---

Optional Addons

Dark Sidebar

[[include :scp-wiki:component:bhl-dark-sidebar]]

Collapsible Sidebar

[[include :scp-wiki:component:collapsible-sidebar]]

Toggle Sidebar

[[include :scp-wiki:component:toggle-sidebar-bhl]]

Centered Header

[[include :scp-wiki:component:centered-header-bhl]]

What this is

A component that applies the Black Highlighter theme to your article.

This component will apply a stable version of the Black Highlighter theme, but it might break sometimes as it's updated.

Reporting problems

If you've got a Github account, create an Issue here detailing your problem (whether it's technical, or aesthetic, or whatever).

If you don't have a Github account, or if you'd prefer to discuss your issues with someone directly send a PM to preferably Woedenaz or, if he does not respond, Croquembouche.

---

Theme Colors

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

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

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

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

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

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

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

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

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

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

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

Mango Tango--newpage-color(221, 102, 17)

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

Examples

SCP Foundation Logo

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (e.g. 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

This is a tab view.

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.

This empty tab has a really long name for some odd reason. I wonder why? It is very strange.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

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

More text

---

That's a horizontal rule

Nested blockquotes

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

The body, title, and header font is Inter.
The UI font is PT Root UI.
The monospaced font is Recursive.

All fonts are licensed under the SIL Open Font License, Version 1.1

---

[[/iftags]]

[[iftags +구성요소]]

말하자면 제곧내겠네요.
BHL 테마 적용한 글에 어두운 사이드바가 진짜로 있었으면 하는 사람들을 위한 코드입니다.
BHL 코드 바로 뒤에 이렇게 붙여넣어 주세요.
[[include :scpko:component:bhl-dark-sidebar]]

[[/iftags]]

[[iftags +component]]

Pretty self explanatory.
For anyone who really wants the dark sidebar from the O.G. BHL on their articles.
Just add this include AFTER the BHL include:
[[include :scp-wiki:component:bhl-dark-sidebar]]

---

+ Show component code

#interwiki, 
#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-subtext-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 .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));
}

[[/iftags]]

[[iftags +theme]]
This deprecated component no longer does anything. See the new version here: http://scp-wiki.wikidot.com/component:croqstyle
[[/iftags]]

이게 뭡니까?

이것은 쥐구멍 카논 항목에서 사용하려고 설계된 소용돌이치는 재 테마입니다.

만든 사람: Croquembouche, 이름은 faminepulse가 2020년 9월 미국 오리건주 하늘을 묘사한 것에서 따옴.

제목 칸은 1분 주기로 밤낮을 반복합니다. 3일에 한 번 잠시 안개가 걷힙니다.

사용법

이 테마는 블랙 하이라이터를 필수로 사용해야 하며, BHL 어두운 사이드바를 선택적으로 사용할 수 있습니다.

[[include :scpko:theme:black-highlighter-theme]]
[[include :scpko:component:bhl-dark-sidebar]]
[[include :scpko:theme:swirling-ashes]]

제목 수정용 태그

[[module CSS]]
:root:lang(ko) {
--header-title: "SCP 재단";
--header-subtitle: "확보, 격리, 보호";
}
[[/module]]

테마 색상

산업폐기물색--dark-accentrgb(63, 9, 143)

배수관 밑바닥색--dark-gray-monochromergb(26, 24, 26)

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

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

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

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

여명색--sky-at-dawn

아침색--sky-at-morning

낮색--sky-at-daytime

저녁색--sky-at-evening

땅거미색--sky-at-dusk

밤색--sky-at-night

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

소스코드

＋소스코드 보기

@import url(http://www.scpwiki.com/theme:swirling-ashes/code/1);
 
/* - == === BHL VARIABLES === == - */
 
/* This is a BHL theme, which is configuration-based, so the root element
 * contains variables that will affect the whole theme
 */
:root:lang(ko) {
  /* S-CSS-P integration */
  --theme-base: "black-highlighter";
  --theme-id: "swirling-ashes";
  --theme-name: "Swirling Ashes Theme";
 
  /* Header adjustments */
  --header-title: "쥐구멍";
  --header-subtitle: "끝에서의 시작";
 
}