迷离夜 版式

[[div style="display: none;"]]
[[include :scp-wiki-cn:theme:basalt darkmode=a]]
[[/div]]
[[module CSS]]
@import url(https://scp-wiki-cn.wikidot.com/local--code/theme:another-night/1);

/* {$half-height}/
@import url("https://scp-wiki-cn.wikidot.com/local--code/theme:another-night/2");
/{$half-height} */

/* {$low-height}/
@import url("https://scp-wiki-cn.wikidot.com/local--code/theme:another-night/3");
/{$low-height} */

/* {$auto-blur}/
@import url("https://scp-wiki-cn.wikidot.com/local--code/theme:another-night/4");
/{$auto-blur} */

/* {$sn-bg}/
@import url("https://scp-wiki-cn.wikidot.com/local--code/theme:another-night/5");
/{$sn-bg} */
[[/module]]
[[iftags +版式]]
[[>]]
[[module Rate]]
[[/>]]
@@ @@
[[include :scp-wiki-cn:credit:start]]
> **文件名：**bg-another-night.jpg、bg-another-night_blurred.jpg
> **图像名：**HK night panorama stitch
> **图像作者：**Riosolar
> **授权协议：**CC BY-SA 4.0
> **来源链接： ：**[[https://commons.wikimedia.org/wiki/File:HK_night_panorama_stitch.jpg]]
=====
> **文件名：**bg-subway2.jpg
> **图像名：**In a Beijing subway car 4521
> **图像作者：**Vmenkov
> **授权协议：**CC BY-SA 3.0
> **来源链接： ：**[[https://commons.wikimedia.org/wiki/File:In_a_Beijing_subway_car_4521.jpg]]
=====
> **文件名：**Radevormwald - Raindrops on a window 11 (1) ies.webm
> **图像名：**Radevormwald - Raindrops on a window 11 (1) ies
> **图像作者：**Frank Vincentz
> **授权协议：**CC BY-SA 3.0
> **来源链接： ：**[[https://commons.wikimedia.org/wiki/File:Radevormwald_-_Raindrops_on_a_window_11_(1)_ies.webm]]
[[include :scp-wiki-cn:credit:end]]

=====
[[=]]
[[size 120%]]**于任意页面中：**[[/size]]
[[size 160%]]**{{@@[[include @@[[span style="opacity: 70%;"]]@@:scp-wiki-cn:@@[[/span]]@@theme:another-night]]@@}}**[[/size]]
[[/=]]
@@ @@
+* 信息
这是一个美学版式，可以视为[[[theme:shivering-night|夜琉璃]]]基于[[[theme:basalt|玄武岩]]]的分支。在延续原本设计特色的基础上，尝试对视觉效果（以及可能的性能方面）进行了相关优化，并新增了一个主要用于装神弄鬼的引言演出功能（只需要将鼠标挪到引言上就可以知道其具体效果了）。
@@ @@
+* 版式设置

在你的 @@[[include]]@@ 模块里添加**版式设置**来修改迷离夜的方方面面。
@@ @@

**{{@@[[include @@[[span style="opacity: 70%;"]]@@:scp-wiki-cn:@@[[/span]]@@theme:another-night @@##87CEEB|版式设置##@@]]@@}}**

**{{@@[[include @@[[span style="opacity: 70%;"]]@@:scp-wiki-cn:@@[[/span]]@@theme:another-night @@##87CEEB|版式设置##|##52cf81|另一个版式设置##@@]]@@}}**
@@ @@

截至当前版本的所有版式设置有：
* **{{half-height=*}}**[[span class="noclick"]]@@ @@ @@ @@[[/span]]版头高度为默认值的一半，引言演出效果默认不启用
* **{{low-height=*}}**[[span class="noclick"]]@@ @@ @@ @@[[/span]]版头高度极低，引言及演出效果默认不启用
* **{{auto-blur=*}}**[[span class="noclick"]]@@ @@ @@ @@[[/span]]当阅览至文章主体时，背景图会通过css滤镜功能自动变暗和模糊（较影响性能，还是推荐预先自制一份背景图模糊版本）
* **{{sn-bg=*}}**[[span class="noclick"]]@@ @@ @@ @@[[/span]]将雨滴效果变更为夜琉璃原版的碎片飘动效果

除上述方案外，通过添加如下语法，可实现一定程度的自定义设计：
[[div class="blockquote"]]
{{@@[[module CSS]]@@}}
{{@@:root {@@}}

{{@@  --bg-img: url(https://scp-sandbox-3.wikidot.com/local--files/theme:another-night/bg-another-night.jpg); /* 背景图片 */ @@}}
{{@@  --bg-img-blurred: url(https://scp-sandbox-3.wikidot.com/local--files/theme:another-night/bg-another-night_blurred.jpg); /* 鼠标移动至正文部分后背景图片的模糊版本，如果使用自动模糊设置或不模糊则留空 */ @@}}

{{@@  --shards-img: url(https://scp-sandbox-3.wdfiles.com/local--files/theme%3Aanother-night/rain.gif); /* 动态背景图片 */ @@}}
{{@@  --shards-hover-img: url(https://scpsandboxcn.wikidot.com/local--files/theme:another-night/bg-subway2.jpg);  /* 修改鼠标悬浮于版头正中标语后显示的图片 */ @@}}

{{@@  --bg-blur-filter: 1.5px; /* 自动模糊设置下，背景模糊强度 */ @@}}

{{@@  --prologue: "面庞在人潮中明灭"; /* 版头标语 */ @@}}
{{@@  --prologue-setting: visible; /* 修改为hidden可隐藏正中标语 */@@}}
{{@@  --prologue-author: "—埃兹拉·庞德《在一个地铁车站》"; /* 标语作者/来源 */ @@}}
{{@@  --prologue-author-setting: visible; /* 修改为hidden可隐藏正中标语作者/来源 */@@}}

{{@@  --introduction: ""; /* 修改鼠标悬浮于版头正中标语后显示内容 */@@}}
{{@@  --introduction-setting: auto; /* 修改为none可关闭文本变化效果 */@@}}
{{@@  --introduction-bg-setting: block; /* 修改为none可关闭文本变化后随之浮现的图片 */@@}}

{{@@  --title-setting: flex; /* 修改为none将不显示标题与副标题，此项主要为适配ACS组件 */@@}}
{{@@  --subtitle-content: "- 芸芸众生 -"; /* 修改副标题内容 */@@}}
{{@@  --subtitle-setting: flex; /* 修改为none以单独关闭副标题 */@@}}

{{@@  --link-color: 120, 140, 255; /* 链接颜色，亦影响tab等元素的主题色 */ @@}}

{{@@ }@@}}
{{@@[[/module]]@@}}
[[/div]]
@@ @@
+* 页面元素
[[=]]
[[div class="blockquote"]]
@@ @@
= {{@@[[div class="blockquote"]]@@}}
= 这是一个默认引用块，略微突出背景与其动态效果
@@ @@
@@ @@
[[/div]]

[[div class="blockquote dark"]]
@@ @@
= {{@@[[div class="blockquote dark"]]@@}}
= 注意到这是一个深色引用块
@@ @@
@@ @@
[[/div]]

[[div class="blockquote porthole"]]
@@ @@
= {{@@[[div class="blockquote porthole"]]@@}}
= 这是一个质地类似于复古玻璃窗的引用块，受启发自Aero Glass版式
= 需注意频繁使用可能会导致浏览器卡顿，且已知无法与Safari为首的ios端浏览器兼容
@@ @@
[[/div]]

[[div class="blockquote rainyday"]]
@@ @@
= {{@@[[div class="blockquote rainyday"]]@@}}
= 这是一个始终存在明显雨水特效的引用块，无论你使用的动态背景是什么
= //再一次，雨水降临在这座伟大的城市//
@@ @@
[[/div]]

[[/=]]

@@ @@
[[include :scp-wiki:component:image-block name=https://scp-wiki.wikidot.com/local--files/theme:basalt/basalt_scp_logo-for_darkmode.svg|caption=梦见一块带着三箭头圆圈圈的插图方块|width=280px]]
数角究治以并两家，利车热如工值，铁马否品新。流自青极张消步率低据指治历十，头者号个程活蠢史省专程。低象维天史便人周，细县全前也利术，委雨作折岗。积即又众根前百，置场色没走，感不利私。想满商能位格因转京议二指，下速七等号称科打量位，毛设状杠越回对构精。动山心去满省队后，动支相火解工得，元单更理造作，罐心属强。结九改理干山信那，听且任养见期，才主江权。多果引受美情却山经己区会历身适，自车任求住近定极治租老斗。进工共之思真思表，种中没满高好民，深认复研节。式表命听值相济多身，那由长内积给流住马，构陕治引整管条。内大即领置九动，风容记开按，果集类。金因西们认每且队，它车条道会精热手技，都辆真两美看。率地太四分该处毛斗，会引毛下认但基技，快示露利承料声。便或线标力或取身组该步，来许各极术计义采维计，少表当告点质查联。

[[div class="floatbox"]]
**{{@@[[div class="floatbox"]]@@}}**

这是浮动框（floatbox）。你可以在里面塞入任何类型的内容（除了更好的脚注之外，暂时如此）。这些内容会相对于围绕在其旁边的内容浮动在页面的一侧。

[[/div]]

除车研同直北传动，没引她育过社，高弦火住技位。万亲把权适农但社金，上元究料于总育先，天织照百只。置个步时参形深形花置适，千是整给这结育几与原，性入物看火呀覆专。十队基中都团究全增，山须决反则权由线取，家豆响山何歼选。设记就查人龙所克新群证习素，只龙基信电越弦阶毛起想边。代族住会众报片，至过后年期，公两到入杯。断始候准八法战身子民率平，会志时方飞效才常豆。府压正经眼如布专备，称除分意区力明放验，无养信合北事芬。即素期量油把具，究计收那民米毛，查励便少。你段改而万响阶信不热片，必已品式海保于县资，革声求又关系物约往。思阶干每起今准专资，以同红精断己照地毛，复别块何队。强进每别会细是研基，收利名族收支议白高，打革东经详多。千如十工命九它入种增，于需研构接好导始放，去议详南色事总法。严于观气安流者济次张据很复高条流完通后，适往了类革六技者先露济王厕关只江丽。已美看用们定取江技度界，须共响克如入革有。火办接铁制被议为治定，因到好儿具领把细，一或罐一位约特。边权干教开料七层，眼时难米治那根只，些露半运院此。动京里世新直道文在，克白他较情长数八多，必录路生育便复。求油型将八报变证会斗么广，火成几史知人几市均。求外运斯入复我矿，八品按者验实，段后须油孤。养制有构厂月克院活，米信上元解电位，准天该员七记参。

[[div class="floatbox right"]]
**{{@@[[div class="floatbox right"]]@@}}**
[[/div]]

增车身导元员写此，布时道细式感圆连者，器市导医特。感山金声再得件受，电气革素观强开维，备务每满较。关元例引如风决，极好地做手，量县道详。青给都布大但开领看亲严，老速说西造口江称记，七求K办儿此声生议。圆满置两样政场万采条验，石计验片于其统维支根个，车广何带九钉更。规平流片干利，别单详半。确上展物世连最结，上局离情常容，问管折内。没又集须况为太下，门结克非酸抛。清一水现从较家，务主干构也，极听葛林。入解五土照多所保，周向名代群克里，老例为常划。消技近反公南头低头格，情设关革常相。济革部种族数受毛出，方设消即的委原需，影月为层和与。日先便而更外们志东系近思别，小计酸志证圆王百想把应，团学而孟酸扭约葡米奔。

@@ @@
------
@@ @@

可通过四个连字符“@@----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。

@@ @@

本版式还对广为人知的ACS组件进行了风格化的调整适配，只需将其建置于{{@@[[div class="shivering-acs"]]@@}}当中就可以应用效果。
[[tabview]]
[[tab 原配色]]
[[div class="shivering-acs"]]
[[include :scp-wiki-cn:component:anomaly-class-bar-source
|lang= cn
|item-number= 2105
|clearance= 2
|container-class= euclid
|secondary-class= none
|disruption-class= vlam
|risk-class= 待观察
]]
@@ @@
[[include :scp-wiki-cn:component:anomaly-class-bar-source
|lang= cn
|item-number= 3000
|clearance= 5
|container-class= 机密
|secondary-class= thaumiel
|secondary-icon= http://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/thaumiel-icon.svg
|disruption-class= ekhi
|risk-class= 危急
]]
@@ @@
[[include :scp-wiki-cn:component:anomaly-class-bar-source
|lang= cn
|item-number= 4511
|clearance= 4
|container-class= 等待分级
|secondary-class= none
|disruption-class= none
|risk-class= none
]]
[[/div]]
@@ @@
[[/tab]]
[[tab 修改配色]]
[[div class="shivering-acs color"]]
将组建置于{{@@[[div class="shivering-acs color"]]@@}}当中以应用相关适配，你也可以通过修改如下代码自定义颜色：

[[div class="blockquote"]]
{{@@[[module CSS]]@@}}
{{@@div.shivering-acs.color {@@}}
{{@@  --five-color: 220, 70, 141;@@}}
{{@@  --four-color: 162, 78, 200;@@}}
{{@@  --three-color: 105, 92, 196;@@}}
{{@@  --two-color: 92, 147, 196;@@}}
{{@@  --one-color: 92, 196, 171;@@}}
{{@@}@@}}
{{@@[[/module]]@@}}
[[/div]]

[[include :scp-wiki-cn:component:anomaly-class-bar-source
|lang= cn
|item-number= 2105
|clearance= 2
|container-class= euclid
|secondary-class= none
|disruption-class= vlam
|risk-class= 待观察
]]
@@ @@
[[include :scp-wiki-cn:component:anomaly-class-bar-source
|lang= cn
|item-number= 3000
|clearance= 5
|container-class= 机密
|secondary-class= thaumiel
|secondary-icon= http://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/thaumiel-icon.svg
|disruption-class= ekhi
|risk-class= 危急
]]
@@ @@
[[include :scp-wiki-cn:component:anomaly-class-bar-source
|lang= cn
|item-number= 4511
|clearance= 4
|container-class= 等待分级
|secondary-class= none
|disruption-class= none
|risk-class= none
]]
[[/div]]
[[/tab]]
[[/tabview]]

[[include component:coltop show=源代码 ▶|hide=源代码 ▼]]
[[code type="CSS"]]
@import url('https://chinese-fonts-cdn.deno.dev/packages/syst/dist/SourceHanSerifCN/result.css');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux&display=swap');

:root {
  --title-font: 'Afacad Flux', 'Source Han Serif CN VF', serif;

  --bg-img: url(https://scp-sandbox-3.wikidot.com/local--files/theme:another-night/bg-another-night.jpg);
  --bg-img-blurred: url(https://scp-sandbox-3.wikidot.com/local--files/theme:another-night/bg-another-night_blurred.jpg);
  --shards-img: url(https://scp-sandbox-3.wdfiles.com/local--files/theme%3Aanother-night/rain.gif);
  --shards-hover-img: url(https://scpsandboxcn.wikidot.com/local--files/theme:another-night/bg-subway2.jpg);

  --auto-bg-blur-filter: 1.5px;

  --prologue: "面庞在人潮中明灭";
  --prologue-setting: visible;
  --prologue-author: "—埃兹拉·庞德《在一个地铁车站》";
  --prologue-author-setting: visible;
  --introduction: "湿黑枝条上，花瓣朵朵";
  --introduction-setting: auto;

  --title-setting: flex;
  --subtitle-content: "- 芸芸众生 -";
  --subtitle-setting: flex;

  --primary-color: 16, 15, 20;

  --link-color: 120, 140, 255;
  --basalt-undertone: var(--link-color);
  --basalt-bright-element-color: var(--link-color);
  --basalt-dark-element-color: var(--link-color);
  --new-link-color: 111, 144, 206;

  --display-mode: 78vh;
}

#page-title {
    text-align: center;
    font-weight: bold;
    font-size: 3.5em;
    font-family: var(--title-font);

    color: rgb(var(--secondary-color));
    border-color: transparent;

    display: var(--title-setting) !important;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-transform:uppercase;
}

#page-title::after {
   content: var(--subtitle-content);
 
   display: var(--subtitle-setting);
   width: 100%;
   height: 2.5rem;
 
   margin-top: -1.5rem;
   justify-content: center;
   align-items: center;
   font-size: 30%;
   letter-spacing: 1px;
}

#content-wrap {
    position: relative;
 
    overflow: hidden; 
    top: var(--display-mode);
 
    background: linear-gradient(to bottom, transparent, rgb(var(--primary-color), .65) 15vh, rgb(var(--primary-color), .65));
}
 
@media not all and (max-width: 767px) {
  #main-content {
    max-width: 57.5rem !important;
  }
}

#content-wrap::before {
    content: " ";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--shards-img) top center no-repeat;
    background-size: cover;
    mix-blend-mode: overlay;
    pointer-events: none;
    will-change: transform;
    opacity: .5;
}

div.creditButtonStandalone > p > a::before, 
div.rate-box-with-credit-button .creditButton > p > a::before,
div[id*=page-options-bottom] {
  background-color: transparent !important;
}

#license-area, #footer {
  top: var(--display-mode);
  position: relative;
}

#extrac-div-1 {
    position: fixed;
    display: block;
    z-index: -3;

    top: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg-img);
    background-size: cover;
    background-position: center;
}

#extrac-div-1::before {
    content: "";
    position: fixed;
    display: block;

    top: 0;
    opacity: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg-img-blurred);
    background-size: cover;
    background-position: center;
    transition: all 1s ease-in-out;
}

#extrac-div-2 {
    position: absolute;
    top: calc(var(--display-mode) / 2);
    left: 50%;
    transform: translateX(-50%);
    padding-left: 1em;
    padding-right: 1em;
    z-index: 2;
    pointer-events: var(--introduction-setting);
    width: auto;

    display: flex;
    flex-direction: column;
}

#extrac-div-2::before {
    line-height: 1.5em;
    font-size: 1.5em;
    font-family: var(--mono-font);
    font-weight: 400;
    text-shadow: 0 0 3px black, 0 0 5px black, 0 0 10px black, 0 0 15px black;

    content: var(--prologue);
    color: rgb(var(--basalt-main-text-color));
    visibility: var(--prologue-setting);

    text-align: center;
    transition: font-size 0.3s ease, background-size 0.3s ease;
}

#extrac-div-2:hover::before {
    font-size: 1.25em;
    content: var(--introduction);
}

#extrac-div-2::after {
    line-height: 1.5em;
    font-size: 1.25em;
    font-family: var(--mono-font);
    text-shadow: 0 0 3px black, 0 0 5px black, 0 0 10px black, 0 0 15px black;

    content: var(--prologue-author);
    color: rgb(var(--basalt-main-text-color));
    visibility: var(--prologue-author-setting);

    text-align: center;
    transition: font-size 0.3s ease, background-size 0.3s ease;
}

#extrac-div-3 {
    position: fixed;
    display: var(--introduction-bg-setting);
    z-index: -3;

    top: 0;
    width: 100%;
    height: 100vh;
    transition: all 1s ease-in-out;
    background: var(--shards-hover-img, linear-gradient(to bottom, rgba(var(--basalt-secondary-color), 0.8) 0%, rgba(var(--basalt-secondary-color), 0) 100%));
    background-size: 120%;
    background-position: right center;
    pointer-events: none;
    will-change: transform;
    opacity: 0;
}
 
@keyframes backgroundBounce2 {
    0%, 100% {
        background-position: right center;
    }
    50% {
        background-position: left center;
    }
}

#container:has(#extrac-div-2:hover) #extrac-div-3 {
  animation: backgroundBounce2 180s linear infinite;
  opacity: .7;
}

#container:has(#content-wrap:hover) #extrac-div-1::before {
  opacity: 1;
}
 
:is(.image-block, .scp-image-block) :is(.image-caption, .scp-image-caption),
#header {
  background: transparent;
}

#header {
  box-shadow: none;
}

#header h1 a::before {
  display: none;
}

.yui-navset.yui-navset-top .yui-content,
div.page-rate-widget-box, 
div.rate-box-with-credit-button,
#page-content div.floatbox,
blockquote,
div.blockquote,
div#toc,
#lock-info,
.scp-image-block {
    border: 0.1px dashed transparent;
    border-radius: 5px;
    position: relative;
    background: rgb(var(--basalt-undertone),.175);
    box-shadow: 0 0 10px rgb(0, 0, 0);
}

div.blockquote.porthole,
div#toc.porthole {
    background: linear-gradient(rgba(var(--primary-color), 0.1), rgba(var(--primary-color), 0.1)), var(--bg-img);
    background-size: cover;
    background-attachment:fixed;
    background-position: center;
    box-shadow: none;
    backdrop-filter: brightness(2) contrast(1.1);
    -webkit-backdrop-filter: brightness(2) contrast(1.1);
}
 
div.blockquote.porthole::before,
div#toc.porthole::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--primary-color));
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: 0.7;
    text-shadow: none;
}

div.blockquote.dark,
div#toc.dark {
  background: rgba(31, 31, 53, 0.5);
  backdrop-filter: contrast(1.1);
    -webkit-backdrop-filter: contrast(1.1);
}

div.blockquote.rainyday::before,
div#toc.rainyday::before {
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--shards-img) top center;
  background-size: cover;
  pointer-events: none;
  opacity: .15;
  filter: invert(1) contrast(1.4);
  position: absolute;
}


.yui-navset.yui-navset-top .yui-content {
  background: rgb(var(--basalt-undertone),.1);
  border-radius: 0px 0px 5px 5px;
  box-shadow:
     0 8px 10px -4px rgba(0,0,0,.35),
     8px 0 10px -4px rgba(0,0,0,.25),
     -8px 0 10px -4px rgba(0,0,0,.25);
}

hr {
  background: rgb(var(--basalt-main-text-color), .15);
  box-shadow: 0 0 10px rgb(0, 0, 0);
  backdrop-filter: brightness(3) contrast(1.1);
  -webkit-backdrop-filter: brightness(3) contrast(1.1);
}

@media (max-width: 767px) {
  #extrac-div-2 {
    width: 80%;
  }

  #extrac-div-3 {
    background-size: cover;
  }
}

/* ACS Tweaks*/
div.shivering-acs {
  --swatch-menutxt-dark-color: var(--basalt-main-text-color);
}

div.shivering-acs.color {
  --five-color: 220, 70, 141;
  --four-color: 162, 78, 200;
  --three-color: 105, 92, 196;
  --two-color: 92, 147, 196;
  --one-color: 92, 196, 171;
}

div.shivering-acs .danger-diamond a {
  background: none;
}

div.shivering-acs .top-box .top-center-box {
  height: 80%;
  opacity: 0.65;
}

div.shivering-acs .anom-bar > .bottom-box {
  box-shadow: none;
  margin-top: -1.5rem !important;
}

div.shivering-acs .bottom-box > .diamond-part {
  box-shadow: none;
}

div.shivering-acs .text-part > .main-class {
  box-shadow: 0 0 10px rgb(0, 0, 0);
  backdrop-filter: brightness(2) contrast(1.1);
  -webkit-backdrop-filter: brightness(2) contrast(1.1);
  border-radius: 5px;
}

div.shivering-acs .text-part > .main-class::before {
  border: 0.25rem solid transparent !important;
}

div.shivering-acs .top-center-box > .bar-one,
div.shivering-acs .top-center-box > .bar-two,
div.shivering-acs .top-center-box > .bar-three,
div.shivering-acs .top-center-box > .bar-four,
div.shivering-acs .top-center-box > .bar-five {
  box-shadow: 0 0 3px rgb(0, 0, 0);
  border-radius: 0px 10px 0px 10px;
}

div.shivering-acs .text-part > .disrupt-class,
div.shivering-acs .text-part > .risk-class {
  box-shadow: 0 0 5px rgb(0, 0, 0);
  backdrop-filter: brightness(2) contrast(1.1);
  -webkit-backdrop-filter: brightness(2) contrast(1.1);
  border-radius: 5px;
}

div.shivering-acs .danger-diamond > .quadrants > div {
  clip-path: polygon(25% 0%, 74% 0%, 97% 31%, 50% 95%, 3% 31%);
  backdrop-filter: brightness(3);
}

div.shivering-acs .text-part .disrupt-class::before,
div.shivering-acs .text-part .risk-class::before {
  background-color: rgb(255, 255, 255);
  color: black;
}

div.shivering-acs .text-part .disrupt-class::after,
div.shivering-acs .text-part .risk-class::after {
  border: 0.25rem solid rgb(255, 255, 255);
}

div.shivering-acs .danger-diamond > .arrows {
  display: none;
}

div.shivering-acs .danger-diamond > .top-icon,
div.shivering-acs .danger-diamond > .right-icon,
div.shivering-acs .danger-diamond > .left-icon,
div.shivering-acs .danger-diamond > .bottom-icon {
  border: 0.1875rem solid transparent !important;
}

div.shivering-acs .danger-diamond > .top-icon::before,
div.shivering-acs .danger-diamond > .left-icon::before,
div.shivering-acs .danger-diamond > .right-icon::before,
div.shivering-acs .danger-diamond > .bottom-icon::before {
  background-color: transparent !important;
}

div.shivering-acs .danger-diamond > .top-quad,
div.shivering-acs .danger-diamond > .right-quad,
div.shivering-acs .danger-diamond > .left-quad,
div.shivering-acs .danger-diamond > .bottom-quad{
  box-shadow: 0 0 5px rgb(0, 0, 0);
  backdrop-filter: brightness(2) contrast(1.1);
  -webkit-backdrop-filter: brightness(2) contrast(1.1);
}

div.shivering-acs .danger-diamond .top-quad::before,
div.shivering-acs .danger-diamond .right-quad::before,
div.shivering-acs .danger-diamond .left-quad::before,
div.shivering-acs .danger-diamond .bottom-quad::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  z-index: 10;
}

.bottom-box > div.diamond-part::before,
.anom-bar > div.bottom-box::before {
  background-color: transparent;
}
[[/code]]

[[code type="CSS"]]
/* 布局方案 - 半高版头*/
:root {
  --display-mode: 43vh;
  --introduction-bg-setting: none;
}
[[/code]]

[[code type="CSS"]]
/* 布局方案 - 低版头*/
:root {
  --display-mode: 3em;
  --prologue-setting: hidden;
  --prologue-author-setting: hidden;
}

div#extrac-div-1 {
  pointer-events: none;
}

#footer {
  margin-top: 15px;
}

#license-area {
  top: 0;
}
[[/code]]

[[code type="CSS"]]
/* 布局方案 - 自动模糊*/
#extrac-div-1 {
  filter: blur(0px);
  will-change: filter; 
}

#container:has(#content-wrap:hover) #extrac-div-1 {
  filter: blur(var(--auto-bg-blur-filter)) brightness(.33);
}
[[/code]]

[[code type="CSS"]]
/* 布局方案 - 夜琉璃背景*/
:root {
  --shards-img: url(https://scp-sandbox-3.wikidot.com/local--files/theme:another-night/glass_bg.png);
}

#content-wrap::before {
    animation: backgroundBounce 180s linear infinite;
    opacity: 1;
}

@keyframes backgroundBounce {
    0%, 100% {
        background-position: center bottom;
    }
    50% {
        background-position: center top;
    }
}
 
[[/code]]

[[include component:colend]]
[[/iftags]]