Anomaly Classification Bar for ACS

Link to article: Anomaly Classification Bar for ACS.

@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");

:root {
    --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;
}

.color-five {
    background-color: rgb(var(--five-color));
}

.color-four {
    background-color: rgb(var(--four-color));
}

.color-three {
    background-color: rgb(var(--three-color));
}

.color-two {
    background-color: rgb(var(--two-color));
}

.color-one {
    background-color: rgb(var(--one-color));
}

.color-gray {
    background-color: rgba(var(--gray-monochrome, 66, 66, 72),0.15);
}

.color-white {
    background-color: rgb(var(--white-monochrome, 252, 252, 252));
}

.color-black {
    background-color: rgb(var(--black-monochrome, 12, 12, 12));
}

.icons {
    display: grid;
    grid-template-columns: repeat(5, calc((100% / 5) - 0.25rem));
    grid-gap: 0.25rem;
}

.class-table-box {
    display: grid;
    grid-template-columns: 1fr 75%;
    background-color: rgb(var(--black-monochrome));
    grid-gap: 0.125rem;
    margin-top: 0.5rem;
}

.class-table-box > div {
    padding: 0.5rem;
}

.class-name {
    font-family: var(--title-font);
    font-size: 1.15em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-description {
    background-color: rgb(var(--white-monochrome));
}

@media (max-width: 500px ) {
.icons {
    grid-template-columns: repeat(3, calc((100% / 3) - 0.25rem));
}
}

.icon_image {
    border-radius: 50%;
    border: 0.25rem solid  rgb(var(--black-monochrome, 12, 12, 12));
    overflow: hidden;
}

.icon_name,
.icon_link {
    font-family: var(--title-font);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

h1, h2 {
    text-align: center;
}

.step_container {
    margin: 0.5rem 0;
    border: 1px solid #999;
    padding: 1em;
}

.help {
    display: flex;
    align-content: stretch;
    padding-top: 1em;
    border-top: 1px dashed #999;
}

.help blockquote {
    margin: 0;
    font-size: 85%;
}

.help blockquote > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-right: 0;
    min-height: 2rem;
    margin: 0;
}

.help blockquote > p * {
    margin: 0 0.1rem;
    height: 100%;
}

.help blockquote:nth-of-type(1) {
    width: 50%;
    background: transparent;
    border: unset;
    box-shadow: unset;
    text-align: right;
    margin-right: 0;
    padding: 0;
}

.help blockquote:nth-of-type(1) > p {
    justify-content: flex-end;
}

.help blockquote:nth-of-type(2) {
    margin-left: 1em;
    width: 50%;
}

#page-content > .collapsible-block {
    display: block;
    text-align: center;
    padding: 0.75em;
    background-color: lightgrey;
    border-top: 0.125rem dashed slategrey;
    border-bottom: 0.125rem dashed slategrey;
}

#page-content > div.collapsible-block > div.collapsible-block-unfolded > div.collapsible-block-content {
    text-align:left;
}

(none)

(none)

```
step_container
```
```
step_container
```
```
step_container
```
```
blockquote
```
```
help
```
```
step_container
```
```
icons
```
```
icon_container
```
```
icon_image
```
```
color-one
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-three
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-five
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-gray
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-black
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
step_container
```
```
icons
```
```
icon_container
```
```
icon_image
```
```
color-one
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-two
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-three
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-four
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-five
```
```
icon_name
```
```
step_container
```
```
icons
```
```
icon_container
```
```
icon_image
```
```
color-one
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-two
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-three
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-four
```
```
icon_name
```
```
icon_container
```
```
icon_image
```
```
color-five
```
```
icon_name
```
```
step_container
```
```
icons
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
icon_link
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
icon_link
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
icon_link
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
icon_link
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
icon_link
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
icon_link
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
icon_link
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
icon_link
```
```
icon_container
```
```
icon_image
```
```
color-white
```
```
icon_name
```
```
icon_link
```

