Slim ACS

Link to article: Slim ACS.

hr { border: none; }
.no-select { color: rgb(var(--newpage-color)); user-select: none; }
.collapsible-block { font-family: 'Recursive', monospace; }
.collapsible-block-folded,
.collapsible-block-unfolded-link,
.dropdown-collapsible .collapsible-block-content {
    background-color: rgba(211, 211, 211, 0.5);
    border-block: 0.125rem dashed rgb(113, 126, 142);
    display: block;
    margin-block: 0.5em;
    padding-block: 0.5em;
    text-align: center;
}
.dropdown-collapsible .collapsible-block-unfolded-link {
    border-block-end: none;
    margin-block-end: -0.5em;
}
.dropdown-collapsible .collapsible-block-content {
    border-block-start: none;
    margin-block-start: none;
    text-align: left;
}
.dropdown-collapsible .collapsible-block-content .inner-collapsible {
    background-color: rgb(255, 255, 255);
    border: 2px rgb(var(--very-light-gray-monochrome)) solid;
    margin-block-end: 0.5em;
    margin-inline: 1.25em;
    padding-block: 0.35em;
    padding-inline: 0.75em;
}

```
display: none;
```

text-transform: uppercase; margin-block-end: -0.5rem; font-size: 160%;

text-transform: uppercase; margin-block-end: -0.7rem; font-size: 160%;

```
margin-top: 0.2em;
```

background-color: #21252E; border-left: solid 0.26rem #1EB5E8; border-right: solid 0.26rem #1EB5E8; padding: .4rem; margin-top: 12px; margin-bottom:12px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); color: #EDEDED;

```
margin-top: -0.7rem;
```

text-transform: uppercase; margin-block-end: 0rem; font-size: 160%;

font-family: 'Inter', sans-serif; user-select: none;

```
user-select: none;
```

font-family: 'Inter', sans-serif; user-select: none;

font-family: 'Inter', sans-serif; user-select: none;

```
color: rgb(0 159 107);
```
```
color: rgb(0 135 189);
```
```
color: rgb(255 211 0);
```
```
color: rgb(255 109 0);
```
```
color: rgb(196 2 51);
```
```
color: rgb(88 0 188);
```
```
color: rgb(66 66 72);
```
```
color: rgb(21 21 21);
```
```
color: rgb(82 156 59);
```
```
color: rgb(66 66 90);
```

font-family: 'Inter', sans-serif; user-select: none;

font-family: 'Inter', sans-serif; user-select: none;

```
meta-title
```
```
meta-title
```
```
code
```
```
code
```
```
code
```
```
code
```
```
code
```
```
meta-title
```
```
code
```
```
no-select
```
```
no-select
```
```
no-select
```
```
no-select
```
```
no-select
```
```
no-select
```
```
no-select
```

[[div style="display: none;"]]
[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[/div]]
[[module CSS]]
hr { border: none; }
.no-select { color: rgb(var(--newpage-color)); user-select: none; }
.collapsible-block { font-family: 'Recursive', monospace; }
.collapsible-block-folded,
.collapsible-block-unfolded-link,
.dropdown-collapsible .collapsible-block-content {
    background-color: rgba(211, 211, 211, 0.5);
    border-block: 0.125rem dashed rgb(113, 126, 142);
    display: block;
    margin-block: 0.5em;
    padding-block: 0.5em;
    text-align: center;
}
.dropdown-collapsible .collapsible-block-unfolded-link {
    border-block-end: none;
    margin-block-end: -0.5em;
}
.dropdown-collapsible .collapsible-block-content {
    border-block-start: none;
    margin-block-start: none;
    text-align: left;
}
.dropdown-collapsible .collapsible-block-content .inner-collapsible {
    background-color: rgb(255, 255, 255);
    border: 2px rgb(var(--very-light-gray-monochrome)) solid;
    margin-block-end: 0.5em;
    margin-inline: 1.25em;
    padding-block: 0.35em;
    padding-inline: 0.75em;
}
[[/module]]

