简化版ACS源代码

项目编号：項目編號：{$item-number}⠀

等级等級 {$clearance}
⠀

收容等级：收容等級：
{$container-class}

扰动等级：擾動等級：{$disruption-class}

风险等级：風險等級：{$risk-class}

WikiJump include 未展开： 跨站引用未启用（:scp-wiki:component:croqstyle）

css
    /*      ---------------------
    G E N E R A L  S T Y L I N G
    &  V A R I A B L E S
    &  L A N G U A G E
    ---------------------      */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@800&display=swap');

/* ACS适配，基于平行和ACS */
/*
对于中分各位用户：
将组件置于[[div class="<版式名/版式名缩写/反正得有一串字符>-ACS"]]当中以修改和应用相关适配，你也可以通过修改如下代码自定义颜色：

[[module CSS]]
div.<同前>-ACS .sacs_v4,
div.<同前>-ACS .sacs_v4 ::after,
div.<同前>-ACS .sacs_v4 * {
    --six-color: 88 0 188;
    --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;

    --swatch-dark-color: 66 66 90;
    --swatch-darker-color: 66 66 72;
    --swatch-darkest-color: 21 21 21;
    --swatch-dark-green-color: 82 156 59;
}
[[/module]]

暗色模式：

[[module CSS]]
div.<同前>-ACS .sacs-v4_darkmode,
div.<同前>-ACS .sacs-v4_darkmode ::after,
div.<同前>-ACS .sacs-v4_darkmode * {
    --six-color: 185 100 245;
    --five-color: 255 34 68;
    --four-color: 255 141 54;
    --three-color: 255 226 82;
    --two-color: 40 135 189;
    --one-color: 0 160 40;

    --swatch-dark-color: 91 91 118;
    --swatch-darker-color: 166 166 182;
    --swatch-darkest-color: 166 166 182;
    --swatch-dark-green-color: 140 104 133;
}
[[/module]]

*/

.sacs-v4,
.sacs-v4 ::after,
.sacs-v4 *,
div[class*="-ACS"] .sacs_v4,
div[class*="-ACS"] .sacs_v4 ::after,
div[class*="-ACS"] .sacs_v4 * {
    --six-color: 88 0 188;
    --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;

    --swatch-dark-color: 66 66 90;
    --swatch-darker-color: 66 66 72;
    --swatch-darkest-color: 21 21 21;
    --swatch-dark-green-color: 82 156 59;
}

.sacs-v4_darkmode,
.sacs-v4_darkmode ::after,
.sacs-v4_darkmode *,
div[class*="-ACS"] .sacs-v4_darkmode,
div[class*="-ACS"] .sacs-v4_darkmode ::after,
div[class*="-ACS"] .sacs-v4_darkmode * {
    --six-color: 185 100 245;
    --five-color: 255 34 68;
    --four-color: 255 141 54;
    --three-color: 255 226 82;
    --two-color: 40 135 189;
    --one-color: 0 160 40;

    --swatch-dark-color: 91 91 118;
    --swatch-darker-color: 166 166 182;
    --swatch-darkest-color: 166 166 182;
    --swatch-dark-green-color: 140 104 133;
}

.sacs_v4 {
       --min-font-size: 0.8125rem;
    /*                         ----
    V A R I A B L E S >>> Animation
    ----                         */
       --time-scale: 1;
       --time-delay: 0ms;

    font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
    font-size: var(--min-font-size);
    isolation: isolate;
    margin-block: 0.5rem;
    text-transform: uppercase;
}
.sacs_v4 *,
.sacs_v4 ::after {
    font-weight: 800 !important;
}
.sacs_v4 > div p {
    line-height: 141%;
}
.sacs_v4 .sacs-v4_big {
    font-size: 2.2em;
}
.sacs_v4 .sacs-v4_big.sacs-v4_high-sat {
    font-size: 1.75em;
}
.sacs_v4 .sacs-v4_medium {
    font-size: 1.65em;
}
.sacs_v4 .sacs-v4_no-display {
    display: none;
}
    /*                     ----
    V A R I A B L E S >>> Color
    ----                     */
.sacs-v4_attribute-1 {
       --clr-clearance: var(--one-color, 0 159 107);
}
.sacs-v4_attribute-2 {
       --clr-clearance: var(--two-color, 0 135 189);
}
.sacs-v4_attribute-3 {
       --clr-clearance: var(--three-color, 255 211 0);
}
.sacs-v4_attribute-4 {
       --clr-clearance: var(--four-color, 255 109 0);
}
.sacs-v4_attribute-5 {
       --clr-clearance: var(--five-color, 196 2 51);
}
.sacs-v4_attribute-6 {
       --clr-clearance: var(--six-color, 88 0 188);
}

