霓虹敌托邦主题版式

这是什么？

霓虹敌托邦版式是视觉上基于赛博朋克美学以及 1982 年的电影《银翼杀手》的黑标暗色主题版式。你可以将其用在任何文章之中……但是最好得有那种带有冷漠无情、人口过剩但是又有尖端科技发展氛围的文章。或者说你喜欢银翼杀手。

主题颜色

Neon Blue--neon-blue(15, 227, 229)

Tears In Rain--tears-n-rain(73, 177, 178)

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

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

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

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

Deckard's Red--deckard-red(191, 0, 0)

Blade Runner--blade-runner(163, 0, 0)

Replicant, Retired--retired-replicant(77, 22, 25)

Display Light--display-green(23, 230, 16)

Display Medium--tyrell-green(7, 53, 0)

Display Dark--display-dark(1, 18, 6)

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

基金会远程访问数据库（Foundation Remote Access Database，FRAD）标志

替代配色方案

蓝 - 绿 - 黄 - 红变体

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

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

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki-cn:theme:cyberpunk theme-number=1]]

选择你的颜色变体

将 include 中的 theme-number 更改为你需要的颜色。

蓝色：[[include :scp-wiki-cn:theme:cyberpunk theme-number=1]]
绿色：[[include :scp-wiki-cn:theme:cyberpunk theme-number=2]]
黄色：[[include :scp-wiki-cn:theme:cyberpunk theme-number=3]]
红色：[[include :scp-wiki-cn:theme:cyberpunk theme-number=4]]

示例

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

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

+ 标题

运用你的想象力，假装这里有乱序文本就行了。

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

更多文字

一条分割线

嵌套引用块

还有一个¹

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

带有特殊的 Div

替代引用块

她就是那个被称为数字死神的人吗？

对。她叫 Piri Vamuletto，这就是本人。

» 展开用法

控制台/终端 Div

基金会
移动式访问终端

│	部门终端由以下公司提供与赞助：
│ │	`▄▀█ █▀▀ █▀█ █▀█ █░█ █▀▀ █░░ ▀█▀ █▀▀ █▀▀ █▄█` `█▀█ █▄▄ █▀▄ █▄█ ▀▄▀ ██▄ █▄▄ ░█░ ██▄ █▄▄ █▀█`
│	`科技带来人道™`
│

>	请输入登录凭据：
	/useraccount VAMULETTO P. liveinthedreamofsalome
>	欢迎，员工 [ #F21E - PIRI VAMULETTO ]。您有 [ 0 ] 条未读消息。
	/open file 视频记录
>	正在加载文件……正在加载文件……
>	文件 [ 视频记录 ] 加载完毕。
>	需求 [ A ] 级权限。
>	开启文件（Y/N）？
	/Y
>	正在开启文件……
>	正在显示到主屏幕上……
>	文件已开启。

» 展开用法


>	请输入登录凭据：
	/useraccount VAMULETTO P. liveinthedreamofsalome

音频/视频记录格式

视频记录——New Schmeling，1982

> 记录开始 <

	Piri 突然左拐进了附近的一条巷子里。尾随她的男人加快了脚步并拐进巷子里。没走几步，他就发现自己的脸被一把韦伯利 Mk. VI 左轮手枪顶着。他举起了双手。
VAMULETTO	说话。
ALEXANDER	这不是数字死神小姐本人嘛。
	Piri 将击锤拉回。J. Alexander 笑了笑。
ALEXANDER	我向你保证，向我开枪会是个错误。
VAMULETTO	从我的视角来看就肯定不是这样了。
ALEXANDER	那继续呗。向一名昆提林公司的高管开枪，你那微不足道的小组织根本就不能阻止我们律师的全面行动。
	Piri 将左轮手枪装回皮套中，James 将双手放回两侧。
ALEXANDER	这才像话嘛。
VAMULETTO	郑重声明，我肯定是会开枪射你的；我只是不觉得你还能在流血的时候做出这么多的解释。
	James 将手伸进口袋中。掏出一张 MO 盘扔给 Piri，后者则空手接住了它。
ALEXANDER	你可能发现这张磁盘上的东西会对你有用……或者对你的组织有用，如果你选择跟他们共享的话。
VAMULETTO	要是说没有个谋杀动机。你想要我做什么呢？你都有够自己开个工厂的网络设备和人手了。自己干吧。
	James 大笑。
ALEXANDER	你看到上面的东西就会懂了。日安，数字死神小姐。
	他迈着轻快的步伐走出了巷子。Piri 翻转 MO 盘并看向侧边的一行标签，“NUYTENS 计划”。她想跑出去追 James，但是他已经消失在 New Schmeling 市中心的喧嚣之中了。

» 展开用法

	在这里描述某些视觉动作。你喜欢视觉动作的，对吧？
说话人	这里是我的发言。非常啰嗦。

标题图片字体为 Strasua（上部）以及 Element（下部）。

标题字体为 Unicephalon / Noto Sans SC。
正文字体为 Jost / Noto Sans SC。
等宽字体为 Bedstead / 幼圆。

其它字体包括：
显示屏/LED 文本字体 Liquid Crystal / HuXiaoBo-ZhenShuai。.
显示屏标志字体以及页眉字体 Element。
对话表格字体 SV Basic Manual / Noto Sans SC。
终端/控制台字体 Connection / VonwaonBitmap 16px。

[[iftags +component]]

What this does

Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.

Does NOT work on Sigma-9. This ONLY functions with Black Highlighter.
Use this component by EstrellaYoshte instead if you intend to use Sigma-9.
If you prefer, there is also a Collapsible Sidebar that functions on both BHL and Sigma-9.
The collapsible sidebar functions via hovering rather than clicking and is slightly more visible than the Toggle Sidebar.

How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

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

3. (Optional) Style toggle button if using a theme.

There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found here.

:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}

