Level S-177

+ 版式代码

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
 
/* ----- I LOVE BLACK HIGHLIGHTER ----- */
:root {
    --theme-base: "black-highlighter";
    --theme-id: "iceberg";
    --theme-name: "Iceberg Theme";
 
    --theme-base: "black-highlighter";
    --logo-image: url("https://s2.loli.net/2022/05/25/3YWRG1NotOylr5X.png");
    --header-title: "冰山";
    --header-subtitle: "冰冻三尺";
 
    --body-font: 'Noto Sans SC', sans-serif;
    --header-font: 'ZCOOL XiaoWei', sans-serif;
    --title-font:  'Noto Serif SC', sans-serif;
    --mono-font: 'Noto Serif SC', sans-serif;
 
    --accent-white: 230, 242, 255;
    --accent-color-light: 174, 214, 241;
    --accent-color-medium: 41, 128, 185;
    --accent-color-dark: 31, 97, 141;
 
    --white-monochrome: var(--accent-color-light);
    --pale-gray-monochrome: var(--accent-color-medium);
    --light-gray-monochrome: var(--accent-color-dark);
    --gray-monochrome: var(--accent-color-dark);
    --dark-gray-monochrome: var(--accent-color-dark);
    --black-monochrome: 12, 12, 12;
 
    --pale-accent: var(--accent-color-dark);
    --bright-accent: var(--accent-color-medium);
    --medium-accent: var(--accent-color-dark);
    --dark-accent: var(--accent-color-medium);
    --alt-accent: 221, 102, 17;
 
    --link-color: var(--accent-color-dark);
    --visited-link-color: var(--link-color);
    --hover-link-color: var(--link-color);
 
    --swatch-headerh1-color: var( --accent-white);
    --swatch-headerh2-color: var( --accent-white);
    --swatch-border-color: var(--accent-color-medium);
    --gradient-header:linear-gradient(to top, #9890e3 0%, #7FB3D5 100%);
 
    --box-color-0:  211, 224, 233 !important;
    --box-color-1:  166, 192, 210 !important;
    --box-color-2:  121, 160, 187 !important;
    --box-color-3:  76, 129, 164 !important;
    --box-color-4:  76, 129, 164 !important;
    --box-color-5:  var(--accent-color-dark) !important;
}
 
/* ----- SELECTION ----- */
::selection {
    background: rgb(var(--accent-color-dark));
    color: rgb(var(--accent-white));
}
 
::-moz-selection {
    background: rgb(var(--accent-color-dark));
    color: rgb(var(--accent-white));
}
 
/* ----- HEADER & TOP BAR ----- */
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0rem;
   top: 0;
   background-image: var(--logo-image);
   background-size: auto 9rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.85;
}
 
#top-bar div.mobile-top-bar>ul>li:hover, #top-bar div.top-bar>ul>li:hover {
    background-color: rgb(var(--accent-color-light));
}
 
#top-bar div.mobile-top-bar>ul>li:hover>a, #top-bar div.top-bar>ul>li:hover >a{
    color: rgb(var(--accent-color-dark));
}
 
#top-bar div.mobile-top-bar>ul>li>a:after, #top-bar div.mobile-top-bar>ul>li>a:before, #top-bar div.top-bar>ul>li>a:after, #top-bar div.top-bar>ul>li>a:before {
    background-color: rgba(var(--accent-color-dark), .5);
}
 
#login-status a {
    color: rgb(var(--accent-color-dark));
}
 
#account-topbutton {
    border: 0.1rem solid transparent;
}
 
#account-topbutton:hover {
    border: 0.1rem solid rgb(var(--accent-color-dark));
}
 
#top-bar div.top-bar>ul>li>ul>li>a:before, #top-bar div.top-bar>ul>li>ul>li>a:hover:before, #top-bar div.top-bar>ul>li>ul>li>ul>li>a:before, #top-bar div.mobile-top-bar>ul>li>ul>li>a:hover {
    background-color: rgb(var(--accent-color-light));
}
 
#top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover {
    color: rgb(var(--accent-color-dark));
}
 
/* ----- NO THESE THINGS ----- */
#skrollr-body {
    background-image: none;
}
 
#container {
    background-image: none;
}
 
.avatar-hover {
    display: none !important;
}
 
/* ----- COOL THINGS----- */
.inline-diff ins {
    background-color: #66CC66;
}
 
.inline-diff del {
    background-color: #CC9966;
}
 
hr {
    background: transparent;
    border-top: solid 2px rgba(var(--accent-color-dark));
}
 
.scp-image-block .scp-image-caption {
    color: rgb(var( --accent-white));
    background-color: rgb(var( --accent-color-dark));
}
 
.pager a {
    border-color: rgb(var( --accent-color-dark));
}
 