.sacs-v4_attribute-1,
.sacs-v4_attribute-2,
.sacs-v4_attribute-3,
.sacs-v4_attribute-4,
.sacs-v4_attribute-5,
.sacs-v4_attribute-6 {
    position: relative;
}
    /*             ----
    L A N G U A G E
    ----             */
.sacs_v4.lang-cn span.lang-tr,
.sacs_v4.lang-CN span.lang-tr,
.sacs_v4.lang-\{\$lang\} span.lang-tr,
.sacs_v4.lang-tr span.lang-cn,
.sacs_v4.lang-TR span.lang-cn {
    display: none;
}

    /*      ------
    T O P
    S T Y L I N G
    ------      */
.sacs_v4 > .sacs-v4_top {
    display: flex;
    gap: 0.5em;
}
.sacs-v4_top > .sacs-v4_flex {
    flex-basis: fit-content;
    padding: 0;
}
.sacs-v4_attribute-0 .sacs-v4_top,
.sacs-v4_attribute-1 .sacs-v4_top,
.sacs-v4_attribute-2 .sacs-v4_top,
.sacs-v4_attribute-3 .sacs-v4_top {
    height: 2.65em;
}
.sacs-v4_attribute-4 .sacs-v4_top {
    height: calc(2.65em + 0.4rem);
}
.sacs-v4_attribute-5 .sacs-v4_top {
    height: calc(1.7em + 1.8rem);
}
.sacs-v4_attribute-6 .sacs-v4_top {
    height: calc(2.6em + 1.8rem);
}

.sacs-v4_top > .sacs-v4_item {
    position: relative;
}

.sacs-v4_top > .sacs-v4_bars {
    flex-basis: auto;
    flex-grow: 1;
    position: relative;
}
.sacs-v4_attribute-1 .sacs-v4_bars {
    bottom: calc(-1em - 0.7rem);
}
.sacs-v4_attribute-2 .sacs-v4_bars {
    bottom: calc(-0.5em - 0.4rem);
}
.sacs-v4_attribute-3 .sacs-v4_bars {
    bottom: -0.2em;
}
.sacs-v4_attribute-4 .sacs-v4_bars,
.sacs-v4_attribute-5 .sacs-v4_bars,
.sacs-v4_attribute-6 .sacs-v4_bars {
    bottom: 2px;
}
.sacs-v4_attribute-1 .sacs-v4_bar-one,
.sacs-v4_attribute-2 .sacs-v4_bar-one,
.sacs-v4_attribute-3 .sacs-v4_bar-one,
.sacs-v4_attribute-4 .sacs-v4_bar-one,
.sacs-v4_attribute-5 .sacs-v4_bar-one,
.sacs-v4_attribute-6 .sacs-v4_bar-one,
.sacs-v4_attribute-2 .sacs-v4_bar-two,
.sacs-v4_attribute-3 .sacs-v4_bar-two,
.sacs-v4_attribute-4 .sacs-v4_bar-two,
.sacs-v4_attribute-5 .sacs-v4_bar-two,
.sacs-v4_attribute-6 .sacs-v4_bar-two,
.sacs-v4_attribute-3 .sacs-v4_bar-three,
.sacs-v4_attribute-4 .sacs-v4_bar-three,
.sacs-v4_attribute-5 .sacs-v4_bar-three,
.sacs-v4_attribute-6 .sacs-v4_bar-three,
.sacs-v4_attribute-4 .sacs-v4_bar-four,
.sacs-v4_attribute-5 .sacs-v4_bar-four,
.sacs-v4_attribute-6 .sacs-v4_bar-four,
.sacs-v4_attribute-5 .sacs-v4_bar-five,
.sacs-v4_attribute-6 .sacs-v4_bar-five,
.sacs-v4_attribute-6 .sacs-v4_bar-six {
    background-color: rgb(var(--clr-clearance));
    height: 0.4rem;
    margin-block-end: 0.35em;
    width: 100%;
}