+ Show component code

- Hide component code

:root {
    --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
    --body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 48.0625rem) {
    #side-bar .close-menu {
        display: block;
        position: fixed;
        top: 0.5rem;
        left: 0.5rem;
        width: 3rem;
        height: 3rem;
        background: unset;
        opacity: 1;
        pointer-events: all;
        z-index: -1;
    }
 
    #side-bar .close-menu img {
        color: transparent;
    }
 
    #side-bar .close-menu::before,
    #side-bar .close-menu::after {
        content: "";
        box-sizing: border-box;
        position: fixed;
        display: block;
        top: 0.5rem;
        left: 0.5rem;
        width: 3rem;
        height: 3rem;
        padding: 0;
        margin: 0;
        text-align: center;
        pointer-events: all;
        cursor: pointer;
        transition:
            opacity var(--sidebar-transition-timing);
    }
 
    #side-bar .close-menu::before {
        --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
        z-index: -1;
        background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: 50% 50%;
        mask-position: 50% 50%;
        -webkit-mask-size: 60%;
        mask-size: 60%;
    }
 
    #side-bar .close-menu::after {
        z-index: -2;
        background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
        border-radius: var(--toggle-roundness, 50%);
        border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
    }
 
    #side-bar:focus-within .close-menu,
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
        pointer-events: none;
    }
 
    #side-bar:focus-within .close-menu::before,
    #side-bar:focus-within .close-menu::after {
        opacity: 0;
        pointer-events: none;
    }
 
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
        opacity: 0;
        pointer-events: none;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: calc(var(--sidebar-width-on-desktop)*-1);
        z-index: 10;
        transition:
            left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 0;
    }
 
    #side-bar:focus-within {
        left: 0;
    }
 
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
        left: 0;
    }
 
    #side-bar .side-block {
        margin-top: 1rem;
        background-color: rgb(0, 0, 0, 0);
        border-radius: 0;
        border-left-width: 0px;
        border-right-width: 0px;
    }
 
    #main-content::before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: -1;
        opacity: 0;
        transition:
            opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
            width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
        margin-left: var(--sidebar-width-on-desktop);
        background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
        padding-right: 0;
        width: 100%;
        height: 100vh;
        pointer-events: none;
        z-index: 99;
    }
 
    #side-bar:focus-within ~ #main-content::before {
        width: calc(100% - var(--sidebar-width-on-desktop));
        opacity: 1;
        pointer-events: all;
    }
 
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
        width: calc(100% - var(--sidebar-width-on-desktop));
        opacity: 1;
        pointer-events: all;
    }
 
    @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
        padding: inherit;
    } }
 
    #content-wrap {
        display: flex;
        flex-direction: row;
        width: calc(100vw - (100vw - 100%));
        min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
        flex-grow: 2;
        height: auto;
        position: relative;
        margin: 0 auto;
        max-width: inherit;
    }
 
    #main-content {
        width: 100%;
        position: initial;
        max-height: 100%;
        padding: 2rem 1rem;
        max-width: var(--body-width-on-desktop, 45.75rem);
        margin: 0 auto;
    }
 
    #page-content {
        max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
    }
 
    @supports (-webkit-hyphens:none) { 
        #side-bar {
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            padding-right: 0;
            background-color: rgb(0, 0, 0, 0);
            pointer-events: all;
            overflow-x: visible;
            overflow-y: visible;
            z-index: 999;
        }
 
        #side-bar::-webkit-scrollbar {
            opacity: 0;
            -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
        }
 
        #side-bar .close-menu::before {
            z-index: 999;
        }
 
        #side-bar .close-menu::after {
            z-index: 998;
        }
 
        #side-bar:hover .close-menu::before,
        #side-bar:hover .close-menu::after {
            opacity: 0;
        }
 
        #side-bar:hover {
            left: 0;
            background-color: rgba(var(--swatch-menubg-color), 1);
            padding-right: 0;
        }
 
        #side-bar:hover::-webkit-scrollbar {
            opacity: 1;
        }
 
        #side-bar:hover~#main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
    }
}