[[module css]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");

:root {
    --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;
}

.color-five {
    background-color: rgb(var(--five-color));
}

.color-four {
    background-color: rgb(var(--four-color));
}

.color-three {
    background-color: rgb(var(--three-color));
}

.color-two {
    background-color: rgb(var(--two-color));
}

.color-one {
    background-color: rgb(var(--one-color));
}

.color-gray {
    background-color: rgba(var(--gray-monochrome, 66, 66, 72),0.15);
}

.color-white {
    background-color: rgb(var(--white-monochrome, 252, 252, 252));
}

.color-black {
    background-color: rgb(var(--black-monochrome, 12, 12, 12));
}

.icons {
    display: grid;
    grid-template-columns: repeat(5, calc((100% / 5) - 0.25rem));
    grid-gap: 0.25rem;
}

.class-table-box {
    display: grid;
    grid-template-columns: 1fr 75%;
    background-color: rgb(var(--black-monochrome));
    grid-gap: 0.125rem;
    margin-top: 0.5rem;
}

.class-table-box > div {
    padding: 0.5rem;
}

.class-name {
    font-family: var(--title-font);
    font-size: 1.15em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-description {
    background-color: rgb(var(--white-monochrome));
}

@media (max-width: 500px ) {
.icons {
    grid-template-columns: repeat(3, calc((100% / 3) - 0.25rem));
}
}

.icon_image {
    border-radius: 50%;
    border: 0.25rem solid  rgb(var(--black-monochrome, 12, 12, 12));
    overflow: hidden;
}

.icon_name,
.icon_link {
    font-family: var(--title-font);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

h1, h2 {
    text-align: center;
}

.step_container {
    margin: 0.5rem 0;
    border: 1px solid #999;
    padding: 1em;
}

.help {
    display: flex;
    align-content: stretch;
    padding-top: 1em;
    border-top: 1px dashed #999;
}

.help blockquote {
    margin: 0;
    font-size: 85%;
}

.help blockquote > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-right: 0;
    min-height: 2rem;
    margin: 0;
}

.help blockquote > p * {
    margin: 0 0.1rem;
    height: 100%;
}

.help blockquote:nth-of-type(1) {
    width: 50%;
    background: transparent;
    border: unset;
    box-shadow: unset;
    text-align: right;
    margin-right: 0;
    padding: 0;
}

.help blockquote:nth-of-type(1) > p {
    justify-content: flex-end;
}

.help blockquote:nth-of-type(2) {
    margin-left: 1em;
    width: 50%;
}

#page-content > .collapsible-block {
    display: block;
    text-align: center;
    padding: 0.75em;
    background-color: lightgrey;
    border-top: 0.125rem dashed slategrey;
    border-bottom: 0.125rem dashed slategrey;
}

#page-content > div.collapsible-block > div.collapsible-block-unfolded > div.collapsible-block-content {
    text-align:left;
}
[[/module]]

+ **Anomaly Classification Bar**

------

[[>]]
[[module Rate]]
[[/>]]

[[div class="step_container"]]
+ [https://scp-wiki.wikidot.com/anomaly-classification-system-guide BEFORE USING, PLEASE READ THIS GUIDE].
++ For In-Universe justification, please read [https://scp-wiki.wikidot.com/classification-committee-memo This Memo] by  [[*user djkaktus]].
[[=]]
+++ Black Highlighter is not required to use this component
[[/=]]
[[/div]]

[[div class="step_container"]]
++++ This system was compiled primarily by [[*user woedenaz]] with input from many, many other authors.

**In no specific order, thanks goes out to:** [[*user The Great Hippo]] | [[*user Rounderhouse]] | [[*user djkaktus]] | [[*user YossiPossi]] | [[*user Captain Kirby]] | [[*user CadaverCommander]] | [[*user Uncle Nicolini]] | [[*user aismallard]] | [[*user Jade Skylar]] | [[*user Lt Flops]] | [[*user Sterbai]]

++++ This was a great passion project and I really appreciate all the wonderful, useful feedback I received. If you helped contribute and I failed to mention you above, please let me know!
[[/div]]

+ EXAMPLES

[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 2105
|clearance= 2
|container-class= euclid
|secondary-class= none
|disruption-class= vlam
|risk-class= notice
]]
@@ @@
[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 3000
|clearance= 5
|container-class= esoteric
|secondary-class= thaumiel
|secondary-icon= https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/thaumiel-icon.svg
|disruption-class= ekhi
|risk-class= critical
]]
@@ @@
[[include :scp-wiki:component:anomaly-class-bar-source
|item-number= 4511
|clearance= 4
|container-class= pending
|secondary-class= none
|disruption-class= none
|risk-class= none
]]

------

[[collapsible show="+ Click here to see above examples' code" hide="- Hide code"]]

> {{[[include :scp-wiki:component:anomaly-class-bar-source}}
> {{|item-number= 2105}}
> {{|clearance= 2}}
> {{|container-class= euclid}}
> {{|secondary-class= none}}
> {{|disruption-class= vlam}}
> {{|risk-class= notice}}
> {{]]}}
> 
> {{[[include :scp-wiki:component:anomaly-class-bar-source}}
> {{|item-number= 3000}}
> {{|clearance= 5}}
> {{|container-class= esoteric}}
> {{|secondary-class= thaumiel}}
> {{|secondary-icon=https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/thaumiel-icon.svg}}
> {{|disruption-class= ekhi}}
> {{|risk-class= critical}}
> {{]]}}
> 
> {{[[include :scp-wiki:component:anomaly-class-bar-source}}
> {{|item-number= 4511}}
> {{|clearance= 4}}
> {{|container-class= pending}}
> {{|secondary-class= none}}
> {{|disruption-class= none}}
> {{|risk-class= none}}
> {{]]}}

