ACS Lite by Hormress (Source)

Link to article: ACS Lite by Hormress (Source).

Module Styles

• :root {
      --5-color: rgb(var(--five-color));
      --4-color: rgb(var(--four-color));
      --3-color: rgb(var(--three-color));
      --2-color: rgb(var(--two-color));
      --1-color: rgb(var(--one-color));
      --0-color: rgb(var(--white-monochrome));
      --black: rgb(var(--black-monochrome));
      --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;
      --white-monochrome: 255, 255, 255;
      --black-monochrome: 0, 0, 0;
  }
  
  .anom-lite-bar-container {
  }
  
  .anom-lite-bar-container,
  
  .anom-lite-bar-container p {
      margin: 0;
      line-height: 1;
  }
  
  .anom-lite-bar-container .bottom-bar {
      display: flex;
  }
  
  .anom-lite-bar-container .bottom-left-bar {
      flex-grow: 1;
  }
  
  /* ITEM# & CLEARANCE */
  
  .anom-lite-bar-container .top-bar {
      display: flex;
      align-items: center;
      border-bottom: solid 3px var(--black);
      margin-bottom: 3px;
      padding: 3px;
  }
  
  .anom-lite-bar-container .top-center-bar {
      flex-grow: 1;
  }
  
  .anom-lite-bar-container .item-number-text,
  .anom-lite-bar-container .clearance-text {
      font-size: 0.75rem;
  }
  
  .anom-lite-bar-container .item-number-content,
  .anom-lite-bar-container .clearance-content {
      font-size: 0.96rem;
  }
  
  @media (min-width: 768px) {
  .anom-lite-bar-container .item-number-text,
  .anom-lite-bar-container .clearance-text {
      font-size: 1.2rem;
  }
  
  .anom-lite-bar-container .item-number-content,
  .anom-lite-bar-container .clearance-content {
      font-size: 1.75rem;
  }
  }
  
  .anom-lite-bar-container .item-number-text,
  .anom-lite-bar-container .clearance-content {
      font-weight: bold;
  }
  
  .anom-lite-bar-container .item-number-content,
  .anom-lite-bar-container .clearance-text {
      font-family: var(--title-font);
      text-transform: uppercase;
  }
  
  .anom-lite-bar-container .top-right-bar {
      text-align: right;
  }
  
  .anom-lite-bar-container .top-center-bar {
      margin-left: 3px;
      margin-right: 3px;
  }
  
  .anom-lite-bar-container .clearance-{$clearance} hr {
      margin: 0;
      margin-bottom: 2px;
      height: 3px;
      background-color: var(--{$clearance}-color);
      background-image: none;
      border: none;
  }
  
  .anom-lite-bar-container .clearance-1 hr:nth-child(2),
  .anom-lite-bar-container .clearance-1 hr:nth-child(3),
  .anom-lite-bar-container .clearance-1 hr:nth-child(4),
  .anom-lite-bar-container .clearance-1 hr:nth-child(5),
  .anom-lite-bar-container .clearance-1 hr:nth-child(6),
  .anom-lite-bar-container .clearance-2 hr:nth-child(3),
  .anom-lite-bar-container .clearance-2 hr:nth-child(4),
  .anom-lite-bar-container .clearance-2 hr:nth-child(5),
  .anom-lite-bar-container .clearance-2 hr:nth-child(6),
  .anom-lite-bar-container .clearance-3 hr:nth-child(4),
  .anom-lite-bar-container .clearance-3 hr:nth-child(5),
  .anom-lite-bar-container .clearance-3 hr:nth-child(6),
  .anom-lite-bar-container .clearance-4 hr:nth-child(5),
  .anom-lite-bar-container .clearance-4 hr:nth-child(6),
  .anom-lite-bar-container .clearance-5 hr:nth-child(6) {
      display: none;
  }
  
  .anom-lite-bar-container .clearance-1 hr:nth-child(1),
  .anom-lite-bar-container .clearance-2 hr:nth-child(2),
  .anom-lite-bar-container .clearance-3 hr:nth-child(3),
  .anom-lite-bar-container .clearance-4 hr:nth-child(4),
  .anom-lite-bar-container .clearance-5 hr:nth-child(5),
  .anom-lite-bar-container .clearance-6 hr:nth-child(6) {
      margin-bottom: 0;
  }
  
  /* CLASSSSSS */
  
  .anom-lite-bar-container .bottom-left-bar {
      width: calc(100% - 6rem - 16px);
      border-right: solid 3px var(--black);
      margin-right: 3px;
      margin-left: 3px;
      padding-right: 3px;
  }
  
  .anom-lite-bar-container .bottom-left-top-bar {
      border-left: solid 3px var(--black);
      background-color: rgba(var(--black-monochrome), 0.15);
  }
  
  .anom-lite-bar-container .bottom-left-bottom-left-bar,
  .anom-lite-bar-container .bottom-left-bottom-right-bar {
      border-left: solid 3px var(--black);
      background-color: rgba(var(--black-monochrome), 0.15);
  }
  
  .anom-lite-bar-container .bottom-left-top-bar,
  .anom-lite-bar-container .bottom-left-bottom-left-bar,
  .anom-lite-bar-container .bottom-left-bottom-right-bar {
      display: flex;
      align-items: center;
      overflow: hidden;
      padding-left: 4.5px;
  }
  
  .anom-lite-bar-container .container-class-textarea,
  .anom-lite-bar-container .disruption-class-textarea,
  .anom-lite-bar-container .risk-class-textarea {
      flex-grow: 1;
  }
  
  .anom-lite-bar-container .secondary-class-textarea {
      display: none;
  }
  
  .anom-lite-bar-container.c-esoteric .secondary-class-textarea {
      display: block;
  }
  
  .anom-lite-bar-container .container-class-text,
  .anom-lite-bar-container .disruption-class-text,
  .anom-lite-bar-container .risk-class-text,
  .anom-lite-bar-container .secondary-class-text {
      font-size: 0.625rem;
      margin-bottom: 1.5px;
  }
  
  .anom-lite-bar-container .container-class-content,
  .anom-lite-bar-container .disruption-class-content,
  .anom-lite-bar-container .risk-class-content,
  .anom-lite-bar-container .secondary-class-content {
      font-size: 0.8rem;
      font-weight: bold;
      font-family: var(--title-font);
      text-transform: uppercase;
  }
  
  .anom-lite-bar-container .container-class-content,
  .anom-lite-bar-container .secondary-class-content {
      font-size: 1.2rem;
      margin-top: -2px;
  }
  
  .anom-lite-bar-container.c-esoteric .container-class-content {
      font-size: 0.8rem;
      margin-top: 0;
  }
  
  .anom-lite-bar-container .bottom-left-top-bar {
      padding-right: 0.5rem;
  }
  
  .anom-lite-bar-container .container-class-icon {
      position: relative;
  }
  
  .anom-lite-bar-container .container-class-icon .icon {
      margin: 0;
      width: calc(3rem - 6px);
      height: calc(3rem - 6px);
      border: solid 3px var(--black);
      border-radius: 50%;
      background-color: var(--0-color);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      z-index: 2;
  }
  
  .anom-lite-bar-container.c-esoteric .container-class-icon .icon {
      width: calc(6rem - 12px);
      border-radius: 1.5rem;
      background-position: left center;
  }
  
  .anom-lite-bar-container.c-esoteric.s-{$secondary-class} .container-class-icon .secondary-icon {
      margin: 0;
      position: absolute;
      top: 0;
      right: 0;
      width: calc(3rem - 6px);
      height: calc(3rem - 6px);
      border: solid 3px var(--black);
      border-radius: 1.5rem;
      background-image: url("{$secondary-icon}");
      background-color: var(--0-color);
      background-color: rgb({$secondary-color});
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      z-index: 3;
  }
  
  .anom-lite-bar-container .disruption-class-icon .icon,
  .anom-lite-bar-container .risk-class-icon .icon {
      margin: 0;
      position: relative;
      width: calc(2rem - 6px);
      height: calc(2rem - 6px);
      border: solid 3px var(--black);
      border-radius: 50%;
      background-color: var(--0-color);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      z-index: 2;
  }
  
  .anom-lite-bar-container .disruption-class-icon,
  .anom-lite-bar-container .risk-class-icon {
      position: relative;
      z-index: 3;
  }
  
  .anom-lite-bar-container .disruption-class-icon::before,
  .anom-lite-bar-container .risk-class-icon::before {
      content: "";
      color: var(--0-color);
      padding-top: 0.5rem;
      font-size: 0.8rem;
      font-family: var(--title-font);
      position: absolute;
      right: 0;
      top: 0;
      width: 2.5rem;
      height: calc(1.5rem - 6px);
      border: solid 3px var(--black);
      border-radius: 1rem;
      background-color: var(--black);
      z-index: 0;
  }
  
  @media (max-width: 479px) {
  .anom-lite-bar-container .bottom-left-top-bar {
      height: calc(4rem - 3px);
      width: calc(100% - 16px);
      margin-bottom: 3px;
  }
  
  .anom-lite-bar-container .bottom-left-bottom-bar {
      display: flex;
  }
  
  .anom-lite-bar-container .bottom-left-bottom-left-bar,
  .anom-lite-bar-container .bottom-left-bottom-right-bar {
      height: 2rem;
      width: calc(50% - 4.5px);
  }
  
  .anom-lite-bar-container .bottom-left-bottom-left-bar {
      margin-right: 3px;
  }
  }
  
  @media (min-width: 480px) and (max-width: 767px) {
  .anom-lite-bar-container .bottom-left-bar {
      display: flex;
  }
  
  .anom-lite-bar-container .bottom-left-top-bar {
      height: 6rem;
      width: calc(50% - 1.5px);
      margin-right: 3px;
  }
  
  .anom-lite-bar-container .bottom-left-bottom-bar {
      width: calc(50% - 1.5px);
  }
  
  .anom-lite-bar-container .bottom-left-bottom-left-bar,
  .anom-lite-bar-container .bottom-left-bottom-right-bar {
      height: calc(3rem - 1.5px);
  }
  
  .anom-lite-bar-container .bottom-left-bottom-left-bar {
      margin-bottom: 3px;
  }
  
  .anom-lite-bar-container .disruption-class-textarea,
  .anom-lite-bar-container .risk-class-textarea {
      display: flex;
  }
  }
  
  @media (min-width: 768px) {
  .anom-lite-bar-container .bottom-left-bar {
      display: flex;
  }
  
  .anom-lite-bar-container .bottom-left-top-bar {
      height: 6rem;
      width: calc(60% - 1.5px);
      margin-right: 3px;
  }
  
  .anom-lite-bar-container .bottom-left-bottom-bar {
      width: calc(40% - 1.5px);
  }
  
  .anom-lite-bar-container .bottom-left-bottom-left-bar,
  .anom-lite-bar-container .bottom-left-bottom-right-bar {
      height: calc(3rem - 1.5px);
  }
  
  .anom-lite-bar-container .bottom-left-bottom-left-bar {
      margin-bottom: 3px;
  }
  
  .anom-lite-bar-container .disruption-class-textarea,
  .anom-lite-bar-container .risk-class-textarea {
      display: flex;
  }
  
  .anom-lite-bar-container .disruption-class-content,
  .anom-lite-bar-container .risk-class-content {
      font-size: 1rem;
      margin-top: -2px;
  }
  }
  
  /* ACS DIAMOND */
  .anom-lite-bar-container .diamond {
      flex: 0 0 6rem;
      width: 6rem;
      height: 6rem;
      margin: 0;
      margin-right: 3px;
      position: relative;
      background-color: transparent;
  }
  
  .anom-lite-bar-container .diamond .diamond-mask {
      positive: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: var(--black);
      clip-path: polygon(0 0, 6% 0, 4% 2%, 18% 16%, 34% 0, 66% 0, 82% 16%, 96% 2%, 94% 0, 100% 0, 100% 6%, 98% 4%, 84% 18%, 100% 34%, 100% 66%, 84% 82%, 98% 96%, 100% 94%, 100% 100%, 94% 100%, 96% 98%, 82% 84%, 66% 100%, 34% 100%, 18% 84%, 4% 98%, 6% 100%, 0 100%, 0 94%, 2% 96%, 16% 82%, 0 66%, 0 34%, 16% 18%, 2% 4%, 0 6%);
      -webkit-clip-path: polygon(0 0, 6% 0, 4% 2%, 18% 16%, 34% 0, 66% 0, 82% 16%, 96% 2%, 94% 0, 100% 0, 100% 6%, 98% 4%, 84% 18%, 100% 34%, 100% 66%, 84% 82%, 98% 96%, 100% 94%, 100% 100%, 94% 100%, 96% 98%, 82% 84%, 66% 100%, 34% 100%, 18% 84%, 4% 98%, 6% 100%, 0 100%, 0 94%, 2% 96%, 16% 82%, 0 66%, 0 34%, 16% 18%, 2% 4%, 0 6%);
      z-index: 1;
  }
  
  .anom-lite-bar-container .diamond .top-mask,
  .anom-lite-bar-container .diamond .left-mask,
  .anom-lite-bar-container .diamond .right-mask,
  .anom-lite-bar-container .diamond .bottom-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 2;
  }
  
  .anom-lite-bar-container .diamond .top-mask {
      background-color: var(--0-color);
      clip-path: polygon(20% 18%, 35% 3%, 65% 3%, 80% 18%, 50% 48%);
      -webkit-clip-path: polygon(20% 18%, 35% 3%, 65% 3%, 80% 18%, 50% 48%);
  }
  
  .anom-lite-bar-container .diamond .left-mask {
      background-color: var(--0-color);
      clip-path: polygon(18% 20%, 3% 35%, 3% 65%, 18% 80%, 48% 50%);
      -webkit-clip-path: polygon(18% 20%, 3% 35%, 3% 65%, 18% 80%, 48% 50%);
  }
  
  .anom-lite-bar-container .diamond .right-mask {
      background-color: var(--0-color);
      clip-path: polygon(82% 20%, 97% 35%, 97% 65%, 82% 80%, 52% 50%);
      -webkit-polygon(82% 20%, 97% 35%, 97% 65%, 82% 80%, 52% 50%);
  }
  
  .anom-lite-bar-container .diamond .bottom-mask {
      background-color: var(--0-color);
      clip-path: polygon(20% 82%, 35% 97%, 65% 97%, 80% 82%, 50% 52%);
      -webkit-clip-path: polygon(20% 82%, 35% 97%, 65% 97%, 80% 82%, 50% 52%);
  }
  
  .anom-lite-bar-container .diamond .top-mask.layer-2,
  .anom-lite-bar-container .diamond .left-mask.layer-2,
  .anom-lite-bar-container .diamond .right-mask.layer-2,
  .anom-lite-bar-container .diamond .bottom-mask.layer-2 {
      background: none;
  }
  
  .anom-lite-bar-container .diamond .top-icon,
  .anom-lite-bar-container .diamond .left-icon,
  .anom-lite-bar-container .diamond .right-icon,
  .anom-lite-bar-container .diamond .bottom-icon {
      display: block;
      position: absolute;
      margin: 0;
      width: calc(2rem - 6px);
      height: calc(2rem - 6px);
      border: solid 3px var(--black);
      border-radius: 50%;
      background-color: var(--0-color);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      z-index: 3;
  }
  
  .anom-lite-bar-container .diamond .center-icon {
      display: block;
      position: absolute;
      margin: 0;
      top: 1rem;
      left: 1rem;
      width: calc(4rem - 6px);
      height: calc(4rem - 6px);
      border: solid 3px var(--black);
      border-radius: 50%;
      background-color: var(--0-color);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      z-index: 3;
  }
  
  .anom-lite-bar-container .diamond .top-icon {
      top: 4px;
      left: 2rem;
      background: none;
      filter: none;
  }
  
  .anom-lite-bar-container .diamond .left-icon {
      top: 2rem;
      left: 4px;
      background: none;
      filter: none;
  }
  
  .anom-lite-bar-container .diamond .right-icon {
      bottom: 2rem;
      right: 4px;
      background: none;
      filter: none;
  }
  
  .anom-lite-bar-container .diamond .bottom-icon {
      bottom: 4px;
      right: 2rem;
      background: none;
      filter: none;
  }
  
  .anom-lite-bar-container .diamond .bottom-icon,
  .anom-lite-bar-container .diamond .center-icon {
      display: none;
  }
  
  .anom-lite-bar-container.e-centered .diamond .center-icon,
  .anom-lite-bar-container.c-neutralised .diamond .center-icon,
  .anom-lite-bar-container.c-neutralized .diamond .center-icon,
  .anom-lite-bar-container.c-explained .diamond .center-icon,
  .anom-lite-bar-container.c-pending .diamond .center-icon {
      display: block;
  }
  
  .anom-lite-bar-container.e-centered .diamond .top-icon,
  .anom-lite-bar-container.e-centered .diamond .left-icon,
  .anom-lite-bar-container.e-centered .diamond .right-icon,
  .anom-lite-bar-container.e-centered .diamond .bottom-icon,
  .anom-lite-bar-container.c-neutralised .diamond .top-icon,
  .anom-lite-bar-container.c-neutralised .diamond .left-icon,
  .anom-lite-bar-container.c-neutralised .diamond .right-icon,
  .anom-lite-bar-container.c-neutralised .diamond .bottom-icon,
  .anom-lite-bar-container.c-neutralized .diamond .top-icon,
  .anom-lite-bar-container.c-neutralized .diamond .left-icon,
  .anom-lite-bar-container.c-neutralized .diamond .right-icon,
  .anom-lite-bar-container.c-neutralized .diamond .bottom-icon,
  .anom-lite-bar-container.c-explained .diamond .top-icon,
  .anom-lite-bar-container.c-explained .diamond .left-icon,
  .anom-lite-bar-container.c-explained .diamond .right-icon,
  .anom-lite-bar-container.c-explained .diamond .bottom-icon,
  .anom-lite-bar-container.c-pending .diamond .top-icon,
  .anom-lite-bar-container.c-pending .diamond .left-icon,
  .anom-lite-bar-container.c-pending .diamond .right-icon,
  .anom-lite-bar-container.c-pending .diamond .bottom-icon,
  .anom-lite-bar-container.e-centered .container-class-icon,
  .anom-lite-bar-container.c-neutralised .container-class-icon,
  .anom-lite-bar-container.c-neutralized .container-class-icon,
  .anom-lite-bar-container.c-explained .container-class-icon,
  .anom-lite-bar-container.c-pending .container-class-icon,
  .anom-lite-bar-container.c-neutralised .bottom-left-bottom-bar,
  .anom-lite-bar-container.c-neutralized .bottom-left-bottom-bar,
  .anom-lite-bar-container.c-explained .bottom-left-bottom-bar,
  .anom-lite-bar-container.c-pending .bottom-left-bottom-bar {
      display: none;
  }
  
  .anom-lite-bar-container.c-neutralised .bottom-left-top-bar,
  .anom-lite-bar-container.c-neutralized .bottom-left-top-bar,
  .anom-lite-bar-container.c-explained .bottom-left-top-bar,
  .anom-lite-bar-container.c-pending .bottom-left-top-bar {
      width: calc(100% - 16px);
      height: 100%;
  }
  
  .anom-lite-bar-container.c-esoteric.s-{$secondary-class} .diamond .bottom-icon {
      display: block;
      background-image: url("{$secondary-icon}");
      background-color: rgb({$secondary-color});
  }
  
  .anom-lite-bar-container.c-esoteric.s-{$secondary-class} .diamond .bottom-mask.layer-2 {
      display: block;
      background-color: var(--0-color);
      background-color: rgba({$secondary-color}, 0.15);
  }
  
  /* CHANGES */
  .anom-lite-bar-container.c-safe .container-class-icon .icon,
  .anom-lite-bar-container.c-safe .diamond .center-icon,
  .anom-lite-bar-container.c-safe .diamond .top-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/safe-icon.svg");
      background-color: var(--1-color);
  }
  
  .anom-lite-bar-container.c-safe .bottom-left-top-bar,
  .anom-lite-bar-container.c-safe .diamond .top-mask.layer-2 {
      background-color: rgba(var(--one-color), 0.15);
      border-color: var(--1-color);
  }
  
  .anom-lite-bar-container.c-euclid .container-class-icon .icon,
  .anom-lite-bar-container.c-euclid .diamond .center-icon,
  .anom-lite-bar-container.c-euclid .diamond .top-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/euclid-icon.svg");
      background-color: var(--3-color);
  }
  
  .anom-lite-bar-container.c-euclid .bottom-left-top-bar,
  .anom-lite-bar-container.c-euclid .diamond .top-mask.layer-2 {
      background-color: rgba(var(--three-color), 0.15);
      border-color: var(--3-color);
  }
  
  .anom-lite-bar-container.c-keter .container-class-icon .icon,
  .anom-lite-bar-container.c-keter .diamond .center-icon,
  .anom-lite-bar-container.c-keter .diamond .top-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/keter-icon.svg");
      background-color: var(--5-color);
  }
  
  .anom-lite-bar-container.c-keter .bottom-left-top-bar,
  .anom-lite-bar-container.c-keter .diamond .top-mask.layer-2 {
      background-color: rgba(var(--five-color), 0.15);
      border-color: var(--5-color);
  }
  
  .anom-lite-bar-container.c-thaumiel .container-class-icon .icon,
  .anom-lite-bar-container.c-thaumiel .diamond .center-icon,
  .anom-lite-bar-container.c-thaumiel .diamond .top-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/thaumiel-icon.svg");
      background-color: var(--0-color);
  }
  
  .anom-lite-bar-container.c-thaumiel .bottom-left-top-bar,
  .anom-lite-bar-container.c-thaumiel .diamond .top-mask.layer-2 {
      background-color: rgba(var(--black-monochrome), 0.15);
      border-color: var(--black);
  }
  
  .anom-lite-bar-container.c-esoteric.s-{$secondary-class} .container-class-icon .icon,
  .anom-lite-bar-container.c-esoteric.s-{$secondary-class} .diamond .center-icon,
  .anom-lite-bar-container.c-esoteric.s-{$secondary-class} .diamond .top-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/esoteric-icon.svg");
      background-color: var(--0-color);
      border-color: var(--0-color);
      filter: invert(100%);
  }
  
  .anom-lite-bar-container.c-esoteric.s-{$secondary-class} .bottom-left-top-bar {
      background-color: rgba(var(--black-monochrome), 0.15);
      background-color: rgba({$secondary-color}, 0.15);
      border-color: var(--black);
      border-color: rgb({$secondary-color});
  }
  
  .anom-lite-bar-container.c-esoteric.s-{$secondary-class} .diamond .top-mask.layer-2 {
      background-color: rgba(var(--black-monochrome), 0.15);
  }
  
  .anom-lite-bar-container.c-neutralised .diamond .center-icon,
  .anom-lite-bar-container.c-neutralized .diamond .center-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/neutralized-icon.svg");
      background-color: rgba(var(--black-monochrome), 0.15);
  }
  
  .anom-lite-bar-container.c-explained .diamond .center-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/explained-icon.svg");
      background-color: var(--0-color);
  }
  
  .anom-lite-bar-container.c-pending .diamond .center-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/pending-icon.svg");
      background-color: var(--black);
  }
  
  .anom-lite-bar-container.d-dark .disruption-class-icon .icon,
  .anom-lite-bar-container.d-dark .diamond .left-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/dark-icon.svg");
      background-color: var(--1-color);
  }
  
  .anom-lite-bar-container.d-dark .bottom-left-bottom-left-bar,
  .anom-lite-bar-container.d-dark .diamond .left-mask.layer-2 {
      background-color: rgba(var(--one-color), 0.15);
      border-color: var(--1-color);
  }
  
  .anom-lite-bar-container.d-dark .disruption-class-icon::before {
      content: "1";
  }
  
  .anom-lite-bar-container.d-vlam .disruption-class-icon .icon,
  .anom-lite-bar-container.d-vlam .diamond .left-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/vlam-icon.svg");
      background-color: var(--2-color);
  }
  
  .anom-lite-bar-container.d-vlam .bottom-left-bottom-left-bar,
  .anom-lite-bar-container.d-vlam .diamond .left-mask.layer-2 {
      background-color: rgba(var(--two-color), 0.15);
      border-color: var(--2-color);
  }
  
  .anom-lite-bar-container.d-vlam .disruption-class-icon::before {
      content: "2";
  }
  
  .anom-lite-bar-container.d-keneq .disruption-class-icon .icon,
  .anom-lite-bar-container.d-keneq .diamond .left-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/keneq-icon.svg");
      background-color: var(--3-color);
  }
  
  .anom-lite-bar-container.d-keneq .bottom-left-bottom-left-bar,
  .anom-lite-bar-container.d-keneq .diamond .left-mask.layer-2 {
      background-color: rgba(var(--three-color), 0.15);
      border-color: var(--3-color);
  }
  
  .anom-lite-bar-container.d-keneq .disruption-class-icon::before {
      content: "3";
  }
  
  .anom-lite-bar-container.d-ekhi .disruption-class-icon .icon,
  .anom-lite-bar-container.d-ekhi .diamond .left-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/ekhi-icon.svg");
      background-color: var(--4-color);
  }
  
  .anom-lite-bar-container.d-ekhi .bottom-left-bottom-left-bar,
  .anom-lite-bar-container.d-ekhi .diamond .left-mask.layer-2 {
      background-color: rgba(var(--four-color), 0.15);
      border-color: var(--4-color);
  }
  
  .anom-lite-bar-container.d-ekhi .disruption-class-icon::before {
      content: "4";
  }
  
  .anom-lite-bar-container.d-amida .disruption-class-icon .icon,
  .anom-lite-bar-container.d-amida .diamond .left-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/amida-icon.svg");
      background-color: var(--5-color);
  }
  
  .anom-lite-bar-container.d-amida .bottom-left-bottom-left-bar,
  .anom-lite-bar-container.d-amida .diamond .left-mask.layer-2 {
      background-color: rgba(var(--five-color), 0.15);
      border-color: var(--5-color);
  }
  
  .anom-lite-bar-container.d-amida .disruption-class-icon::before {
      content: "5";
  }
  
  .anom-lite-bar-container.r-notice .risk-class-icon .icon,
  .anom-lite-bar-container.r-notice .diamond .right-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/notice-icon.svg");
      background-color: var(--1-color);
  }
  
  .anom-lite-bar-container.r-notice .bottom-left-bottom-right-bar,
  .anom-lite-bar-container.r-notice .diamond .right-mask.layer-2 {
      background-color: rgba(var(--one-color), 0.15);
      border-color: var(--1-color);
  }
  
  .anom-lite-bar-container.r-notice .risk-class-icon::before {
      content: "1";
  }
  
  .anom-lite-bar-container.r-caution .risk-class-icon .icon,
  .anom-lite-bar-container.r-caution .diamond .right-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/caution-icon.svg");
      background-color: var(--2-color);
  }
  
  .anom-lite-bar-container.r-caution .bottom-left-bottom-right-bar,
  .anom-lite-bar-container.r-caution .diamond .right-mask.layer-2 {
      background-color: rgba(var(--two-color), 0.15);
      border-color: var(--2-color);
  }
  
  .anom-lite-bar-container.r-caution .risk-class-icon::before {
      content: "2";
  }
  
  .anom-lite-bar-container.r-warning .risk-class-icon .icon,
  .anom-lite-bar-container.r-warning .diamond .right-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/warning-icon.svg");
      background-color: var(--3-color);
  }
  
  .anom-lite-bar-container.r-warning .bottom-left-bottom-right-bar,
  .anom-lite-bar-container.r-warning .diamond .right-mask.layer-2 {
      background-color: rgba(var(--three-color), 0.15);
      border-color: var(--3-color);
  }
  
  .anom-lite-bar-container.r-warning .risk-class-icon::before {
      content: "3";
  }
  
  .anom-lite-bar-container.r-danger .risk-class-icon .icon,
  .anom-lite-bar-container.r-danger .diamond .right-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/danger-icon.svg");
      background-color: var(--4-color);
  }
  
  .anom-lite-bar-container.r-danger .bottom-left-bottom-right-bar,
  .anom-lite-bar-container.r-danger .diamond .right-mask.layer-2 {
      background-color: rgba(var(--four-color), 0.15);
      border-color: var(--4-color);
  }
  
  .anom-lite-bar-container.r-danger .risk-class-icon::before {
      content: "4";
  }
  
  .anom-lite-bar-container.r-critical .risk-class-icon .icon,
  .anom-lite-bar-container.r-critical .diamond .right-icon {
      background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/critical-icon.svg");
      background-color: var(--5-color);
  }
  
  .anom-lite-bar-container.r-critical .bottom-left-bottom-right-bar,
  .anom-lite-bar-container.r-critical .diamond .right-mask.layer-2 {
      background-color: rgba(var(--five-color), 0.15);
      border-color: var(--5-color);
  }
  
  .anom-lite-bar-container.r-critical .risk-class-icon::before {
      content: "5";
  }
  
  .anom-lite-bar-container .clearance-text .cl-sp,
  .anom-lite-bar-container .clearance-text .cl-1,
  .anom-lite-bar-container .clearance-text .cl-2,
  .anom-lite-bar-container .clearance-text .cl-3,
  .anom-lite-bar-container .clearance-text .cl-4,
  .anom-lite-bar-container .clearance-text .cl-5,
  .anom-lite-bar-container .clearance-text .cl-6 {
      display: none;
  }
  
  .anom-lite-bar-container .clearance-text.sp .cl-sp,
  .anom-lite-bar-container.cl-1 .clearance-text .cl-1,
  .anom-lite-bar-container.cl-2 .clearance-text .cl-2,
  .anom-lite-bar-container.cl-3 .clearance-text .cl-3,
  .anom-lite-bar-container.cl-4 .clearance-text .cl-4,
  .anom-lite-bar-container.cl-5 .clearance-text .cl-5,
  .anom-lite-bar-container.cl-6 .clearance-text .cl-6 {
      display: inline;
  }
  
  .anom-lite-bar-container .clearance-text.sp .cl-1,
  .anom-lite-bar-container .clearance-text.sp .cl-2,
  .anom-lite-bar-container .clearance-text.sp .cl-3,
  .anom-lite-bar-container .clearance-text.sp .cl-4,
  .anom-lite-bar-container .clearance-text.sp .cl-5,
  .anom-lite-bar-container .clearance-text.sp .cl-6 {
      display: none;
  }