[[/iftags]]

/*
   Neon Dystopia Theme
   [2021 Wikidot Theme]
   by JackalRelated
       inspired by Blade Runner (1982)
*/
 
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Jost&display=swap');
@import url('https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/stylesheet.css');
@import url('https://fontlibrary.org//face/connection');
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "cyberpunk";
   --theme-name: "Neon Dystopia";
 
   --header-title: "FOUNDATION";
   --header-subtitle: "REMOTE ACCESS DATABASE";
 
   --body-font: 'Jost', 'Noto Sans SC', sans-serif;
   --header-font: 'Element', sans-serif;
   --title-font: 'Unicephalon', 'Noto Sans SC', serif;
   --mono-font: 'Bedstead', '幼圆', monospace;
   --terminal-font: 'ConnectionRegular', 'VonwaonBitmap 16px', monospace;
   --display-font: 'Liquid Crystal', 'HuXiaoBo-ZhenShuai', sans-serif;
   --dialogue-font: 'SV Basic Manual', 'Noto Sans SC', sans-serif;
   --UI-font: var(--dialogue-font);
 
/* WHITE - GREY */
   --electric-sheep: 230, 255, 255;
   --gaff-black: 1, 1, 1;
 
/* BLUE */
   --neon-blue: 15, 227, 229;
   --tears-n-rain: 73, 177, 178;
   --passive-blue: 65, 134, 155;
   --pkd-blaster: 15, 12, 36;
   --lapd-badge: 9, 8, 19;
 
/* GREEN */
   --display-green: 23, 230, 16;
   --display-inter: 0, 145, 9;
   --tyrell-green:  7, 53, 0;
   --display-dark: 1, 18, 6;
 
/* RED */
   --deckard-red: 191, 0, 0;
   --blade-runner: 163, 0, 0;
   --retired-replicant: 77, 22, 25;
 