.sacs-v4_attribute-0 .sacs-v4_clearance,
.sacs-v4_attribute-1 .sacs-v4_clearance,
.sacs-v4_attribute-2 .sacs-v4_clearance,
.sacs-v4_attribute-3 .sacs-v4_clearance {
    bottom: 1em;
}
.sacs-v4_attribute-4 .sacs-v4_clearance {
    bottom: calc(-0.4rem + 1em);
}
.sacs-v4_attribute-5 .sacs-v4_clearance {
    bottom: calc(-0.8rem + 1em);
}
.sacs-v4_attribute-6 .sacs-v4_clearance {
    bottom: calc(-1.2rem + 1em);
}
.sacs-v4_top > .sacs-v4_clearance {
    position: relative;
    text-align: right;
}
    /*                      ----
    L A N G U A G E >>> cn
    ----                      */
.sacs-v4_attribute-0.lang-cn .sacs-v4_clearance-text::after,
.sacs-v4_attribute-0.lang-CN .sacs-v4_clearance-text::after,
.sacs-v4_attribute-0.lang-\{\$lang\} .sacs-v4_clearance-text::after {
    content: "已解密";
}
.sacs-v4_attribute-1.lang-cn .sacs-v4_clearance-text::after,
.sacs-v4_attribute-1.lang-CN .sacs-v4_clearance-text::after,
.sacs-v4_attribute-1.lang-\{\$lang\} .sacs-v4_clearance-text::after {
    content: "公开";
}
.sacs-v4_attribute-2.lang-cn .sacs-v4_clearance-text::after,
.sacs-v4_attribute-2.lang-CN .sacs-v4_clearance-text::after,
.sacs-v4_attribute-2.lang-\{\$lang\} .sacs-v4_clearance-text::after {
    content: "受限";
}
.sacs-v4_attribute-3.lang-cn .sacs-v4_clearance-text::after,
.sacs-v4_attribute-3.lang-CN .sacs-v4_clearance-text::after,
.sacs-v4_attribute-3.lang-\{\$lang\} .sacs-v4_clearance-text::after {
    content: "保密";
}
.sacs-v4_attribute-4.lang-cn .sacs-v4_clearance-text::after,
.sacs-v4_attribute-4.lang-CN .sacs-v4_clearance-text::after,
.sacs-v4_attribute-4.lang-\{\$lang\} .sacs-v4_clearance-text::after {
    content: "机密";
}
.sacs-v4_attribute-5.lang-cn .sacs-v4_clearance-text::after,
.sacs-v4_attribute-5.lang-CN .sacs-v4_clearance-text::after,
.sacs-v4_attribute-5.lang-\{\$lang\} .sacs-v4_clearance-text::after {
    content: "最高机密";
}
.sacs-v4_attribute-6.lang-cn .sacs-v4_clearance-text::after,
.sacs-v4_attribute-6.lang-CN .sacs-v4_clearance-text::after,
.sacs-v4_attribute-6.lang-\{\$lang\} .sacs-v4_clearance-text::after {
    content: "宇宙绝密";
}
    /*                      ----
    L A N G U A G E >>> tr
    ----                      */
.sacs-v4_attribute-0.lang-tr .sacs-v4_clearance-text::after,
.sacs-v4_attribute-0.lang-TR .sacs-v4_clearance-text::after {
    content: "已解密";
}
.sacs-v4_attribute-1.lang-tr .sacs-v4_clearance-text::after,
.sacs-v4_attribute-1.lang-TR .sacs-v4_clearance-text::after {
    content: "公開";
}
.sacs-v4_attribute-2.lang-tr .sacs-v4_clearance-text::after,
.sacs-v4_attribute-2.lang-TR .sacs-v4_clearance-text::after {
    content: "受限";
}
.sacs-v4_attribute-3.lang-tr .sacs-v4_clearance-text::after,
.sacs-v4_attribute-3.lang-TR .sacs-v4_clearance-text::after {
    content: "保密";
}
.sacs-v4_attribute-4.lang-tr .sacs-v4_clearance-text::after,
.sacs-v4_attribute-4.lang-TR .sacs-v4_clearance-text::after {
    content: "機密";
}
.sacs-v4_attribute-5.lang-tr .sacs-v4_clearance-text::after,
.sacs-v4_attribute-5.lang-TR .sacs-v4_clearance-text::after {
    content: "最高機密";
}
.sacs-v4_attribute-6.lang-tr .sacs-v4_clearance-text::after,
.sacs-v4_attribute-6.lang-TR .sacs-v4_clearance-text::after {
    content: "宇宙絕密";
}