Inline Styles

• (none)

Includes

• (none)

CSS Classes

• anom-lite-bar-container

• cl-{$clearance}

• e-{$icon-style}

• c-{$container-class}

• s-{$secondary-class}

• d-{$disruption-class}

• r-{$risk-class}

• top-bar

• top-left-bar

• item-number-text

• item-number-content

• top-center-bar

• clearance-{$clearance}

• top-right-bar

• clearance-content

• clearance-text

• {$cl-style}

• cl-sp

• cl-1

• cl-2

• cl-3

• cl-4

• cl-5

• cl-6

• bottom-bar

• bottom-left-bar

• bottom-left-top-bar

• container-class-textarea

• container-class-text

• container-class-content

• secondary-class-textarea

• secondary-class-text

• secondary-class-content

• container-class-icon

• icon

• secondary-icon

• bottom-left-bottom-bar

• bottom-left-bottom-left-bar

• disruption-class-textarea

• disruption-class-text

• disruption-class-content

• disruption-class-icon

• icon

• bottom-left-bottom-right-bar

• risk-class-textarea

• risk-class-text

• risk-class-content

• risk-class-icon

• icon

• diamond

• diamond-mask

• top-mask

• left-mask

• right-mask

• bottom-mask

• top-mask

• layer-2

• left-mask