/* THEME ASSIGNMENTS */
   --white-monochrome: var(--lapd-badge);
   --pale-gray-monochrome: var(--display-dark);
   --light-gray-monochrome: var(--retired-replicant);
   --gray-monochrome: var(--gaff-black);
   --dark-gray-monochrome: var(--lapd-badge);
   --black-monochrome: var(--electric-sheep);
   --pale-accent: var(--tears-n-rain);
   --bright-accent: var(--deckard-red);
   --medium-accent: var(--blade-runner);
   --dark-accent: var(--retired-replicant);
 
   --swatch-topmenu-bg-color: var(--gaff-black);
   --swatch-topmenu-border-color: var(--tyrell-green);
 
   --swatch-background: var(--lapd-badge);
   --swatch-primary: var(--display-green);
   --swatch-primary-darker: var(--tyrell-green);
   --swatch-primary-darkest: var(--display-dark);
   --swatch-border-color: 0, 0, 0, 0;
 
   --swatch-text-dark: var(--gaff-black);
   --swatch-text-light: var(--electric-sheep);
   --swatch-text-general: var(--swatch-text-light);
   --swatch-important-text: var(--bright-accent);
 
   --swatch-menubg-color: var(--display-dark);
   --swatch-menubg-light-color: var(--);
   --swatch-menubg-medium-color: var(--tyrell-green);
   --swatch-menubg-medium-dark-color: var(--gaff-black);
   --swatch-menubg-dark-color: var(--);
 
   --swatch-menutxt-light-color: var(--electric-sheep);
   --swatch-menutxt-dark-color: var(--gaff-black);
   --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
 
   --swatch-text-secondary-color: var(--gaff-black);
   --swatch-text-tertiary-color: var(--electric-sheep);
 
   --header-gradient-color-top: var(--gaff-black);
   --header-gradient-color-middle: var(--gaff-black);
   --header-gradient-color-bottom: var(--gaff-black);
   --background-gradient-distance: 0rem;
   --diagonal-stripes: linear-gradient(transparent 0);
 
   --sidebar-transition-timing: 0.8s ease-in-out 0.1s;
 
   --hover-link-color: var(--neon-blue);
   --newpage-color: var(--neon-blue);
   --link-color: var(--tears-n-rain);
   --visited-link-color: var(--tears-n-rain);
 
   --rating-module-bg-color: var(--lapd-badge);
   --rating-module-button-cancel-color: var(--neon-blue);
   --rating-module-bottom-border-color: var(--neon-blue);
 
   --toggle-button-bg: rgba(var(--gaff-black), 1);
   --toggle-border-color: rgb(var(--tyrell-green));
   --toggle-icon-color: rgb(var(--display-green));
   --toggle-roundness: 0%;
}
 
:root:lang(cn) {
   --header-title: "基金会";
   --header-subtitle: "远程访问数据库";
}
 
/* HEADER AND TOPBAR */
 
.page-rate-widget-box .rate-points {
   font-size: 1em;
   line-height: calc(var(--rating-module-height)*1.25);
}
 
#page-title {
  color: rgb(var(--neon-blue));
  border-bottom: .0625rem solid rgb(var(--neon-blue));
}
 
#page-title:after, .meta-title:after {
   height: 0;
}
 
#header {
   --swatch-headerh1-color: var(--deckard-red);
   --swatch-headerh2-color: var(--deckard-red);
 
   --search-icon-color: var(--display-green);
   --search-icon-hover-color: var(--gaff-black);
   --search-icon-hover-bg-color: var(--display-green);
   --search-textbox-text-color: 0,0,0,0;
 
   --search-icon-focus-color: var(--display-green);
   --search-icon-focus-bg-color: var(--display-green);
   --search-focus-outline-color: var(--display-green);
   --search-focus-textbox-bg-color: var(--display-green);
   --search-focus-textbox-text-color: var(--gaff-black);
 
   --login-line-divider-color: var(--display-inter);
   --login-username-color: var(--display-green);
   --login-myaccount-color: var(--display-green);
   --login-myaccount-underline-color: var(--display-inter);
   --login-myaccount-hover-color: var(--gaff-black);
   --login-myaccount-hover-bg-color: var(--display-green);
   --login-arrow-color: var(--display-green);
 
   --login-dropdown-bg-color: var(--display-dark);
   --login-dropdown-bg-image: var(--display-dark);
   --login-dropdown-border-color: var(--display-green), 0.5;
   --login-dropdown-text-color: var(--display-inter);
   --login-dropdown-text-hover-color: var(--display-green);
   --login-dropdown-bg-hover-color: var(--display-dark);
 
   --login-mobile-icon-color: var(--display-green);
   --login-mobile-icon-hover-color: var(--gaff-black);
   --login-mobile-icon-hover-bg-color: var(--display-green);
 
   background-image: none;
}
 
#header h1 {
  width: 100%;
  height: var(--header-height-on-desktop);
  z-index: -9999;
}
 
#header h1 a {
  text-shadow: none;
  height: 100%;
  width: 100%;
  color: transparent;
  background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/foundation-text.png);
  margin: 0;
  padding: 0;
  background-size: auto calc(var(--header-height-on-desktop) - 1rem);
  background-repeat: no-repeat;
  background-position: left center;
}
 
@media only screen and (max-width: 768px) {
       #header h1 a {
            background-size: auto calc(var(--header-height-on-desktop) - 3rem);
            background-position: center center;
      }
}
 
