ACS Lite by Hormress

Link to article: ACS Lite by Hormress.

Module Styles

• h1, h2 {
      text-align: center;
  }
  
  .step_container {
      margin: 0.5rem 0;
      border: 1px solid #999;
      padding: 1em;
  }
  
  #page-title {
      display: none;
  }
  
  #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;
  }

Inline Styles

• background-color: rgba(var(--five-color), 0.15); color: rgb(var(--five-color))

• background-color: rgba(var(--one-color), 0.15); color: rgb(var(--one-color))

• background-color: rgba(var(--five-color), 0.15); color: rgb(var(--five-color))

Includes

• :scp-wiki:theme:black-highlighter-theme [info]

CSS Classes

• step_container

• step_container

• step_container

• code

Page Source

[[include :scp-wiki:theme:black-highlighter-theme]]
[[module CSS]]
h1, h2 {
    text-align: center;
}

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

#page-title {
    display: none;
}

#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 Lite
----
[[>]]
[[module rate]]
[[/>]]
[[div class="step_container"]]
+ [/anomaly-classification-system-guide BEFORE USING, PLEASE READ THIS GUIDE].
++ Please read [[[component:anomaly-class-bar|Anomaly Classification Bar]]] for further information.
----
[[=]]
+++ Black Highlighter is not required to use this component.
+++ This component can co-exist with the original ACS component.
[[/=]]
[[/div]]

[[div class="step_container"]]
[[=]]
++++ This is a derivative version of the ACS that unifies line thickness ({{3px}}) and takes up less space on most devices (almost 1/2 the size of the original ACS on mobile devices).

++++ This component is not compatible with existing ACS addons.
[[/=]]
[[/div]]

+ EXAMPLE

[[include component:acs-horm-lite-source
|item-number= 2105
|clearance= 2
|container-class= euclid
|secondary-class= none
|disruption-class= vlam
|risk-class= notice
]]
@@ @@
[[include component:acs-horm-lite-source
|item-number= 3000
|clearance= 5
|container-class= esoteric
|secondary-class= thaumiel
|secondary-icon= http://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/thaumiel-icon.svg
|disruption-class= ekhi
|risk-class= critical
]]
@@ @@
[[include component:acs-horm-lite-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:acs-horm-lite-source}}
> {{|item-number= 2105}}
> {{|clearance= 2}}
> {{|container-class= euclid}}
> {{|secondary-class= none}}
> {{|disruption-class= vlam}}
> {{|risk-class= notice}}
> {{]]}}
> 
> {{[[include :scp-wiki:component:acs-horm-lite-source}}
> {{|item-number= 3000}}
> {{|clearance= 5}}
> {{|container-class= esoteric}}
> {{|secondary-class= thaumiel}}
> {{|secondary-icon= http://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/thaumiel-icon.svg}}
> {{|disruption-class= ekhi}}
> {{|risk-class= critical}}
> {{]]}}
> 
> {{[[include :scp-wiki:component:acs-horm-lite-source}}
> {{|item-number= 4511}}
> {{|clearance= 4}}
> {{|container-class= pending}}
> {{|secondary-class= none}}
> {{|disruption-class= none}}
> {{|risk-class= none}}
> {{]]}}

[[/collapsible]]

+ HOW TO USE
[[div class="step_container"]]
[[=]]
++++ Include this component in the same way as the original ACS component, just change

++++ [[span style="background-color: rgba(var(--five-color), 0.15); color: rgb(var(--five-color))"]]{{anomaly-class-bar-source}}[[/span]]

++++ to

++++ [[span style="background-color: rgba(var(--one-color), 0.15); color: rgb(var(--one-color))"]]{{acs-horm-lite-source}}[[/span]]
[[/=]]
[[/div]]

+ EXTRA OPTIONS

[[include component:acs-horm-lite-source
|item-number= 3000
|clearance= 5
|container-class= esoteric
|secondary-class= keter
|secondary-icon= http://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/keter-icon.svg
|secondary-color= var(--five-color)
|disruption-class= ekhi
|risk-class= critical
]]
----
[[collapsible show="+ Click here to see above examples' code" hide="- Hide code"]]

[[div class="code"]]

@@[!-- Add the following variable to modify esoteric color, please do not add spaces. --]@@

@@[[include :scp-wiki:component:acs-horm-lite-source@@
|lang= cn
|item-number= 3000
|clearance= 5
|container-class= esoteric
|secondary-class= keter
|secondary-icon= http://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/keter-icon.svg
[[span style="background-color: rgba(var(--five-color), 0.15); color: rgb(var(--five-color))"]]|secondary-color= var(--five-color)[[/span]]
|disruption-class= ekhi
|risk-class= critical
]]
[[/div]]
[[/collapsible]]

+ OTHER EXTRA OPTIONS: COMING SOON!