.pager .current {
    color: rgb(var( --accent-white));
    background-color: rgb(var( --accent-color-dark));
    border-color: rgb(var( --accent-color-medium));
}
 
table.page-history td.optionstd a {
    border-color: rgb(var( --accent-color-dark));
}
 
table.page-history td.optionstd a:hover {
    color: rgb(var( --accent-white));
    background-color: rgb(var( --accent-color-dark));
    border-color: rgb(var( --accent-color-dark));
}
 
.change-textarea-size a {
    color: rgb(var( --accent-white));
}
 
.page-source,
.code {
    color: rgb(var(--black-monochrome));
    background: rgb(var( --accent-color-light));
    border: solid 0.15rem rgb(var( --accent-color-dark));
}
 
table.wiki-content-table th, table.wiki-content-table tr, table.wiki-content-table td {
    border: .0625rem solid rgb(var(--accent-color-dark)) !important;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: rgb(var(--accent-color-medium));
    color: rgb(var(--accent-white));
    transition: background-color 300ms;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background-color: rgb(var(--accent-color-light));
    color: rgb(var(--accent-color-dark));
}
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    background-color: rgb(var(--accent-color-dark));
    color: rgb(var(--accent-color-light));
}
 
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {
    background-color: rgb(var(--accent-color-dark));
    color: rgb(var(--accent-color-light));
}
 
.page-tags span {
    border-top: 2px solid rgb(var(--accent-color-dark));
}
 
.page-tags:before {
    color: rgb(var(--accent-white));
    content: "TAGS";
    font-weight: bold;
    font-size: 85%;
    background: rgb(var(--accent-color-dark));
    padding: 1px 1px 0 1px;
    margin: 0 0 -2px 0;
    display: block;
    width: fit-content;
}
 
/* ----- SIDE BAR ----- */
#side-bar::-webkit-scrollbar {
    display: none;
}
 
#side-bar {
    border-right: 0.15rem solid rgb(var(--accent-color-dark));
}
 
@media only screen and (max-width: 768px) {
    #side-bar {
        border-right: none;
    }
}
 
#side-bar > div:nth-child(1) {
    margin-top: 0;
}
 
#side-bar div.side-block,
#side-bar div.side-block .heading {
    border: none;
}
 
/* ----- FOOTER ----- */
#footer {
    background-color: rgb(var(--accent-color-dark));
    color: rgb(var(--accent-white));
}
 
#footer a {
    color: rgb(var(--accent-white));
}
 
/* ----- DIVS ----- */
blockquote,
div.blockquote {
    --link-color: var(--accent-color-light);
    --visited-link-color: var(--accent-color-light);
    --hover-link-color: var(--accent-color-light);
    border: 2px solid rgb(var(--accent-color-dark));
    background-color: rgb(var(--accent-color-medium));
    color: rgb(var(--accent-white));
}
 
.styled-quote {
    --link-color: var(--accent-color-light);
    --visited-link-color: var(--accent-color-light);
    --hover-link-color: var(--accent-color-light);
    color: rgb(var(--accent-white));
    margin-left: 0px;
}
 
.dark-styled-quote a {
    color: rgb(var(--link-color));
}
 
.darkblock a {
    color: rgb(var(--link-color));
}
 
.dark-styled-quote ,
.darkblock,
.lightblock  {
    margin-left: 0px;
}
 
.dark-styled-quote,
.darkblock {
    --link-color: var(--accent-white);
    --visited-link-color: var(--accent-white);
    --hover-link-color: var(--accent-white);
    color: 
}
 
.dark-styled-quote hr,
.darkblock hr {
    border-color: rgb(var(--accent-color-light));
}
 
/* ----- IETS ----- */
.box {
    background: rgb(var(--accent-white)) !important;
}
 
.box.class-0 {
    --box-border: var(--box-color-0);
    --box-shadow: var(--box-color-0);
}
.box.class-1 {
    --box-border: var(--box-color-1);
    --box-shadow: var(--box-color-1);
}
.box.class-2 {
    --box-border: var(--box-color-2);
    --box-shadow: var(--box-color-2);
}
.box.class-3 {
    --box-border: var(--box-color-3);
    --box-shadow: var(--box-color-3);
}
.box.class-4 {
    --box-border: var(--box-color-4);
    --box-shadow: var(--box-color-4);
}
.box.class-5 {
    --box-border: var(--box-color-5);
    --box-shadow: var(--box-color-5);
}
 
/* ----- CUSTOM DIV ----- */
.bd1 {
    border: rgb(var(--accent-white)) 2px solid;
}
 
.bd2 {
    border: rgb(var(--accent-color-light)) 2px solid;
}
 