#header h1 a::before {
  text-shadow: none;
  color: transparent;
}
 
#header h2 {
  display: none;
}
 
 #extra-div-1 {
   height: var(--header-height-on-desktop);
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:cyberpunk/grid.png);
   background-size: calc(var(--header-height-on-desktop) * 4);
}
 
#top-bar {
   --topmenu-category-color: var(--display-inter);
   --topmenu-category-hover-color: var(--display-green);
   --topmenu-hover-border-color: var(--display-green);
 
   --mobile-topmenu-sidebar-button-color: var(--display-green);
 
   --dropdown-bg-color: var(--display-dark), 0.9;
   --dropdown-border-color: var(--display-green), 0.5;
   --dropdown-links-color: var(--display-inter);
   --dropdown-links-hover-color: var(--display-green);
   --dropdown-links-hover-bg-color: var(--disaply-dark);
}
 
/* BREADCRUMBS */
 
#breadcrumbs a:hover,
.pseudocrumbs a:hover,
#breadcrumbs a:active,
.pseudocrumbs a:active,
#breadcrumbs a:focus-within,
.pseudocrumbs a:focus-within {
    color: rgb(var(--neon-blue));
    text-decoration: none;
}
 
/* SCROLLBAR AND SIDEBAR */
 
html,body {
   scrollbar-color:
     rgb(var(--display-dark))
     rgb(var(--tyrell-green));
}
 
html::-webkit-scrollbar,
body::-webkit-scrollbar {
   width: 18px;
   background: #transparent;
}
 
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
   background: rgb(var(--display-dark));
}
 
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
   background: rgb(var(--tyrell-green));
   border: rgb(var(--tyrell-green)) 1px solid;
   border-radius: 0px;
}
 
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
   background: rgb(var(--display-green));
}
 
#side-bar {
   --sidebar-bg-color: var(--display-dark);
   --sidebar-resources-bg-color: var(--tyrell-green), 0.25;
   --sidebar-media-bg-color: var(---tyrell-green), 0.25;
 
   --sideblock-heading-border-color: var(--display-green);
   --sideblock-heading-text-color: var(--display-green);
 
   --sidebar-border-color: var(--swatch-border-color), 0.08;
   --sidebar-subtest-color: var(--swatch-primary);
 
   --sidebar-links-text: var(--display-inter);
   --sidebar-links-hover-bg-color: var(--display-green);
   --sidebar-links-hover-text-color: var(--gaff-black);
}
 
hr {
   background-color: rgb(var(--neon-blue));
   border-top: .0625rem solid rgb(var(--neon-blue));
}
 
.code {
   background-color: rgb(var(--scissor-blades));
}
 
blockquote, div.blockquote {
    border: .0625rem dashed rgba(var(--display-green),1);
    color: rgb(var(--display-green));
}
 
blockquote hr, div.blockquote hr {
   background-color: rgb(var(--display-green));
   border-top: .0625rem solid rgb(var(--display-green));
}
 
.code {
    background-color: rgb(var(--electric-sheep));
}
 
.scp-image-block {
   box-shadow: none;
   border: none;
}
 
.scp-image-block .scp-image-caption {
    border-top: .0625rem outset rgba(var(--display-green),1);
    background-color: rgb(var(--display-dark));
    color: rgb(var(--display-green));
}
 
/* MAIN CONTENT */
 
.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus {
   filter: hue-rotate(0deg);
}
 