• layer-2

• right-mask

• layer-2

• bottom-mask

• layer-2

• top-icon

• left-icon

• right-icon

• bottom-icon

• center-icon

Page Source

[[module CSS]]
:root {
    --5-color: rgb(var(--five-color));
    --4-color: rgb(var(--four-color));
    --3-color: rgb(var(--three-color));
    --2-color: rgb(var(--two-color));
    --1-color: rgb(var(--one-color));
    --0-color: rgb(var(--white-monochrome));
    --black: rgb(var(--black-monochrome));
    --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;
    --white-monochrome: 255, 255, 255;
    --black-monochrome: 0, 0, 0;
}

.anom-lite-bar-container {
}

.anom-lite-bar-container,

.anom-lite-bar-container p {
    margin: 0;
    line-height: 1;
}

.anom-lite-bar-container .bottom-bar {
    display: flex;
}

.anom-lite-bar-container .bottom-left-bar {
    flex-grow: 1;
}

/* ITEM# & CLEARANCE */

.anom-lite-bar-container .top-bar {
    display: flex;
    align-items: center;
    border-bottom: solid 3px var(--black);
    margin-bottom: 3px;
    padding: 3px;
}

.anom-lite-bar-container .top-center-bar {
    flex-grow: 1;
}

.anom-lite-bar-container .item-number-text,
.anom-lite-bar-container .clearance-text {
    font-size: 0.75rem;
}