.bd3 {
    border: rgb(var(--accent-color-medium)) 2px solid;
}
 
.bd4 {
    border: rgb(var(--accent-color-dark)) 2px solid;
}
 
.bg1 {
    background: rgb(var(--accent-white));
}
 
.bg2 {
    background: rgb(var(--accent-color-light));
}
 
.bg3 {
    background: rgb(var(--accent-color-medium));
}
 
.bg4 {
    background: rgb(var(--accent-color-dark));
}
 
.tx0 {
    color: rgb(var(--black-monochrome));
    --hr-color:var(--black-monochrome);
}
 
.tx1 {
    color: rgb(var(--accent-white));
    --hr-color:var(--accent-white);
}
 
.tx2 {
    color: rgb(var(--accent-color-light));
    --hr-color:var(--accent-color-light);
}
 
.tx3 {
    color: rgb(var(--accent-color-medium));
    --hr-color:var(--accent-color-medium);
}
 
.tx4 {
    color: rgb(var(--accent-color-dark));
    --hr-color:var(--accent-color-dark);
}
 
.a1 {
    --custom-link: var(--accent-white);
}
 
.a2 {
    --custom-link: var(--accent-color-light);
}
 
.a3 {
    --custom-link: var(--accent-color-medium);
}
 
.a4 {
    --custom-link: var(--accent-color-dark);
}
 
.custom {
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0;
}
 
.custom hr {
    border-color: rgb(var(--hr-color));
}
 
.custom a {
    color: rgb(var(--custom-link));
}

---

+ Show component code

:root {
        --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 56.25rem) {
        #content-wrap {
            display: flex;
            position: initial;
            flex-direction: row;
            flex-grow: 2;
            width: calc(100vw - (100vw - 100%));
            max-width: inherit;
            height: auto;
            min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
            margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
        }
 
        #main-content {
            position: initial;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            max-height: 100%;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        #side-bar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            grid-area: side-bar;
            width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            max-height: 100vh;
            padding-right: 2.5rem;
            padding-left: 0.5rem;
            overflow-y: scroll;
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                padding 300ms linear,
                margin 300ms linear;
            border: none;
            border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
            translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
            direction: rtl;
            scrollbar-width: thin;
            -ms-scroll-chaining: none;
                overscroll-behavior: contain;
            scrollbar-color: 
                rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
                rgba(var(--swatch-tertiary-color), 0.05); /* Track */
        }
 
        #side-bar::-webkit-scrollbar-track {
            background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
        }
 
        #side-bar::-webkit-scrollbar,
        #side-bar::-webkit-scrollbar-thumb,
        #side-bar::-webkit-scrollbar-corner {
            width: 0.5rem;
            border-right-width: calc(100vw + 100vh);
            border-right-style: inset;
            border-color: inherit;
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        }
 
        #side-bar:is(:hover, :active, :focus-within) {
            margin-right: 2.25rem;
            padding-right: 0.25rem;
            overflow-x: hidden;
            overflow-y: auto;
            border-color: rgba(var(--swatch-primary-darker), 1);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
            translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
            scrollbar-color: 
                rgba(170, 170, 170, 1)  /* Thumb */
                rgba(252, 252, 252, 1); /* Track */
            scrollbar-color: 
                rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
                rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        }
 
        #main-content::after {
            content: " ";
            display: flex;
            position: fixed;
            top: 0;
            left: 1rem;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 100%;
            max-height: 100%;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center left 1rem;
            background-size: 1rem 12.875rem;
            pointer-events: none;
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::after {
            left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            width: 0rem;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0;
            background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            font-size: 0em;
        }
 
        #main-content::before {
            content: " ";
            position: absolute;
            z-index: 9;
            top: var(--final-header-height-on-desktop, 0);
            left: 0;
            width: var(--sidebar-width-on-desktop, 14.5rem);
            height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
            margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0.5;
            background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
            pointer-events: none;
            translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::before {
            translate: 0;
            opacity: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1em;
            padding-left: 0.25em;
            border-right-width: 0rem;
            border-left-width: 0rem;
            border-radius: 0;
            background-color: rgb(0, 0, 0, 0);
            direction: ltr;
        }
 
        #side-bar .scpnet-interwiki-wrapper {
            direction: ltr;
        }
 
        /* Print Friendly Formatting by Estrella */
        body.print-body { 
            --sidebar-width-on-desktop: 0; 
        } 
        body.print-body #main-content::before,
        body.print-body #main-content::after { 
            display: none; 
        }
    }

生存难度：生存難度：

等级等級 0

• {$one}
• {$two}
• 寒冬不寒

---

如何使用：

[[include :backrooms-wiki-cn:component:level-class
|class=等级
]]

class 处的可用参数包括以下内容，支持简繁体及英文输入。