#main-content {
   --tabs-bg: var(--pkd-blaster);
   --tabs-txt: var(--tears-n-rain);
   --tabs-hover-bg: var(--neon-blue);
   --tabs-hover-txt: var(--pkd-blaster);
   --tabs-selected-bg: var(--neon-blue);
   --tabs-selected-txt: var(--lapd-badge);
   --tabs-selected-outline: var(--neon-blue);
   --tabs-bottom-border-color: var(--neon-blue);
 
   --tabs-content-bg-color: var(--pkd-blaster), 0.25;
   --tabs-content-border-color: var(--neon-blue);
 
   --tables-header-bg: var(--pkd-blaster);
   --tables-header-txt: var(--tears-n-rain);
   --tables-border: var(--neon-blue);
   --tables-body-txt: var(--passive-blue);
   --tables-body-bg: var(--pkd-blaster), 0.50;
 
   --toc-directory-lines-color: var(--neon-blue);
   --toc-header-bg-color: var(--passive-blue);
   --toc-header-text-color: var(--lapd-badge);
   --toc-header-text-hover-color: var(--neon-blue);
   --toc-body-bg-color: var(--pkd-blaster);
   --toc-body-link-color: var(--tears-n-rain);
   --toc-body-link-hover-color: var(--neon-blue);
   --toc-body-hover-arrow-color: var(--neon-blue);
 
   --ui-icon-color: var(--display-inter);
   --ui-icon-bg: var(--display-dark);
   --ui-icon-hover-color: var(--display-green);
   --ui-icon-hover-bg: var(--tyrell-green);
 
   --blockquote-bg-color: var(--display-dark), 0.5;
   --blockquote-colorbar-color: var(--display-green), 1;
 
   --footnotes-footer-colorbar-color: var(--tears-n-rain);
   --footnotes-footer-title-bg-color: var(--tears-n-rain);
   --footnotes-footer-title-text-color: var(--lapd-badge);
   --footnotes-footer-bg-color: var(--pkd-blaster);
 
   --pagetags-title-bg: var(--neon-blue);
   --pagetags-title-text: var(--lapd-badge);
   --pagetags-text-color: var(--display-inter);
   --pagetags-text-hover-color: var(--gaff-black);
   --pagetags-text-hover-bg-color: var(--display-green);
}
 
table.wiki-content-table th {
   font-family: var(--display-font);
}
 
:root {
   --hoverblock-header-bg: var(--neon-blue);
   --hoverblock-header-txt: var(--lapd-badge);
   --hoverblock-footer-txt: var(--electric-sheep);
   --hoverblock-bg: var(--pkd-blaster);
 
   --ui-button-bg: var(--display-dark);
   --ui-button-txt: var(--display-inter);
   --ui-button-hover-bg: var(--tyrell-green);
   --ui-button-hover-outline: var(--display-green);
   --ui-button-hover-txt: var(--display-green);
 
   --modal-bg: var(--display-dark);
   --modal-body-text: var(--display-green);
   --modal-body-header-txt: var(--blade-runner);
   --modal-header-bg: var(--blade-runner);
   --modal-header-stripe: var(--deckard-red);
   --modal-header-txt: var(--display-dark);
 }
 
/* FOOTERS AND BELOW */
 
.page-source {
   background: rgb(var(--electric-sheep));
   font-family: var(--mono-font);
   color: rgb(var(--gaff-black));
}
 
.content-panel {
   --box-shadow-3: rgb(var(--neon-blue,170,170,170));
}
 
#lock-info, div.note, input.checkbox, input.text, textarea {
   font-family: var(--body-font);
}
 
#footer {
   --footer-bg-color: var(--display-inter);
   --footer-text-color: var(--gaff-black);
   --footer-link-color: var(--gaff-black);
   --footer-link-hover-color: var(--gaff-black);
   --footer-link-hover-bg-color: var(--display-green);
}
 
#license-area {
   --license-bg-color: var(--lapd-badge);
   --license-text-color: var(--display-inter);
   --license-link-color: var(--display-green);
   --license-link-hover-color: var(--gaff-black);
   --license-link-hover-bg-color: var(--display-green);
}
 
/* TOGGLE SIDEBAR (BHL) CHANGES */
 
@supports((display: -ms-grid) or (display: grid)) {
       @media only screen and (min-width: 769px) {
           #main-content::before {
               background: rgba(var(--display-dark), .55) 1px 1px repeat;
           }
        }
    }
 
/* SPECIAL DIVS */
 
.console {
    padding: 5px 5px 5px 5px;
    margin-bottom:10px;
    width: 97.7%;
    font-family: var(--terminal-font);
    font-size: 1.1em;
    background-color: rgb(var(--display-dark));
    border: 3px dashed rgb(var(--display-green));
    color: rgb(var(--display-inter));
}
 
.console hr, .console-header hr {
    background: linear-gradient(10deg, rgba(var(--display-green), 0.25) 0%, rgba(var(--display-green), 1) 50%, rgba(var(--display-green), 0.25) 100%);
   border-top: none;
}
 
.console-header {
    font-family: var(--header-font);
    text-align: center;
    color: rgb(var(--display-green));
}
 