.anom-lite-bar-container .item-number-content,
.anom-lite-bar-container .clearance-content {
    font-size: 0.96rem;
}

@media (min-width: 768px) {
.anom-lite-bar-container .item-number-text,
.anom-lite-bar-container .clearance-text {
    font-size: 1.2rem;
}

.anom-lite-bar-container .item-number-content,
.anom-lite-bar-container .clearance-content {
    font-size: 1.75rem;
}
}

.anom-lite-bar-container .item-number-text,
.anom-lite-bar-container .clearance-content {
    font-weight: bold;
}

.anom-lite-bar-container .item-number-content,
.anom-lite-bar-container .clearance-text {
    font-family: var(--title-font);
    text-transform: uppercase;
}

.anom-lite-bar-container .top-right-bar {
    text-align: right;
}

.anom-lite-bar-container .top-center-bar {
    margin-left: 3px;
    margin-right: 3px;
}

.anom-lite-bar-container .clearance-{$clearance} hr {
    margin: 0;
    margin-bottom: 2px;
    height: 3px;
    background-color: var(--{$clearance}-color);
    background-image: none;
    border: none;
}

.anom-lite-bar-container .clearance-1 hr:nth-child(2),
.anom-lite-bar-container .clearance-1 hr:nth-child(3),
.anom-lite-bar-container .clearance-1 hr:nth-child(4),
.anom-lite-bar-container .clearance-1 hr:nth-child(5),
.anom-lite-bar-container .clearance-1 hr:nth-child(6),
.anom-lite-bar-container .clearance-2 hr:nth-child(3),
.anom-lite-bar-container .clearance-2 hr:nth-child(4),
.anom-lite-bar-container .clearance-2 hr:nth-child(5),
.anom-lite-bar-container .clearance-2 hr:nth-child(6),
.anom-lite-bar-container .clearance-3 hr:nth-child(4),
.anom-lite-bar-container .clearance-3 hr:nth-child(5),
.anom-lite-bar-container .clearance-3 hr:nth-child(6),
.anom-lite-bar-container .clearance-4 hr:nth-child(5),
.anom-lite-bar-container .clearance-4 hr:nth-child(6),
.anom-lite-bar-container .clearance-5 hr:nth-child(6) {
    display: none;
}