English						简体中文						繁體中文
0	1	2	3	4	5	0	1	2	3	4	5	0	1	2	3	4	5
unknown						未知						未知
habitable						宜居						宜居
deadzone						死区						死區
pending						等待分级						等待分級
n/a						不适用						不適用
amended						修正						修正
omega						终结						終結

该组件支持简繁切换，如下方代码所示：

[[include :backrooms-wiki-cn:component:level-class
|lang=cn/tr
|class=等级
]]

在 lang 处选择语言，cn 表示简体中文，tr 表示繁体中文，不填默认选择简体中文。

---

自定义等级

[[include :backrooms-wiki-cn:component:level-class
|lang=cn/tr
|class=等级名字
|color=#000000（带有井号的十六进制色号代码。）
|image=链接（至图片的链接。）
|one=在这
|two=随便
|three=放文字
]]

使用 CSS 进行自定义：

你可以使用 CSS 进行额外的自定义，将代码放入到 [[module css]] 中或者是放入到页面的版式内都可以。在这一组件中，不要把 [[module css]] 放在 [[include]] 里面，把它放在那个的下面或者是页面的顶部或底部。
将这些代码放入到你的页面/版式中以编辑所有的颜色，因为组件的 |color= 部分仅能控制背景：

[[module css]]
.sd-container {
/* 字体 */
--sd-font: Poppins, Noto Sans SC, Noto Serif SC;

/* 边框 */
--sd-border: var(--gray-monochrome); /* 大多数等级 */
--sd-border-secondary: 0, 0, 0; /* 不适用 */
--sd-border-deadzone: 20, 0, 0; /* 死区 */

/* 标志 */
--sd-symbol: var(--sd-border) !important; /* 大多数标志 */
--sd-symbol-secondary: 255, 255, 255; /* 4 级以上的是白色 */

/* 文本 */
--sd-bullets: var(--sd-border) !important; /* 点句符文本颜色 */
--sd-text: var(--swatch-text-secondary-color); /* 顶部框文本颜色 */

/* 等级颜色 */
--class-0: 247, 227, 117;
--class-1: 247, 227, 117;
--class-1: 255, 201, 14;
--class-2: 245, 156, 0;
--class-3: 249, 90, 0;
--class-4: 254, 23, 1;
--class-5: 175, 6, 6;
--class-unknown: 38, 38, 38;
--class-habitable: 26, 128, 111;
--class-deadzone: 44, 13, 12;
--class-pending: 182, 182, 182;
--class-n-a: 38, 38, 38;
--class-amended: 185, 135, 212;
--class-omega: 25, 46, 255;
}
[[/module]]

旧版颜色：

如果你不喜欢新版的样式，想要用回旧版的红色边框色，只需要在你的页面中与组件一同引入下方的代码：

[[module css]]
.sd-container {
--sd-border: 90, 29, 27;
--sd-image: 90, 29, 27;
--sd-symbol: 90, 29, 27;
}
[[/module]]

Level S-177是后室S层群的第177层。其实，严格地说，它更类似于一种现象。但考虑到其确实是一个独立的空间，故归类为层级。

这是一个仅能供一名流浪者独享的层级。在任何冰山或雪地层级中，抑或有四季变化的层级的冬季，沉沉睡去，进入梦乡，便有概率来到此处。

流浪者总会以从万丈高空中坠落的方式来到此层级。但不必担忧，因为坠落而至的地面十分柔软，仿佛由绸缎织成。它一眼望去，无边无际，由冰蓝色与海蓝色交织而成，有时能看到中间夹杂几道黑色的纹路。地面总是在上下摆动着，可是无论如何，流浪者总能在其上稳稳站立或坐定。

抬起头来，环视四周，天空万里无云，十分晴朗。环绕自己的是一棵棵青翠的松柏，其上落满了积雪。它们都十分巨大，相较之下，自己的身躯还不及一根针叶。这里并不冷，甚至有些温暖，因此无需增添衣物。再仔细看看，周围的树木都在向后退去，当然并不是它们在动，而是自己脚下的“地面”在向前行进着。它仿佛会一直这样前进下去，无休无止。有时它或许会突然转个弯，让人猝不及防的摔倒。

不知不觉，空中落起了雪花，它们也变得巨大无比，几乎有流星坠地之势。此时，周围将轻柔地响起音乐，其曲调轻快明朗，令聆听者感到身心十分放松。

直到一片雪花不偏不倚，正要落在自己立足的大地上。大地又颤抖了两下，身体轻轻的飞了出去——睁开眼，自己正躺在温暖的床铺里，无垠城市的阳光照在身上，该起床了。

---

冰中的小小蝴蝶啊

19road songlin

快捷复制