[[=]]
[[module Rate]]
[[/=]]
[[include :scp-wiki:component:author-label-source start=--
|name=TheDarkArtist
|center=*]]
= **{{Slim ACS}}**
[[include :scp-wiki:component:author-label-source end=--]]
----

This is //Slim ACS//, a component based on the [[[anomaly-classification-system-guide|Anomaly Classification System]]], and inspired by [[[theme:basalt|BASALT]]], the [[[component:acs-animation|ACS Animation Component]]] & the [[[component:customizable-acs|Mega Cool Customizable ACS Add-On]]]; with darkmode being based on [[[theme:night-rush-theme|Night Rush Theme]]].

[[div class="meta-title" style="text-transform: uppercase; margin-block-end: -0.5rem; font-size: 160%;"]]
What It Does
[[/div]]

As you will see, it removes the danger diamond from ACS and the circles in which class icons are located.
Furthermore, it changes the font to one I find more visually pleasing (Monserrat), although this can be easily changed.

It also includes a built-in dark mode to use with dark themes, which changes icons to be more neon-looking; and customizable classes.

[[div class="meta-title" style="text-transform: uppercase; margin-block-end: -0.7rem; font-size: 160%;"]]
Examples
[[/div]]
[[size 45%]]{{* //Stolen from the [[[component:anomaly-class-bar|ACS Component]]] page.//}}[[/size]]

[[div style="margin-top: 0.2em;"]]
[[/div]]

[[collapsible show="▷ See BASIC ◁" hide="▽ See BASIC ▽"]]
[[include :scp-wiki:component:slim-acs-source
|item-number=7400
|clearance=4
|container-class=apollyon
|disruption-class=amida
|risk-class=danger
]]
[[div class="code"]]
@@[[include :scp-wiki:component:slim-acs-source@@
|item-number=7400
|clearance=four
|container-class=apollyon
|disruption-class=amida
|risk-class=danger
]]
[[/div]]
[[/collapsible]]

[[collapsible show="▷ See NO ITEM ◁" hide="▽ See NO ITEM ▽"]]
[[include :scp-wiki:component:slim-acs-source | inc-no-item=--
|item-number=scp-5379
|clearance=3
|container-class=uncontained
|disruption-class=vlam
|risk-class=caution
]]
[[div class="code"]]
@@[[include :scp-wiki:component:slim-acs-source | inc-no-item=--@@
|item-number=scp-5379
|clearance=3
|container-class=uncontained
|disruption-class=vlam
|risk-class=caution
]]
[[/div]]
[[/collapsible]]

[[collapsible show="▷ See WIDE ◁" hide="▽ See WIDE ▽"]]
[[include :scp-wiki:component:slim-acs-source | inc-wide=--
|item-number=4511
|clearance=4
|container-class=pending
]]
[[div class="code"]]
@@[[include :scp-wiki:component:slim-acs-source | inc-wide=--@@
|item-number=4511
|clearance=4
|container-class=pending
]]
[[/div]]
[[/collapsible]]

[[collapsible show="▷ See DARKMODE ◁" hide="▽ See DARKMODE ▽"]]
[[div style="background-color: #21252E; border-left: solid 0.26rem #1EB5E8; border-right: solid 0.26rem #1EB5E8; padding: .4rem; margin-top: 12px; margin-bottom:12px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); color: #EDEDED;"]]
[[include :scp-wiki:component:slim-acs-source | inc-darkmode=--
|item-number=1619
|clearance=1
|container-class=euclid
|disruption-class=dark
|risk-class=caution
]]
[[/div]]
[[div style="margin-top: -0.7rem;"]]
[[size 45%]]{{* //[[[theme:penumbra|Penumbra]]] styling not included.}}//[[/size]]
[[/div]]

[[div class="code"]]
@@[[include :scp-wiki:component:slim-acs-source | inc-darkmode=--@@
|item-number=1619
|clearance=1
|container-class=euclid
|disruption-class=dark
|risk-class=caution
]]
[[/div]]
[[/collapsible]]

[[collapsible show="▷ See ANIMATION ◁" hide="▽ See ANIMATION ▽"]]
[[include :scp-wiki:component:slim-acs-source | inc-animation=--
|item-number=5935
|clearance=5
|container-class=thaumiel
|disruption-class=amida
|risk-class=critical
]]

[[div class="code"]]
@@[[include :scp-wiki:component:slim-acs-source | inc-animation=--@@
|item-number=5935
|clearance=5
|container-class=thaumiel
|disruption-class=amida
|risk-class=critical
]]
[[/div]]
[[/collapsible]]

[[div class="meta-title" style="text-transform: uppercase; margin-block-end: 0rem; font-size: 160%;"]]
How to Use
[[/div]]

[[div class="code"]]
= [[span style="font-family: 'Inter', sans-serif; user-select: none;"]]Copy-and-paste this into your page and complete with your desired content.[[/span]]
----
@@[[include :scp-wiki:component:slim-acs-source@@ [[span style="user-select: none;"]][[span class="no-select"]]custom-setting-one=@@--@@[[/span]] | [[span class="no-select"]]custom-setting-two=@@--@@[[/span]][[/span]]
|item-number= [[span class="no-select"]]XXXX[[/span]]
|clearance= [[span class="no-select"]]# (1-6)[[/span]]
|container-class= [[span class="no-select"]]class[[/span]]
|disruption-class= [[span class="no-select"]]class[[/span]]
|risk-class= [[span class="no-select"]]class[[/span]]
]]
----
= [[span style="font-family: 'Inter', sans-serif; user-select: none;"]]For custom settings, see the {{EXAMPLES}} section.[[/span]]
= [[span style="font-family: 'Inter', sans-serif; user-select: none;"]]For classes, see below.[[/span]]
[[/div]]

[[collapsible show="▷ See CLASSES ◁" hide="▽ See CLASSES ▽"]]
[[=]]
**[[span style="color: rgb(0 159 107);"]]Safe / Dark  / Notice[[/span]]**

**[[span style="color: rgb(0 135 189);"]]Archon / Vlam / Caution[[/span]]**

**[[span style="color: rgb(255 211 0);"]]Euclid / Keneq / Warning[[/span]]**

**[[span style="color: rgb(255 109 0);"]]Ekhi / Danger[[/span]]**

**[[span style="color: rgb(196 2 51);"]]Keter / Amida / Critical[[/span]]**

**[[span style="color: rgb(88 0 188);"]]Apollyon / Solis / Yggdrasil[[/span]]**

**[[span style="color: rgb(66 66 72);"]]Thaumiel / Uncontained / Neutralized / None[[/span]]**

**[[span style="color: rgb(21 21 21);"]]Pending / Explained[[/span]]**

**[[span style="color: rgb(82 156 59);"]]Erloschen[[/span]]**

**[[span style="color: rgb(66 66 90);"]]Draugr[[/span]]**
[[/=]]

[[span style="font-family: 'Inter', sans-serif; user-select: none;"]]Other than standard classes, Slim ACS has some esoteric classes that I/someone I know have used, if you want me to add another one, send me a Wikidot DM to [[*user TheDarkArtist]] or something. Also, if you want to know what some of these classes are, [[[esoteric-classes-complete-list|here's the esoteric classes list]]].[[/span]]

[[span style="font-family: 'Inter', sans-serif; user-select: none;"]]However, if you'd rather make the class by yourself, here's the code necessary to do that:[[/span]]

[[code type="CSS]]
.class-name {
       --img-main: url('IMAGE URL');
       --clr-class: 0 0 0 /* << Change those values for your color, in RGB, & don't add commas, they *will* break the transparency */;
}
[[/code]]
[[/collapsible]]

= [[[component:slim-acs-source|Source Code]]]

Slim ACS

Module Styles

Inline Styles

Includes

CSS Classes

Page Source