.anom-lite-bar-container .clearance-1 hr:nth-child(1),
.anom-lite-bar-container .clearance-2 hr:nth-child(2),
.anom-lite-bar-container .clearance-3 hr:nth-child(3),
.anom-lite-bar-container .clearance-4 hr:nth-child(4),
.anom-lite-bar-container .clearance-5 hr:nth-child(5),
.anom-lite-bar-container .clearance-6 hr:nth-child(6) {
    margin-bottom: 0;
}

/* CLASSSSSS */

.anom-lite-bar-container .bottom-left-bar {
    width: calc(100% - 6rem - 16px);
    border-right: solid 3px var(--black);
    margin-right: 3px;
    margin-left: 3px;
    padding-right: 3px;
}

.anom-lite-bar-container .bottom-left-top-bar {
    border-left: solid 3px var(--black);
    background-color: rgba(var(--black-monochrome), 0.15);
}

.anom-lite-bar-container .bottom-left-bottom-left-bar,
.anom-lite-bar-container .bottom-left-bottom-right-bar {
    border-left: solid 3px var(--black);
    background-color: rgba(var(--black-monochrome), 0.15);
}

.anom-lite-bar-container .bottom-left-top-bar,
.anom-lite-bar-container .bottom-left-bottom-left-bar,
.anom-lite-bar-container .bottom-left-bottom-right-bar {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-left: 4.5px;
}

.anom-lite-bar-container .container-class-textarea,
.anom-lite-bar-container .disruption-class-textarea,
.anom-lite-bar-container .risk-class-textarea {
    flex-grow: 1;
}

.anom-lite-bar-container .secondary-class-textarea {
    display: none;
}

.anom-lite-bar-container.c-esoteric .secondary-class-textarea {
    display: block;
}

.anom-lite-bar-container .container-class-text,
.anom-lite-bar-container .disruption-class-text,
.anom-lite-bar-container .risk-class-text,
.anom-lite-bar-container .secondary-class-text {
    font-size: 0.625rem;
    margin-bottom: 1.5px;
}

.anom-lite-bar-container .container-class-content,
.anom-lite-bar-container .disruption-class-content,
.anom-lite-bar-container .risk-class-content,
.anom-lite-bar-container .secondary-class-content {
    font-size: 0.8rem;
    font-weight: bold;
    font-family: var(--title-font);
    text-transform: uppercase;
}

.anom-lite-bar-container .container-class-content,
.anom-lite-bar-container .secondary-class-content {
    font-size: 1.2rem;
    margin-top: -2px;
}

.anom-lite-bar-container.c-esoteric .container-class-content {
    font-size: 0.8rem;
    margin-top: 0;
}

.anom-lite-bar-container .bottom-left-top-bar {
    padding-right: 0.5rem;
}

.anom-lite-bar-container .container-class-icon {
    position: relative;
}

