ACS Splitter

Link to article: ACS Splitter.

Module Styles

• :root {
    --safe: 0,159,107;
    --euclid: 255,211,0;
    --keter: 196,2,51;
    --esoteric: 66, 66, 72;
  }
  
  .contain-class .class-text {
    color: transparent !important;
  }
  
  .contain-class .class-text::before {
    content: "{$object}";
    position: absolute;
    top: 0;
    color: rgba(51,51,51,1);
  }
  
  .text-part > .main-class::before {
      margin-right:0;
  }
  
  .anom-bar-container.esoteric .text-part > .main-class::before {
    background-color: rgba(var(--{$object-color}),1);
    background-image: url("{$object-image}");
    -webkit-filter: invert(0);
    filter: invert(0);
    border-color: rgb(12,12,12);
  }
  
  .anom-bar-container.esoteric .text-part > .main-class {
    background-color: rgb(12,12,12);
    background: linear-gradient(30deg,
      rgb(var(--{$esoteric-color}),0.25) 0%,
      rgb(var(--{$esoteric-color}),0.25) 50%,
      rgb(var(--{$object-color}),0.25) 50%,
      rgb(var(--{$object-color}),0.25) 50%
    )
  }
  
  .anom-bar-container.esoteric .danger-diamond > .top-icon::before {
    background-color: rgb(var(--{$object-color}));
    background-image: url("{$object-image}");
    -webkit-filter: invert(0);
    filter: invert(0);
  }
  
  .anom-bar-container.esoteric .danger-diamond > .quadrants > .top-quad {
      background-color: rgb(66, 66, 72 ,0.15);
      background-color: rgb(var(--{$object-color}),0.25);
  }
  
  .anom-bar-container.esoteric .text-part > .main-class > .second-class > .class-text::before {
  content: "{$object2}";
  color: #333333;
  font-size: 0.00;
  font-size: {$hideObject2};
  }
  
  .anom-bar-container.esoteric .text-part > .main-class > .second-class > .class-text {
  font-size:{$hideObject};
  }
  

Inline Styles

• (none)

Includes

• (none)

CSS Classes

• (none)

Page Source

[[iftags -component]]


[[module CSS]]
:root {
  --safe: 0,159,107;
  --euclid: 255,211,0;
  --keter: 196,2,51;
  --esoteric: 66, 66, 72;
}

.contain-class .class-text {
  color: transparent !important;
}

.contain-class .class-text::before {
  content: "{$object}";
  position: absolute;
  top: 0;
  color: rgba(51,51,51,1);
}

.text-part > .main-class::before {
    margin-right:0;
}

.anom-bar-container.esoteric .text-part > .main-class::before {
  background-color: rgba(var(--{$object-color}),1);
  background-image: url("{$object-image}");
  -webkit-filter: invert(0);
  filter: invert(0);
  border-color: rgb(12,12,12);
}

.anom-bar-container.esoteric .text-part > .main-class {
  background-color: rgb(12,12,12);
  background: linear-gradient(30deg,
    rgb(var(--{$esoteric-color}),0.25) 0%,
    rgb(var(--{$esoteric-color}),0.25) 50%,
    rgb(var(--{$object-color}),0.25) 50%,
    rgb(var(--{$object-color}),0.25) 50%
  )
}

.anom-bar-container.esoteric .danger-diamond > .top-icon::before {
  background-color: rgb(var(--{$object-color}));
  background-image: url("{$object-image}");
  -webkit-filter: invert(0);
  filter: invert(0);
}

.anom-bar-container.esoteric .danger-diamond > .quadrants > .top-quad {
    background-color: rgb(66, 66, 72 ,0.15);
    background-color: rgb(var(--{$object-color}),0.25);
}

.anom-bar-container.esoteric .text-part > .main-class > .second-class > .class-text::before {
content: "{$object2}";
color: #333333;
font-size: 0.00;
font-size: {$hideObject2};
}

.anom-bar-container.esoteric .text-part > .main-class > .second-class > .class-text {
font-size:{$hideObject};
}

[[/module]]
[[/iftags]]
[[iftags +component]]

Splits the object class in the ACS header to display both an esoteric class and a regular object class. 
[[[scp-4703|Example here.]]]

Original code by [[*user woedenaz]]. Adapted from SCP-4531, which was written by [[*user Yossipossi]]. Componentized by [[*user PeppersGhost]].

To use, include the following code: 

> [[include :scp-wiki:component:acs-peppo-split
> |object= keter
> |object-image= http://scp-wiki.wikidot.com/local--files/component:anomaly-class-bar/keter-icon.svg
> |object-color= keter
> |esoteric-color= esoteric
> ]]


Adjust "object", "object-image", and "object-color" values to change the regular class if you want it to be half-Safe or half-Euclid instead of half-Keter. Just change the "keter" value to "safe" or "euclid". 

+ Check Page Source for Code
[[/iftags]]