table.terminal {
    border-collapse: collapse;
}
 
table.terminal th {
    font-weight: bold;
    border: none;
    padding: 0em 0em 0 0;
}
 
table.terminal td {
    padding: 0em 0 0 1em;
}
 
.logs {
    padding: 5px 5px 5px 5px;
    margin-bottom:10px;
    width: 97.7%;
    font-family: var(--display-font);
    font-size: 1.1em;
    background-color: rgb(var(--lapd-badge));
    border: 3px solid rgb(var(--neon-blue));
    color: rgb(var(--passive-blue));
}
 
.logs-header {
    text-align: center;
    color: rgb(var(--neon-blue));
}
 
.logs hr {
    background: linear-gradient(10deg, rgba(var(--neon-blue), 0.25) 0%, rgba(var(--neon-blue), 1) 50%, rgba(var(--neon-blue), 0.25) 100%);
}
 
table.dialog {
    border-collapse: collapse;
}
 
table.dialog th {
    font-family: var(--display-font);
    font-size: 1.1em;
    border-right: 1px solid rgb(var(--neon-blue));
    color: rgb(var(--neon-blue));
    padding:  0.9em 1em 0 1em;
}
 
table.dialog td {
    font-family: var(--dialogue-font);
    font-size: 1.15em;
    padding: 1em 0 0 0.85em;
}
 
table.dialog td.active {
    color: rgb(var(--neon-blue));
}
 
.blokquote-alt {
   margin: .5em 1.25rem;
   padding: .825em 1.25em;
   border: .0625rem dashed rgba(var(--neon-blue),1);
   color: rgb(var(--neon-blue));
   background-color: rgb(var(--pkd-blaster);
}
 
.blokquote-alt hr {
   background-color: rgb(var(--neon-blue));
   border-top: .0625rem solid rgb(var(--neon-blue));
}
 
/* SIDEBAR SCROLLBAR */
 
#side-bar:hover,
#side-bar:active {
    scrollbar-color:
     rgb(var(--display-dark)
     rgb(var(--tyrell-green), 1);
     border-color: rgba(var(--tyrell-green), 1);
}
 
#side-bar::-webkit-scrollbar-track,
#side-bar:hover::-webkit-scrollbar-track {
   background-color: rgb(var(--display-dark);
}
 
#side-bar::-webkit-scrollbar-thumb {
   background-color: rgb(var(--tyrell-green));
}
 
#side-bar:hover::-webkit-scrollbar-thumb {
   background-color: rgb(var(--display-green));
}
 
/* END */

绿色变体

:root {
/*GREEN (AGAIN) */
   --electric-sheep: 233, 255, 230;
 
   --neon-blue: 36, 229, 15;
   --tears-n-rain: 89, 178, 73;
   --passive-blue: 71, 155, 65;
   --pkd-blaster: 16, 36, 12;
   --lapd-badge: 1, 1, 1;
}
 
#main-content {
   --pagetags-title-bg: var(--display-green);
}

黄色变体

:root {
/* YELLOW */
   --electric-sheep: 255, 255, 230;
 
   --neon-blue: 229, 227, 15;
   --tears-n-rain: 178, 150, 73;
   --passive-blue: 155, 134, 65;
   --pkd-blaster: 36, 29, 12;
   --lapd-badge: 10, 8, 4;
}
 
#main-content {
   --pagetags-title-bg: var(--display-green);
}

红色变体

:root {
/* RED (AGAIN) */
   --electric-sheep: 255, 237, 237;
 
   --neon-blue: 229, 15, 15;
   --tears-n-rain: 209, 48, 48;
   --passive-blue: 195, 111, 111;
   --pkd-blaster: 36, 12, 12;
   --lapd-badge: 18, 1, 1;
 
#main-content {
   --pagetags-title-bg: var(--display-green);
}

版式

页面版本: 6, 最后编辑于: 10 Jan 2025 15:56

编辑评分 (+7) 标签讨论 (5) 历史记录附件打印网站工具 + 选项

SCP基金会

控制，收容，保护

这是什么？

主题颜色

替代配色方案

示例

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

带有特殊的 Div

替代引用块

控制台/终端 Div

音频/视频记录格式

What this does

Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.

How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

3. (Optional) Style toggle button if using a theme.

绿色变体

黄色变体

红色变体