.anom-lite-bar-container .container-class-icon .icon {
    margin: 0;
    width: calc(3rem - 6px);
    height: calc(3rem - 6px);
    border: solid 3px var(--black);
    border-radius: 50%;
    background-color: var(--0-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 2;
}

.anom-lite-bar-container.c-esoteric .container-class-icon .icon {
    width: calc(6rem - 12px);
    border-radius: 1.5rem;
    background-position: left center;
}

.anom-lite-bar-container.c-esoteric.s-{$secondary-class} .container-class-icon .secondary-icon {
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(3rem - 6px);
    height: calc(3rem - 6px);
    border: solid 3px var(--black);
    border-radius: 1.5rem;
    background-image: url("{$secondary-icon}");
    background-color: var(--0-color);
    background-color: rgb({$secondary-color});
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

.anom-lite-bar-container .disruption-class-icon .icon,
.anom-lite-bar-container .risk-class-icon .icon {
    margin: 0;
    position: relative;
    width: calc(2rem - 6px);
    height: calc(2rem - 6px);
    border: solid 3px var(--black);
    border-radius: 50%;
    background-color: var(--0-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 2;
}

.anom-lite-bar-container .disruption-class-icon,
.anom-lite-bar-container .risk-class-icon {
    position: relative;
    z-index: 3;
}

.anom-lite-bar-container .disruption-class-icon::before,
.anom-lite-bar-container .risk-class-icon::before {
    content: "";
    color: var(--0-color);
    padding-top: 0.5rem;
    font-size: 0.8rem;
    font-family: var(--title-font);
    position: absolute;
    right: 0;
    top: 0;
    width: 2.5rem;
    height: calc(1.5rem - 6px);
    border: solid 3px var(--black);
    border-radius: 1rem;
    background-color: var(--black);
    z-index: 0;
}

@media (max-width: 479px) {
.anom-lite-bar-container .bottom-left-top-bar {
    height: calc(4rem - 3px);
    width: calc(100% - 16px);
    margin-bottom: 3px;
}

.anom-lite-bar-container .bottom-left-bottom-bar {
    display: flex;
}

.anom-lite-bar-container .bottom-left-bottom-left-bar,
.anom-lite-bar-container .bottom-left-bottom-right-bar {
    height: 2rem;
    width: calc(50% - 4.5px);
}

.anom-lite-bar-container .bottom-left-bottom-left-bar {
    margin-right: 3px;
}
}

@media (min-width: 480px) and (max-width: 767px) {
.anom-lite-bar-container .bottom-left-bar {
    display: flex;
}

.anom-lite-bar-container .bottom-left-top-bar {
    height: 6rem;
    width: calc(50% - 1.5px);
    margin-right: 3px;
}

.anom-lite-bar-container .bottom-left-bottom-bar {
    width: calc(50% - 1.5px);
}

.anom-lite-bar-container .bottom-left-bottom-left-bar,
.anom-lite-bar-container .bottom-left-bottom-right-bar {
    height: calc(3rem - 1.5px);
}

.anom-lite-bar-container .bottom-left-bottom-left-bar {
    margin-bottom: 3px;
}

.anom-lite-bar-container .disruption-class-textarea,
.anom-lite-bar-container .risk-class-textarea {
    display: flex;
}
}

@media (min-width: 768px) {
.anom-lite-bar-container .bottom-left-bar {
    display: flex;
}

.anom-lite-bar-container .bottom-left-top-bar {
    height: 6rem;
    width: calc(60% - 1.5px);
    margin-right: 3px;
}

.anom-lite-bar-container .bottom-left-bottom-bar {
    width: calc(40% - 1.5px);
}

.anom-lite-bar-container .bottom-left-bottom-left-bar,
.anom-lite-bar-container .bottom-left-bottom-right-bar {
    height: calc(3rem - 1.5px);
}

.anom-lite-bar-container .bottom-left-bottom-left-bar {
    margin-bottom: 3px;
}

.anom-lite-bar-container .disruption-class-textarea,
.anom-lite-bar-container .risk-class-textarea {
    display: flex;
}

.anom-lite-bar-container .disruption-class-content,
.anom-lite-bar-container .risk-class-content {
    font-size: 1rem;
    margin-top: -2px;
}
}

/* ACS DIAMOND */
.anom-lite-bar-container .diamond {
    flex: 0 0 6rem;
    width: 6rem;
    height: 6rem;
    margin: 0;
    margin-right: 3px;
    position: relative;
    background-color: transparent;
}

.anom-lite-bar-container .diamond .diamond-mask {
    positive: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--black);
    clip-path: polygon(0 0, 6% 0, 4% 2%, 18% 16%, 34% 0, 66% 0, 82% 16%, 96% 2%, 94% 0, 100% 0, 100% 6%, 98% 4%, 84% 18%, 100% 34%, 100% 66%, 84% 82%, 98% 96%, 100% 94%, 100% 100%, 94% 100%, 96% 98%, 82% 84%, 66% 100%, 34% 100%, 18% 84%, 4% 98%, 6% 100%, 0 100%, 0 94%, 2% 96%, 16% 82%, 0 66%, 0 34%, 16% 18%, 2% 4%, 0 6%);
    -webkit-clip-path: polygon(0 0, 6% 0, 4% 2%, 18% 16%, 34% 0, 66% 0, 82% 16%, 96% 2%, 94% 0, 100% 0, 100% 6%, 98% 4%, 84% 18%, 100% 34%, 100% 66%, 84% 82%, 98% 96%, 100% 94%, 100% 100%, 94% 100%, 96% 98%, 82% 84%, 66% 100%, 34% 100%, 18% 84%, 4% 98%, 6% 100%, 0 100%, 0 94%, 2% 96%, 16% 82%, 0 66%, 0 34%, 16% 18%, 2% 4%, 0 6%);
    z-index: 1;
}

.anom-lite-bar-container .diamond .top-mask,
.anom-lite-bar-container .diamond .left-mask,
.anom-lite-bar-container .diamond .right-mask,
.anom-lite-bar-container .diamond .bottom-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
}

.anom-lite-bar-container .diamond .top-mask {
    background-color: var(--0-color);
    clip-path: polygon(20% 18%, 35% 3%, 65% 3%, 80% 18%, 50% 48%);
    -webkit-clip-path: polygon(20% 18%, 35% 3%, 65% 3%, 80% 18%, 50% 48%);
}

.anom-lite-bar-container .diamond .left-mask {
    background-color: var(--0-color);
    clip-path: polygon(18% 20%, 3% 35%, 3% 65%, 18% 80%, 48% 50%);
    -webkit-clip-path: polygon(18% 20%, 3% 35%, 3% 65%, 18% 80%, 48% 50%);
}

.anom-lite-bar-container .diamond .right-mask {
    background-color: var(--0-color);
    clip-path: polygon(82% 20%, 97% 35%, 97% 65%, 82% 80%, 52% 50%);
    -webkit-polygon(82% 20%, 97% 35%, 97% 65%, 82% 80%, 52% 50%);
}

.anom-lite-bar-container .diamond .bottom-mask {
    background-color: var(--0-color);
    clip-path: polygon(20% 82%, 35% 97%, 65% 97%, 80% 82%, 50% 52%);
    -webkit-clip-path: polygon(20% 82%, 35% 97%, 65% 97%, 80% 82%, 50% 52%);
}

.anom-lite-bar-container .diamond .top-mask.layer-2,
.anom-lite-bar-container .diamond .left-mask.layer-2,
.anom-lite-bar-container .diamond .right-mask.layer-2,
.anom-lite-bar-container .diamond .bottom-mask.layer-2 {
    background: none;
}

.anom-lite-bar-container .diamond .top-icon,
.anom-lite-bar-container .diamond .left-icon,
.anom-lite-bar-container .diamond .right-icon,
.anom-lite-bar-container .diamond .bottom-icon {
    display: block;
    position: absolute;
    margin: 0;
    width: calc(2rem - 6px);
    height: calc(2rem - 6px);
    border: solid 3px var(--black);
    border-radius: 50%;
    background-color: var(--0-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

.anom-lite-bar-container .diamond .center-icon {
    display: block;
    position: absolute;
    margin: 0;
    top: 1rem;
    left: 1rem;
    width: calc(4rem - 6px);
    height: calc(4rem - 6px);
    border: solid 3px var(--black);
    border-radius: 50%;
    background-color: var(--0-color);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

.anom-lite-bar-container .diamond .top-icon {
    top: 4px;
    left: 2rem;
    background: none;
    filter: none;
}

.anom-lite-bar-container .diamond .left-icon {
    top: 2rem;
    left: 4px;
    background: none;
    filter: none;
}

.anom-lite-bar-container .diamond .right-icon {
    bottom: 2rem;
    right: 4px;
    background: none;
    filter: none;
}

.anom-lite-bar-container .diamond .bottom-icon {
    bottom: 4px;
    right: 2rem;
    background: none;
    filter: none;
}

.anom-lite-bar-container .diamond .bottom-icon,
.anom-lite-bar-container .diamond .center-icon {
    display: none;
}

.anom-lite-bar-container.e-centered .diamond .center-icon,
.anom-lite-bar-container.c-neutralised .diamond .center-icon,
.anom-lite-bar-container.c-neutralized .diamond .center-icon,
.anom-lite-bar-container.c-explained .diamond .center-icon,
.anom-lite-bar-container.c-pending .diamond .center-icon {
    display: block;
}

.anom-lite-bar-container.e-centered .diamond .top-icon,
.anom-lite-bar-container.e-centered .diamond .left-icon,
.anom-lite-bar-container.e-centered .diamond .right-icon,
.anom-lite-bar-container.e-centered .diamond .bottom-icon,
.anom-lite-bar-container.c-neutralised .diamond .top-icon,
.anom-lite-bar-container.c-neutralised .diamond .left-icon,
.anom-lite-bar-container.c-neutralised .diamond .right-icon,
.anom-lite-bar-container.c-neutralised .diamond .bottom-icon,
.anom-lite-bar-container.c-neutralized .diamond .top-icon,
.anom-lite-bar-container.c-neutralized .diamond .left-icon,
.anom-lite-bar-container.c-neutralized .diamond .right-icon,
.anom-lite-bar-container.c-neutralized .diamond .bottom-icon,
.anom-lite-bar-container.c-explained .diamond .top-icon,
.anom-lite-bar-container.c-explained .diamond .left-icon,
.anom-lite-bar-container.c-explained .diamond .right-icon,
.anom-lite-bar-container.c-explained .diamond .bottom-icon,
.anom-lite-bar-container.c-pending .diamond .top-icon,
.anom-lite-bar-container.c-pending .diamond .left-icon,
.anom-lite-bar-container.c-pending .diamond .right-icon,
.anom-lite-bar-container.c-pending .diamond .bottom-icon,
.anom-lite-bar-container.e-centered .container-class-icon,
.anom-lite-bar-container.c-neutralised .container-class-icon,
.anom-lite-bar-container.c-neutralized .container-class-icon,
.anom-lite-bar-container.c-explained .container-class-icon,
.anom-lite-bar-container.c-pending .container-class-icon,
.anom-lite-bar-container.c-neutralised .bottom-left-bottom-bar,
.anom-lite-bar-container.c-neutralized .bottom-left-bottom-bar,
.anom-lite-bar-container.c-explained .bottom-left-bottom-bar,
.anom-lite-bar-container.c-pending .bottom-left-bottom-bar {
    display: none;
}

.anom-lite-bar-container.c-neutralised .bottom-left-top-bar,
.anom-lite-bar-container.c-neutralized .bottom-left-top-bar,
.anom-lite-bar-container.c-explained .bottom-left-top-bar,
.anom-lite-bar-container.c-pending .bottom-left-top-bar {
    width: calc(100% - 16px);
    height: 100%;
}

.anom-lite-bar-container.c-esoteric.s-{$secondary-class} .diamond .bottom-icon {
    display: block;
    background-image: url("{$secondary-icon}");
    background-color: rgb({$secondary-color});
}

.anom-lite-bar-container.c-esoteric.s-{$secondary-class} .diamond .bottom-mask.layer-2 {
    display: block;
    background-color: var(--0-color);
    background-color: rgba({$secondary-color}, 0.15);
}

/* CHANGES */
.anom-lite-bar-container.c-safe .container-class-icon .icon,
.anom-lite-bar-container.c-safe .diamond .center-icon,
.anom-lite-bar-container.c-safe .diamond .top-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/safe-icon.svg");
    background-color: var(--1-color);
}

.anom-lite-bar-container.c-safe .bottom-left-top-bar,
.anom-lite-bar-container.c-safe .diamond .top-mask.layer-2 {
    background-color: rgba(var(--one-color), 0.15);
    border-color: var(--1-color);
}

.anom-lite-bar-container.c-euclid .container-class-icon .icon,
.anom-lite-bar-container.c-euclid .diamond .center-icon,
.anom-lite-bar-container.c-euclid .diamond .top-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/euclid-icon.svg");
    background-color: var(--3-color);
}

.anom-lite-bar-container.c-euclid .bottom-left-top-bar,
.anom-lite-bar-container.c-euclid .diamond .top-mask.layer-2 {
    background-color: rgba(var(--three-color), 0.15);
    border-color: var(--3-color);
}

.anom-lite-bar-container.c-keter .container-class-icon .icon,
.anom-lite-bar-container.c-keter .diamond .center-icon,
.anom-lite-bar-container.c-keter .diamond .top-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/keter-icon.svg");
    background-color: var(--5-color);
}

.anom-lite-bar-container.c-keter .bottom-left-top-bar,
.anom-lite-bar-container.c-keter .diamond .top-mask.layer-2 {
    background-color: rgba(var(--five-color), 0.15);
    border-color: var(--5-color);
}

.anom-lite-bar-container.c-thaumiel .container-class-icon .icon,
.anom-lite-bar-container.c-thaumiel .diamond .center-icon,
.anom-lite-bar-container.c-thaumiel .diamond .top-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/thaumiel-icon.svg");
    background-color: var(--0-color);
}