.sacs-v4_attribute-4 .sacs-v4_item {
    bottom: -0.35em;
}
.sacs-v4_attribute-5 .sacs-v4_item {
    top: 1.2em;
}
.sacs-v4_attribute-5 .sacs-v4_clearance {
    top: 0.2em;
}
.sacs-v4_attribute-6 .sacs-v4_item {
    top: 2.1em;
}
.sacs-v4_attribute-6 .sacs-v4_clearance {
    top: 1.1em;
}

.sacs-v4_separator {
    background-color: currentColor;
    height: 0.4rem;
    margin-block-end: 0.35em;
    margin-block-start: 0.1em;
    width: 100%;
}
.sacs-v4_wide .sacs-v4_separator {
    margin-block-start: unset;
}

    /*      ------
    B O T T O M
    S T Y L I N G
    ------      */
.sacs-v4_grid {
    display: grid;
    gap: 0.35em;
    grid-template-areas: 'containment disruption'
                         'containment       risk';
    grid-template-columns: calc(55% - 0.35em) 45%;
}
.sacs-v4_grid > * {
    box-sizing: border-box;
    padding-inline: 0.35em;
    position: relative;
}
.sacs-v4_containment {
       --clr-containment: var(--clr-class);
    align-items: center;
    background-color: rgb(var(--clr-containment) / 0.15);
    border-inline-start: rgb(var(--clr-containment)) 0.7em solid;
    display: grid;
    grid-area: containment;
}
.sacs-v4_containment > p {
    transform: translateY(-10%);
}
.sacs-v4_disruption {
       --clr-disruption: var(--clr-class);
    background-color: rgb(var(--clr-disruption) / 0.15);
    border-inline-start: rgb(var(--clr-disruption)) 0.7em solid;
    grid-area: disruption;
}
.sacs-v4_risk {
       --clr-risk: var(--clr-class);
    background-color: rgb(var(--clr-risk) / 0.15);
    border-inline-start: rgb(var(--clr-risk)) 0.7em solid;
    grid-area: risk;
}
.sacs-v4_risk::after,
.sacs-v4_disruption::after,
.sacs-v4_containment::after {
    background-image: var(--img-main);
    background-repeat: no-repeat;
    background-size: var(--img-size) var(--img-size);
    content: "";
    display: block;
    height: var(--img-size);
    inset-inline-start: 0px;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.sacs-v4_risk::after,
.sacs-v4_disruption::after {
       --img-size: 2rem;
    background-position: calc(100% - 0.175em);
    top: 0.5em;
}
.sacs-v4_containment::after {
       --img-size: 4rem;
    background-position: right;
    top: calc(30% - 1em);
}

.sacs-v4_wide .sacs-v4_grid {
    grid-template-areas: 'containment containment'
                         'containment containment';
    grid-template-columns: 2fr 0;
}
.sacs-v4_wide .sacs-v4_containment {
    height: 7.35em;
}
.sacs-v4_wide .sacs-v4_risk,
.sacs-v4_wide .sacs-v4_disruption {
    display: none;
}

    /*      ------
    C L A S S
    S T Y L I N G
    ------      */
.safe,
.dark,
.notice,
.待观察,
.待觀察 {
       --clr-class: var(--one-color, 0 159 107);
}
.safe { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/safe-icon.svg'); }
.dark { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/dark-icon.svg'); }
.notice,
.待观察,
.待觀察 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/notice-icon.svg');
}

.vlam,
.archon,
.caution,
.需谨慎,
.需謹慎 {
       --clr-class: var(--two-color, 0 135 189);
}
.vlam { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/vlam-icon.svg'); }
.archon { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/archon-icon.svg'); }
.caution,
.需谨慎,
.需謹慎 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/caution-icon.svg');
}

.keneq,
.euclid,
.warning,
.警告,
.警告 {
       --clr-class: var(--three-color, 255 211 0);
}
.keneq { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/keneq-icon.svg'); }
.euclid { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/euclid-icon.svg'); }
.warning,
.警告,
.警告 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/warning-icon.svg');
}

.ekhi,
.danger,
.危险,
.危險 {
       --clr-class: var(--four-color, 255 109 0);
}
.ekhi { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/ekhi-icon.svg'); }
.danger,
.危险,
.危險 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/danger-icon.svg');
}

.keter,
.amida,
.critical,
.危急,
.危急 {
       --clr-class: var(--five-color, 196 2 51);
}
.keter { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/keter-icon.svg'); }
.amida { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/amida-icon.svg'); }
.critical,
.危急,
.危急 {       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/critical-icon.svg');
}

.solis,
.apollyon,
.yggdrasil {
       --clr-class: var(--six-color, 88 0 188);
}
.solis { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/solis-icon.svg'); }
.apollyon { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/apollyon-icon.svg'); }
.yggdrasil { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/yggdrasil-icon.svg'); }

.none,
.无,
.無,
.thaumiel,
.uncontained,
.未收容,
.未收容,
.neutralized,
.无效化,
.無效化 {
       --clr-class: var(--swatch-darker-color, 66 66 72);
}
.none,
.无,
.無 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/none-icon.svg');
}
.thaumiel { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/thaumiel-icon.svg'); }
.uncontained,
.未收容,
.未收容 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/uncontained-icon.svg');
}
.neutralized,
.无效化,
.無效化 {       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/neutralized-icon.svg');
}

.pending,
.等待分级,
.等待分級,
.explained,
.已解明,
.已解明 {
       --clr-class: var(--swatch-darkest-color, 21 21 21);
}
.pending,
.等待分级,
.等待分級 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/pending-icon.svg');
}
.explained,
.已解明,
.已解明 {       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/explained-icon.svg');
}

.erloschen {
       --clr-class: var(--swatch-dark-green-color, 82 156 59);

       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/erloschen-icon.svg');
}

.draugr {
       --clr-class: var(--swatch-dark-color, 66 66 90);

       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/draugr-icon.svg');
}
    /*     --------
    D A R K M O D E
    S T Y L I N G
    --------     */
.sacs-v4_darkmode .sacs-v4_risk,
.sacs-v4_darkmode .sacs-v4_disruption,
.sacs-v4_darkmode .sacs-v4_containment {
    color: rgb(var(--clr-class));
    text-shadow: 2px 0 0 rgb(237 237 237 / 0.01),
             -2px 0 0 rgb(237 237 237 / 0.01),
             0 2px 0 rgb(237 237 237 / 0.01),
             0 -2px 0 rgb(237 237 237 / 0.01),
             2px 2px rgb(237 237 237 / 0.01),
             -2px -2px 0 rgb(237 237 237 / 0.01),
             2px -2px 0 rgb(237 237 237 / 0.01),
             -2px 2px 0 rgb(237 237 237 / 0.01);
}
.sacs-v4_darkmode .sacs-v4_high-sat { filter: saturate(75%) brightness(150%); }

.sacs-v4_darkmode .sacs-v4_attribute-1 {
       --clr-clearance: var(--one-color, 0 160 40);
}
.sacs-v4_darkmode .sacs-v4_attribute-2 {
       --clr-clearance: var(--two-color, 40 135 189);
}
.sacs-v4_darkmode .sacs-v4_attribute-3 {
       --clr-clearance: var(--three-color, 255 226 82);
}
.sacs-v4_darkmode .sacs-v4_attribute-4 {
       --clr-clearance: var(--four-color, 255 141 54);
}
.sacs-v4_darkmode .sacs-v4_attribute-5 {
       --clr-clearance: var(--five-color, 255 34 68);
}
.sacs-v4_darkmode .sacs-v4_attribute-6 {
       --clr-clearance: var(--six-color, 185 100 245);
}

.sacs-v4_darkmode .safe,
.sacs-v4_darkmode .dark,
.sacs-v4_darkmode .notice,
.sacs-v4_darkmode .待观察,
.sacs-v4_darkmode .待觀察 {
       --clr-class: var(--one-color, 0 160 40);
}
.sacs-v4_darkmode .safe { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/safe-dark-icon.svg'); }
.sacs-v4_darkmode .dark { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/dark-dark-icon.svg'); }
.sacs-v4_darkmode .notice,
.sacs-v4_darkmode .待观察,
.sacs-v4_darkmode .待觀察 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/notice-dark-icon.svg');
}

.sacs-v4_darkmode .vlam,
.sacs-v4_darkmode .archon,
.sacs-v4_darkmode .caution,
.sacs-v4_darkmode .需谨慎,
.sacs-v4_darkmode .需謹慎 {
       --clr-class: var(--two-color, 40 135 189);
}
.sacs-v4_darkmode .vlam { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/vlam-dark-icon.svg'); }
.sacs-v4_darkmode .archon { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/archon-dark-icon.svg'); }
.sacs-v4_darkmode .caution,
.sacs-v4_darkmode .需谨慎,
.sacs-v4_darkmode .需謹慎 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/caution-dark-icon.svg');
}

.sacs-v4_darkmode .keneq,
.sacs-v4_darkmode .euclid,
.sacs-v4_darkmode .warning,
.sacs-v4_darkmode .警告,
.sacs-v4_darkmode .警告 {
       --clr-class: var(--three-color, 255 226 82);
}
.sacs-v4_darkmode .keneq { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/keneq-dark-icon.svg'); }
.sacs-v4_darkmode .euclid { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/euclid-dark-icon.svg'); }
.sacs-v4_darkmode .warning,
.sacs-v4_darkmode .警告,
.sacs-v4_darkmode .警告 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/warning-dark-icon.svg');
}

.sacs-v4_darkmode .ekhi,
.sacs-v4_darkmode .danger,
.sacs-v4_darkmode .危险,
.sacs-v4_darkmode .危險 {
       --clr-class: var(--four-color, 255 141 54);
}
.sacs-v4_darkmode .ekhi { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/ekhi-dark-icon.svg'); }
.sacs-v4_darkmode .danger,
.sacs-v4_darkmode .危险,
.sacs-v4_darkmode .危險 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/danger-dark-icon.svg');
}

.sacs-v4_darkmode .keter,
.sacs-v4_darkmode .amida,
.sacs-v4_darkmode .critical,
.sacs-v4_darkmode .危急,
.sacs-v4_darkmode .危急 {
       --clr-class: var(--five-color, 255 34 68);
}
.sacs-v4_darkmode .keter { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/keter-dark-icon.svg'); }
.sacs-v4_darkmode .amida { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/amida-dark-icon.svg'); }
.sacs-v4_darkmode .critical,
.sacs-v4_darkmode .危急,
.sacs-v4_darkmode .危急 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/critical-dark-icon.svg');
}

.sacs-v4_darkmode .solis,
.sacs-v4_darkmode .apollyon,
.sacs-v4_darkmode .yggdrasil {
       --clr-class: var(--six-color, 185 100 245);
}
.sacs-v4_darkmode .solis { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/solis-dark-icon.svg'); }
.sacs-v4_darkmode .apollyon { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/apollyon-dark-icon.svg'); }
.sacs-v4_darkmode .yggdrasil { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/yggdrasil-dark-icon.svg'); }

.sacs-v4_darkmode .none,
.sacs-v4_darkmode .无,
.sacs-v4_darkmode .無,
.sacs-v4_darkmode .thaumiel,
.sacs-v4_darkmode .uncontained,
.sacs-v4_darkmode .未收容,
.sacs-v4_darkmode .未收容,
.sacs-v4_darkmode .neutralized,
.sacs-v4_darkmode .无效化,
.sacs-v4_darkmode .無效化 {
       --clr-class: var(--swatch-darker-color, 166 166 182);
}
.sacs-v4_darkmode .none,
.sacs-v4_darkmode .无,
.sacs-v4_darkmode .無 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/none-dark-icon.svg');
}
.sacs-v4_darkmode .thaumiel { --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/thaumiel-dark-icon.svg'); }
.sacs-v4_darkmode .uncontained,
.sacs-v4_darkmode .未收容,
.sacs-v4_darkmode .未收容 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/uncontained-dark-icon.svg');
}
.sacs-v4_darkmode .neutralized,
.sacs-v4_darkmode .无效化,
.sacs-v4_darkmode .無效化 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/neutralized-dark-icon.svg');
}

.sacs-v4_darkmode .pending,
.sacs-v4_darkmode .等待分级,
.sacs-v4_darkmode .等待分級,
.sacs-v4_darkmode .explained,
.sacs-v4_darkmode .已解明,
.sacs-v4_darkmode .已解明 {
       --clr-class: var(--swatch-darkest-color, 166 166 182);
}
.sacs-v4_darkmode .pending,
.sacs-v4_darkmode .等待分级,
.sacs-v4_darkmode .等待分級 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/pending-dark-icon.svg');
}
.sacs-v4_darkmode .explained,
.sacs-v4_darkmode .已解明,
.sacs-v4_darkmode .已解明 {
       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/explained-dark-icon.svg');
}

.sacs-v4_darkmode .erloschen {
       --clr-class: var(--swatch-dark-green-color, 140 104 133);

       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/erloschen-dark-icon.svg');
}

.sacs-v4_darkmode .draugr {
       --clr-class: var(--swatch-dark-color, 91 91 118);

       --img-main: url('http://scp-wiki.wdfiles.com/local--files/component:slim-acs-source/draugr-dark-icon.svg');
}

    /*    -----------
    A N I M A T I O N
    S T Y L I N G
    -----------    */
    /*                    ----
    A N I M A T I O N >>> Bars
    ----                    */
.sacs-v4_animation .sacs-v4_separator,
.sacs-v4_animation .sacs-v4_bars > [class*="_bar-"] {
    animation-name: bar-growth;
    animation-delay: calc(0.1s * var(--time-scale) + var(--time-delay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
.sacs-v4_animation .sacs-v4_bars > [class*="_bar-"] {
    margin-inline: auto;
    animation-duration: calc(0.75s * var(--time-scale));
}
.sacs-v4_animation .sacs-v4_separator {
    animation-duration: calc(0.85s * var(--time-scale));
}
    /*                    ----
    A N I M A T I O N >>> Grid
    ----                    */
.sacs-v4_animation .sacs-v4_grid > div:not(.sacs-v4_containment) > p,
.sacs-v4_animation .sacs-v4_top > .sacs-v4_flex > p {
    animation-name: p-rise-1;
}
.sacs-v4_animation .sacs-v4_grid > .sacs-v4_containment > p { animation-name: p-rise-2; }
.sacs-v4_animation .sacs-v4_top > .sacs-v4_flex > p,
.sacs-v4_animation .sacs-v4_grid > .sacs-v4_containment > p,
.sacs-v4_animation .sacs-v4_grid > div:not(.sacs-v4_containment) > p {
    animation-duration: calc(0.65s * var(--time-scale));
    animation-delay: calc(0.5s * var(--time-scale) + var(--time-delay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
.sacs-v4_animation .sacs-v4_containment,
.sacs-v4_animation .sacs-v4_disruption,
.sacs-v4_animation .sacs-v4_risk {
    animation-name: class-fade;
    animation-duration: calc(0.85s * var(--time-scale));
    animation-delay: calc(0.1s * var(--time-scale) + var(--time-delay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
.sacs-v4_animation .sacs-v4_containment::after,
.sacs-v4_animation .sacs-v4_disruption::after,
.sacs-v4_animation .sacs-v4_risk::after {
    animation-name: icon-slide;
    animation-duration: calc(0.35s * var(--time-scale));
    animation-delay: calc(0.3s * var(--time-scale) + var(--time-delay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}

    /*                         ----
    A N I M A T I O N >>> Keyframes
    ----                         */
@media screen and (prefers-reduced-motion: reduce) {
    .sacs-v4_animation .sacs_v4 * { animation: unset; }
}

@keyframes bar-growth {
    from { width: 0%; }
    to { width: 100%; }
}
@keyframes p-rise-1 {
    from {
        opacity: 0;
        transform: translateY(50%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes p-rise-2 {
    from {
        opacity: 0;
        transform: translateY(30%);
    }
    to {
        opacity: 1;
        transform: translateY(-20%);
    }
}
@keyframes mob-p-rise-2 {
    from {
        opacity: 0;
        transform: translateY(40%);
    }
    to {
        opacity: 1;
        transform: translateY(-10%);
    }
}
@keyframes class-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes icon-slide {
    from {
        opacity: 0;
        transform: translateX(-5em);
    }
    to { opacity: 1; }
}

    /*     ----
    M O B I L E
    Q U E R Y
    ----     */
@media (max-width: 960px) {
    .sacs-v4_grid {
        grid-template-areas: 'containment containment'
                             'containment containment'
                             'disruption   disruption'
                             'risk               risk';
    }
    .sacs-v4_containment > p { transform: translateY(-10%); }
    .sacs-v4_containment::after {
           --img-size: 3.5rem;
        top: 10%;
    }
    .sacs-v4_wide .sacs-v4_containment::after {
        background-position: right;
        display: block;
        transform: translateY(0.75em);
    }

    .sacs-v4_animation .sacs-v4_grid > .sacs-v4_containment > p {
        animation-name: mob-p-rise-2;
    }
}
组件后端
页面版本：⁨0⁩, 最后编辑于: ⁨2025/12/1 14:20:19⁩ (⁨⁨289⁩ 日前⁩), 现时评分: 0
历史 附件 + 选项