Slim ACS

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

What this does

Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.

• Does NOT work on Sigma-9. This ONLY functions with Black Highlighter.
• Use this component by EstrellaYoshte instead if you intend to use Sigma-9.
• If you prefer, there is also a Collapsible Sidebar that functions on both BHL and Sigma-9.
  The collapsible sidebar functions via hovering rather than clicking and is slightly more visible than the Toggle Sidebar.

---

How to use

1. Copy code below.

2. Paste in article after Black Highlighter and any other Theme include.

[[include :scp-wiki:component:toggle-sidebar-bhl]]

3. (Optional) Style toggle button if using a theme.

There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found here.

:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}

---

+ Show component code

:root {
    --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
    --body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 48.0625rem) {
    #side-bar .close-menu {
        display: block;
        position: fixed;
        top: 0.5rem;
        left: 0.5rem;
        width: 3rem;
        height: 3rem;
        background: unset;
        opacity: 1;
        pointer-events: all;
        z-index: -1;
    }
 
    #side-bar .close-menu img {
        color: transparent;
    }
 
    #side-bar .close-menu::before,
    #side-bar .close-menu::after {
        content: "";
        box-sizing: border-box;
        position: fixed;
        display: block;
        top: 0.5rem;
        left: 0.5rem;
        width: 3rem;
        height: 3rem;
        padding: 0;
        margin: 0;
        text-align: center;
        pointer-events: all;
        cursor: pointer;
        transition:
            opacity var(--sidebar-transition-timing);
    }
 
    #side-bar .close-menu::before {
        --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
        z-index: -1;
        background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
        -webkit-mask: var(--mask);
        mask: var(--mask);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: 50% 50%;
        mask-position: 50% 50%;
        -webkit-mask-size: 60%;
        mask-size: 60%;
    }
 
    #side-bar .close-menu::after {
        z-index: -2;
        background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
        border-radius: var(--toggle-roundness, 50%);
        border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
    }
 
    #side-bar:focus-within .close-menu,
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
        pointer-events: none;
    }
 
    #side-bar:focus-within .close-menu::before,
    #side-bar:focus-within .close-menu::after {
        opacity: 0;
        pointer-events: none;
    }
 
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
        opacity: 0;
        pointer-events: none;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: calc(var(--sidebar-width-on-desktop)*-1);
        z-index: 10;
        transition:
            left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 0;
    }
 
    #side-bar:focus-within {
        left: 0;
    }
 
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
        left: 0;
    }
 
    #side-bar .side-block {
        margin-top: 1rem;
        background-color: rgb(0, 0, 0, 0);
        border-radius: 0;
        border-left-width: 0px;
        border-right-width: 0px;
    }
 
    #main-content::before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: -1;
        opacity: 0;
        transition:
            opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
            width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
        margin-left: var(--sidebar-width-on-desktop);
        background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
        padding-right: 0;
        width: 100%;
        height: 100vh;
        pointer-events: none;
        z-index: 99;
    }
 
    #side-bar:focus-within ~ #main-content::before {
        width: calc(100% - var(--sidebar-width-on-desktop));
        opacity: 1;
        pointer-events: all;
    }
 
    #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
        width: calc(100% - var(--sidebar-width-on-desktop));
        opacity: 1;
        pointer-events: all;
    }
 
    @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
        padding: inherit;
    } }
 
    #content-wrap {
        display: flex;
        flex-direction: row;
        width: calc(100vw - (100vw - 100%));
        min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
        flex-grow: 2;
        height: auto;
        position: relative;
        margin: 0 auto;
        max-width: inherit;
    }
 
    #main-content {
        width: 100%;
        position: initial;
        max-height: 100%;
        padding: 2rem 1rem;
        max-width: var(--body-width-on-desktop, 45.75rem);
        margin: 0 auto;
    }
 
    #page-content {
        max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
    }
 
    @supports (-webkit-hyphens:none) { 
        #side-bar {
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            padding-right: 0;
            background-color: rgb(0, 0, 0, 0);
            pointer-events: all;
            overflow-x: visible;
            overflow-y: visible;
            z-index: 999;
        }
 
        #side-bar::-webkit-scrollbar {
            opacity: 0;
            -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
        }
 
        #side-bar .close-menu::before {
            z-index: 999;
        }
 
        #side-bar .close-menu::after {
            z-index: 998;
        }
 
        #side-bar:hover .close-menu::before,
        #side-bar:hover .close-menu::after {
            opacity: 0;
        }
 
        #side-bar:hover {
            left: 0;
            background-color: rgba(var(--swatch-menubg-color), 1);
            padding-right: 0;
        }
 
        #side-bar:hover::-webkit-scrollbar {
            opacity: 1;
        }
 
        #side-bar:hover~#main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
    }
}

TheDarkArtist

Slim ACS

---

This is Slim ACS, a component based on the Anomaly Classification System, and inspired by BASALT, the ACS Animation Component & the Mega Cool Customizable ACS Add-On; with darkmode being based on Night Rush Theme.

What It Does

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.

Examples

* Stolen from the ACS Component page.

▷ See BASIC ◁

Item #: 7400⠀

Level 4
⠀

Object Class:
apollyon

Disruption Class: amida

Risk Class: danger

[[include :scp-wiki:component:slim-acs-source
|item-number=7400
|clearance=four
|container-class=apollyon
|disruption-class=amida
|risk-class=danger
]]

▷ See NO ITEM ◁

Item #: scp-5379⠀

Level 3
⠀

Object Class:
uncontained

Disruption Class: vlam

Risk Class: caution

[[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
]]

▷ See WIDE ◁

Item #: 4511⠀

Level 4
⠀

Object Class:
pending

Disruption Class: {$disruption-class}

Risk Class: {$risk-class}

[[include :scp-wiki:component:slim-acs-source | inc-wide=--
|item-number=4511
|clearance=4
|container-class=pending
]]

▷ See DARKMODE ◁

Item #: 1619⠀

Level 1
⠀

Object Class:
euclid

Disruption Class: dark

Risk Class: caution

* Penumbra styling not included.

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

▷ See ANIMATION ◁

Item #: 5935⠀

Level 5
⠀

Object Class:
thaumiel

Disruption Class: amida

Risk Class: critical

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

How to Use

Copy-and-paste this into your page and complete with your desired content.

---

[[include :scp-wiki:component:slim-acs-source custom-setting-one=-- | custom-setting-two=--
|item-number= XXXX
|clearance= # (1-6)
|container-class= class
|disruption-class= class
|risk-class= class
]]

---

For custom settings, see the EXAMPLES section.

For classes, see below.

▷ See CLASSES ◁

Safe / Dark / Notice

Archon / Vlam / Caution

Euclid / Keneq / Warning

Ekhi / Danger

Keter / Amida / Critical

Apollyon / Solis / Yggdrasil

Thaumiel / Uncontained / Neutralized / None

Pending / Explained

Erloschen

Draugr

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 TheDarkArtist or something. Also, if you want to know what some of these classes are, here's the esoteric classes list.

However, if you'd rather make the class by yourself, here's the code necessary to do that:

.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 */;
}

Source Code