.anom-lite-bar-container.c-thaumiel .bottom-left-top-bar,
.anom-lite-bar-container.c-thaumiel .diamond .top-mask.layer-2 {
    background-color: rgba(var(--black-monochrome), 0.15);
    border-color: var(--black);
}

.anom-lite-bar-container.c-esoteric.s-{$secondary-class} .container-class-icon .icon,
.anom-lite-bar-container.c-esoteric.s-{$secondary-class} .diamond .center-icon,
.anom-lite-bar-container.c-esoteric.s-{$secondary-class} .diamond .top-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/esoteric-icon.svg");
    background-color: var(--0-color);
    border-color: var(--0-color);
    filter: invert(100%);
}

.anom-lite-bar-container.c-esoteric.s-{$secondary-class} .bottom-left-top-bar {
    background-color: rgba(var(--black-monochrome), 0.15);
    background-color: rgba({$secondary-color}, 0.15);
    border-color: var(--black);
    border-color: rgb({$secondary-color});
}

.anom-lite-bar-container.c-esoteric.s-{$secondary-class} .diamond .top-mask.layer-2 {
    background-color: rgba(var(--black-monochrome), 0.15);
}

.anom-lite-bar-container.c-neutralised .diamond .center-icon,
.anom-lite-bar-container.c-neutralized .diamond .center-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/neutralized-icon.svg");
    background-color: rgba(var(--black-monochrome), 0.15);
}

.anom-lite-bar-container.c-explained .diamond .center-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/explained-icon.svg");
    background-color: var(--0-color);
}

.anom-lite-bar-container.c-pending .diamond .center-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/pending-icon.svg");
    background-color: var(--black);
}

.anom-lite-bar-container.d-dark .disruption-class-icon .icon,
.anom-lite-bar-container.d-dark .diamond .left-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/dark-icon.svg");
    background-color: var(--1-color);
}

.anom-lite-bar-container.d-dark .bottom-left-bottom-left-bar,
.anom-lite-bar-container.d-dark .diamond .left-mask.layer-2 {
    background-color: rgba(var(--one-color), 0.15);
    border-color: var(--1-color);
}

.anom-lite-bar-container.d-dark .disruption-class-icon::before {
    content: "1";
}

.anom-lite-bar-container.d-vlam .disruption-class-icon .icon,
.anom-lite-bar-container.d-vlam .diamond .left-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/vlam-icon.svg");
    background-color: var(--2-color);
}

.anom-lite-bar-container.d-vlam .bottom-left-bottom-left-bar,
.anom-lite-bar-container.d-vlam .diamond .left-mask.layer-2 {
    background-color: rgba(var(--two-color), 0.15);
    border-color: var(--2-color);
}

.anom-lite-bar-container.d-vlam .disruption-class-icon::before {
    content: "2";
}

.anom-lite-bar-container.d-keneq .disruption-class-icon .icon,
.anom-lite-bar-container.d-keneq .diamond .left-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/keneq-icon.svg");
    background-color: var(--3-color);
}

.anom-lite-bar-container.d-keneq .bottom-left-bottom-left-bar,
.anom-lite-bar-container.d-keneq .diamond .left-mask.layer-2 {
    background-color: rgba(var(--three-color), 0.15);
    border-color: var(--3-color);
}

.anom-lite-bar-container.d-keneq .disruption-class-icon::before {
    content: "3";
}

.anom-lite-bar-container.d-ekhi .disruption-class-icon .icon,
.anom-lite-bar-container.d-ekhi .diamond .left-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/ekhi-icon.svg");
    background-color: var(--4-color);
}

.anom-lite-bar-container.d-ekhi .bottom-left-bottom-left-bar,
.anom-lite-bar-container.d-ekhi .diamond .left-mask.layer-2 {
    background-color: rgba(var(--four-color), 0.15);
    border-color: var(--4-color);
}

.anom-lite-bar-container.d-ekhi .disruption-class-icon::before {
    content: "4";
}

.anom-lite-bar-container.d-amida .disruption-class-icon .icon,
.anom-lite-bar-container.d-amida .diamond .left-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/amida-icon.svg");
    background-color: var(--5-color);
}

.anom-lite-bar-container.d-amida .bottom-left-bottom-left-bar,
.anom-lite-bar-container.d-amida .diamond .left-mask.layer-2 {
    background-color: rgba(var(--five-color), 0.15);
    border-color: var(--5-color);
}

.anom-lite-bar-container.d-amida .disruption-class-icon::before {
    content: "5";
}