[[/collapsible]]

+ **HOW TO USE**

[[=]]
+++ It's easier than it looks!
[[/=]]

[[div_ class="step_container"]]

[[div class="blockquote"]]
[[=]]
+++ Make sure all options are input in __lowercase__, and without any spaces. Any capital letters __will not work.__
[[/=]]
[[/div]]

[[div_ class="help"]]
> 
> Beginning of include ↦
> 
> Item # of SCP ↦
> 
> Clearance Level //USE DIGITS (5,4,3,2,1,0)// ([https://scp-wiki.wikidot.com/anomaly-classification-system-guide See guide here])↦
> 
> Container Class (Also known as Object Class) ↦
> 
> OPTIONAL Secondary Class (If Using, set Container Class to //Esoteric//) ↦
> 
> If secondary class is used, place URL to Class Icon here ↦
> 
> Disruption Class ([https://scp-wiki.wikidot.com/anomaly-classification-system-guide See Guide] & Read Below for Explanation) ↦
> 
> Risk Class ([https://scp-wiki.wikidot.com/anomaly-classification-system-guide See Guide] & Read Below for Explanation) ↦
> 
> End of include ↦
> 

> 
> {{[[@@include@@ :scp-wiki:component:anomaly-class-bar-source}}
> 
> {{|item-number= XXXX}}
> 
> {{|clearance= #}}
> 
> {{|container-class= euclid}}
> 
> {{|secondary-class= none}}
> 
> {{|secondary-icon= https://urlhere.com}}
> 
> {{|disruption-class= vlam}}
> 
> {{|risk-class= warning}}
> 
> {{]]}}
> 
[[/div]]

[[/div]]

+ Class Options & Icons

[[div_ class="step_container"]]
+ Containment Class Options

[[div_ class="icons"]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-one"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/safe-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
safe
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-three"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/euclid-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
euclid
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-five"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keter-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
keter
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-gray"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/neutralized-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
neutralized
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-black"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/pending-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
pending
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/explained-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
explained
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/esoteric-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
esoteric
[[/div]]
[[/div]]

[[/div]]

[[/div]]

[[div_ class="step_container"]]
+ Disruption Class Options

[[div_ class="icons"]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-one"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/dark-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
dark
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-two"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/vlam-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
vlam
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-three"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keneq-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
keneq
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-four"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/ekhi-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
ekhi
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-five"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/amida-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
amida
[[/div]]
[[/div]]

[[/div]]

[[/div]]

[[div_ class="step_container"]]
+ Risk Class Options

[[div_ class="icons"]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-one"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/notice-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
notice
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-two"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/caution-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
caution
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-three"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/warning-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
warning
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-four"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/danger-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
danger
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-five"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/critical-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
critical
[[/div]]
[[/div]]

[[/div]]
[[/div]]

[[div_ class="step_container"]]
+ Secondary Class Options & Links | [https://scp-wiki.wikidot.com/esoteric-classes-complete-list See Page Here for descriptions]

[[div_ class="icons"]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/apollyon-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
apollyon
[[/div]]
[[div_ class="icon_link"]]
[https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/apollyon-icon.svg link]
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/archon-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
archon
[[/div]]
[[div_ class="icon_link"]]
[https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/archon-icon.svg link]
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/cernunnos-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
cernunnos
[[/div]]
[[div_ class="icon_link"]]
[https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/cernunnos-icon.svg link]
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/decommissioned-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
decommissioned
[[/div]]
[[div_ class="icon_link"]]
[https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/decommissioned-icon.svg link]
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/hiemal-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
hiemal
[[/div]]
[[div_ class="icon_link"]]
[https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/hiemal-icon.svg link]
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/tiamat-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
tiamat
[[/div]]
[[div_ class="icon_link"]]
[https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/tiamat-icon.svg link]
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/ticonderoga-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
ticonderoga
[[/div]]
[[div_ class="icon_link"]]
[https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/ticonderoga-icon.svg link]
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/thaumiel-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
thaumiel
[[/div]]
[[div_ class="icon_link"]]
[https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/thaumiel-icon.svg link]
[[/div]]
[[/div]]

[[div_ class="icon_container"]]
[[div_ class="icon_image color-white"]]
[[image https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/uncontained-icon.svg]]
[[/div]]
[[div_ class="icon_name"]]
uncontained
[[/div]]
[[div_ class="icon_link"]]
[https://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/uncontained-icon.svg link]
[[/div]]
[[/div]]

[[/div]]
[[/div]]

Anomaly Classification Bar for ACS

Module Styles

Inline Styles

Includes

CSS Classes

Page Source