[[iftags +组件]] [[module CSS]] @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/1"); div#u-component-top-box, div#page-title { display: none; } div#page-content h1 { display: flex; margin-top: 5rem; } div#page-content h1::after { content: ""; display: block; align-self: stretch; flex-grow: 1; margin-left: 0.5em; border-left: solid var(--base-border-width) rgb(var(--basalt-tertiary-color)); background-image: linear-gradient(rgb(var(--basalt-tertiary-color)), rgb(var(--basalt-tertiary-color))); background-size: 100% var(--base-border-width); background-position: center; background-repeat: no-repeat; } /* 页面布局 */ div#main-content { width: auto; max-width: 100%; margin-inline: 0; overflow-x: hidden; line-height: 1.75; } div#breadcrumbs, div#page-title { display: none; } div#page-options-container, div#action-area { width: var(--main-content-width); margin: 0 auto var(--main-content-bottom-margin); max-width: calc(100% - var(--main-content-side-margin) *2); } div#page-content + div.page-tags { width: var(--main-content-width); margin: 0.5rem auto; max-width: calc(100% - var(--main-content-side-margin) *2); } /* 页面内容元素 */ span.ruby { vertical-align: baseline; } span.rt { display: block; margin-top: -2.83em; margin-bottom: 0; line-height: 1.25; } div.normal-content { width: var(--main-content-width); max-width: calc(100% - var(--main-content-side-margin) * 2) !important; margin-inline: auto; } div.blockquote.wide { padding: 0; background-color: rgba(var(--basalt-secondary-color), 0.3); } div.code p:nth-of-type(1) { margin-top: 0; } div.code p:nth-last-of-type(1) { margin-bottom: 0; } /* 浮动目录 */ div#u-side-button { position: fixed; width: 3rem; height: 3rem; left: 1.5rem; bottom: 1.5rem; text-align: center; line-height: 3rem; font-size: 1rem; background-color: rgb(var(--basalt-secondary-color)); transition: ease 0.125s; z-index: 5; } div#u-side-button p { pointer-events: none; margin-block: 0; } div#u-side-button:hover { color: rgb(var(--basalt-light-text-color)); background-color: rgb(var(--basalt-undertone)); } div#side-bar { z-index: 11; } div#u-side-bar { position: fixed; float: none; top: 0; left: calc(var(--side-bar-width) * -1); padding: 0; margin: 0; margin-top: var(--header-final-height); height: calc(100% - var(--header-final-height)); width: var(--side-bar-width); max-width: calc(100% - 3.75rem); box-sizing: border-box; font-size: var(--side-bar-link-font-size); background-color: rgb(var(--side-bar-background-color)); overflow-x: hidden; overflow-y: auto; direction: rtl; transition: left var(--side-bar-transition); z-index: 10; } :where(:root:has(div#u-side-button:hover)) div#main-content div#u-side-bar, div#main-content div#u-side-bar:is(:hover, :focus-within) { left: 0; } div#main-content div#u-side-bar div.side-block { direction: ltr; font-family: var(--UI-font); } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc :is(div.title, div#toc-action-bar) { color: rgb(var(--UI-title-color)); background-color: rgb(var(--UI-title-background-color)); border-bottom: solid var(--base-border-width) rgb(var(--UI-title-color)); font-family: var(--header-font); font-weight: 700; text-transform: uppercase; text-align: center; } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc div#toc-action-bar { font-size: 0.875em; padding: 0.15em; } div#main-content div#u-side-bar div#toc div#toc-action-bar { display: none; } div#main-content div#u-side-bar div#toc div.title { font-size: 0; padding: calc(var(--side-bar-link-font-size) * 0.875 * 0.15); } div#main-content div#u-side-bar div#toc div.title::before { content: "目录"; font-size: calc(var(--side-bar-link-font-size) * 0.875); } div#main-content div#u-side-bar div.side-block div.heading p { margin: 0; } div#main-content div#u-side-bar div#toc { border: none; margin-block: 0; } div#main-content div#u-side-bar div.side-block div.menu-item { display: flex; flex-wrap: wrap; font-size: 0; } div#main-content div#u-side-bar div.side-block div.menu-item p { display: contents; } div#main-content div#u-side-bar div.side-block div.menu-item a { display: block; padding: 0.375em 0.575rem; font-size: var(--side-bar-link-font-size); font-weight: bold; color: rgb(var(--side-bar-link-color)); flex-grow: 1; isolation: isolate; position: relative; transition: color var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a[href*="scp-series"] { flex-basis: 2.5em; text-align: center; } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus) { color: rgb(var(--side-bar-link-color-hover)); text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a:any-link { text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; background-color: rgb(var(--side-bar-link-background-hover)); transition: width var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus)::before { width: 100%; } @media only screen and (max-width: 1024px) { div.banner.main { background-size: 50% auto; } div#u-side-bar { margin-top: 0; height: 100%; } } [[/module]] [[div id="u-side-button"]] 目录 [[/div]] [[div id="u-side-bar"]] [[div class="side-block"]] [[toc]] [[/div]] [[/div]] [[div class="normal-content"]] [[div class="meta-title"]] 收容跟踪器 [[/div]] [[>]] [[module rate]] [[/>]] [[image https://ah-sandbox.wikidot.com/local--files/logos/[Z]Wdgt_contzilla.svg style="display: block; width: 60%; margin: 0.5rem auto;"]] [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-001 **许可等级：**5 ##right|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 [[/div]] [[div class="long"]] **项目编号：**SCP-CN-001 **许可等级：**5 ---- **基本信息** **项目类型：**现象 **异常类型：**精神影响，认知危害，无形，K级情景 ---- **收容信息** ##full|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 ---- **收容状态** 未收容 [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] [[span class="ruby"]]收容跟踪器[[span class="rt"]]Containment Tracker[[/span]][[/span]]，又名[[span class="ruby"]]科斯拉[[span class="rt"]]Contzilla[[/span]][[/span]]，是一种标准 SCP 档案格式头部的替代格式。在可预见的将来，此组件将在[[*user Dr Hormress]]的作品中替代[[[component:anomaly-class-bar|异常分类栏]]]，作为特色排版要素存在。异常分类栏为此组件的开发提供了不少灵感和配色参考，感谢！ Contzilla，发音如 kon-tsi-la，主要参考自 Mozilla 的故障追踪器 Bugzilla，试图给出一份更简洁、更符合世界观内人员处理异常程序的文档起首样式。本质上，这个系统与异常分类栏类似，优先级对应扰动等级，严重性对应风险等级，不过这个系统采用了更简单且更类似 Bug 处理模式的风格。 关于这个系统在世界观内被采用的原因，请参阅[[[jihu2025|这个页面]]]。 此组件无需与[[[theme:parallel|平行]]]版式一同使用。 + 快速开始 收容跟踪器的引用逻辑与传统的[[[credit:start|著作信息组件]]]相类似，用户需要两次使用 {{@@[[include]]@@}} 语法来包裹组件所容纳的内容。不过，收容跟踪器的组件内容并不任意，其通过空行（即分段）来分割组件内显示的区块。 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] “组件内容”和“更多内容”都需要填入用空行分隔的文字段落，其中前两个段落将分别作为组件头部左侧和右侧的文本使用。 + 使用方法 此组件并非只能用于特定的项目分级系统，尽管此组件是为这一目的而设计的。事实上，此组件提供几乎所有常见的（且视觉上美观的）项目分级组件的类似样式，具体实现方法详见下方的示例。此组件的基本使用方法相当简单。 ++ 经典外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] **示例：** [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2999 **项目等级：**Thaumiel ##900|**5/CN-2999级**## ##900|**最高机密**## [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} @@**项目编号：**SCP-CN-2999@@ @@**项目等级：**Thaumiel@@ @@##900|**5/CN-2999级**##@@ @@##900|**最高机密**##@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-1109 **项目等级：**Thaumiel **5/CN-1109级** 最高机密 [[/div]] [[/div]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--|clearance=5]]@@}} @@**项目编号：**SCP-CN-1109@@ @@**项目等级：**Thaumiel@@ @@**5/CN-1109级**@@ @@最高机密@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2846 ##vspace|@@ @@## **项目等级：**Ƿriðe ##F00|**6/CN-2846级**## ##vspace|@@ @@## ##F00|**机密**## [[/div]] [[/div]] ++ 切换外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] + 可选参数 * {{@@|clearance=1/2/3/4/5@@}}：添加对应授权等级的斜线 * {{@@|btn-change=--@@}}：仅限按钮范围可点击切换 * {{@@|logo=single@@}}：启用单个收容分类图标 * {{@@|logo=diamond@@}}：启用ACS钻石图标 [[/div]] [[/iftags]] [[module CSS]] :where(:root) { --six-color: 0, 0, 0; --five-color: 196, 2, 51; --four-color: 255, 109, 0; --three-color: 255, 211, 0; --two-color: 0, 135, 189; --one-color: 0, 159, 107; --basalt-secondary-color: 225, 225, 225; --thin-border-width: 1px; } div.contzilla { position: relative; margin-block: 1em; } div.contzilla[data-cle="1"] { --cle: 1; --cle-color: var(--one-color); } div.contzilla[data-cle="2"] { --cle: 2; --cle-color: var(--two-color); } div.contzilla[data-cle="3"] { --cle: 3; --cle-color: var(--three-color); } div.contzilla[data-cle="4"] { --cle: 4; --cle-color: var(--four-color); } div.contzilla[data-cle="5"] { --cle: 5; --cle-color: var(--five-color); } div.contzilla[data-cle="6"] { --cle: 6; --cle-color: var(--six-color); } div.contzilla p { display: flex; flex-wrap: wrap; align-items: center; align-content: center; margin-block: 0; padding-block: 0.5em; } div.contzilla p span[style*="vspace"] { display: block; height: 0.5em; } div.contzilla p span[style*="vspace"] span { display: none; } div.contzilla p span[style*="vspace"] + br, div.contzilla p br:has(+ span[style*="vspace"]) { display: none; } div.contzilla div.long { display: none; } div.contzilla:not(:has(div.long)) div.toggle { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.long { display: flex; opacity: 0; animation: contshow 0.125s forwards; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.short { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="block"]) div.short { opacity: 0; animation: contshow 0.125s forwards; } div.contzilla div.toggle a.collapsible-block-link { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; } div.contzilla div.toggle div.collapsible-block-folded::before { content: "\f107"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-unfolded::before { content: "\f106"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-folded::before, div.contzilla div.toggle div.collapsible-block-unfolded::before { display: block; margin-top: 0.2rem; text-align: center; line-height: 1.5em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla.btn--change div.toggle div.collapsible-block-folded, div.contzilla.btn--change div.toggle div.collapsible-block-unfolded { position: relative; } div.contzilla div.short { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 0.2rem; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) { row-gap: 0; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(1), div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(2) { margin-block: -0.5em; } div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { content: ""; display: block; align-self: stretch; margin-right: 0.2rem; position: absolute; left: calc(-0.2rem * (var(--cle) * 3)); top: 0.5em; width: calc(0.2rem * (var(--cle) * 3 - 1)); height: calc(100% - 1em); background-image: repeating-linear-gradient(to left, transparent 0rem, rgb(var(--cle-color)) 0rem, rgb(var(--cle-color)) 0.4rem, transparent 0.4rem, transparent 0.6rem); background-size: cover; background-position: right; transform-origin: 100% 0%; transform: skew(-30deg); } div.contzilla div.short p { grid-column: span 2; padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.short p:nth-of-type(1), div.contzilla div.short p:nth-of-type(2) { display: block; padding-inline: 0; background-color: transparent; margin-top: -0.5em; } div.contzilla div.short p:nth-of-type(1) { grid-column: 1 / 3; grid-row: 1 / 2; width: max-content; justify-self: start; } div.contzilla div.short p:nth-of-type(2) { grid-column: 4 / 5; grid-row: 1 / 2; width: max-content; justify-self: end; text-align: right; position: relative; } div.contzilla div.short p:has(span[style="color: left"]) { grid-column: 1 / 3; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: right"]) { grid-column: 3 / 5; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: top"]) { grid-column: 1 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottom"]) { grid-column: 1 / 5; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: topleft"]) { grid-column: 1 / 3; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: topright"]) { grid-column: 3 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottomleft"]) { grid-column: 1 / 3; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: bottomright"]) { grid-column: 3 / 5; grid-row: 3 / 4; } div.contzilla.logo--single div.short::before { grid-column: 4 / 5; } /* SINGLE LOGO */ div.contzilla.logo--single div.short { grid-template-columns: 1fr 1fr 1fr 1fr auto; } div.contzilla.logo--single div.short p:nth-of-type(1) { grid-column: 1 / 4; grid-row: 1 / 2; } div.contzilla.logo--single div.short p:nth-of-type(2) { grid-column: 5 / 6; grid-row: 1 / 2; } div.contzilla.logo--single div.short::after { content: ""; display: block; grid-column: 5 / 6; grid-row: 2 / 4; aspect-ratio: 1 / 1; background-color: rgb(var(--basalt-secondary-color)); } /* LONG */ div.contzilla div.long { flex-wrap: wrap; align-items: stretch; gap: 0.2rem; } div.contzilla div.long p { flex: 1; min-width: 40%; display: block; } div.contzilla div.long p:has(~ hr:first-of-type), div.contzilla div.long:not(:has(hr)) p { margin-top: -0.5em; } div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2), div.contzilla div.long:not(:has(hr)) p:nth-of-type(2) { width: max-content; text-align: right; position: relative; min-width: max-content; flex-grow: 0; flex-shrink: 0; } div.contzilla div.long hr { display: none; } div.contzilla div.long hr ~ p { padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.long hr + p, div.contzilla div.long p:has(span[style*="full"]) { min-width: 80%; } div.contzilla div.long hr + p { display: flex; padding: 0; background-color: transparent; gap: 1em; } div.contzilla div.long hr + p::before, div.contzilla div.long hr + p::after { content: ""; height: var(--thin-border-width); background-color: rgb(var(--basalt-secondary-color)); flex-grow: 1; } @keyframes contshow { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 360px) { div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { transform-origin: 100% 0%; transform: skew(-30deg) scaleX(0.5); height: calc(100% - 1.6em); top: 0.8em; } } [[/module]] [!-- --] [[div class="contzilla btn{$btn-change}change logo--single" data-cle="4"]] [[div class="short"]] [!-- --] [!-- {$more}] [[/div]] [[div class="long"]] [!{$more} --] [!-- {$end}] [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [!{$end} --] **项目编号：**SCP-CN-088 **许可等级：**4 ##right|**收容类型：**要服## **优先级：**P2 **严重性：**S2 [[iftags +组件]] [[module CSS]] @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/1"); div#u-component-top-box, div#page-title { display: none; } div#page-content h1 { display: flex; margin-top: 5rem; } div#page-content h1::after { content: ""; display: block; align-self: stretch; flex-grow: 1; margin-left: 0.5em; border-left: solid var(--base-border-width) rgb(var(--basalt-tertiary-color)); background-image: linear-gradient(rgb(var(--basalt-tertiary-color)), rgb(var(--basalt-tertiary-color))); background-size: 100% var(--base-border-width); background-position: center; background-repeat: no-repeat; } /* 页面布局 */ div#main-content { width: auto; max-width: 100%; margin-inline: 0; overflow-x: hidden; line-height: 1.75; } div#breadcrumbs, div#page-title { display: none; } div#page-options-container, div#action-area { width: var(--main-content-width); margin: 0 auto var(--main-content-bottom-margin); max-width: calc(100% - var(--main-content-side-margin) *2); } div#page-content + div.page-tags { width: var(--main-content-width); margin: 0.5rem auto; max-width: calc(100% - var(--main-content-side-margin) *2); } /* 页面内容元素 */ span.ruby { vertical-align: baseline; } span.rt { display: block; margin-top: -2.83em; margin-bottom: 0; line-height: 1.25; } div.normal-content { width: var(--main-content-width); max-width: calc(100% - var(--main-content-side-margin) * 2) !important; margin-inline: auto; } div.blockquote.wide { padding: 0; background-color: rgba(var(--basalt-secondary-color), 0.3); } div.code p:nth-of-type(1) { margin-top: 0; } div.code p:nth-last-of-type(1) { margin-bottom: 0; } /* 浮动目录 */ div#u-side-button { position: fixed; width: 3rem; height: 3rem; left: 1.5rem; bottom: 1.5rem; text-align: center; line-height: 3rem; font-size: 1rem; background-color: rgb(var(--basalt-secondary-color)); transition: ease 0.125s; z-index: 5; } div#u-side-button p { pointer-events: none; margin-block: 0; } div#u-side-button:hover { color: rgb(var(--basalt-light-text-color)); background-color: rgb(var(--basalt-undertone)); } div#side-bar { z-index: 11; } div#u-side-bar { position: fixed; float: none; top: 0; left: calc(var(--side-bar-width) * -1); padding: 0; margin: 0; margin-top: var(--header-final-height); height: calc(100% - var(--header-final-height)); width: var(--side-bar-width); max-width: calc(100% - 3.75rem); box-sizing: border-box; font-size: var(--side-bar-link-font-size); background-color: rgb(var(--side-bar-background-color)); overflow-x: hidden; overflow-y: auto; direction: rtl; transition: left var(--side-bar-transition); z-index: 10; } :where(:root:has(div#u-side-button:hover)) div#main-content div#u-side-bar, div#main-content div#u-side-bar:is(:hover, :focus-within) { left: 0; } div#main-content div#u-side-bar div.side-block { direction: ltr; font-family: var(--UI-font); } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc :is(div.title, div#toc-action-bar) { color: rgb(var(--UI-title-color)); background-color: rgb(var(--UI-title-background-color)); border-bottom: solid var(--base-border-width) rgb(var(--UI-title-color)); font-family: var(--header-font); font-weight: 700; text-transform: uppercase; text-align: center; } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc div#toc-action-bar { font-size: 0.875em; padding: 0.15em; } div#main-content div#u-side-bar div#toc div#toc-action-bar { display: none; } div#main-content div#u-side-bar div#toc div.title { font-size: 0; padding: calc(var(--side-bar-link-font-size) * 0.875 * 0.15); } div#main-content div#u-side-bar div#toc div.title::before { content: "目录"; font-size: calc(var(--side-bar-link-font-size) * 0.875); } div#main-content div#u-side-bar div.side-block div.heading p { margin: 0; } div#main-content div#u-side-bar div#toc { border: none; margin-block: 0; } div#main-content div#u-side-bar div.side-block div.menu-item { display: flex; flex-wrap: wrap; font-size: 0; } div#main-content div#u-side-bar div.side-block div.menu-item p { display: contents; } div#main-content div#u-side-bar div.side-block div.menu-item a { display: block; padding: 0.375em 0.575rem; font-size: var(--side-bar-link-font-size); font-weight: bold; color: rgb(var(--side-bar-link-color)); flex-grow: 1; isolation: isolate; position: relative; transition: color var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a[href*="scp-series"] { flex-basis: 2.5em; text-align: center; } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus) { color: rgb(var(--side-bar-link-color-hover)); text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a:any-link { text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; background-color: rgb(var(--side-bar-link-background-hover)); transition: width var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus)::before { width: 100%; } @media only screen and (max-width: 1024px) { div.banner.main { background-size: 50% auto; } div#u-side-bar { margin-top: 0; height: 100%; } } [[/module]] [[div id="u-side-button"]] 目录 [[/div]] [[div id="u-side-bar"]] [[div class="side-block"]] [[toc]] [[/div]] [[/div]] [[div class="normal-content"]] [[div class="meta-title"]] 收容跟踪器 [[/div]] [[>]] [[module rate]] [[/>]] [[image https://ah-sandbox.wikidot.com/local--files/logos/[Z]Wdgt_contzilla.svg style="display: block; width: 60%; margin: 0.5rem auto;"]] [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-001 **许可等级：**5 ##right|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 [[/div]] [[div class="long"]] **项目编号：**SCP-CN-001 **许可等级：**5 ---- **基本信息** **项目类型：**现象 **异常类型：**精神影响，认知危害，无形，K级情景 ---- **收容信息** ##full|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 ---- **收容状态** 未收容 [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] [[span class="ruby"]]收容跟踪器[[span class="rt"]]Containment Tracker[[/span]][[/span]]，又名[[span class="ruby"]]科斯拉[[span class="rt"]]Contzilla[[/span]][[/span]]，是一种标准 SCP 档案格式头部的替代格式。在可预见的将来，此组件将在[[*user Dr Hormress]]的作品中替代[[[component:anomaly-class-bar|异常分类栏]]]，作为特色排版要素存在。异常分类栏为此组件的开发提供了不少灵感和配色参考，感谢！ Contzilla，发音如 kon-tsi-la，主要参考自 Mozilla 的故障追踪器 Bugzilla，试图给出一份更简洁、更符合世界观内人员处理异常程序的文档起首样式。本质上，这个系统与异常分类栏类似，优先级对应扰动等级，严重性对应风险等级，不过这个系统采用了更简单且更类似 Bug 处理模式的风格。 关于这个系统在世界观内被采用的原因，请参阅[[[jihu2025|这个页面]]]。 此组件无需与[[[theme:parallel|平行]]]版式一同使用。 + 快速开始 收容跟踪器的引用逻辑与传统的[[[credit:start|著作信息组件]]]相类似，用户需要两次使用 {{@@[[include]]@@}} 语法来包裹组件所容纳的内容。不过，收容跟踪器的组件内容并不任意，其通过空行（即分段）来分割组件内显示的区块。 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] “组件内容”和“更多内容”都需要填入用空行分隔的文字段落，其中前两个段落将分别作为组件头部左侧和右侧的文本使用。 + 使用方法 此组件并非只能用于特定的项目分级系统，尽管此组件是为这一目的而设计的。事实上，此组件提供几乎所有常见的（且视觉上美观的）项目分级组件的类似样式，具体实现方法详见下方的示例。此组件的基本使用方法相当简单。 ++ 经典外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] **示例：** [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2999 **项目等级：**Thaumiel ##900|**5/CN-2999级**## ##900|**最高机密**## [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} @@**项目编号：**SCP-CN-2999@@ @@**项目等级：**Thaumiel@@ @@##900|**5/CN-2999级**##@@ @@##900|**最高机密**##@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-1109 **项目等级：**Thaumiel **5/CN-1109级** 最高机密 [[/div]] [[/div]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--|clearance=5]]@@}} @@**项目编号：**SCP-CN-1109@@ @@**项目等级：**Thaumiel@@ @@**5/CN-1109级**@@ @@最高机密@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2846 ##vspace|@@ @@## **项目等级：**Ƿriðe ##F00|**6/CN-2846级**## ##vspace|@@ @@## ##F00|**机密**## [[/div]] [[/div]] ++ 切换外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] + 可选参数 * {{@@|clearance=1/2/3/4/5@@}}：添加对应授权等级的斜线 * {{@@|btn-change=--@@}}：仅限按钮范围可点击切换 * {{@@|logo=single@@}}：启用单个收容分类图标 * {{@@|logo=diamond@@}}：启用ACS钻石图标 [[/div]] [[/iftags]] [[module CSS]] :where(:root) { --six-color: 0, 0, 0; --five-color: 196, 2, 51; --four-color: 255, 109, 0; --three-color: 255, 211, 0; --two-color: 0, 135, 189; --one-color: 0, 159, 107; --basalt-secondary-color: 225, 225, 225; --thin-border-width: 1px; } div.contzilla { position: relative; margin-block: 1em; } div.contzilla[data-cle="1"] { --cle: 1; --cle-color: var(--one-color); } div.contzilla[data-cle="2"] { --cle: 2; --cle-color: var(--two-color); } div.contzilla[data-cle="3"] { --cle: 3; --cle-color: var(--three-color); } div.contzilla[data-cle="4"] { --cle: 4; --cle-color: var(--four-color); } div.contzilla[data-cle="5"] { --cle: 5; --cle-color: var(--five-color); } div.contzilla[data-cle="6"] { --cle: 6; --cle-color: var(--six-color); } div.contzilla p { display: flex; flex-wrap: wrap; align-items: center; align-content: center; margin-block: 0; padding-block: 0.5em; } div.contzilla p span[style*="vspace"] { display: block; height: 0.5em; } div.contzilla p span[style*="vspace"] span { display: none; } div.contzilla p span[style*="vspace"] + br, div.contzilla p br:has(+ span[style*="vspace"]) { display: none; } div.contzilla div.long { display: none; } div.contzilla:not(:has(div.long)) div.toggle { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.long { display: flex; opacity: 0; animation: contshow 0.125s forwards; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.short { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="block"]) div.short { opacity: 0; animation: contshow 0.125s forwards; } div.contzilla div.toggle a.collapsible-block-link { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; } div.contzilla div.toggle div.collapsible-block-folded::before { content: "\f107"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-unfolded::before { content: "\f106"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-folded::before, div.contzilla div.toggle div.collapsible-block-unfolded::before { display: block; margin-top: 0.2rem; text-align: center; line-height: 1.5em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla.btn--change div.toggle div.collapsible-block-folded, div.contzilla.btn--change div.toggle div.collapsible-block-unfolded { position: relative; } div.contzilla div.short { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 0.2rem; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) { row-gap: 0; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(1), div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(2) { margin-block: -0.5em; } div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { content: ""; display: block; align-self: stretch; margin-right: 0.2rem; position: absolute; left: calc(-0.2rem * (var(--cle) * 3)); top: 0.5em; width: calc(0.2rem * (var(--cle) * 3 - 1)); height: calc(100% - 1em); background-image: repeating-linear-gradient(to left, transparent 0rem, rgb(var(--cle-color)) 0rem, rgb(var(--cle-color)) 0.4rem, transparent 0.4rem, transparent 0.6rem); background-size: cover; background-position: right; transform-origin: 100% 0%; transform: skew(-30deg); } div.contzilla div.short p { grid-column: span 2; padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.short p:nth-of-type(1), div.contzilla div.short p:nth-of-type(2) { display: block; padding-inline: 0; background-color: transparent; margin-top: -0.5em; } div.contzilla div.short p:nth-of-type(1) { grid-column: 1 / 3; grid-row: 1 / 2; width: max-content; justify-self: start; } div.contzilla div.short p:nth-of-type(2) { grid-column: 4 / 5; grid-row: 1 / 2; width: max-content; justify-self: end; text-align: right; position: relative; } div.contzilla div.short p:has(span[style="color: left"]) { grid-column: 1 / 3; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: right"]) { grid-column: 3 / 5; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: top"]) { grid-column: 1 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottom"]) { grid-column: 1 / 5; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: topleft"]) { grid-column: 1 / 3; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: topright"]) { grid-column: 3 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottomleft"]) { grid-column: 1 / 3; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: bottomright"]) { grid-column: 3 / 5; grid-row: 3 / 4; } div.contzilla.logo--single div.short::before { grid-column: 4 / 5; } /* SINGLE LOGO */ div.contzilla.logo--single div.short { grid-template-columns: 1fr 1fr 1fr 1fr auto; } div.contzilla.logo--single div.short p:nth-of-type(1) { grid-column: 1 / 4; grid-row: 1 / 2; } div.contzilla.logo--single div.short p:nth-of-type(2) { grid-column: 5 / 6; grid-row: 1 / 2; } div.contzilla.logo--single div.short::after { content: ""; display: block; grid-column: 5 / 6; grid-row: 2 / 4; aspect-ratio: 1 / 1; background-color: rgb(var(--basalt-secondary-color)); } /* LONG */ div.contzilla div.long { flex-wrap: wrap; align-items: stretch; gap: 0.2rem; } div.contzilla div.long p { flex: 1; min-width: 40%; display: block; } div.contzilla div.long p:has(~ hr:first-of-type), div.contzilla div.long:not(:has(hr)) p { margin-top: -0.5em; } div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2), div.contzilla div.long:not(:has(hr)) p:nth-of-type(2) { width: max-content; text-align: right; position: relative; min-width: max-content; flex-grow: 0; flex-shrink: 0; } div.contzilla div.long hr { display: none; } div.contzilla div.long hr ~ p { padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.long hr + p, div.contzilla div.long p:has(span[style*="full"]) { min-width: 80%; } div.contzilla div.long hr + p { display: flex; padding: 0; background-color: transparent; gap: 1em; } div.contzilla div.long hr + p::before, div.contzilla div.long hr + p::after { content: ""; height: var(--thin-border-width); background-color: rgb(var(--basalt-secondary-color)); flex-grow: 1; } @keyframes contshow { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 360px) { div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { transform-origin: 100% 0%; transform: skew(-30deg) scaleX(0.5); height: calc(100% - 1.6em); top: 0.8em; } } [[/module]] [!-- {$top}] [[div class="contzilla btn{$btn-change}change logo--{$logo}" data-cle="{$clearance}"]] [[div class="short"]] [!{$top} --] [!-- --] [[/div]] [[div class="long"]] [!-- --] [!-- {$end}] [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [!{$end} --] **项目编号：**SCP-CN-088 **许可等级：**4 ---- **基本信息** **项目类型：**地点，生物 **异常类型：**精神影响，反熵 ---- **收容信息** ##full|**收容类型：**要服 [2016-ARED#4]## **优先级：**P2 **严重性：**S2 ---- **收容状态** 已收容，需维护 [[iftags +组件]] [[module CSS]] @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/1"); div#u-component-top-box, div#page-title { display: none; } div#page-content h1 { display: flex; margin-top: 5rem; } div#page-content h1::after { content: ""; display: block; align-self: stretch; flex-grow: 1; margin-left: 0.5em; border-left: solid var(--base-border-width) rgb(var(--basalt-tertiary-color)); background-image: linear-gradient(rgb(var(--basalt-tertiary-color)), rgb(var(--basalt-tertiary-color))); background-size: 100% var(--base-border-width); background-position: center; background-repeat: no-repeat; } /* 页面布局 */ div#main-content { width: auto; max-width: 100%; margin-inline: 0; overflow-x: hidden; line-height: 1.75; } div#breadcrumbs, div#page-title { display: none; } div#page-options-container, div#action-area { width: var(--main-content-width); margin: 0 auto var(--main-content-bottom-margin); max-width: calc(100% - var(--main-content-side-margin) *2); } div#page-content + div.page-tags { width: var(--main-content-width); margin: 0.5rem auto; max-width: calc(100% - var(--main-content-side-margin) *2); } /* 页面内容元素 */ span.ruby { vertical-align: baseline; } span.rt { display: block; margin-top: -2.83em; margin-bottom: 0; line-height: 1.25; } div.normal-content { width: var(--main-content-width); max-width: calc(100% - var(--main-content-side-margin) * 2) !important; margin-inline: auto; } div.blockquote.wide { padding: 0; background-color: rgba(var(--basalt-secondary-color), 0.3); } div.code p:nth-of-type(1) { margin-top: 0; } div.code p:nth-last-of-type(1) { margin-bottom: 0; } /* 浮动目录 */ div#u-side-button { position: fixed; width: 3rem; height: 3rem; left: 1.5rem; bottom: 1.5rem; text-align: center; line-height: 3rem; font-size: 1rem; background-color: rgb(var(--basalt-secondary-color)); transition: ease 0.125s; z-index: 5; } div#u-side-button p { pointer-events: none; margin-block: 0; } div#u-side-button:hover { color: rgb(var(--basalt-light-text-color)); background-color: rgb(var(--basalt-undertone)); } div#side-bar { z-index: 11; } div#u-side-bar { position: fixed; float: none; top: 0; left: calc(var(--side-bar-width) * -1); padding: 0; margin: 0; margin-top: var(--header-final-height); height: calc(100% - var(--header-final-height)); width: var(--side-bar-width); max-width: calc(100% - 3.75rem); box-sizing: border-box; font-size: var(--side-bar-link-font-size); background-color: rgb(var(--side-bar-background-color)); overflow-x: hidden; overflow-y: auto; direction: rtl; transition: left var(--side-bar-transition); z-index: 10; } :where(:root:has(div#u-side-button:hover)) div#main-content div#u-side-bar, div#main-content div#u-side-bar:is(:hover, :focus-within) { left: 0; } div#main-content div#u-side-bar div.side-block { direction: ltr; font-family: var(--UI-font); } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc :is(div.title, div#toc-action-bar) { color: rgb(var(--UI-title-color)); background-color: rgb(var(--UI-title-background-color)); border-bottom: solid var(--base-border-width) rgb(var(--UI-title-color)); font-family: var(--header-font); font-weight: 700; text-transform: uppercase; text-align: center; } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc div#toc-action-bar { font-size: 0.875em; padding: 0.15em; } div#main-content div#u-side-bar div#toc div#toc-action-bar { display: none; } div#main-content div#u-side-bar div#toc div.title { font-size: 0; padding: calc(var(--side-bar-link-font-size) * 0.875 * 0.15); } div#main-content div#u-side-bar div#toc div.title::before { content: "目录"; font-size: calc(var(--side-bar-link-font-size) * 0.875); } div#main-content div#u-side-bar div.side-block div.heading p { margin: 0; } div#main-content div#u-side-bar div#toc { border: none; margin-block: 0; } div#main-content div#u-side-bar div.side-block div.menu-item { display: flex; flex-wrap: wrap; font-size: 0; } div#main-content div#u-side-bar div.side-block div.menu-item p { display: contents; } div#main-content div#u-side-bar div.side-block div.menu-item a { display: block; padding: 0.375em 0.575rem; font-size: var(--side-bar-link-font-size); font-weight: bold; color: rgb(var(--side-bar-link-color)); flex-grow: 1; isolation: isolate; position: relative; transition: color var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a[href*="scp-series"] { flex-basis: 2.5em; text-align: center; } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus) { color: rgb(var(--side-bar-link-color-hover)); text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a:any-link { text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; background-color: rgb(var(--side-bar-link-background-hover)); transition: width var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus)::before { width: 100%; } @media only screen and (max-width: 1024px) { div.banner.main { background-size: 50% auto; } div#u-side-bar { margin-top: 0; height: 100%; } } [[/module]] [[div id="u-side-button"]] 目录 [[/div]] [[div id="u-side-bar"]] [[div class="side-block"]] [[toc]] [[/div]] [[/div]] [[div class="normal-content"]] [[div class="meta-title"]] 收容跟踪器 [[/div]] [[>]] [[module rate]] [[/>]] [[image https://ah-sandbox.wikidot.com/local--files/logos/[Z]Wdgt_contzilla.svg style="display: block; width: 60%; margin: 0.5rem auto;"]] [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-001 **许可等级：**5 ##right|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 [[/div]] [[div class="long"]] **项目编号：**SCP-CN-001 **许可等级：**5 ---- **基本信息** **项目类型：**现象 **异常类型：**精神影响，认知危害，无形，K级情景 ---- **收容信息** ##full|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 ---- **收容状态** 未收容 [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] [[span class="ruby"]]收容跟踪器[[span class="rt"]]Containment Tracker[[/span]][[/span]]，又名[[span class="ruby"]]科斯拉[[span class="rt"]]Contzilla[[/span]][[/span]]，是一种标准 SCP 档案格式头部的替代格式。在可预见的将来，此组件将在[[*user Dr Hormress]]的作品中替代[[[component:anomaly-class-bar|异常分类栏]]]，作为特色排版要素存在。异常分类栏为此组件的开发提供了不少灵感和配色参考，感谢！ Contzilla，发音如 kon-tsi-la，主要参考自 Mozilla 的故障追踪器 Bugzilla，试图给出一份更简洁、更符合世界观内人员处理异常程序的文档起首样式。本质上，这个系统与异常分类栏类似，优先级对应扰动等级，严重性对应风险等级，不过这个系统采用了更简单且更类似 Bug 处理模式的风格。 关于这个系统在世界观内被采用的原因，请参阅[[[jihu2025|这个页面]]]。 此组件无需与[[[theme:parallel|平行]]]版式一同使用。 + 快速开始 收容跟踪器的引用逻辑与传统的[[[credit:start|著作信息组件]]]相类似，用户需要两次使用 {{@@[[include]]@@}} 语法来包裹组件所容纳的内容。不过，收容跟踪器的组件内容并不任意，其通过空行（即分段）来分割组件内显示的区块。 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] “组件内容”和“更多内容”都需要填入用空行分隔的文字段落，其中前两个段落将分别作为组件头部左侧和右侧的文本使用。 + 使用方法 此组件并非只能用于特定的项目分级系统，尽管此组件是为这一目的而设计的。事实上，此组件提供几乎所有常见的（且视觉上美观的）项目分级组件的类似样式，具体实现方法详见下方的示例。此组件的基本使用方法相当简单。 ++ 经典外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] **示例：** [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2999 **项目等级：**Thaumiel ##900|**5/CN-2999级**## ##900|**最高机密**## [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} @@**项目编号：**SCP-CN-2999@@ @@**项目等级：**Thaumiel@@ @@##900|**5/CN-2999级**##@@ @@##900|**最高机密**##@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-1109 **项目等级：**Thaumiel **5/CN-1109级** 最高机密 [[/div]] [[/div]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--|clearance=5]]@@}} @@**项目编号：**SCP-CN-1109@@ @@**项目等级：**Thaumiel@@ @@**5/CN-1109级**@@ @@最高机密@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2846 ##vspace|@@ @@## **项目等级：**Ƿriðe ##F00|**6/CN-2846级**## ##vspace|@@ @@## ##F00|**机密**## [[/div]] [[/div]] ++ 切换外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] + 可选参数 * {{@@|clearance=1/2/3/4/5@@}}：添加对应授权等级的斜线 * {{@@|btn-change=--@@}}：仅限按钮范围可点击切换 * {{@@|logo=single@@}}：启用单个收容分类图标 * {{@@|logo=diamond@@}}：启用ACS钻石图标 [[/div]] [[/iftags]] [[module CSS]] :where(:root) { --six-color: 0, 0, 0; --five-color: 196, 2, 51; --four-color: 255, 109, 0; --three-color: 255, 211, 0; --two-color: 0, 135, 189; --one-color: 0, 159, 107; --basalt-secondary-color: 225, 225, 225; --thin-border-width: 1px; } div.contzilla { position: relative; margin-block: 1em; } div.contzilla[data-cle="1"] { --cle: 1; --cle-color: var(--one-color); } div.contzilla[data-cle="2"] { --cle: 2; --cle-color: var(--two-color); } div.contzilla[data-cle="3"] { --cle: 3; --cle-color: var(--three-color); } div.contzilla[data-cle="4"] { --cle: 4; --cle-color: var(--four-color); } div.contzilla[data-cle="5"] { --cle: 5; --cle-color: var(--five-color); } div.contzilla[data-cle="6"] { --cle: 6; --cle-color: var(--six-color); } div.contzilla p { display: flex; flex-wrap: wrap; align-items: center; align-content: center; margin-block: 0; padding-block: 0.5em; } div.contzilla p span[style*="vspace"] { display: block; height: 0.5em; } div.contzilla p span[style*="vspace"] span { display: none; } div.contzilla p span[style*="vspace"] + br, div.contzilla p br:has(+ span[style*="vspace"]) { display: none; } div.contzilla div.long { display: none; } div.contzilla:not(:has(div.long)) div.toggle { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.long { display: flex; opacity: 0; animation: contshow 0.125s forwards; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.short { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="block"]) div.short { opacity: 0; animation: contshow 0.125s forwards; } div.contzilla div.toggle a.collapsible-block-link { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; } div.contzilla div.toggle div.collapsible-block-folded::before { content: "\f107"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-unfolded::before { content: "\f106"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-folded::before, div.contzilla div.toggle div.collapsible-block-unfolded::before { display: block; margin-top: 0.2rem; text-align: center; line-height: 1.5em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla.btn--change div.toggle div.collapsible-block-folded, div.contzilla.btn--change div.toggle div.collapsible-block-unfolded { position: relative; } div.contzilla div.short { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 0.2rem; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) { row-gap: 0; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(1), div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(2) { margin-block: -0.5em; } div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { content: ""; display: block; align-self: stretch; margin-right: 0.2rem; position: absolute; left: calc(-0.2rem * (var(--cle) * 3)); top: 0.5em; width: calc(0.2rem * (var(--cle) * 3 - 1)); height: calc(100% - 1em); background-image: repeating-linear-gradient(to left, transparent 0rem, rgb(var(--cle-color)) 0rem, rgb(var(--cle-color)) 0.4rem, transparent 0.4rem, transparent 0.6rem); background-size: cover; background-position: right; transform-origin: 100% 0%; transform: skew(-30deg); } div.contzilla div.short p { grid-column: span 2; padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.short p:nth-of-type(1), div.contzilla div.short p:nth-of-type(2) { display: block; padding-inline: 0; background-color: transparent; margin-top: -0.5em; } div.contzilla div.short p:nth-of-type(1) { grid-column: 1 / 3; grid-row: 1 / 2; width: max-content; justify-self: start; } div.contzilla div.short p:nth-of-type(2) { grid-column: 4 / 5; grid-row: 1 / 2; width: max-content; justify-self: end; text-align: right; position: relative; } div.contzilla div.short p:has(span[style="color: left"]) { grid-column: 1 / 3; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: right"]) { grid-column: 3 / 5; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: top"]) { grid-column: 1 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottom"]) { grid-column: 1 / 5; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: topleft"]) { grid-column: 1 / 3; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: topright"]) { grid-column: 3 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottomleft"]) { grid-column: 1 / 3; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: bottomright"]) { grid-column: 3 / 5; grid-row: 3 / 4; } div.contzilla.logo--single div.short::before { grid-column: 4 / 5; } /* SINGLE LOGO */ div.contzilla.logo--single div.short { grid-template-columns: 1fr 1fr 1fr 1fr auto; } div.contzilla.logo--single div.short p:nth-of-type(1) { grid-column: 1 / 4; grid-row: 1 / 2; } div.contzilla.logo--single div.short p:nth-of-type(2) { grid-column: 5 / 6; grid-row: 1 / 2; } div.contzilla.logo--single div.short::after { content: ""; display: block; grid-column: 5 / 6; grid-row: 2 / 4; aspect-ratio: 1 / 1; background-color: rgb(var(--basalt-secondary-color)); } /* LONG */ div.contzilla div.long { flex-wrap: wrap; align-items: stretch; gap: 0.2rem; } div.contzilla div.long p { flex: 1; min-width: 40%; display: block; } div.contzilla div.long p:has(~ hr:first-of-type), div.contzilla div.long:not(:has(hr)) p { margin-top: -0.5em; } div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2), div.contzilla div.long:not(:has(hr)) p:nth-of-type(2) { width: max-content; text-align: right; position: relative; min-width: max-content; flex-grow: 0; flex-shrink: 0; } div.contzilla div.long hr { display: none; } div.contzilla div.long hr ~ p { padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.long hr + p, div.contzilla div.long p:has(span[style*="full"]) { min-width: 80%; } div.contzilla div.long hr + p { display: flex; padding: 0; background-color: transparent; gap: 1em; } div.contzilla div.long hr + p::before, div.contzilla div.long hr + p::after { content: ""; height: var(--thin-border-width); background-color: rgb(var(--basalt-secondary-color)); flex-grow: 1; } @keyframes contshow { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 360px) { div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { transform-origin: 100% 0%; transform: skew(-30deg) scaleX(0.5); height: calc(100% - 1.6em); top: 0.8em; } } [[/module]] [!-- {$top}] [[div class="contzilla btn{$btn-change}change logo--{$logo}" data-cle="{$clearance}"]] [[div class="short"]] [!{$top} --] [!-- {$more}] [[/div]] [[div class="long"]] [!{$more} --] [!-- --] [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [!-- --] [[iftags +组件]] [[module CSS]] @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/1"); div#u-component-top-box, div#page-title { display: none; } div#page-content h1 { display: flex; margin-top: 5rem; } div#page-content h1::after { content: ""; display: block; align-self: stretch; flex-grow: 1; margin-left: 0.5em; border-left: solid var(--base-border-width) rgb(var(--basalt-tertiary-color)); background-image: linear-gradient(rgb(var(--basalt-tertiary-color)), rgb(var(--basalt-tertiary-color))); background-size: 100% var(--base-border-width); background-position: center; background-repeat: no-repeat; } /* 页面布局 */ div#main-content { width: auto; max-width: 100%; margin-inline: 0; overflow-x: hidden; line-height: 1.75; } div#breadcrumbs, div#page-title { display: none; } div#page-options-container, div#action-area { width: var(--main-content-width); margin: 0 auto var(--main-content-bottom-margin); max-width: calc(100% - var(--main-content-side-margin) *2); } div#page-content + div.page-tags { width: var(--main-content-width); margin: 0.5rem auto; max-width: calc(100% - var(--main-content-side-margin) *2); } /* 页面内容元素 */ span.ruby { vertical-align: baseline; } span.rt { display: block; margin-top: -2.83em; margin-bottom: 0; line-height: 1.25; } div.normal-content { width: var(--main-content-width); max-width: calc(100% - var(--main-content-side-margin) * 2) !important; margin-inline: auto; } div.blockquote.wide { padding: 0; background-color: rgba(var(--basalt-secondary-color), 0.3); } div.code p:nth-of-type(1) { margin-top: 0; } div.code p:nth-last-of-type(1) { margin-bottom: 0; } /* 浮动目录 */ div#u-side-button { position: fixed; width: 3rem; height: 3rem; left: 1.5rem; bottom: 1.5rem; text-align: center; line-height: 3rem; font-size: 1rem; background-color: rgb(var(--basalt-secondary-color)); transition: ease 0.125s; z-index: 5; } div#u-side-button p { pointer-events: none; margin-block: 0; } div#u-side-button:hover { color: rgb(var(--basalt-light-text-color)); background-color: rgb(var(--basalt-undertone)); } div#side-bar { z-index: 11; } div#u-side-bar { position: fixed; float: none; top: 0; left: calc(var(--side-bar-width) * -1); padding: 0; margin: 0; margin-top: var(--header-final-height); height: calc(100% - var(--header-final-height)); width: var(--side-bar-width); max-width: calc(100% - 3.75rem); box-sizing: border-box; font-size: var(--side-bar-link-font-size); background-color: rgb(var(--side-bar-background-color)); overflow-x: hidden; overflow-y: auto; direction: rtl; transition: left var(--side-bar-transition); z-index: 10; } :where(:root:has(div#u-side-button:hover)) div#main-content div#u-side-bar, div#main-content div#u-side-bar:is(:hover, :focus-within) { left: 0; } div#main-content div#u-side-bar div.side-block { direction: ltr; font-family: var(--UI-font); } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc :is(div.title, div#toc-action-bar) { color: rgb(var(--UI-title-color)); background-color: rgb(var(--UI-title-background-color)); border-bottom: solid var(--base-border-width) rgb(var(--UI-title-color)); font-family: var(--header-font); font-weight: 700; text-transform: uppercase; text-align: center; } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc div#toc-action-bar { font-size: 0.875em; padding: 0.15em; } div#main-content div#u-side-bar div#toc div#toc-action-bar { display: none; } div#main-content div#u-side-bar div#toc div.title { font-size: 0; padding: calc(var(--side-bar-link-font-size) * 0.875 * 0.15); } div#main-content div#u-side-bar div#toc div.title::before { content: "目录"; font-size: calc(var(--side-bar-link-font-size) * 0.875); } div#main-content div#u-side-bar div.side-block div.heading p { margin: 0; } div#main-content div#u-side-bar div#toc { border: none; margin-block: 0; } div#main-content div#u-side-bar div.side-block div.menu-item { display: flex; flex-wrap: wrap; font-size: 0; } div#main-content div#u-side-bar div.side-block div.menu-item p { display: contents; } div#main-content div#u-side-bar div.side-block div.menu-item a { display: block; padding: 0.375em 0.575rem; font-size: var(--side-bar-link-font-size); font-weight: bold; color: rgb(var(--side-bar-link-color)); flex-grow: 1; isolation: isolate; position: relative; transition: color var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a[href*="scp-series"] { flex-basis: 2.5em; text-align: center; } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus) { color: rgb(var(--side-bar-link-color-hover)); text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a:any-link { text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; background-color: rgb(var(--side-bar-link-background-hover)); transition: width var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus)::before { width: 100%; } @media only screen and (max-width: 1024px) { div.banner.main { background-size: 50% auto; } div#u-side-bar { margin-top: 0; height: 100%; } } [[/module]] [[div id="u-side-button"]] 目录 [[/div]] [[div id="u-side-bar"]] [[div class="side-block"]] [[toc]] [[/div]] [[/div]] [[div class="normal-content"]] [[div class="meta-title"]] 收容跟踪器 [[/div]] [[>]] [[module rate]] [[/>]] [[image https://ah-sandbox.wikidot.com/local--files/logos/[Z]Wdgt_contzilla.svg style="display: block; width: 60%; margin: 0.5rem auto;"]] [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-001 **许可等级：**5 ##right|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 [[/div]] [[div class="long"]] **项目编号：**SCP-CN-001 **许可等级：**5 ---- **基本信息** **项目类型：**现象 **异常类型：**精神影响，认知危害，无形，K级情景 ---- **收容信息** ##full|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 ---- **收容状态** 未收容 [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] [[span class="ruby"]]收容跟踪器[[span class="rt"]]Containment Tracker[[/span]][[/span]]，又名[[span class="ruby"]]科斯拉[[span class="rt"]]Contzilla[[/span]][[/span]]，是一种标准 SCP 档案格式头部的替代格式。在可预见的将来，此组件将在[[*user Dr Hormress]]的作品中替代[[[component:anomaly-class-bar|异常分类栏]]]，作为特色排版要素存在。异常分类栏为此组件的开发提供了不少灵感和配色参考，感谢！ Contzilla，发音如 kon-tsi-la，主要参考自 Mozilla 的故障追踪器 Bugzilla，试图给出一份更简洁、更符合世界观内人员处理异常程序的文档起首样式。本质上，这个系统与异常分类栏类似，优先级对应扰动等级，严重性对应风险等级，不过这个系统采用了更简单且更类似 Bug 处理模式的风格。 关于这个系统在世界观内被采用的原因，请参阅[[[jihu2025|这个页面]]]。 此组件无需与[[[theme:parallel|平行]]]版式一同使用。 + 快速开始 收容跟踪器的引用逻辑与传统的[[[credit:start|著作信息组件]]]相类似，用户需要两次使用 {{@@[[include]]@@}} 语法来包裹组件所容纳的内容。不过，收容跟踪器的组件内容并不任意，其通过空行（即分段）来分割组件内显示的区块。 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] “组件内容”和“更多内容”都需要填入用空行分隔的文字段落，其中前两个段落将分别作为组件头部左侧和右侧的文本使用。 + 使用方法 此组件并非只能用于特定的项目分级系统，尽管此组件是为这一目的而设计的。事实上，此组件提供几乎所有常见的（且视觉上美观的）项目分级组件的类似样式，具体实现方法详见下方的示例。此组件的基本使用方法相当简单。 ++ 经典外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] **示例：** [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2999 **项目等级：**Thaumiel ##900|**5/CN-2999级**## ##900|**最高机密**## [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} @@**项目编号：**SCP-CN-2999@@ @@**项目等级：**Thaumiel@@ @@##900|**5/CN-2999级**##@@ @@##900|**最高机密**##@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-1109 **项目等级：**Thaumiel **5/CN-1109级** 最高机密 [[/div]] [[/div]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--|clearance=5]]@@}} @@**项目编号：**SCP-CN-1109@@ @@**项目等级：**Thaumiel@@ @@**5/CN-1109级**@@ @@最高机密@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2846 ##vspace|@@ @@## **项目等级：**Ƿriðe ##F00|**6/CN-2846级**## ##vspace|@@ @@## ##F00|**机密**## [[/div]] [[/div]] ++ 切换外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] + 可选参数 * {{@@|clearance=1/2/3/4/5@@}}：添加对应授权等级的斜线 * {{@@|btn-change=--@@}}：仅限按钮范围可点击切换 * {{@@|logo=single@@}}：启用单个收容分类图标 * {{@@|logo=diamond@@}}：启用ACS钻石图标 [[/div]] [[/iftags]] [[module CSS]] :where(:root) { --six-color: 0, 0, 0; --five-color: 196, 2, 51; --four-color: 255, 109, 0; --three-color: 255, 211, 0; --two-color: 0, 135, 189; --one-color: 0, 159, 107; --basalt-secondary-color: 225, 225, 225; --thin-border-width: 1px; } div.contzilla { position: relative; margin-block: 1em; } div.contzilla[data-cle="1"] { --cle: 1; --cle-color: var(--one-color); } div.contzilla[data-cle="2"] { --cle: 2; --cle-color: var(--two-color); } div.contzilla[data-cle="3"] { --cle: 3; --cle-color: var(--three-color); } div.contzilla[data-cle="4"] { --cle: 4; --cle-color: var(--four-color); } div.contzilla[data-cle="5"] { --cle: 5; --cle-color: var(--five-color); } div.contzilla[data-cle="6"] { --cle: 6; --cle-color: var(--six-color); } div.contzilla p { display: flex; flex-wrap: wrap; align-items: center; align-content: center; margin-block: 0; padding-block: 0.5em; } div.contzilla p span[style*="vspace"] { display: block; height: 0.5em; } div.contzilla p span[style*="vspace"] span { display: none; } div.contzilla p span[style*="vspace"] + br, div.contzilla p br:has(+ span[style*="vspace"]) { display: none; } div.contzilla div.long { display: none; } div.contzilla:not(:has(div.long)) div.toggle { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.long { display: flex; opacity: 0; animation: contshow 0.125s forwards; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.short { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="block"]) div.short { opacity: 0; animation: contshow 0.125s forwards; } div.contzilla div.toggle a.collapsible-block-link { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; } div.contzilla div.toggle div.collapsible-block-folded::before { content: "\f107"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-unfolded::before { content: "\f106"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-folded::before, div.contzilla div.toggle div.collapsible-block-unfolded::before { display: block; margin-top: 0.2rem; text-align: center; line-height: 1.5em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla.btn--change div.toggle div.collapsible-block-folded, div.contzilla.btn--change div.toggle div.collapsible-block-unfolded { position: relative; } div.contzilla div.short { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 0.2rem; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) { row-gap: 0; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(1), div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(2) { margin-block: -0.5em; } div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { content: ""; display: block; align-self: stretch; margin-right: 0.2rem; position: absolute; left: calc(-0.2rem * (var(--cle) * 3)); top: 0.5em; width: calc(0.2rem * (var(--cle) * 3 - 1)); height: calc(100% - 1em); background-image: repeating-linear-gradient(to left, transparent 0rem, rgb(var(--cle-color)) 0rem, rgb(var(--cle-color)) 0.4rem, transparent 0.4rem, transparent 0.6rem); background-size: cover; background-position: right; transform-origin: 100% 0%; transform: skew(-30deg); } div.contzilla div.short p { grid-column: span 2; padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.short p:nth-of-type(1), div.contzilla div.short p:nth-of-type(2) { display: block; padding-inline: 0; background-color: transparent; margin-top: -0.5em; } div.contzilla div.short p:nth-of-type(1) { grid-column: 1 / 3; grid-row: 1 / 2; width: max-content; justify-self: start; } div.contzilla div.short p:nth-of-type(2) { grid-column: 4 / 5; grid-row: 1 / 2; width: max-content; justify-self: end; text-align: right; position: relative; } div.contzilla div.short p:has(span[style="color: left"]) { grid-column: 1 / 3; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: right"]) { grid-column: 3 / 5; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: top"]) { grid-column: 1 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottom"]) { grid-column: 1 / 5; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: topleft"]) { grid-column: 1 / 3; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: topright"]) { grid-column: 3 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottomleft"]) { grid-column: 1 / 3; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: bottomright"]) { grid-column: 3 / 5; grid-row: 3 / 4; } div.contzilla.logo--single div.short::before { grid-column: 4 / 5; } /* SINGLE LOGO */ div.contzilla.logo--single div.short { grid-template-columns: 1fr 1fr 1fr 1fr auto; } div.contzilla.logo--single div.short p:nth-of-type(1) { grid-column: 1 / 4; grid-row: 1 / 2; } div.contzilla.logo--single div.short p:nth-of-type(2) { grid-column: 5 / 6; grid-row: 1 / 2; } div.contzilla.logo--single div.short::after { content: ""; display: block; grid-column: 5 / 6; grid-row: 2 / 4; aspect-ratio: 1 / 1; background-color: rgb(var(--basalt-secondary-color)); } /* LONG */ div.contzilla div.long { flex-wrap: wrap; align-items: stretch; gap: 0.2rem; } div.contzilla div.long p { flex: 1; min-width: 40%; display: block; } div.contzilla div.long p:has(~ hr:first-of-type), div.contzilla div.long:not(:has(hr)) p { margin-top: -0.5em; } div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2), div.contzilla div.long:not(:has(hr)) p:nth-of-type(2) { width: max-content; text-align: right; position: relative; min-width: max-content; flex-grow: 0; flex-shrink: 0; } div.contzilla div.long hr { display: none; } div.contzilla div.long hr ~ p { padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.long hr + p, div.contzilla div.long p:has(span[style*="full"]) { min-width: 80%; } div.contzilla div.long hr + p { display: flex; padding: 0; background-color: transparent; gap: 1em; } div.contzilla div.long hr + p::before, div.contzilla div.long hr + p::after { content: ""; height: var(--thin-border-width); background-color: rgb(var(--basalt-secondary-color)); flex-grow: 1; } @keyframes contshow { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 360px) { div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { transform-origin: 100% 0%; transform: skew(-30deg) scaleX(0.5); height: calc(100% - 1.6em); top: 0.8em; } } [[/module]] [!-- --] [[div class="contzilla btn{$btn-change}change logo--{$logo}" data-cle="{$clearance}"]] [[div class="short"]] [!-- --] [!-- {$more}] [[/div]] [[div class="long"]] [!{$more} --] [!-- {$end}] [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [!{$end} --] **项目编号：**SCP-CN-2999 **项目等级：**Thaumiel ##900|**5/CN-2999级**## ##900|**最高机密**## [[iftags +组件]] [[module CSS]] @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/1"); div#u-component-top-box, div#page-title { display: none; } div#page-content h1 { display: flex; margin-top: 5rem; } div#page-content h1::after { content: ""; display: block; align-self: stretch; flex-grow: 1; margin-left: 0.5em; border-left: solid var(--base-border-width) rgb(var(--basalt-tertiary-color)); background-image: linear-gradient(rgb(var(--basalt-tertiary-color)), rgb(var(--basalt-tertiary-color))); background-size: 100% var(--base-border-width); background-position: center; background-repeat: no-repeat; } /* 页面布局 */ div#main-content { width: auto; max-width: 100%; margin-inline: 0; overflow-x: hidden; line-height: 1.75; } div#breadcrumbs, div#page-title { display: none; } div#page-options-container, div#action-area { width: var(--main-content-width); margin: 0 auto var(--main-content-bottom-margin); max-width: calc(100% - var(--main-content-side-margin) *2); } div#page-content + div.page-tags { width: var(--main-content-width); margin: 0.5rem auto; max-width: calc(100% - var(--main-content-side-margin) *2); } /* 页面内容元素 */ span.ruby { vertical-align: baseline; } span.rt { display: block; margin-top: -2.83em; margin-bottom: 0; line-height: 1.25; } div.normal-content { width: var(--main-content-width); max-width: calc(100% - var(--main-content-side-margin) * 2) !important; margin-inline: auto; } div.blockquote.wide { padding: 0; background-color: rgba(var(--basalt-secondary-color), 0.3); } div.code p:nth-of-type(1) { margin-top: 0; } div.code p:nth-last-of-type(1) { margin-bottom: 0; } /* 浮动目录 */ div#u-side-button { position: fixed; width: 3rem; height: 3rem; left: 1.5rem; bottom: 1.5rem; text-align: center; line-height: 3rem; font-size: 1rem; background-color: rgb(var(--basalt-secondary-color)); transition: ease 0.125s; z-index: 5; } div#u-side-button p { pointer-events: none; margin-block: 0; } div#u-side-button:hover { color: rgb(var(--basalt-light-text-color)); background-color: rgb(var(--basalt-undertone)); } div#side-bar { z-index: 11; } div#u-side-bar { position: fixed; float: none; top: 0; left: calc(var(--side-bar-width) * -1); padding: 0; margin: 0; margin-top: var(--header-final-height); height: calc(100% - var(--header-final-height)); width: var(--side-bar-width); max-width: calc(100% - 3.75rem); box-sizing: border-box; font-size: var(--side-bar-link-font-size); background-color: rgb(var(--side-bar-background-color)); overflow-x: hidden; overflow-y: auto; direction: rtl; transition: left var(--side-bar-transition); z-index: 10; } :where(:root:has(div#u-side-button:hover)) div#main-content div#u-side-bar, div#main-content div#u-side-bar:is(:hover, :focus-within) { left: 0; } div#main-content div#u-side-bar div.side-block { direction: ltr; font-family: var(--UI-font); } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc :is(div.title, div#toc-action-bar) { color: rgb(var(--UI-title-color)); background-color: rgb(var(--UI-title-background-color)); border-bottom: solid var(--base-border-width) rgb(var(--UI-title-color)); font-family: var(--header-font); font-weight: 700; text-transform: uppercase; text-align: center; } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc div#toc-action-bar { font-size: 0.875em; padding: 0.15em; } div#main-content div#u-side-bar div#toc div#toc-action-bar { display: none; } div#main-content div#u-side-bar div#toc div.title { font-size: 0; padding: calc(var(--side-bar-link-font-size) * 0.875 * 0.15); } div#main-content div#u-side-bar div#toc div.title::before { content: "目录"; font-size: calc(var(--side-bar-link-font-size) * 0.875); } div#main-content div#u-side-bar div.side-block div.heading p { margin: 0; } div#main-content div#u-side-bar div#toc { border: none; margin-block: 0; } div#main-content div#u-side-bar div.side-block div.menu-item { display: flex; flex-wrap: wrap; font-size: 0; } div#main-content div#u-side-bar div.side-block div.menu-item p { display: contents; } div#main-content div#u-side-bar div.side-block div.menu-item a { display: block; padding: 0.375em 0.575rem; font-size: var(--side-bar-link-font-size); font-weight: bold; color: rgb(var(--side-bar-link-color)); flex-grow: 1; isolation: isolate; position: relative; transition: color var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a[href*="scp-series"] { flex-basis: 2.5em; text-align: center; } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus) { color: rgb(var(--side-bar-link-color-hover)); text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a:any-link { text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; background-color: rgb(var(--side-bar-link-background-hover)); transition: width var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus)::before { width: 100%; } @media only screen and (max-width: 1024px) { div.banner.main { background-size: 50% auto; } div#u-side-bar { margin-top: 0; height: 100%; } } [[/module]] [[div id="u-side-button"]] 目录 [[/div]] [[div id="u-side-bar"]] [[div class="side-block"]] [[toc]] [[/div]] [[/div]] [[div class="normal-content"]] [[div class="meta-title"]] 收容跟踪器 [[/div]] [[>]] [[module rate]] [[/>]] [[image https://ah-sandbox.wikidot.com/local--files/logos/[Z]Wdgt_contzilla.svg style="display: block; width: 60%; margin: 0.5rem auto;"]] [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-001 **许可等级：**5 ##right|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 [[/div]] [[div class="long"]] **项目编号：**SCP-CN-001 **许可等级：**5 ---- **基本信息** **项目类型：**现象 **异常类型：**精神影响，认知危害，无形，K级情景 ---- **收容信息** ##full|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 ---- **收容状态** 未收容 [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] [[span class="ruby"]]收容跟踪器[[span class="rt"]]Containment Tracker[[/span]][[/span]]，又名[[span class="ruby"]]科斯拉[[span class="rt"]]Contzilla[[/span]][[/span]]，是一种标准 SCP 档案格式头部的替代格式。在可预见的将来，此组件将在[[*user Dr Hormress]]的作品中替代[[[component:anomaly-class-bar|异常分类栏]]]，作为特色排版要素存在。异常分类栏为此组件的开发提供了不少灵感和配色参考，感谢！ Contzilla，发音如 kon-tsi-la，主要参考自 Mozilla 的故障追踪器 Bugzilla，试图给出一份更简洁、更符合世界观内人员处理异常程序的文档起首样式。本质上，这个系统与异常分类栏类似，优先级对应扰动等级，严重性对应风险等级，不过这个系统采用了更简单且更类似 Bug 处理模式的风格。 关于这个系统在世界观内被采用的原因，请参阅[[[jihu2025|这个页面]]]。 此组件无需与[[[theme:parallel|平行]]]版式一同使用。 + 快速开始 收容跟踪器的引用逻辑与传统的[[[credit:start|著作信息组件]]]相类似，用户需要两次使用 {{@@[[include]]@@}} 语法来包裹组件所容纳的内容。不过，收容跟踪器的组件内容并不任意，其通过空行（即分段）来分割组件内显示的区块。 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] “组件内容”和“更多内容”都需要填入用空行分隔的文字段落，其中前两个段落将分别作为组件头部左侧和右侧的文本使用。 + 使用方法 此组件并非只能用于特定的项目分级系统，尽管此组件是为这一目的而设计的。事实上，此组件提供几乎所有常见的（且视觉上美观的）项目分级组件的类似样式，具体实现方法详见下方的示例。此组件的基本使用方法相当简单。 ++ 经典外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] **示例：** [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2999 **项目等级：**Thaumiel ##900|**5/CN-2999级**## ##900|**最高机密**## [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} @@**项目编号：**SCP-CN-2999@@ @@**项目等级：**Thaumiel@@ @@##900|**5/CN-2999级**##@@ @@##900|**最高机密**##@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-1109 **项目等级：**Thaumiel **5/CN-1109级** 最高机密 [[/div]] [[/div]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--|clearance=5]]@@}} @@**项目编号：**SCP-CN-1109@@ @@**项目等级：**Thaumiel@@ @@**5/CN-1109级**@@ @@最高机密@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2846 ##vspace|@@ @@## **项目等级：**Ƿriðe ##F00|**6/CN-2846级**## ##vspace|@@ @@## ##F00|**机密**## [[/div]] [[/div]] ++ 切换外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] + 可选参数 * {{@@|clearance=1/2/3/4/5@@}}：添加对应授权等级的斜线 * {{@@|btn-change=--@@}}：仅限按钮范围可点击切换 * {{@@|logo=single@@}}：启用单个收容分类图标 * {{@@|logo=diamond@@}}：启用ACS钻石图标 [[/div]] [[/iftags]] [[module CSS]] :where(:root) { --six-color: 0, 0, 0; --five-color: 196, 2, 51; --four-color: 255, 109, 0; --three-color: 255, 211, 0; --two-color: 0, 135, 189; --one-color: 0, 159, 107; --basalt-secondary-color: 225, 225, 225; --thin-border-width: 1px; } div.contzilla { position: relative; margin-block: 1em; } div.contzilla[data-cle="1"] { --cle: 1; --cle-color: var(--one-color); } div.contzilla[data-cle="2"] { --cle: 2; --cle-color: var(--two-color); } div.contzilla[data-cle="3"] { --cle: 3; --cle-color: var(--three-color); } div.contzilla[data-cle="4"] { --cle: 4; --cle-color: var(--four-color); } div.contzilla[data-cle="5"] { --cle: 5; --cle-color: var(--five-color); } div.contzilla[data-cle="6"] { --cle: 6; --cle-color: var(--six-color); } div.contzilla p { display: flex; flex-wrap: wrap; align-items: center; align-content: center; margin-block: 0; padding-block: 0.5em; } div.contzilla p span[style*="vspace"] { display: block; height: 0.5em; } div.contzilla p span[style*="vspace"] span { display: none; } div.contzilla p span[style*="vspace"] + br, div.contzilla p br:has(+ span[style*="vspace"]) { display: none; } div.contzilla div.long { display: none; } div.contzilla:not(:has(div.long)) div.toggle { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.long { display: flex; opacity: 0; animation: contshow 0.125s forwards; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.short { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="block"]) div.short { opacity: 0; animation: contshow 0.125s forwards; } div.contzilla div.toggle a.collapsible-block-link { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; } div.contzilla div.toggle div.collapsible-block-folded::before { content: "\f107"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-unfolded::before { content: "\f106"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-folded::before, div.contzilla div.toggle div.collapsible-block-unfolded::before { display: block; margin-top: 0.2rem; text-align: center; line-height: 1.5em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla.btn--change div.toggle div.collapsible-block-folded, div.contzilla.btn--change div.toggle div.collapsible-block-unfolded { position: relative; } div.contzilla div.short { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 0.2rem; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) { row-gap: 0; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(1), div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(2) { margin-block: -0.5em; } div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { content: ""; display: block; align-self: stretch; margin-right: 0.2rem; position: absolute; left: calc(-0.2rem * (var(--cle) * 3)); top: 0.5em; width: calc(0.2rem * (var(--cle) * 3 - 1)); height: calc(100% - 1em); background-image: repeating-linear-gradient(to left, transparent 0rem, rgb(var(--cle-color)) 0rem, rgb(var(--cle-color)) 0.4rem, transparent 0.4rem, transparent 0.6rem); background-size: cover; background-position: right; transform-origin: 100% 0%; transform: skew(-30deg); } div.contzilla div.short p { grid-column: span 2; padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.short p:nth-of-type(1), div.contzilla div.short p:nth-of-type(2) { display: block; padding-inline: 0; background-color: transparent; margin-top: -0.5em; } div.contzilla div.short p:nth-of-type(1) { grid-column: 1 / 3; grid-row: 1 / 2; width: max-content; justify-self: start; } div.contzilla div.short p:nth-of-type(2) { grid-column: 4 / 5; grid-row: 1 / 2; width: max-content; justify-self: end; text-align: right; position: relative; } div.contzilla div.short p:has(span[style="color: left"]) { grid-column: 1 / 3; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: right"]) { grid-column: 3 / 5; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: top"]) { grid-column: 1 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottom"]) { grid-column: 1 / 5; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: topleft"]) { grid-column: 1 / 3; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: topright"]) { grid-column: 3 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottomleft"]) { grid-column: 1 / 3; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: bottomright"]) { grid-column: 3 / 5; grid-row: 3 / 4; } div.contzilla.logo--single div.short::before { grid-column: 4 / 5; } /* SINGLE LOGO */ div.contzilla.logo--single div.short { grid-template-columns: 1fr 1fr 1fr 1fr auto; } div.contzilla.logo--single div.short p:nth-of-type(1) { grid-column: 1 / 4; grid-row: 1 / 2; } div.contzilla.logo--single div.short p:nth-of-type(2) { grid-column: 5 / 6; grid-row: 1 / 2; } div.contzilla.logo--single div.short::after { content: ""; display: block; grid-column: 5 / 6; grid-row: 2 / 4; aspect-ratio: 1 / 1; background-color: rgb(var(--basalt-secondary-color)); } /* LONG */ div.contzilla div.long { flex-wrap: wrap; align-items: stretch; gap: 0.2rem; } div.contzilla div.long p { flex: 1; min-width: 40%; display: block; } div.contzilla div.long p:has(~ hr:first-of-type), div.contzilla div.long:not(:has(hr)) p { margin-top: -0.5em; } div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2), div.contzilla div.long:not(:has(hr)) p:nth-of-type(2) { width: max-content; text-align: right; position: relative; min-width: max-content; flex-grow: 0; flex-shrink: 0; } div.contzilla div.long hr { display: none; } div.contzilla div.long hr ~ p { padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.long hr + p, div.contzilla div.long p:has(span[style*="full"]) { min-width: 80%; } div.contzilla div.long hr + p { display: flex; padding: 0; background-color: transparent; gap: 1em; } div.contzilla div.long hr + p::before, div.contzilla div.long hr + p::after { content: ""; height: var(--thin-border-width); background-color: rgb(var(--basalt-secondary-color)); flex-grow: 1; } @keyframes contshow { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 360px) { div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { transform-origin: 100% 0%; transform: skew(-30deg) scaleX(0.5); height: calc(100% - 1.6em); top: 0.8em; } } [[/module]] [!-- {$top}] [[div class="contzilla btn{$btn-change}change logo--{$logo}" data-cle="{$clearance}"]] [[div class="short"]] [!{$top} --] [!-- {$more}] [[/div]] [[div class="long"]] [!{$more} --] [!-- --] [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [!-- --] [[iftags +组件]] [[module CSS]] @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/1"); div#u-component-top-box, div#page-title { display: none; } div#page-content h1 { display: flex; margin-top: 5rem; } div#page-content h1::after { content: ""; display: block; align-self: stretch; flex-grow: 1; margin-left: 0.5em; border-left: solid var(--base-border-width) rgb(var(--basalt-tertiary-color)); background-image: linear-gradient(rgb(var(--basalt-tertiary-color)), rgb(var(--basalt-tertiary-color))); background-size: 100% var(--base-border-width); background-position: center; background-repeat: no-repeat; } /* 页面布局 */ div#main-content { width: auto; max-width: 100%; margin-inline: 0; overflow-x: hidden; line-height: 1.75; } div#breadcrumbs, div#page-title { display: none; } div#page-options-container, div#action-area { width: var(--main-content-width); margin: 0 auto var(--main-content-bottom-margin); max-width: calc(100% - var(--main-content-side-margin) *2); } div#page-content + div.page-tags { width: var(--main-content-width); margin: 0.5rem auto; max-width: calc(100% - var(--main-content-side-margin) *2); } /* 页面内容元素 */ span.ruby { vertical-align: baseline; } span.rt { display: block; margin-top: -2.83em; margin-bottom: 0; line-height: 1.25; } div.normal-content { width: var(--main-content-width); max-width: calc(100% - var(--main-content-side-margin) * 2) !important; margin-inline: auto; } div.blockquote.wide { padding: 0; background-color: rgba(var(--basalt-secondary-color), 0.3); } div.code p:nth-of-type(1) { margin-top: 0; } div.code p:nth-last-of-type(1) { margin-bottom: 0; } /* 浮动目录 */ div#u-side-button { position: fixed; width: 3rem; height: 3rem; left: 1.5rem; bottom: 1.5rem; text-align: center; line-height: 3rem; font-size: 1rem; background-color: rgb(var(--basalt-secondary-color)); transition: ease 0.125s; z-index: 5; } div#u-side-button p { pointer-events: none; margin-block: 0; } div#u-side-button:hover { color: rgb(var(--basalt-light-text-color)); background-color: rgb(var(--basalt-undertone)); } div#side-bar { z-index: 11; } div#u-side-bar { position: fixed; float: none; top: 0; left: calc(var(--side-bar-width) * -1); padding: 0; margin: 0; margin-top: var(--header-final-height); height: calc(100% - var(--header-final-height)); width: var(--side-bar-width); max-width: calc(100% - 3.75rem); box-sizing: border-box; font-size: var(--side-bar-link-font-size); background-color: rgb(var(--side-bar-background-color)); overflow-x: hidden; overflow-y: auto; direction: rtl; transition: left var(--side-bar-transition); z-index: 10; } :where(:root:has(div#u-side-button:hover)) div#main-content div#u-side-bar, div#main-content div#u-side-bar:is(:hover, :focus-within) { left: 0; } div#main-content div#u-side-bar div.side-block { direction: ltr; font-family: var(--UI-font); } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc :is(div.title, div#toc-action-bar) { color: rgb(var(--UI-title-color)); background-color: rgb(var(--UI-title-background-color)); border-bottom: solid var(--base-border-width) rgb(var(--UI-title-color)); font-family: var(--header-font); font-weight: 700; text-transform: uppercase; text-align: center; } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc div#toc-action-bar { font-size: 0.875em; padding: 0.15em; } div#main-content div#u-side-bar div#toc div#toc-action-bar { display: none; } div#main-content div#u-side-bar div#toc div.title { font-size: 0; padding: calc(var(--side-bar-link-font-size) * 0.875 * 0.15); } div#main-content div#u-side-bar div#toc div.title::before { content: "目录"; font-size: calc(var(--side-bar-link-font-size) * 0.875); } div#main-content div#u-side-bar div.side-block div.heading p { margin: 0; } div#main-content div#u-side-bar div#toc { border: none; margin-block: 0; } div#main-content div#u-side-bar div.side-block div.menu-item { display: flex; flex-wrap: wrap; font-size: 0; } div#main-content div#u-side-bar div.side-block div.menu-item p { display: contents; } div#main-content div#u-side-bar div.side-block div.menu-item a { display: block; padding: 0.375em 0.575rem; font-size: var(--side-bar-link-font-size); font-weight: bold; color: rgb(var(--side-bar-link-color)); flex-grow: 1; isolation: isolate; position: relative; transition: color var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a[href*="scp-series"] { flex-basis: 2.5em; text-align: center; } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus) { color: rgb(var(--side-bar-link-color-hover)); text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a:any-link { text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; background-color: rgb(var(--side-bar-link-background-hover)); transition: width var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus)::before { width: 100%; } @media only screen and (max-width: 1024px) { div.banner.main { background-size: 50% auto; } div#u-side-bar { margin-top: 0; height: 100%; } } [[/module]] [[div id="u-side-button"]] 目录 [[/div]] [[div id="u-side-bar"]] [[div class="side-block"]] [[toc]] [[/div]] [[/div]] [[div class="normal-content"]] [[div class="meta-title"]] 收容跟踪器 [[/div]] [[>]] [[module rate]] [[/>]] [[image https://ah-sandbox.wikidot.com/local--files/logos/[Z]Wdgt_contzilla.svg style="display: block; width: 60%; margin: 0.5rem auto;"]] [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-001 **许可等级：**5 ##right|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 [[/div]] [[div class="long"]] **项目编号：**SCP-CN-001 **许可等级：**5 ---- **基本信息** **项目类型：**现象 **异常类型：**精神影响，认知危害，无形，K级情景 ---- **收容信息** ##full|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 ---- **收容状态** 未收容 [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] [[span class="ruby"]]收容跟踪器[[span class="rt"]]Containment Tracker[[/span]][[/span]]，又名[[span class="ruby"]]科斯拉[[span class="rt"]]Contzilla[[/span]][[/span]]，是一种标准 SCP 档案格式头部的替代格式。在可预见的将来，此组件将在[[*user Dr Hormress]]的作品中替代[[[component:anomaly-class-bar|异常分类栏]]]，作为特色排版要素存在。异常分类栏为此组件的开发提供了不少灵感和配色参考，感谢！ Contzilla，发音如 kon-tsi-la，主要参考自 Mozilla 的故障追踪器 Bugzilla，试图给出一份更简洁、更符合世界观内人员处理异常程序的文档起首样式。本质上，这个系统与异常分类栏类似，优先级对应扰动等级，严重性对应风险等级，不过这个系统采用了更简单且更类似 Bug 处理模式的风格。 关于这个系统在世界观内被采用的原因，请参阅[[[jihu2025|这个页面]]]。 此组件无需与[[[theme:parallel|平行]]]版式一同使用。 + 快速开始 收容跟踪器的引用逻辑与传统的[[[credit:start|著作信息组件]]]相类似，用户需要两次使用 {{@@[[include]]@@}} 语法来包裹组件所容纳的内容。不过，收容跟踪器的组件内容并不任意，其通过空行（即分段）来分割组件内显示的区块。 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] “组件内容”和“更多内容”都需要填入用空行分隔的文字段落，其中前两个段落将分别作为组件头部左侧和右侧的文本使用。 + 使用方法 此组件并非只能用于特定的项目分级系统，尽管此组件是为这一目的而设计的。事实上，此组件提供几乎所有常见的（且视觉上美观的）项目分级组件的类似样式，具体实现方法详见下方的示例。此组件的基本使用方法相当简单。 ++ 经典外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] **示例：** [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2999 **项目等级：**Thaumiel ##900|**5/CN-2999级**## ##900|**最高机密**## [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} @@**项目编号：**SCP-CN-2999@@ @@**项目等级：**Thaumiel@@ @@##900|**5/CN-2999级**##@@ @@##900|**最高机密**##@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-1109 **项目等级：**Thaumiel **5/CN-1109级** 最高机密 [[/div]] [[/div]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--|clearance=5]]@@}} @@**项目编号：**SCP-CN-1109@@ @@**项目等级：**Thaumiel@@ @@**5/CN-1109级**@@ @@最高机密@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2846 ##vspace|@@ @@## **项目等级：**Ƿriðe ##F00|**6/CN-2846级**## ##vspace|@@ @@## ##F00|**机密**## [[/div]] [[/div]] ++ 切换外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] + 可选参数 * {{@@|clearance=1/2/3/4/5@@}}：添加对应授权等级的斜线 * {{@@|btn-change=--@@}}：仅限按钮范围可点击切换 * {{@@|logo=single@@}}：启用单个收容分类图标 * {{@@|logo=diamond@@}}：启用ACS钻石图标 [[/div]] [[/iftags]] [[module CSS]] :where(:root) { --six-color: 0, 0, 0; --five-color: 196, 2, 51; --four-color: 255, 109, 0; --three-color: 255, 211, 0; --two-color: 0, 135, 189; --one-color: 0, 159, 107; --basalt-secondary-color: 225, 225, 225; --thin-border-width: 1px; } div.contzilla { position: relative; margin-block: 1em; } div.contzilla[data-cle="1"] { --cle: 1; --cle-color: var(--one-color); } div.contzilla[data-cle="2"] { --cle: 2; --cle-color: var(--two-color); } div.contzilla[data-cle="3"] { --cle: 3; --cle-color: var(--three-color); } div.contzilla[data-cle="4"] { --cle: 4; --cle-color: var(--four-color); } div.contzilla[data-cle="5"] { --cle: 5; --cle-color: var(--five-color); } div.contzilla[data-cle="6"] { --cle: 6; --cle-color: var(--six-color); } div.contzilla p { display: flex; flex-wrap: wrap; align-items: center; align-content: center; margin-block: 0; padding-block: 0.5em; } div.contzilla p span[style*="vspace"] { display: block; height: 0.5em; } div.contzilla p span[style*="vspace"] span { display: none; } div.contzilla p span[style*="vspace"] + br, div.contzilla p br:has(+ span[style*="vspace"]) { display: none; } div.contzilla div.long { display: none; } div.contzilla:not(:has(div.long)) div.toggle { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.long { display: flex; opacity: 0; animation: contshow 0.125s forwards; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.short { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="block"]) div.short { opacity: 0; animation: contshow 0.125s forwards; } div.contzilla div.toggle a.collapsible-block-link { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; } div.contzilla div.toggle div.collapsible-block-folded::before { content: "\f107"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-unfolded::before { content: "\f106"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-folded::before, div.contzilla div.toggle div.collapsible-block-unfolded::before { display: block; margin-top: 0.2rem; text-align: center; line-height: 1.5em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla.btn--change div.toggle div.collapsible-block-folded, div.contzilla.btn--change div.toggle div.collapsible-block-unfolded { position: relative; } div.contzilla div.short { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 0.2rem; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) { row-gap: 0; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(1), div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(2) { margin-block: -0.5em; } div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { content: ""; display: block; align-self: stretch; margin-right: 0.2rem; position: absolute; left: calc(-0.2rem * (var(--cle) * 3)); top: 0.5em; width: calc(0.2rem * (var(--cle) * 3 - 1)); height: calc(100% - 1em); background-image: repeating-linear-gradient(to left, transparent 0rem, rgb(var(--cle-color)) 0rem, rgb(var(--cle-color)) 0.4rem, transparent 0.4rem, transparent 0.6rem); background-size: cover; background-position: right; transform-origin: 100% 0%; transform: skew(-30deg); } div.contzilla div.short p { grid-column: span 2; padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.short p:nth-of-type(1), div.contzilla div.short p:nth-of-type(2) { display: block; padding-inline: 0; background-color: transparent; margin-top: -0.5em; } div.contzilla div.short p:nth-of-type(1) { grid-column: 1 / 3; grid-row: 1 / 2; width: max-content; justify-self: start; } div.contzilla div.short p:nth-of-type(2) { grid-column: 4 / 5; grid-row: 1 / 2; width: max-content; justify-self: end; text-align: right; position: relative; } div.contzilla div.short p:has(span[style="color: left"]) { grid-column: 1 / 3; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: right"]) { grid-column: 3 / 5; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: top"]) { grid-column: 1 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottom"]) { grid-column: 1 / 5; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: topleft"]) { grid-column: 1 / 3; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: topright"]) { grid-column: 3 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottomleft"]) { grid-column: 1 / 3; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: bottomright"]) { grid-column: 3 / 5; grid-row: 3 / 4; } div.contzilla.logo--single div.short::before { grid-column: 4 / 5; } /* SINGLE LOGO */ div.contzilla.logo--single div.short { grid-template-columns: 1fr 1fr 1fr 1fr auto; } div.contzilla.logo--single div.short p:nth-of-type(1) { grid-column: 1 / 4; grid-row: 1 / 2; } div.contzilla.logo--single div.short p:nth-of-type(2) { grid-column: 5 / 6; grid-row: 1 / 2; } div.contzilla.logo--single div.short::after { content: ""; display: block; grid-column: 5 / 6; grid-row: 2 / 4; aspect-ratio: 1 / 1; background-color: rgb(var(--basalt-secondary-color)); } /* LONG */ div.contzilla div.long { flex-wrap: wrap; align-items: stretch; gap: 0.2rem; } div.contzilla div.long p { flex: 1; min-width: 40%; display: block; } div.contzilla div.long p:has(~ hr:first-of-type), div.contzilla div.long:not(:has(hr)) p { margin-top: -0.5em; } div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2), div.contzilla div.long:not(:has(hr)) p:nth-of-type(2) { width: max-content; text-align: right; position: relative; min-width: max-content; flex-grow: 0; flex-shrink: 0; } div.contzilla div.long hr { display: none; } div.contzilla div.long hr ~ p { padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.long hr + p, div.contzilla div.long p:has(span[style*="full"]) { min-width: 80%; } div.contzilla div.long hr + p { display: flex; padding: 0; background-color: transparent; gap: 1em; } div.contzilla div.long hr + p::before, div.contzilla div.long hr + p::after { content: ""; height: var(--thin-border-width); background-color: rgb(var(--basalt-secondary-color)); flex-grow: 1; } @keyframes contshow { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 360px) { div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { transform-origin: 100% 0%; transform: skew(-30deg) scaleX(0.5); height: calc(100% - 1.6em); top: 0.8em; } } [[/module]] [!-- --] [[div class="contzilla btn{$btn-change}change logo--{$logo}" data-cle="5"]] [[div class="short"]] [!-- --] [!-- {$more}] [[/div]] [[div class="long"]] [!{$more} --] [!-- {$end}] [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [!{$end} --] **项目编号：**SCP-CN-1109 **项目等级：**Thaumiel **5/CN-1109级** 最高机密 [[iftags +组件]] [[module CSS]] @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/1"); div#u-component-top-box, div#page-title { display: none; } div#page-content h1 { display: flex; margin-top: 5rem; } div#page-content h1::after { content: ""; display: block; align-self: stretch; flex-grow: 1; margin-left: 0.5em; border-left: solid var(--base-border-width) rgb(var(--basalt-tertiary-color)); background-image: linear-gradient(rgb(var(--basalt-tertiary-color)), rgb(var(--basalt-tertiary-color))); background-size: 100% var(--base-border-width); background-position: center; background-repeat: no-repeat; } /* 页面布局 */ div#main-content { width: auto; max-width: 100%; margin-inline: 0; overflow-x: hidden; line-height: 1.75; } div#breadcrumbs, div#page-title { display: none; } div#page-options-container, div#action-area { width: var(--main-content-width); margin: 0 auto var(--main-content-bottom-margin); max-width: calc(100% - var(--main-content-side-margin) *2); } div#page-content + div.page-tags { width: var(--main-content-width); margin: 0.5rem auto; max-width: calc(100% - var(--main-content-side-margin) *2); } /* 页面内容元素 */ span.ruby { vertical-align: baseline; } span.rt { display: block; margin-top: -2.83em; margin-bottom: 0; line-height: 1.25; } div.normal-content { width: var(--main-content-width); max-width: calc(100% - var(--main-content-side-margin) * 2) !important; margin-inline: auto; } div.blockquote.wide { padding: 0; background-color: rgba(var(--basalt-secondary-color), 0.3); } div.code p:nth-of-type(1) { margin-top: 0; } div.code p:nth-last-of-type(1) { margin-bottom: 0; } /* 浮动目录 */ div#u-side-button { position: fixed; width: 3rem; height: 3rem; left: 1.5rem; bottom: 1.5rem; text-align: center; line-height: 3rem; font-size: 1rem; background-color: rgb(var(--basalt-secondary-color)); transition: ease 0.125s; z-index: 5; } div#u-side-button p { pointer-events: none; margin-block: 0; } div#u-side-button:hover { color: rgb(var(--basalt-light-text-color)); background-color: rgb(var(--basalt-undertone)); } div#side-bar { z-index: 11; } div#u-side-bar { position: fixed; float: none; top: 0; left: calc(var(--side-bar-width) * -1); padding: 0; margin: 0; margin-top: var(--header-final-height); height: calc(100% - var(--header-final-height)); width: var(--side-bar-width); max-width: calc(100% - 3.75rem); box-sizing: border-box; font-size: var(--side-bar-link-font-size); background-color: rgb(var(--side-bar-background-color)); overflow-x: hidden; overflow-y: auto; direction: rtl; transition: left var(--side-bar-transition); z-index: 10; } :where(:root:has(div#u-side-button:hover)) div#main-content div#u-side-bar, div#main-content div#u-side-bar:is(:hover, :focus-within) { left: 0; } div#main-content div#u-side-bar div.side-block { direction: ltr; font-family: var(--UI-font); } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc :is(div.title, div#toc-action-bar) { color: rgb(var(--UI-title-color)); background-color: rgb(var(--UI-title-background-color)); border-bottom: solid var(--base-border-width) rgb(var(--UI-title-color)); font-family: var(--header-font); font-weight: 700; text-transform: uppercase; text-align: center; } div#main-content div#u-side-bar div.side-block div.heading, div#main-content div#u-side-bar div#toc div#toc-action-bar { font-size: 0.875em; padding: 0.15em; } div#main-content div#u-side-bar div#toc div#toc-action-bar { display: none; } div#main-content div#u-side-bar div#toc div.title { font-size: 0; padding: calc(var(--side-bar-link-font-size) * 0.875 * 0.15); } div#main-content div#u-side-bar div#toc div.title::before { content: "目录"; font-size: calc(var(--side-bar-link-font-size) * 0.875); } div#main-content div#u-side-bar div.side-block div.heading p { margin: 0; } div#main-content div#u-side-bar div#toc { border: none; margin-block: 0; } div#main-content div#u-side-bar div.side-block div.menu-item { display: flex; flex-wrap: wrap; font-size: 0; } div#main-content div#u-side-bar div.side-block div.menu-item p { display: contents; } div#main-content div#u-side-bar div.side-block div.menu-item a { display: block; padding: 0.375em 0.575rem; font-size: var(--side-bar-link-font-size); font-weight: bold; color: rgb(var(--side-bar-link-color)); flex-grow: 1; isolation: isolate; position: relative; transition: color var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a[href*="scp-series"] { flex-basis: 2.5em; text-align: center; } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus) { color: rgb(var(--side-bar-link-color-hover)); text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a:any-link { text-decoration: none; } div#main-content div#u-side-bar div.side-block div.menu-item a::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; background-color: rgb(var(--side-bar-link-background-hover)); transition: width var(--side-bar-link-transition); } div#main-content div#u-side-bar div.side-block div.menu-item a:is(:hover, :focus)::before { width: 100%; } @media only screen and (max-width: 1024px) { div.banner.main { background-size: 50% auto; } div#u-side-bar { margin-top: 0; height: 100%; } } [[/module]] [[div id="u-side-button"]] 目录 [[/div]] [[div id="u-side-bar"]] [[div class="side-block"]] [[toc]] [[/div]] [[/div]] [[div class="normal-content"]] [[div class="meta-title"]] 收容跟踪器 [[/div]] [[>]] [[module rate]] [[/>]] [[image https://ah-sandbox.wikidot.com/local--files/logos/[Z]Wdgt_contzilla.svg style="display: block; width: 60%; margin: 0.5rem auto;"]] [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-001 **许可等级：**5 ##right|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 [[/div]] [[div class="long"]] **项目编号：**SCP-CN-001 **许可等级：**5 ---- **基本信息** **项目类型：**现象 **异常类型：**精神影响，认知危害，无形，K级情景 ---- **收容信息** ##full|**收容类型：**Keter## **优先级：**P0 **严重性：**S1 ---- **收容状态** 未收容 [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] [[span class="ruby"]]收容跟踪器[[span class="rt"]]Containment Tracker[[/span]][[/span]]，又名[[span class="ruby"]]科斯拉[[span class="rt"]]Contzilla[[/span]][[/span]]，是一种标准 SCP 档案格式头部的替代格式。在可预见的将来，此组件将在[[*user Dr Hormress]]的作品中替代[[[component:anomaly-class-bar|异常分类栏]]]，作为特色排版要素存在。异常分类栏为此组件的开发提供了不少灵感和配色参考，感谢！ Contzilla，发音如 kon-tsi-la，主要参考自 Mozilla 的故障追踪器 Bugzilla，试图给出一份更简洁、更符合世界观内人员处理异常程序的文档起首样式。本质上，这个系统与异常分类栏类似，优先级对应扰动等级，严重性对应风险等级，不过这个系统采用了更简单且更类似 Bug 处理模式的风格。 关于这个系统在世界观内被采用的原因，请参阅[[[jihu2025|这个页面]]]。 此组件无需与[[[theme:parallel|平行]]]版式一同使用。 + 快速开始 收容跟踪器的引用逻辑与传统的[[[credit:start|著作信息组件]]]相类似，用户需要两次使用 {{@@[[include]]@@}} 语法来包裹组件所容纳的内容。不过，收容跟踪器的组件内容并不任意，其通过空行（即分段）来分割组件内显示的区块。 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] “组件内容”和“更多内容”都需要填入用空行分隔的文字段落，其中前两个段落将分别作为组件头部左侧和右侧的文本使用。 + 使用方法 此组件并非只能用于特定的项目分级系统，尽管此组件是为这一目的而设计的。事实上，此组件提供几乎所有常见的（且视觉上美观的）项目分级组件的类似样式，具体实现方法详见下方的示例。此组件的基本使用方法相当简单。 ++ 经典外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] **示例：** [[/div]] [[div class="blockquote wide"]] [[div class="normal-content"]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2999 **项目等级：**Thaumiel ##900|**5/CN-2999级**## ##900|**最高机密**## [[/div]] [[/div]] [[/div]] [[/div]] [[div class="normal-content"]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} @@**项目编号：**SCP-CN-2999@@ @@**项目等级：**Thaumiel@@ @@##900|**5/CN-2999级**##@@ @@##900|**最高机密**##@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla" data-cle="5"]] [[div class="short"]] **项目编号：**SCP-CN-1109 **项目等级：**Thaumiel **5/CN-1109级** 最高机密 [[/div]] [[/div]] **源代码：** [[div class="code"]] {{@@[[include component:contzilla top=--|clearance=5]]@@}} @@**项目编号：**SCP-CN-1109@@ @@**项目等级：**Thaumiel@@ @@**5/CN-1109级**@@ @@最高机密@@ {{@@[[include component:contzilla end=--]]@@}} [[/div]] [[div class="contzilla"]] [[div class="short"]] **项目编号：**SCP-CN-2846 ##vspace|@@ @@## **项目等级：**Ƿriðe ##F00|**6/CN-2846级**## ##vspace|@@ @@## ##F00|**机密**## [[/div]] [[/div]] ++ 切换外观 [[div class="code"]] {{@@[[include component:contzilla top=--]]@@}} 组件内容 {{@@[[include component:contzilla more=--]]@@}} 更多内容 {{@@[[include component:contzilla end=--]]@@}} [[/div]] + 可选参数 * {{@@|clearance=1/2/3/4/5@@}}：添加对应授权等级的斜线 * {{@@|btn-change=--@@}}：仅限按钮范围可点击切换 * {{@@|logo=single@@}}：启用单个收容分类图标 * {{@@|logo=diamond@@}}：启用ACS钻石图标 [[/div]] [[/iftags]] [[module CSS]] :where(:root) { --six-color: 0, 0, 0; --five-color: 196, 2, 51; --four-color: 255, 109, 0; --three-color: 255, 211, 0; --two-color: 0, 135, 189; --one-color: 0, 159, 107; --basalt-secondary-color: 225, 225, 225; --thin-border-width: 1px; } div.contzilla { position: relative; margin-block: 1em; } div.contzilla[data-cle="1"] { --cle: 1; --cle-color: var(--one-color); } div.contzilla[data-cle="2"] { --cle: 2; --cle-color: var(--two-color); } div.contzilla[data-cle="3"] { --cle: 3; --cle-color: var(--three-color); } div.contzilla[data-cle="4"] { --cle: 4; --cle-color: var(--four-color); } div.contzilla[data-cle="5"] { --cle: 5; --cle-color: var(--five-color); } div.contzilla[data-cle="6"] { --cle: 6; --cle-color: var(--six-color); } div.contzilla p { display: flex; flex-wrap: wrap; align-items: center; align-content: center; margin-block: 0; padding-block: 0.5em; } div.contzilla p span[style*="vspace"] { display: block; height: 0.5em; } div.contzilla p span[style*="vspace"] span { display: none; } div.contzilla p span[style*="vspace"] + br, div.contzilla p br:has(+ span[style*="vspace"]) { display: none; } div.contzilla div.long { display: none; } div.contzilla:not(:has(div.long)) div.toggle { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.long { display: flex; opacity: 0; animation: contshow 0.125s forwards; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="none"]) div.short { display: none; } div.contzilla:has(div.toggle div.collapsible-block-folded[style*="block"]) div.short { opacity: 0; animation: contshow 0.125s forwards; } div.contzilla div.toggle a.collapsible-block-link { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; } div.contzilla div.toggle div.collapsible-block-folded::before { content: "\f107"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-unfolded::before { content: "\f106"; font-family: "FontAwesome"; } div.contzilla div.toggle div.collapsible-block-folded::before, div.contzilla div.toggle div.collapsible-block-unfolded::before { display: block; margin-top: 0.2rem; text-align: center; line-height: 1.5em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla.btn--change div.toggle div.collapsible-block-folded, div.contzilla.btn--change div.toggle div.collapsible-block-unfolded { position: relative; } div.contzilla div.short { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 0.2rem; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) { row-gap: 0; } div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(1), div.contzilla div.short:not(:has(> p:nth-of-type(3))) p:nth-of-type(2) { margin-block: -0.5em; } div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { content: ""; display: block; align-self: stretch; margin-right: 0.2rem; position: absolute; left: calc(-0.2rem * (var(--cle) * 3)); top: 0.5em; width: calc(0.2rem * (var(--cle) * 3 - 1)); height: calc(100% - 1em); background-image: repeating-linear-gradient(to left, transparent 0rem, rgb(var(--cle-color)) 0rem, rgb(var(--cle-color)) 0.4rem, transparent 0.4rem, transparent 0.6rem); background-size: cover; background-position: right; transform-origin: 100% 0%; transform: skew(-30deg); } div.contzilla div.short p { grid-column: span 2; padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.short p:nth-of-type(1), div.contzilla div.short p:nth-of-type(2) { display: block; padding-inline: 0; background-color: transparent; margin-top: -0.5em; } div.contzilla div.short p:nth-of-type(1) { grid-column: 1 / 3; grid-row: 1 / 2; width: max-content; justify-self: start; } div.contzilla div.short p:nth-of-type(2) { grid-column: 4 / 5; grid-row: 1 / 2; width: max-content; justify-self: end; text-align: right; position: relative; } div.contzilla div.short p:has(span[style="color: left"]) { grid-column: 1 / 3; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: right"]) { grid-column: 3 / 5; grid-row: 2 / 4; } div.contzilla div.short p:has(span[style="color: top"]) { grid-column: 1 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottom"]) { grid-column: 1 / 5; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: topleft"]) { grid-column: 1 / 3; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: topright"]) { grid-column: 3 / 5; grid-row: 2 / 3; } div.contzilla div.short p:has(span[style="color: bottomleft"]) { grid-column: 1 / 3; grid-row: 3 / 4; } div.contzilla div.short p:has(span[style="color: bottomright"]) { grid-column: 3 / 5; grid-row: 3 / 4; } div.contzilla.logo--single div.short::before { grid-column: 4 / 5; } /* SINGLE LOGO */ div.contzilla.logo--single div.short { grid-template-columns: 1fr 1fr 1fr 1fr auto; } div.contzilla.logo--single div.short p:nth-of-type(1) { grid-column: 1 / 4; grid-row: 1 / 2; } div.contzilla.logo--single div.short p:nth-of-type(2) { grid-column: 5 / 6; grid-row: 1 / 2; } div.contzilla.logo--single div.short::after { content: ""; display: block; grid-column: 5 / 6; grid-row: 2 / 4; aspect-ratio: 1 / 1; background-color: rgb(var(--basalt-secondary-color)); } /* LONG */ div.contzilla div.long { flex-wrap: wrap; align-items: stretch; gap: 0.2rem; } div.contzilla div.long p { flex: 1; min-width: 40%; display: block; } div.contzilla div.long p:has(~ hr:first-of-type), div.contzilla div.long:not(:has(hr)) p { margin-top: -0.5em; } div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2), div.contzilla div.long:not(:has(hr)) p:nth-of-type(2) { width: max-content; text-align: right; position: relative; min-width: max-content; flex-grow: 0; flex-shrink: 0; } div.contzilla div.long hr { display: none; } div.contzilla div.long hr ~ p { padding-inline: 1em; background-color: rgb(var(--basalt-secondary-color)); } div.contzilla div.long hr + p, div.contzilla div.long p:has(span[style*="full"]) { min-width: 80%; } div.contzilla div.long hr + p { display: flex; padding: 0; background-color: transparent; gap: 1em; } div.contzilla div.long hr + p::before, div.contzilla div.long hr + p::after { content: ""; height: var(--thin-border-width); background-color: rgb(var(--basalt-secondary-color)); flex-grow: 1; } @keyframes contshow { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 360px) { div.contzilla div.short p:nth-of-type(2)::before, div.contzilla div.long p:has(~ hr:first-of-type):nth-of-type(2)::before, div.contzilla div.long:not(:has(hr)) p:nth-of-type(2)::before { transform-origin: 100% 0%; transform: skew(-30deg) scaleX(0.5); height: calc(100% - 1.6em); top: 0.8em; } } [[/module]] [!-- {$top}] [[div class="contzilla btn{$btn-change}change logo--{$logo}" data-cle="{$clearance}"]] [[div class="short"]] [!{$top} --] [!-- {$more}] [[/div]] [[div class="long"]] [!{$more} --] [!-- --] [[/div]] [[div class="toggle"]] [[collapsible show="更多信息" hide="较少信息"]] [[/collapsible]] [[/div]] [[/div]] [!-- --] **特殊收容措施：**请输入文本 [[module CSS]] @import url('https://hormress.github.io/Parallel/normalize-min.css'); @import url('https://hormress.github.io/Parallel/parallel-min.css'); /* {$bedrock}/ @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/2"); /{$bedrock} */ /* {$redstone}/ @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/3"); /{$redstone} */ /* {$deepslate}/ @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/4"); /{$deepslate} */ /* {$deep-diamond}/ @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/5"); /{$deep-diamond} */ /* {$deep-gold}/ @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/6"); /{$deep-gold} */ p:has(iframe) {margin: 0;} [[/module]] [!-- 为英站跨维基模块开发的自定义样式组件，基于由 7happy7 与 Sekai-s 开发的中分跨维基模块。 请注意截至 2022-03-15，新版英站跨维基模块仍未在 SCP 维基启用，所以该自定义样式组件将不会生效。 跨维基模块：http://scp-wiki-cn.wikidot.com/nav:interwiki 源代码：https://github.com/scpwiki/interwiki 亦请参见：https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation 用法： 在需要修改跨维基模块样式的页面中： [[include :scp-wiki-cn:component:interwiki-style | priority=X | type=<跨维基模块类型> | override=X | theme= | css=<经 URI 转义的 CSS> ]] “priority” 的值必须被设定为比该版式所扩展的版式的 priority 大 1 的数。 举例： - 网站的基本版式（对于 SCP 维基来说，就是 Sigma-9）的 priority 为 0。 - 一个修改了 Sigma-9 的用在页面中的 CSS 版式（比如一个 Sigma-9 扩展版式）的 priority 应设为 1。 - 黑市版式是黑色标记笔的扩展版式，而后者的 priority 为 2；则黑市版式的 priority 应设为 3。 “type” 的值必须被指定，侧边栏的 type 为 sidebar，而 _404 页面的 type 为 404。 “override” 的值是可选的，当填入 1 时，此自定义样式将强制覆盖同 priority 的其他自定义样式。 “theme” 的值是可选的，可以填入 CSS 样式表（比如一个 CSS 版式）的 URL。 “css” 的值是可选的，且可以是直接应用至跨维基模块的经 URI 转义的 CSS。若需转义 CSS，请参见 https://meyerweb.com/eric/tools/dencoder --] [[embed]] [[/embed]] [!-- 为英站跨维基模块开发的自定义样式组件，基于由 7happy7 与 Sekai-s 开发的中分跨维基模块。 请注意截至 2022-03-15，新版英站跨维基模块仍未在 SCP 维基启用，所以该自定义样式组件将不会生效。 跨维基模块：http://scp-wiki-cn.wikidot.com/nav:interwiki 源代码：https://github.com/scpwiki/interwiki 亦请参见：https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation 用法： 在需要修改跨维基模块样式的页面中： [[include :scp-wiki-cn:component:interwiki-style | priority=X | type=<跨维基模块类型> | override=X | theme= | css=<经 URI 转义的 CSS> ]] “priority” 的值必须被设定为比该版式所扩展的版式的 priority 大 1 的数。 举例： - 网站的基本版式（对于 SCP 维基来说，就是 Sigma-9）的 priority 为 0。 - 一个修改了 Sigma-9 的用在页面中的 CSS 版式（比如一个 Sigma-9 扩展版式）的 priority 应设为 1。 - 黑市版式是黑色标记笔的扩展版式，而后者的 priority 为 2；则黑市版式的 priority 应设为 3。 “type” 的值必须被指定，侧边栏的 type 为 sidebar，而 _404 页面的 type 为 404。 “override” 的值是可选的，当填入 1 时，此自定义样式将强制覆盖同 priority 的其他自定义样式。 “theme” 的值是可选的，可以填入 CSS 样式表（比如一个 CSS 版式）的 URL。 “css” 的值是可选的，且可以是直接应用至跨维基模块的经 URI 转义的 CSS。若需转义 CSS，请参见 https://meyerweb.com/eric/tools/dencoder --] [[embed]] [[/embed]] [[iftags +版式]] [[module CSS]] body { transition: background-color 0.125s; } :where(#page-content) tt { padding: 0 0.25em; border-radius: 0.25em; background-color: rgb(var(--basalt-secondary-color)); } div.Parallel-ACS tt { background-color: transparent; } div.hover { opacity: 0; background-color: rgb(254, 254, 254); transition: ease 0.25s; border-radius: 1rem; } div.hover:hover { opacity: 1; } div#page-content > h1 { margin-top: 4rem; } div.theme-title { text-align: center; font-weight: 700; font-family: var(--mono-font); font-size: 1.2em; } div.presets .yui-navset.yui-navset-top > ul.yui-nav { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 0.5rem; background-color: transparent; } div.presets .yui-navset.yui-navset-top > div.yui-content { border: none; padding: 0.5rem 0; } div.presets .yui-navset.yui-navset-top > div.yui-content div.code { margin: 0; } div.presets .yui-navset.yui-navset-top > ul.yui-nav > li a { flex-direction: column; padding: 0.5rem; background-color: rgb(var(--basalt-secondary-color)); } div.presets .yui-navset.yui-navset-top > ul.yui-nav > li a em { display: block; width: 100%; box-sizing: border-box; padding: 0.25rem 0.5rem; color: rgb(var(--block-color)); background-color: rgb(var(--block-bg)); } div.presets .yui-navset.yui-navset-top > ul.yui-nav > li a::before { content: ""; display: block; width: 100%; aspect-ratio: 1 / 1; background-image: var(--logo), repeating-linear-gradient(var(--diagonal-stripes-angle), rgba(var(--diagonal-stripes-color), var(--diagonal-stripes-opacity)), rgba(var(--diagonal-stripes-color), var(--diagonal-stripes-opacity)) var(--diagonal-stripes-width), transparent var(--diagonal-stripes-width), transparent var(--diagonal-stripes-gap)), linear-gradient(var(--header-gradient-rotation), rgba(var(--header-color-one), 0.75) 0%, rgb(var(--header-color-two)) 100%); background-size: 80% auto, 100%, 100%; background-position: center; background-repeat: no-repeat; --diagonal-stripes-color: var(--block-bg); } div.presets .yui-navset.yui-navset-top > ul.yui-nav > li:nth-child(1) { --block-color: 20, 20, 20; --block-bg: 254, 254, 254; --block-border: 239, 239, 240; --header-color-one: 144, 20, 20; --header-color-two: 72, 20, 20; } div.presets .yui-navset.yui-navset-top > ul.yui-nav > li:nth-child(2) { --block-color: 20, 20, 20; --block-bg: 254, 254, 254; --block-border: 247, 248, 250; --header-color-one: 18, 20, 150; --header-color-two: 8, 10, 60; } div.presets .yui-navset.yui-navset-top > ul.yui-nav > li:nth-child(3) { --block-color: 254, 254, 254; --block-bg: 20, 20, 20; --block-border: 32, 29, 28; --header-color-one: 144, 20, 20; --header-color-two: 202, 50, 50; } div.presets .yui-navset.yui-navset-top > ul.yui-nav > li:nth-child(4), div.presets .yui-navset.yui-navset-top > ul.yui-nav > li:nth-child(5), div.presets .yui-navset.yui-navset-top > ul.yui-nav > li:nth-child(6) { --block-color: 254, 254, 254; --block-bg: 46, 46, 52; --block-border: 62, 58, 64; } div.presets .yui-navset.yui-navset-top > ul.yui-nav > li:nth-child(4) { --header-color-one: 112, 112, 118; --header-color-two: 161, 160, 164; } div.presets .yui-navset.yui-navset-top > ul.yui-nav > li:nth-child(5) { --header-color-one: 32, 64, 128; --header-color-two: 64, 128, 254; } div.presets .yui-navset.yui-navset-top > ul.yui-nav > li:nth-child(6) { --header-color-two: 244, 188, 102; --header-color-one: 254, 218, 124; } :root:has(div.presets ul.yui-nav > li.selected:nth-child(2)) { --basalt-primary-color: 254, 254, 254; --basalt-secondary-color: 247, 248, 250; --basalt-tertiary-color: 218, 219, 222; --basalt-main-text-color: 20, 20, 20; --basalt-overtone: 50, 50, 50; --basalt-undertone: 61, 71, 202; --basalt-bright-element-color: 16, 76, 184; --basalt-dark-element-color: 18, 20, 150; --basalt-darker-element-color: 8, 10, 60; --basalt-alternate-color: 255, 132, 0; --basalt-positive-color: 24, 163, 20; --basalt-negative-color: 255, 48, 48; --basalt-sub-text-color: 155, 154, 162; } :root:has(div.presets ul.yui-nav > li.selected:nth-child(3)) { --basalt-primary-color: 20, 20, 20; --basalt-secondary-color: 32, 29, 28; --basalt-tertiary-color: 40, 39, 38; --basalt-main-text-color: 254, 254, 254; --basalt-overtone: 254, 254, 254; --basalt-undertone: 202, 20, 20; --basalt-bright-element-color: 255, 20, 20; --basalt-dark-element-color: 144, 20, 20; --basalt-darker-element-color: 202, 50, 50; --basalt-alternate-color: 132, 132, 20; --basalt-positive-color: 24, 163, 20; --basalt-negative-color: 255, 48, 48; --basalt-sub-text-color: 162, 154, 155; --header-title-color: var(--main-text-color); --header-subtitle-color: var(--main-text-color); --top-bar-link-color: var(--basalt-overtone); --UI-title-color: var(--basalt-darker-element-color); --UI-title-background-color: var(--basalt-secondary-color); } :root:has(div.presets ul.yui-nav > li.selected:nth-child(4)) { --basalt-primary-color: 46, 46, 52; --basalt-secondary-color: 62, 58, 64; --basalt-tertiary-color: 74, 72, 82; --basalt-main-text-color: 254, 254, 254; --basalt-overtone: 254, 254, 254; --basalt-undertone: 144, 144, 152; --basalt-bright-element-color: 129, 128, 132; --basalt-dark-element-color: 112, 112, 118; --basalt-darker-element-color: 161, 160, 164; --basalt-alternate-color: 132, 132, 20; --basalt-positive-color: 24, 163, 20; --basalt-negative-color: 255, 48, 48; --basalt-sub-text-color: 162, 154, 155; --link-color: 220, 220, 224; --link-visited-color: 195, 195, 199; --header-title-color: var(--main-text-color); --header-subtitle-color: var(--main-text-color); --top-bar-link-color: var(--basalt-overtone); --UI-title-color: var(--basalt-darker-element-color); --UI-title-background-color: var(--basalt-secondary-color); } :root:has(div.presets ul.yui-nav > li.selected:nth-child(5)) { --basalt-primary-color: 46, 46, 52; --basalt-secondary-color: 62, 58, 64; --basalt-tertiary-color: 74, 72, 82; --basalt-main-text-color: 254, 254, 254; --basalt-overtone: 254, 254, 254; --basalt-undertone: 144, 204, 254; --basalt-bright-element-color: 142, 192, 232; --basalt-dark-element-color: 128, 178, 222; --basalt-darker-element-color: 138, 188, 234; --basalt-alternate-color: 132, 132, 20; --basalt-positive-color: 24, 163, 20; --basalt-negative-color: 255, 48, 48; --basalt-sub-text-color: 162, 154, 155; --header-title-color: var(--main-text-color); --header-subtitle-color: var(--main-text-color); --header-color-one: 32, 64, 128; --header-color-two: 64, 128, 254; --top-bar-link-color: var(--basalt-overtone); --UI-title-color: var(--basalt-darker-element-color); --UI-title-background-color: var(--basalt-secondary-color); } :root:has(div.presets ul.yui-nav > li.selected:nth-child(6)) { --basalt-primary-color: 46, 46, 52; --basalt-secondary-color: 62, 58, 64; --basalt-tertiary-color: 74, 72, 82; --basalt-main-text-color: 254, 254, 254; --basalt-overtone: 254, 254, 254; --basalt-undertone: 254, 234, 152; --basalt-bright-element-color: 232, 152, 80; --basalt-dark-element-color: 244, 188, 102; --basalt-darker-element-color: 254, 218, 124; --basalt-alternate-color: 132, 132, 20; --basalt-positive-color: 24, 163, 20; --basalt-negative-color: 255, 48, 48; --basalt-sub-text-color: 162, 154, 155; --header-title-color: var(--main-text-color); --header-subtitle-color: var(--main-text-color); --header-color-one: var(--basalt-darker-element-color); --header-color-two: var(--basalt-dark-element-color); --UI-title-color: var(--basalt-darker-element-color); --UI-title-background-color: var(--basalt-secondary-color); } .table[class*="w-"] :is(table, table.wiki-content-table) { width: 100%; } .table[class*="w-"] { margin-inline: auto; width: calc(var(--main-content-width) * var(--_relative-width)); } @media (max-width: 580px) { div.presets .yui-navset.yui-navset-top > ul.yui-nav { grid-template-columns: 1fr 1fr 1fr; } } [[/module]] @@@@ [[=]] [[module rate]] [[/=]] @@@@ [[div style="position: relative; margin: auto; max-width: 30rem; background-color: rgb(254, 254, 254); border-radius: 1rem;"]] [[image https://hormress.github.io/Parallel/images/parallel-theme-logo.svg style="padding: 1rem;"]] [[div class="hover" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"]] [[image https://hormress.github.io/Parallel/images/parallel-theme-logo-zh.svg style="padding: 1rem;"]] [[/div]] [[/div]] [[div class="theme-title"]] 2.0.0 @@[[include @@[[span style="opacity: 70%; color: #F00;"]]@@:scp-wiki-cn:@@[[/span]]@@theme:parallel]]@@ [[/div]] + 信息 **平行**是为 SCP-CN 维基制作的 CSS 主题，是[[[theme:basalt|玄武岩]]]项目基础版式[[[theme:bedrock|基岩]]]的深度修改版本，便于 [[*user Dr Hormress]] 二次开发使用，提供一个具有工作感的视觉外观和多个预制配色方案。平行的最初目的并不是直接被引入，不过的确任何用户可以这么做。 平行从基岩引用了大量代码，不过为确保稳定性，维护者现已取消此主题早期版本的“外部依附式”设计方案，转而将其与基岩相互嵌入以便独立开发。你可以在[[[*https://hormress.github.io/Parallel/|这里]]]看到它在 Github 上的小小占位符——当然还有[[[*https://github.com/Hormress/Parallel|平行的 Github 仓库]]]。 [!-- 此版式有一个鼓励单独使用的衍生项目[[[theme:normal|法向投影]]]。 --] + 版式插件 **平行组件**是专为改变平行版式的方方面面而制作的组件，一般情况下无法脱离平行使用。 [[div class="blockquote b-tb bwidth-base bcolor-overtone"]] ++ [[[component:parallel-classic-header|经典版头]]] {{@@[[include :scp-wiki-cn:component:parallel-classic-header]]@@}} [[/div]] + 版式预设 与玄武岩相类似，可在你的 {{@@[[include]]@@}} 语法中添加**预设**来小规模修改平行的配色方案。 这些配色预设主要用于二次设计时提供一个方便的风格化基板，也可用于单独引用。点击以下预设图标可以切换此页面的预览状态，并切换所展示的 {{@@[[include]]@@}} 语法示例。 [[div class="presets"]] [[tabview]] [[tab 默认]] [[div class="code"]] {{@@[[include :scp-wiki-cn:theme:parallel]]@@}} [[/div]] [[/tab]] [[tab 基岩]] [[div class="code"]] {{@@[[include :scp-wiki-cn:theme:parallel bedrock=*]]@@}} [[/div]] [[/tab]] [[tab 红石]] [[div class="code"]] {{@@[[include :scp-wiki-cn:theme:parallel redstone=*]]@@}} [[/div]] [[/tab]] [[tab 深板岩]] [[div class="code"]] {{@@[[include :scp-wiki-cn:theme:parallel deepslate=*]]@@}} [[/div]] [[/tab]] [[tab 深层钻石]] [[div class="code"]] {{@@[[include :scp-wiki-cn:theme:parallel deep-diamond=*]]@@}} [[/div]] [[/tab]] [[tab 深层金矿]] [[div class="code"]] {{@@[[include :scp-wiki-cn:theme:parallel deep-gold=*]]@@}} [[/div]] [[/tab]] [[/tabview]] [[/div]] + 基本元素示例 > 这是引用块 > ---- >> 嵌套引用 [[div class="scp-image-block block-right" style="width:280px;"]] [[image https://scp-wiki.wikidot.com/local--files/theme:basalt/basalt_scp_logo-for_lightmode.svg link=#]] [[div class="scp-image-caption"]] 插图方块。 [[/div]] [[/div]] 可通过至少四个连字符“@@----@@”[[footnote]]许多教程会选择六个连字符，那其实是多余的[[/footnote]]创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。 标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。 [[div]] +* 1 级标题 ++* 2 级标题 +++* 3 级标题 ++++* 4 级标题 +++++* 5 级标题 ++++++* 6 级标题 [[/div]] [[tabview]] [[tab 分页]] 这是分页（Tab View）。 [[/tab]] [[tab 分页]] 嘿看，这里有更多的文本。 多么精巧绝伦。 [[/tab]] [[tab 长 Tab]] 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 [[/tab]] [[tab 这个 tab 因为某些古怪的原因而拥有一个特别特别长的名字。我想知道为什么？这真的很奇怪。]] 这是一个有脚注的 tab[[footnote]]这是另一个脚注。[[/footnote]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[/tabview]] [[footnoteblock]] ||~ 这是 ||~ 表格 || ||它的使用方法 || 一句话讲不完 || ||||而且单元格不能跨行，这很可恶 || + 工具类 与 Tailwind CSS 的设计理念相类似，平行提供的基本排版元素包含一系列**工具类**；不过它们并不像 Tailwind CSS 那样基本完全独立，我们也没有一个脚本用于生成几乎可以代替任何内联样式的各种工具类。平行的大部分工具类针对 {{blockquote}} 类设计，需要提前引入，而主要排版元素都是 {{div.blockquote}} 元素的变体。平行 2.0 版本基本完全重新设计了这些类的使用，不过旧版类名仍然予以支持。以下只给出现版本的标准参考。 ++ 示例 你可以使用和 HTML 语法类似的 {{@@[[div class="类名"]]@@}} 语法来创建具有类的 {{div}} 元素，不要忘了用 {{@@[[/div]]@@}} 包裹住 {{div}} 的内容。 [[div class="blockquote"]] {{@@[[div class="blockquote 工具类1 工具类2"]]@@}} [[/div]] [[div class="blockquote round-l bwidth-base bcolor-undertone shadow-thick"]] {{@@[[div class="blockquote round-l bwidth-base bcolor-undertone shadow-thick"]]@@}} [[/div]] [[div class="blockquote bg-pri b-l bwidth-base bcolor-overtone w-625"]] {{@@[[div class="blockquote bg-pri b-l bwidth-base bcolor-overtone w-625"]]@@}} [[/div]] ++ 通用 少部分处理块级样式和大部分仅处理文本样式的工具类是通用的。以下是一个列表。 [[div class="table w-875"]] ||||~ 文本对齐|| ||||= 用于调整元素内文本的对齐方式|| ||{{t-left}}||文本左对齐|| ||{{t-center}}||文本中间对齐|| ||{{t-right}}||文本右对齐|| ||{{t-justify}}||文本两端对齐|| ||||~ 溢出处理|| ||||= 用于元素内存在溢出时进行处理|| ||{{scroll-x}}||元素内超宽时添加滚动条|| [[/div]] ++ 引用块 [[div class="table w-875"]] ||||~ 宽度控制|| ||||= 用于调整引用块的宽度，宽度使用公式 {{页面内容总宽度 * 相对系数}} 计算|| ||{{w-125}}||相对系数 = 0.125|| ||{{w-25}}||相对系数 = 0.25|| ||{{w-375}}||相对系数 = 0.375|| ||{{w-50}}||相对系数 = 0.50|| ||{{w-625}}||相对系数 = 0.625|| ||{{w-75}}||相对系数 = 0.75|| ||{{w-875}}||相对系数 = 0.875|| ||{{w-full}}||相对系数 = 1|| ||||~ 边框|| ||||= 用于调整引用块的边框。引用块默认有与背景颜色相同的边框，工具类 {{b}} 仅供特殊情况使用|| ||{{b-n}}||引用块不存在边框|| ||{{b}}||引用块存在边框|| ||{{b-l}}||左边框|| ||{{b-r}}||右边框|| ||{{b-lr}}||左右边框|| ||{{b-t}}||上边框|| ||{{b-b}}||下边框|| ||{{b-tb}}||上下边框|| ||||~ 边框宽度|| ||||= 用于调整引用块边框的宽度|| ||{{bwidth-base}}||边框宽度为 {{@@--@@base-border-width}}|| ||{{bwidth-thin}}||边框宽度为 {{@@--@@thin-border-width}}|| ||||~ 边框颜色|| ||||= 用于调整引用块边框的颜色|| ||{{bcolor-pri}}||边框颜色为 {{@@--@@basalt-primary-color}}|| ||{{bcolor-sec}}||边框颜色为 {{@@--@@basalt-secondary-color}}|| ||{{bcolor-ter}}||边框颜色为 {{@@--@@basalt-tertiary-color}}|| ||{{bcolor-overtone}}||边框颜色为 {{@@--@@basalt-overtone}}|| ||{{bcolor-undertone}}||边框颜色为 {{@@--@@basalt-undertone}}|| ||{{bcolor-dark}}||边框颜色为 {{@@--@@basalt-dark-element-color}}|| ||{{bcolor-darker}}||边框颜色为 {{@@--@@basalt-darker-element-color}}|| ||||~ 圆角|| ||||= 用于调整引用块的边缘圆角，四角将同时变化，暂时无法分别应用到特定的角|| ||{{round}}||圆角尺寸为 {{@@--@@base-border-radius}}|| ||{{round-s}}||较小的圆角|| ||{{round-m}}||中等的圆角|| ||{{round-l}}||较大的圆角|| ||||~ 阴影|| ||||= 用于调整引用块的阴影，若为暗色主题，阴影会变为发光|| ||{{shadow}}||一般的阴影|| ||{{shadow-thin}}||较轻的阴影|| ||{{shadow-thick}}||较重的阴影|| ||||~ 背景颜色|| ||||= 用于调整引用块的背景颜色|| ||{{bg-pri}}||背景颜色为 {{@@--@@basalt-primary-color}}|| ||{{bg-sec}}||背景颜色为 {{@@--@@basalt-secondary-color}}|| ||{{bg-ter}}||背景颜色为 {{@@--@@basalt-tertiary-color}}|| ||{{bg-overtone}}||背景颜色为 {{@@--@@basalt-overtone}}|| ||{{bg-undertone}}||背景颜色为 {{@@--@@basalt-undertone}}|| ||{{bg-dark}}||背景颜色为 {{@@--@@basalt-dark-element-color}}|| ||{{bg-darker}}||背景颜色为 {{@@--@@basalt-darker-element-color}}|| ||{{bg-alter}}||背景颜色为 {{@@--@@basalt-alternate-color}}，透明度 0.075|| ||||~ 文本颜色|| ||{{color-light}}||亮色文本|| [[/div]] ++ 笔记块 {{div.wiki-note}} 元素与 {{note}} 元素并不包含任何特别的工具类。之所以在本节中特别提出，是因为 {{div.wiki-note}} 元素视觉上等价于一个经过样式化的 {{div.blockquote}} 元素，用户完全可以用样式化的 {{div.blockquote}} 元素取代 {{div.wiki-note}} 元素。 [[note]] {{@@[[note]]@@}} [[/note]] [[div class="wiki-note"]] {{@@[[div class="wiki-note"]]@@}} [[/div]] [[div class="blockquote w-50 b-n bg-alter t-justify"]] {{@@[[div class="blockquote w-50 b-n bg-alter t-justify"]]@@}} [[/div]] ++ 维基内容表格 与先前的例子不同，一般情况下用于 {{div.table}} 的工具类并不作用在这个 {{div}} 元素上，而是影响其中放置的维基内容表格即 {{table.wiki-content-table}} 元素。特别地，用于改变宽度的工具类会作用在 {{div}} 元素上，并使其中的表格占满该 {{div}} 的宽度。 要使以下属性生效，请提前加入 {{table}} 类来声明这是用于处理表格的 {{div}} 元素。以下是可用于表格的工具类列表。 [[div class="table w-875"]] ||||~ 溢出处理|| ||||= 用于元素内存在溢出时进行处理|| ||{{scroll-x}}||元素内超宽时添加滚动条|| ||||~ 宽度控制|| ||||= 用于调整宽度，宽度使用公式 {{页面内容总宽度 * 相对系数}} 计算|| ||{{w-125}}||相对系数 = 0.125|| ||{{w-25}}||相对系数 = 0.25|| ||{{w-375}}||相对系数 = 0.375|| ||{{w-50}}||相对系数 = 0.50|| ||{{w-625}}||相对系数 = 0.625|| ||{{w-75}}||相对系数 = 0.75|| ||{{w-875}}||相对系数 = 0.875|| ||{{w-full}}||相对系数 = 1|| ||||~ 特殊样式|| ||||= 用于为表格赋予特殊样式|| ||{{b-d}}||使表格线与表头颜色一致强调|| ||{{b-3}}||修改为三线表|| [[/div]] + 杂项 平行过去曾加入的杂项修改和组件适配仍然有效，不过部分特性暂时没有继续开发和维护的计划，一些特性未来也可能发生变动。以下列出了这些修改和自定义元素。 ++ 目前暂时无法被工具类替代的自定义引用块 [[div class="blockquote title" data-title="示例标题"]] {{@@[[div class="blockquote title" data-title="示例标题"]]@@}} 部分代码移植自[[[theme:lumina|流明冲击]]]。 [[/div]] [[div class="blockquote title"]] {{@@[[div class="blockquote title"]]@@}} 其实不写标题也可以用。 [[/div]] [[div class="blockquote warning-panel" data-title="来自异常宗教表现部信息系统的通知" style="--warning-logo: url("https://ah-sandbox.wikidot.com/local--files/hormress-s-logos/ARED_2.svg");"]] {{@@[[div class="blockquote warning-panel" data-title="通知标题" style="--warning-logo: url("背景图标链接");"]]@@}} 你可以替换代码里的链接和标题创建一个警告或通知。 [[/div]] ++ 替代标题格式支持（AIM 与 ACS） 将这两个组件的 {{@@[[include]]@@}} 语法分别放在 {{@@[[div class="Parallel-AIM"]]@@}} 和 {{@@[[div class="Parallel-ACS"]]@@}} 中，即可启用支持模式。分别提供了特色着色方案和视觉风格修改。 ++ Earthworm 导航 Earthworm 导航在此版式下被修改为更简洁的样式。 [[div class="earthworm"]] [[div class="first {$first}"]] [[div class="inner"]] [[image https://scp-wiki.wdfiles.com/local--files/component%3Aearthworm/Transparent.gif]] [[div class="arrow"]] [[/div]] [[/div]] [[[scp-cn-2808| ]]] [[/div]] [[div class="hub yes"]] [[[ared-hub| ]]] [[/div]] [[div class="last {$last}"]] [[div class="inner"]] [[image https://scp-wiki.wdfiles.com/local--files/component%3Aearthworm/Transparent.gif]] [[div class="arrow"]] [[/div]] [[/div]] [[[scp-cn-2900| ]]] [[/div]] [[/div]] [[module CSS]] .earthworm { font-weight: bold; display: flex; justify-content: center; align-items: stretch; margin: 1em 0; clear: both; z-index: 0; min-height: 36px; } .earthworm > div { display: flex; align-items: center; } .earthworm p { margin: 0 0.8em; text-align: center; position: relative; z-index: 5; } .earthworm .first { border-top: 2px rgba(150,150,150,0.5) solid; border-bottom: 2px rgba(150,150,150,0.5) solid; position: relative; } .earthworm .first:not(.true) img { height: 100%; width: auto; display: block; position: absolute; left: 0; top: -1.5px; border: 2.8px rgba(150,150,150,0.5) solid; transform: scale(0.707) rotate(-45deg); border-width: 2.8px 0 0 2.8px; transform-origin: 0% 100%; } .earthworm .hub { margin: -3px 0; border: 3px rgba(150,150,150,0.5) solid; background: linear-gradient(10deg, rgba(150,150,150,0.1), rgba(150,150,150,0)); position: relative; z-index: 5; } .earthworm .hub.no a, .earthworm a[href="/"] { color: #333; text-decoration: none; cursor: text; pointer-events: none; } .earthworm .last { border-top: 2px rgba(150,150,150,0.5) solid; border-bottom: 2px rgba(150,150,150,0.5) solid; position: relative; } .earthworm .last:not(.true) img { height: 100%; width: auto; display: block; position: absolute; right: 0; top: -1.5px; border: 2.8px rgba(150,150,150,0.5) solid; transform: scale(0.707) rotate(45deg); border-width: 2.8px 2.8px 0 0; transform-origin: 100% 100%; } .earthworm div.true { width: 0; } .earthworm div.true p { display: none; } .earthworm a { word-break: normal; } [[/module]] [[div style="height: 10rem;"]] [[/div]] + 致谢 此版式基本是 [[*user EstrellaYoshte]]、[[*user Liryn]] 和 [[*user Placeholder-mcd]] 所制作的 [[[theme:bedrock|基岩版式]]]的再创作。此版式的风格也受到 [[*user woedenaz]] 的[[[theme:black-highlighter-theme|黑色标记笔版式]]]的相当影响，平行目前所使用的 SCP 标志也是基于其版式徽标。 中文分部的 [[*user hoah2333]] 在最早期开发思路的起点新贵族提供了不少建设性意见。 以上这些人的贡献对于平行的开发直接影响相当大，当然还有更多为我汇报问题的使用者、各群聊中遇到的朋友。平行版式没有你们不可能走到今天！ [[=image https://hormress.github.io/Parallel/images/project-parallel.svg style="width: 60%; padding: 1rem; border-radius: 1rem; background-color: rgb(254, 254, 254);"]] [[/iftags]] [[module CSS]] @import url("https://ah-sandbox.wikidot.com/local--files/logos/%5BZ%5DTaisuijian_Logo_Masks.css"); /* 太岁监 Vote */ div.taisuijian { --i: min(0.8rem, 2.75vw); } div.taisuijian div.beforeintro { text-align: center; } div.taisuijian div.beforeintro p:nth-child(1) { margin-top: 1.5rem; } div.taisuijian div.beforeintro p:nth-last-child(1) { margin-bottom: 0; } div.taisuijian div.intro { display: grid; grid-auto-flow: dense; grid-template-columns: 3fr 3fr 2fr; gap: 0.5rem; } div.taisuijian div.blockintro:not(.centered) { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: auto 1fr; margin-block: 1em; gap: 1em; } div.taisuijian div.blockintro:not(.centered) p { margin-block: 0; } div.taisuijian div.blockintro.centered { text-align: center; grid-column: 3 / 4; } div.taisuijian div.blockintro.centered div.vote { margin-inline: auto; margin-bottom: calc(-4 * var(--i)); } div.taisuijian div.vote-container { width: calc(24 * var(--i)); height: calc(24 * var(--i)); margin: calc(5 * var(--i)) auto; position: relative; } div.taisuijian div.vote-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40%; height: 40%; background-image: var(--vote-logo, url("https://ah-sandbox.wikidot.com/local--files/logos/%5BD%5DTaisuijian.svg")); background-size: contain; background-position: center; background-repeat: no-repeat; } div.taisuijian div.vote { width: calc(4 * var(--i)); height: calc(6 * var(--i)); position: relative; offset-path: circle(closest-side at 50% 50%); outline: solid var(--vote-border-width, var(--thin-border-width, 0.1rem)) rgb(var(--vote-border-color, var(--basalt-tertiary-color, 132, 127, 127))); border-bottom-left-radius: calc(3 * var(--i)); border-bottom-right-radius: calc(3 * var(--i)); background-color: rgb(var(--base-background-color, var(--basalt-primary-color, 254, 254, 254))); } div.taisuijian div.vote.float { offset-path: none; } div.taisuijian div.vote::before { content: ""; display: block; width: calc(4 * var(--i)); height: calc(2 * var(--i)); position: absolute; left: 0; top: 0; mask-image: var(--name-mask); mask-size: auto 80%; mask-position: center; mask-repeat: no-repeat; -webkit-mask-image: var(--name-mask); -webkit-mask-size: auto 80%; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; background-color: rgb(var(--vote-text-color, var(--basalt-overtone, 20, 20, 20))); } div.taisuijian div.vote::after { content: attr(data-seat); display: block; width: calc(4 * var(--i)); height: calc(4 * var(--i)); position: absolute; left: 0; bottom: 0; border-radius: calc(2 * var(--i)); background-color: rgb(var(--vote-background-color, var(--basalt-secondary-color, 227, 225, 225))); line-height: calc(4 * var(--i)); text-align: center; font-size: calc(1.5 * var(--i)); text-decoration: underline; } div.taisuijian div.vote[data-vote="1"]::after { background-color: rgba(var(--vote-positive-color, var(--basalt-positive-color, 24, 254, 24)), 0.4); } div.taisuijian div.vote[data-vote="0"]::after { background-color: rgba(var(--vote-negative-color, var(--basalt-negative-color, 254, 24, 24)), 0.4); } div.taisuijian div.vote[data-seat="01"] { offset-distance: calc(9 * 100% / 12); --name-mask: var(--s01); } div.taisuijian div.vote[data-seat="02"] { offset-distance: calc(10 * 100% / 12); --name-mask: var(--s02); } div.taisuijian div.vote[data-seat="03"] { offset-distance: calc(11 * 100% / 12); --name-mask: var(--s03); } div.taisuijian div.vote[data-seat="04"] { offset-distance: calc(0 * 100% / 12); --name-mask: var(--s04); } div.taisuijian div.vote[data-seat="05"] { offset-distance: calc(1 * 100% / 12); --name-mask: var(--s05); } div.taisuijian div.vote[data-seat="06"] { offset-distance: calc(2 * 100% / 12); --name-mask: var(--s06); } div.taisuijian div.vote[data-seat="07"] { offset-distance: calc(3 * 100% / 12); --name-mask: var(--s07); } div.taisuijian div.vote[data-seat="08"] { offset-distance: calc(4 * 100% / 12); --name-mask: var(--s08); } div.taisuijian div.vote[data-seat="09"] { offset-distance: calc(5 * 100% / 12); --name-mask: var(--s09); } div.taisuijian div.vote[data-seat="10"] { offset-distance: calc(6 * 100% / 12); --name-mask: var(--s10); } div.taisuijian div.vote[data-seat="11"] { offset-distance: calc(7 * 100% / 12); --name-mask: var(--s11); } div.taisuijian div.vote[data-seat="12"] { offset-distance: calc(8 * 100% / 12); --name-mask: var(--s12); } div.taisuijian div.result { display: flex; justify-content: center; align-items: center; gap: 1rem; } div.taisuijian div.result div[class*="vote"] { text-align: center; } div.taisuijian div.result div[class*="vote"] p { margin-block: 0.5rem; } div.taisuijian div.result div[class*="vote"] tt { display: block; width: calc(4 * var(--i)); height: calc(4 * var(--i)); border-radius: calc(2 * var(--i)); background-color: rgb(var(--vote-background-color, var(--basalt-secondary-color, 227, 225, 225))); line-height: calc(4 * var(--i)); text-align: center; font-size: calc(1.5 * var(--i)); } div.taisuijian div.result div.upvote tt { background-color: rgba(var(--vote-positive-color, var(--basalt-positive-color, 24, 254, 24)), 0.4); } div.taisuijian div.result div.downvote tt { background-color: rgba(var(--vote-negative-color, var(--basalt-negative-color, 254, 24, 24)), 0.4); } @media (max-width: 768px) { div.taisuijian div.intro { display: block; } div.taisuijian div.intro div.blockintro.centered { float: right; margin: -1em 0 1em 1em; } } /* 太岁监 对话 */ [[/module]] [[div class="taisuijian-chat"]] [[div class="name-tag" data-seat="01"]] [[/div]] 我的目的就是你，二号。 [[/div]] [[module CSS]] div.frame-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem; margin-block: 1rem; } div.frame-container div.scp-image-block { margin: 0; width: auto !important; } div.frame-container div.scp-image-block[data-feature="image-feature"] { max-width: unset !important; } div.frame-container div.scp-image-block[style*="width:2;"], div.frame-container div.scp-image-block:has([style*="width:2;"]) { grid-column: span 2; } div.frame-container div.scp-image-block[style*="width:3;"], div.frame-container div.scp-image-block:has([style*="width:3;"]) { grid-column: span 3; } div.frame-container div.scp-image-block[style*="width:4;"], div.frame-container div.scp-image-block:has([style*="width:4;"]) { grid-column: span 4; } div.frame-container div.scp-image-block div:has(> iframe) { display: flex; align-items: center; } div.frame-container div.scp-image-block div:has(> iframe) :is(br, img) { display: none; } div.frame-container div.scp-image-block div > iframe { position: static; } div.frame-container div.scp-image-block img { width: 100%; } div.frame-container div.scp-image-block div.scp-image-caption { width: 100%; font-size: inherit; font-weight: inherit; } /* 模式切换 */ div.frame-container[data-mode="1"] { align-items: start; } div.frame-container[data-mode="2"] div.scp-image-block, div.frame-container[data-mode="3"] div.scp-image-block { display: flex; flex-direction: column; } div.frame-container[data-mode="2"] div.scp-image-block div.scp-image-caption { flex-grow: 1; } div.frame-container[data-mode="3"] div.scp-image-block img, div.frame-container[data-mode="3"] div.scp-image-block div[class^="image"] { flex-grow: 1; object-fit: contain; } div.frame-container[data-mode="3"] div.scp-image-block div[class^="image"] img { height: 100%; object-fit: contain; } /* 移动适配 */ @media (max-width: 720px) { div.frame-container { grid-template-columns: 1fr 1fr; } div.frame-container div.scp-image-block[style*="width:3;"], div.frame-container div.scp-image-block:has([style*="width:3;"]) { grid-column: span 2; } div.frame-container div.scp-image-block[style*="width:4;"], div.frame-container div.scp-image-block:has([style*="width:4;"]) { grid-column: span 2; } } [[/module]] [[iftags +组件]] [[module CSS]] @import url("https://scp-wiki-cn.wikidot.com/fragment:parallel/code/1"); [[/module]] [[>]] [[module rate]] [[/>]] ++ 使用方法 这是一个主要用于艺作页多图片展示的小组件，当然也可以用在别的地方。此组件的使用非常简单。首先，如任何一个版式一样，在页面的任何地方引入样式： [[div class="code"]] @@[[include :scp-wiki-cn:component:frame]]@@ [[/div]] 接着，使用如下的模板创建 {{@@[[div]]@@}} 元素： [[div class="code"]] @@[[div class="frame-container" data-mode="@@##blue|<模式号码>##@@"]]@@ ##blue|<图片组件>## @@[[/div]]@@ [[/div]] **图片组件**支持使用[[[component:image-block|标准图片块]]]和[[[component:image-features|特色插图]]]中 {{width}} 参数接受值标注为“任何长度单位均可”的选项，你可以使用后者来制作点击全屏或悬停放大的图片。 注意，与你熟悉的这些图片组件的使用方法有所区别，被放置在展示框 {{@@[[div]]@@}} 内的图片组件 {{width}} 参数用于指定其所占据的列数。图片默认占据 1 列宽度，使用 {{|width=2}} {{|width=3}} {{|width=4}} 可以使其分别占据 2、3、4 列。在移动端，展示框组件只分两栏，因此 {{|width=3}} 与 {{|width=4}} 在移动端上表现如同 {{|width=2}}。 **模式号码**可填写 1、2、3，对应此组件的 3 种不同模式。 下面是一个实际示例： [[div class="frame-container" data-mode="3"]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki.wdfiles.com/local--files/theme:paperstack/test.png link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki-cn.wdfiles.com/local--files/fragment:scp-cn-1559-01/silverbird.jpg link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://05command-cn.wdfiles.com/local--files/collab%3Aimage-collection/2026wintercon-banner.jpg link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki-cn.wdfiles.com/local--files/main/scp-logo-int.png link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:2;"]] [[image https://scp-wiki.wdfiles.com/local--files/theme:paperstack/test.png link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:2;"]] [[image https://scp-wiki-cn.wdfiles.com/local--files/fragment:scp-cn-1559-01/silverbird.jpg link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[/div]] [[div class="code"]] @@[[div class="frame-container" data-mode="1"]]@@ @@[[include@@ :scp-wiki-cn:component:image-block name=@@https://scp-wiki.wdfiles.com/local--files/theme:paperstack/test.png@@ |caption=@@111]]@@ @@[[include@@ :scp-wiki-cn:component:image-block name=@@https://scp-wiki-cn.wdfiles.com/local--files/fragment:scp-cn-1559-01/silverbird.jpg@@ |caption=@@111]]@@ @@[[include@@ :scp-wiki-cn:component:image-block name=@@https://05command-cn.wdfiles.com/local--files/collab%3Aimage-collection/2026wintercon-banner.jpg@@ |caption=@@111]]@@ @@[[include@@ :scp-wiki-cn:component:image-block name=@@https://scp-wiki-cn.wdfiles.com/local--files/main/scp-logo-int.png@@ |caption=@@111]]@@ @@[[include@@ :scp-wiki-cn:component:image-block name=@@https://scp-wiki.wdfiles.com/local--files/theme:paperstack/test.png@@ |caption=111 |width=2@@]]@@ @@[[include@@ :scp-wiki-cn:component:image-block name=@@https://scp-wiki-cn.wdfiles.com/local--files/fragment:scp-cn-1559-01/silverbird.jpg@@ |caption=111 |width=2@@]]@@ @@[[/div]]@@ [[/div]] ---- ++ 模式说明 ++++ 模式 1 此模式将使图片组件顶端对齐，不自动拉伸。适用于图片和文本比较错落的场合。 [[div class="frame-container" data-mode="1"]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki.wdfiles.com/local--files/theme:paperstack/test.png link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki-cn.wdfiles.com/local--files/fragment:scp-cn-1559-01/silverbird.jpg link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://05command-cn.wdfiles.com/local--files/collab%3Aimage-collection/2026wintercon-banner.jpg link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki-cn.wdfiles.com/local--files/main/scp-logo-int.png link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[/div]] ++++ 模式 2 此模式将使图片组件上下对齐，且图片介绍文本拉伸。适用于图片高度统一，而介绍文本长度有所差异的场合。 [[div class="frame-container" data-mode="2"]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki.wdfiles.com/local--files/theme:paperstack/test.png link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki-cn.wdfiles.com/local--files/fragment:scp-cn-1559-01/silverbird.jpg link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://05command-cn.wdfiles.com/local--files/collab%3Aimage-collection/2026wintercon-banner.jpg link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki-cn.wdfiles.com/local--files/main/scp-logo-int.png link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[/div]] ++++ 模式 3 此模式将使图片组件上下对齐，且图片置于中间。适用于图片高度不统一，而介绍文本长度基本一致的场合。 [[div class="frame-container" data-mode="3"]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki.wdfiles.com/local--files/theme:paperstack/test.png link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki-cn.wdfiles.com/local--files/fragment:scp-cn-1559-01/silverbird.jpg link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://05command-cn.wdfiles.com/local--files/collab%3Aimage-collection/2026wintercon-banner.jpg link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[div class="scp-image-block block-right" style="width:300px;"]] [[image https://scp-wiki-cn.wdfiles.com/local--files/main/scp-logo-int.png link=#]] [[div class="scp-image-caption"]] 111 [[/div]] [[/div]] [[/div]] [[/iftags]] [[div class="taisuijian"]] [[=]] +++* SCP基金会中国分部 ++* 监查委员会表决 [[/=]] [[div class="beforeintro"]] **监查委员会例行会议** [[/div]] [[div class="intro"]] [[div class="blockintro centered"]] **轮值主席** [[div class="vote float" data-seat="01"]] [[/div]] [[/div]] [[div class="blockintro"]] **会议时间** 2026年2月15日 **归档时间** 2026年2月15日 [[/div]] [[div class="blockintro"]] **议　　题** 裁员执行方案（草案） **原始文件** 参见[# 原始副本（IV）] [[/div]] [[/div]] [[div class="vote-container"]] [[div class="vote-logo"]] [[/div]] [[div class="vote" data-seat="01" data-vote="{$vote-01}"]] [[/div]] [[div class="vote" data-seat="02" data-vote="1"]] [[/div]] [[div class="vote" data-seat="03" data-vote="1"]] [[/div]] [[div class="vote" data-seat="04" data-vote="0"]] [[/div]] [[div class="vote" data-seat="05" data-vote="1"]] [[/div]] [[div class="vote" data-seat="06" data-vote="{$vote-06}"]] [[/div]] [[div class="vote" data-seat="07" data-vote="1"]] [[/div]] [[div class="vote" data-seat="08" data-vote="1"]] [[/div]] [[div class="vote" data-seat="09" data-vote="{$vote-09}"]] [[/div]] [[div class="vote" data-seat="10" data-vote="0"]] [[/div]] [[div class="vote" data-seat="11" data-vote="0"]] [[/div]] [[div class="vote" data-seat="12" data-vote="{$vote-12}"]] [[/div]] [[/div]] [[div class="result"]] **表决结果** [[div class="upvote"]] **赞成** {{5}} [[/div]] [[div class="downvote"]] **反对** {{3}} [[/div]] [[div class="novote"]] **弃权** {{4}} [[/div]] 议题**通过** [[/div]] [[/div]]