.anom-lite-bar-container.r-notice .risk-class-icon .icon,
.anom-lite-bar-container.r-notice .diamond .right-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/notice-icon.svg");
    background-color: var(--1-color);
}

.anom-lite-bar-container.r-notice .bottom-left-bottom-right-bar,
.anom-lite-bar-container.r-notice .diamond .right-mask.layer-2 {
    background-color: rgba(var(--one-color), 0.15);
    border-color: var(--1-color);
}

.anom-lite-bar-container.r-notice .risk-class-icon::before {
    content: "1";
}

.anom-lite-bar-container.r-caution .risk-class-icon .icon,
.anom-lite-bar-container.r-caution .diamond .right-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/caution-icon.svg");
    background-color: var(--2-color);
}

.anom-lite-bar-container.r-caution .bottom-left-bottom-right-bar,
.anom-lite-bar-container.r-caution .diamond .right-mask.layer-2 {
    background-color: rgba(var(--two-color), 0.15);
    border-color: var(--2-color);
}

.anom-lite-bar-container.r-caution .risk-class-icon::before {
    content: "2";
}

.anom-lite-bar-container.r-warning .risk-class-icon .icon,
.anom-lite-bar-container.r-warning .diamond .right-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/warning-icon.svg");
    background-color: var(--3-color);
}

.anom-lite-bar-container.r-warning .bottom-left-bottom-right-bar,
.anom-lite-bar-container.r-warning .diamond .right-mask.layer-2 {
    background-color: rgba(var(--three-color), 0.15);
    border-color: var(--3-color);
}

.anom-lite-bar-container.r-warning .risk-class-icon::before {
    content: "3";
}

.anom-lite-bar-container.r-danger .risk-class-icon .icon,
.anom-lite-bar-container.r-danger .diamond .right-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/danger-icon.svg");
    background-color: var(--4-color);
}

.anom-lite-bar-container.r-danger .bottom-left-bottom-right-bar,
.anom-lite-bar-container.r-danger .diamond .right-mask.layer-2 {
    background-color: rgba(var(--four-color), 0.15);
    border-color: var(--4-color);
}

.anom-lite-bar-container.r-danger .risk-class-icon::before {
    content: "4";
}

.anom-lite-bar-container.r-critical .risk-class-icon .icon,
.anom-lite-bar-container.r-critical .diamond .right-icon {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Aanomaly-class-bar/critical-icon.svg");
    background-color: var(--5-color);
}

.anom-lite-bar-container.r-critical .bottom-left-bottom-right-bar,
.anom-lite-bar-container.r-critical .diamond .right-mask.layer-2 {
    background-color: rgba(var(--five-color), 0.15);
    border-color: var(--5-color);
}

.anom-lite-bar-container.r-critical .risk-class-icon::before {
    content: "5";
}

.anom-lite-bar-container .clearance-text .cl-sp,
.anom-lite-bar-container .clearance-text .cl-1,
.anom-lite-bar-container .clearance-text .cl-2,
.anom-lite-bar-container .clearance-text .cl-3,
.anom-lite-bar-container .clearance-text .cl-4,
.anom-lite-bar-container .clearance-text .cl-5,
.anom-lite-bar-container .clearance-text .cl-6 {
    display: none;
}

.anom-lite-bar-container .clearance-text.sp .cl-sp,
.anom-lite-bar-container.cl-1 .clearance-text .cl-1,
.anom-lite-bar-container.cl-2 .clearance-text .cl-2,
.anom-lite-bar-container.cl-3 .clearance-text .cl-3,
.anom-lite-bar-container.cl-4 .clearance-text .cl-4,
.anom-lite-bar-container.cl-5 .clearance-text .cl-5,
.anom-lite-bar-container.cl-6 .clearance-text .cl-6 {
    display: inline;
}

.anom-lite-bar-container .clearance-text.sp .cl-1,
.anom-lite-bar-container .clearance-text.sp .cl-2,
.anom-lite-bar-container .clearance-text.sp .cl-3,
.anom-lite-bar-container .clearance-text.sp .cl-4,
.anom-lite-bar-container .clearance-text.sp .cl-5,
.anom-lite-bar-container .clearance-text.sp .cl-6 {
    display: none;
}
[[/module]]

[[div_ class="anom-lite-bar-container cl-{$clearance} e-{$icon-style} c-{$container-class} s-{$secondary-class} d-{$disruption-class} r-{$risk-class}"]]

[[div_ class="top-bar"]]
  [[div_ class="top-left-bar"]]
    [[span class="item-number-text"]]ITEM #: [[/span]]
    [[span class="item-number-content"]]{$item-number}[[/span]]
  [[/div]]
  [[div_ class="top-center-bar clearance-{$clearance}"]]
----
----
----
----
----
----
  [[/div]]
  [[div_ class="top-right-bar"]]
    [[span class="clearance-content"]]LEVEL {$clearance}[[/span]]
    [[span class="clearance-text {$cl-style}"]][[span class="cl-sp"]]{$clearance-text}[[/span]][[span class="cl-1"]]Unrestricted[[/span]][[span class="cl-2"]]Restricted[[/span]][[span class="cl-3"]]Confidencial[[/span]][[span class="cl-4"]]Secret[[/span]][[span class="cl-5"]]Top Secret[[/span]][[span class="cl-6"]]Cosmic Top C
Secret[[/span]][[/span]]
  [[/div]]
[[/div]]

[[div_ class="bottom-bar"]]

  [[div_ class="bottom-left-bar"]]
    [[div_ class="bottom-left-top-bar"]]
      [[div_ class="container-class-textarea"]]
        [[div_ class="container-class-text"]]
          CONTAINMENT CLASS: 
        [[/div]]
        [[div_ class="container-class-content"]]
          {$container-class}
        [[/div]]
        [[div_ class="secondary-class-textarea"]]
          [[div_ class="secondary-class-text"]]
            SECONDARY CLASS: 
          [[/div]]
          [[div_ class="secondary-class-content"]]
            {$secondary-class}
          [[/div]]
        [[/div]]
      [[/div]]
      [[div_ class="container-class-icon"]]
        [[div_ class="icon"]]
        [[/div]]
        [[div_ class="secondary-icon"]]
        [[/div]]
      [[/div]]
    [[/div]]
    [[div_ class="bottom-left-bottom-bar"]]
      [[div_ class="bottom-left-bottom-left-bar"]]
        [[div_ class="disruption-class-textarea"]]
          [[div_ class="disruption-class-text"]]
            DISRUPTION CLASS: 
          [[/div]]
          [[div_ class="disruption-class-content"]]
            {$disruption-class}
          [[/div]]
        [[/div]]
        [[div_ class="disruption-class-icon"]]
          [[div_ class="icon"]]
          [[/div]]
        [[/div]]
      [[/div]]
      [[div_ class="bottom-left-bottom-right-bar"]]
        [[div_ class="risk-class-textarea"]]
          [[div_ class="risk-class-text"]]
            RISK CLASS: 
          [[/div]]
          [[div_ class="risk-class-content"]]
            {$risk-class}
          [[/div]]
        [[/div]]
        [[div_ class="risk-class-icon"]]
          [[div_ class="icon"]]
          [[/div]]
        [[/div]]
      [[/div]]
    [[/div]]
  [[/div]]

  [[div_ class="diamond"]]
    [[div_ class="diamond-mask"]]
    [[/div]]
    [[div_ class="top-mask"]]
    [[/div]]
    [[div_ class="left-mask"]]
    [[/div]]
    [[div_ class="right-mask"]]
    [[/div]]
    [[div_ class="bottom-mask"]]
    [[/div]]
    [[div_ class="top-mask layer-2"]]
    [[/div]]
    [[div_ class="left-mask layer-2"]]
    [[/div]]
    [[div_ class="right-mask layer-2"]]
    [[/div]]
    [[div_ class="bottom-mask layer-2"]]
    [[/div]]
    [[div_ class="top-icon"]]
    [[/div]]
    [[div_ class="left-icon"]]
    [[/div]]
    [[div_ class="right-icon"]]
    [[/div]]
    [[div_ class="bottom-icon"]]
    [[/div]]
    [[div_ class="center-icon"]]
    [[/div]]
  [[/div]]

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