曝光 主题版式

使用方法

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

这是 Cyantreuse 和 stormbreath 的曝光版式的黑标版本。此版式的设计目的是为了用于“曝光”设定。

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

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

若你不想使用页眉上闪烁的警灯，在你的作品任意处添加如下语法：

[[module css]]
div#extra-div-1,div#extra-div-2{display:none;}
[[/module]]

示例

由 Cyantreuse 设计的新的 SCP 标志，由 Sraosha 汉化。

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

---

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

+ 标题

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

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

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

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

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

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

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

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

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

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

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

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

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

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

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

更多文字

---

一条分割线

嵌套引用块

[[div class="gray1"]]
> 引用块灰色样式其一
[[/div]]

[[div class="gray2"]]
> 引用块灰色样式其二
[[/div]]

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

---

+ 显示版式代码

@supports(display: grid) {
    :root {
        /* ===S-CSS-P INTEGRATION=== */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighter";
        /* must be either "black-highlighter" or "sigma9" */
        --theme-id: "expose";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "Expose Theme";
        /* set this to your theme's full name */
 
        /* ===HEADER ELEMENTS=== */
        --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Abroken-masquerade/new_scp_logo.png");
        --header-subtitle: "Safety Continues in Public";
 
        /* ===STANDARD THEME COLORS=== */
        --pale-accent: 255, 7, 7;
        --bright-accent: 214, 0, 0;
        --medium-accent: 119, 119, 119;
        --dark-accent: 42, 42, 42;
 
        /* ===HEADER GRADIENT=== */
        --header-gradient-color-bottom: 66, 66, 66;
        --header-gradient-color-middle: var(--black-monochrome);
        --header-gradient-color-top: var(--black-monochrome);
 
        /* ===TOPBAR GRADIENT=== */
        --swatch-topmenu-border-color: var(--gray-monochrome);
        --swatch-topmenu-bg-color: var(--very-light-gray-monochrome);
 
        /* ===LINK COLORS=== */
        --link-color: var(--swatch-primary);
        --visited-link-color: var(--swatch-primary);
        --hover-link-color: var(--pale-accent);
    }
 
    :root:lang(cn) {
        /* ===HEADER ELEMENTS=== */
        --logo-image: url("https://scp-wiki-cn.wdfiles.com/local--files/theme%3Abroken-masquerade/new_scp_logo.png");
        --header-subtitle: "安全 持续 公众";
    }
 
    /* ===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-color: rgb(var(--swatch-primary-darker),0.05);
    }
 
    /* ===HEADER ELEMENTS=== */
 
    #header {
        --swatch-headerh2-color: var(--pale-accent);
    }
 
    #header h1 a,
    #header h2 span {
        margin-left: 11rem;
    }
 
    /* ===TOPBAR ELEMENTS=== */
 
    #top-bar {
        /* ===TOPBAR CATEGORIES=== */
        --topmenu-category-color: var(--swatch-menutxt-dark-color);
        --topmenu-category-hover-color: var(--swatch-menutxt-dark-color);
        --mobile-topmenu-sidebar-button-color: var(--light-gray-monochrome);
 
        /* ===DROPDOWN MENU=== */
        --dropdown-bg-color: var(--swatch-menubg-color), 0.9;
        --dropdown-links-color: var(--swatch-menutxt-dark-color);
        --dropdown-links-hover-color: var(--swatch-menutxt-light-color);
    }
 
    #header div[class*="top-bar"] > ul > li:hover,
    #header div[class*="top-bar"] > ul > li:active,
    #header div[class*="top-bar"] > ul > li:focus-within {
        background-color: rgb(var(--swatch-menubg-color));
    }
 
    /* ===BLOCKQUOTE=== */
 
    .gray1 > blockquote,
    .gray1 > .blockquote,
    .gray1 > div.blockquote,
    .gray1 > [class*="blockquote"],
    .gray2 > blockquote,
    .gray2 > .blockquote,
    .gray2 > div.blockquote,
    .gray2 > [class*="blockquote"] {
        --blockquote-border-color: var(--bright-accent);
        margin: 1em 0;
        border-radius: 0.625rem;
        box-shadow:
            inset 0 0 0 0.1875rem rgb(var(--blockquote-border-color)),
            inset 0.1875rem 0 0 0 rgb(var(--blockquote-border-color)),
            inset 0 -0.1875rem 0 0 rgb(var(--blockquote-border-color));
    }
 
    .gray1 > blockquote,
    .gray1 > .blockquote,
    .gray1 > div.blockquote,
    .gray1 > [class*="blockquote"] {
        --blockquote-bg-color: 244, 244, 244, 1;
    }
 
    .gray2 > blockquote,
    .gray2 > .blockquote,
    .gray2 > div.blockquote,
    .gray2 > [class*="blockquote"] {
        --blockquote-bg-color: 232, 232, 232, 1;
    }
 
    /* ===Ayer's Info Bar=== */
 
    .info-container {
        --barColour: rgb(var(--link-color));
    }
 
    /* ===Flashing Lights=== */
 
    div#extra-div-1,
    div#extra-div-2 {
        position: absolute;
        top: 2.5rem;
        width: 6rem;
        height: 1rem;
        border-radius: 0.0625rem;
    }
 
    div#extra-div-1 {
        --light-on: -1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 0 0.0625rem 1.5rem rgba(255, 0, 0, 1) inset;
        --light-off: -0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0 0.0625rem 0.125rem rgba(255, 0, 0, 0.2) inset;
        left: 55%;
        background-color: rgba(255, 0, 0, 0.75);
        -webkit-animation: flash-1 1s infinite;
        -moz-animation: flash-1 1s infinite;
        -o-animation: flash-1 1s infinite;
        animation: flash-1 1s infinite;
    }
 
    @keyframes flash-1 {
        0% {
            opacity: 0.2;
            box-shadow: var(--light-off);
        }
        12.5% {
            opacity: 1;
            box-shadow: var(--light-on);
        }
        25% {
            opacity: 0.2;
            box-shadow: var(--light-off);
        }
        37.5% {
            opacity: 1;
            box-shadow: var(--light-on);
        }
        50% {
            opacity: 0.2;
            box-shadow: var(--light-off);
        }
        100% {
            opacity: 0.2;
            box-shadow: var(--light-off);
        }
    }
 
    div#extra-div-2 {
        --light-on: -1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 0 0.0625rem 1.5rem rgba(0, 0, 255, 1) inset;
        --light-off: -0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0 0.0625rem 0.125rem rgba(0, 0, 255, 0.2) inset;
        left: -webkit-calc(55% + 6.25rem);
        left: -moz-calc(55% + 6.25rem);
        left: calc(55% + 6.25rem);
        background-color: rgba(0, 0, 255, 0.75);
        -webkit-animation: flash-2 1s infinite;
        -moz-animation: flash-2 1s infinite;
        -o-animation: flash-2 1s infinite;
        animation: flash-2 1s infinite;
    }
 
    @keyframes flash-2 {
        0% {
            opacity: 0.2;
            box-shadow: var(--light-off);
        }
        50% {
            opacity: 0.2;
            box-shadow: var(--light-off);
        }
        62.5% {
            opacity: 1;
            box-shadow: var(--light-on);
        }
        75% {
            opacity: 0.2;
            box-shadow: var(--light-off);
        }
        87.5% {
            opacity: 1;
            box-shadow: var(--light-on);
        }
        100% {
            opacity: 0.2;
            box-shadow: var(--light-off);
        }
    }
 
    /* ===MOBILE FORMATTING=== */
 
    @media only screen and (max-width: 56.25rem) {
        #header {
            background-position: left 0.75rem top 1.1875rem;
            background-size: auto -webkit-calc(var(--header-height-on-desktop) - 2rem);
            background-size: auto -moz-calc(var(--header-height-on-desktop) - 2rem);
            background-size: auto calc(var(--header-height-on-desktop) - 2rem);
        }
 
        div#extra-div-1 {
            max-width: -webkit-calc(100vw - 55%);
            max-width: -moz-calc(100vw - 55%);
            max-width: calc(100vw - 55%);
        }
 
        div#extra-div-2 {
            max-width: -webkit-calc(100vw - 55% - 6.25rem);
            max-width: -moz-calc(100vw - 55% - 6.25rem);
            max-width: calc(100vw - 55% - 6.25rem);
        }
    }
 
    @media only screen and (max-width: 25rem) {
        #header h1 a,
        #header h2 span {
            margin-left: 10rem;
        }
    }
}

:root {
    --bright-accent: 214, 0, 0;
    --medium-accent: 119, 119, 119;
    --dark-accent: 42, 42, 42;
}