Level :)

This page has been deleted, most likely because it does not belong on the snippets wiki.
View Source | Edit Page


Creator: MainfopMainfop

Description

This is level :)

Code

[[module CSS]]
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,300');

:root {
--sd-font:Poppins;
--sd-border:var(--gray-monochrome);
--sd-border-secondary:0,0,0;
--sd-border-deadzone:20,0,0;
--sd-symbol:var(--sd-border) !important;
--sd-symbol-secondary: 255,255,255;
--sd-bullets:var(--sd-border) !important;
--sd-text:var(--swatch-text-secondary-color);
--class-0:247,227,117;
--class-1:247,227,117;
--class-1:255,201,14;
--class-2:245,156,0;
--class-3:249,90,0;
--class-4:254,23,1;
--class-5:175,6,6;
--class-unknown:38,38,38;
--class-habitable:26,128,111;
--class-deadzone:44,13,12;
--class-pending:182,182,182;
--class-n-a:38,38,38;
--class-amended:185,135,212;
--class-omega:25,46,255;
}

.top-box {
   background: rgb(var(--class-1));
   width: 100%;
   height: 5.25rem;
   box-sizing: border-box;
   border-color: rgb(var(--sd-border)) !important;
   border: 0.65rem solid rgb(var(--sd-border));
   border-left: 0.3125rem solid rgb(var(--sd-border));
   border-right: 0.3125rem solid rgb(var(--sd-border));

   position: relative;
}

.top-box .gradient-box div {
   display: grid;
}

.top-box .top-text p{
   font: 2.14rem var(--sd-font);
   font-weight: bold;
   color: white;
   color: rgb(var(--sd-text));

   position: relative;
   margin: 0 0.08rem;
   line-height: 2.16rem;
}

.top-box .bottom-text p, .top-box .bottom-text:after{
   font: 1.5rem var(--sd-font);
   font-style: italic;
   font-weight: 500;
   color: white;
   color: rgb(var(--sd-text));

   position: relative;
   margin: 0 0.08rem;
   line-height: 2rem;
}

.top-box .gradient-box{
  background: linear-gradient(90deg, rgba(var(--sd-border),1) 0%, rgba(235,186,13,0) 36%);
  display: inline-block;
  height: 105%;
  width: 105%;
  position: relative;
  top: -1px;
}

.top-box:before {
  content: "";
  position: absolute;
  background: url("http://backrooms-wiki.wdfiles.com/local--files/component%3Alevel-class/tiles.png");
  mix-blend-mode: luminosity;
  opacity: 0.15;
  height: calc(100% + (0.65rem * 2));
  width: calc(100% + (0.3125rem * 2));
  top: -0.65rem;
  left: -0.3125rem;
}

/* the right diamond thingy */

.header-diamond {
   position: absolute;
   height: calc(284.5px / 1.13);
   width: calc(300.9px / 1.13);
   top: -29.5px;
   right: -13px;
   transition: opacity 0.5s;
   z-index: 4;
}

.header-diamond .bg {
   position: absolute;
   -webkit-mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 300.9 284.5' style='enable-background:new 0 0 300.9 284.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFC90E;%7D .st1%7Bfill:%23581A19;%7D%0A%3C/style%3E%3Cg%3E%3Cpolygon class='st1' points='73.4,32.6 0,105.4 13.6,105.4 86.4,32.6 '/%3E%3Cpolygon class='st1' points='26.5,105.4 40.1,105.4 112.9,32.6 99.3,32.6 '/%3E%3C/g%3E%3Cpolyline class='st1' points='287.3,105.4 214.5,32.6 227.5,32.6 287.3,91.9 '/%3E%3Cpolygon class='st1' points='274.4,105.4 260.8,105.4 188,32.6 201.6,32.6 '/%3E%3C/svg%3E");
   mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 300.9 284.5' style='enable-background:new 0 0 300.9 284.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFC90E;%7D .st1%7Bfill:%23581A19;%7D%0A%3C/style%3E%3Cg%3E%3Cpolygon class='st1' points='73.4,32.6 0,105.4 13.6,105.4 86.4,32.6 '/%3E%3Cpolygon class='st1' points='26.5,105.4 40.1,105.4 112.9,32.6 99.3,32.6 '/%3E%3C/g%3E%3Cpolyline class='st1' points='287.3,105.4 214.5,32.6 227.5,32.6 287.3,91.9 '/%3E%3Cpolygon class='st1' points='274.4,105.4 260.8,105.4 188,32.6 201.6,32.6 '/%3E%3C/svg%3E");
   background: rgb(var(--sd-border));
   height: 100%;
   width: 100%;
z-index: 2;
}

.header-diamond .diamondy {
   position: absolute;
   -webkit-mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-7.01 0 260.5 250.8' style='enable-background:new 0 0 250.5 250.8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFC90E;%7D .st1%7Bfill:%23581A19;%7D%0A%3C/style%3E%3Cpath class='st0' d='M247,133.9L133.7,247.2c-4.7,4.7-12.3,4.7-17,0L3.5,133.9c-4.7-4.7-4.7-12.3,0-17L116.8,3.6 c4.7-4.7,12.3-4.7,17,0l113.3,113.3C251.7,121.6,251.7,129.2,247,133.9z'/%3E%3C/svg%3E");
   mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-7.01 0 260.5 250.8' style='enable-background:new 0 0 250.5 250.8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFC90E;%7D .st1%7Bfill:%23581A19;%7D%0A%3C/style%3E%3Cpath class='st0' d='M247,133.9L133.7,247.2c-4.7,4.7-12.3,4.7-17,0L3.5,133.9c-4.7-4.7-4.7-12.3,0-17L116.8,3.6 c4.7-4.7,12.3-4.7,17,0l113.3,113.3C251.7,121.6,251.7,129.2,247,133.9z'/%3E%3C/svg%3E");
   height: 100%;
   width: 100%;
}

.header-diamond .diamond-color {
  background: rgb(var(--class-1));
}

.header-diamond .diamond-pattern {
  background: url("https://backrooms-wiki.wdfiles.com/local--files/component%3Alevel-class/tiles.png");
  mix-blend-mode: luminosity;
  opacity: 0.15;
  z-index: 3;
}

.header-diamond .diamond-image {
    position: absolute;
    -webkit-mask: url("https://i.imgur.com/DSS66uH.png") center/95% no-repeat;
    mask: url("https://i.imgur.com/DSS66uH.png") center/95% no-repeat;
    height: 100%;
    width: 100%;
    background: rgb(var(--sd-symbol));
    top: 3px;
    left: 3px;
  z-index: 4;
}

/* bottom stuff */

.bottom-box {
   margin: 1.5rem 0 3rem 0;
}

.bottom-box ul {
   margin-left: 2rem;
}

.bottom-box ul li {
  font: 1.5rem var(--sd-font);
  font-weight: bold;

  color: rgb(var(--sd-bullets));
  margin: 0.2rem 0 0.2rem 0.6rem;
  line-height: 1rem;

  list-style: none;
}

.bottom-box ul li:before {
    content: "";

    background: rgb(var(--sd-bullets));
    display: block;
    transform: rotate(45deg);

    position: relative;
    height: .5em;
    width: .5em;
    left: -1.1em;
    top: 0.55em;
}

/* mobile stuff */
@media only screen and (max-width: 440px) {
   .top-box .top-text p {
      font-size: 1.6rem;
   }
   .top-box .bottom-text p, .top-box .bottom-text:after {
      font-size: 1.4rem;
      line-height: 1rem;
   }
}
@media only screen and (max-width: 60rem) {
   .header-diamond {
      opacity: 0;
   }
}

/* ==== survival difficulty classes ==== */

div[class*=class] ul li span[class$="}"] {
    display: none !important;
}

.default {
   display: none;
   font-size:0 !important;
}

.default:after {
   font-size: 1.5rem;
}

div[class*=class] ul li span[class$="}"] + .default {
    display: flex;
}

/* class 0 to 5 */

.top-box.class-0, .diamond-color.class-0 { background: rgb(var(--class-0)); }
.top-box.class-0 .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/ZIkCKZe.png") center/80% no-repeat; mask: url("https://i.imgur.com/ZIkCKZe.png") center/80% no-repeat; left: -0.3px;}
.bottom-box.class-0 ul li:nth-child(1)>.default:after{ content: "Safe"; }
.bottom-box.class-0 ul li:nth-child(2)>.default:after{ content: "Secure"; }
.bottom-box.class-0 ul li:nth-child(3)>.default:after{ content: "Devoid of Entities"; }

.top-box.class-1, .diamond-color.class-1 { background: rgb(var(--class-1)); }
.top-box.class-1 .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/ycnoxKk.png") center/80% no-repeat; mask: url("https://i.imgur.com/ycnoxKk.png") center/80% no-repeat; left: -0.3px;}
.bottom-box.class-1 ul li:nth-child(1)>.default:after{ content: "Safe"; }
.bottom-box.class-1 ul li:nth-child(2)>.default:after{ content: "Secure"; }
.bottom-box.class-1 ul li:nth-child(3)>.default:after{ content: "Minimal Entity Count"; }

.top-box.class-2, .diamond-color.class-2 { background: rgb(var(--class-2)); }
.top-box.class-2 .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/SDaAj5i.png") center/80% no-repeat; mask: url("https://i.imgur.com/SDaAj5i.png") center/80% no-repeat; left: -0.3px;}
.bottom-box.class-2 ul li:nth-child(1)>.default:after{ content: "Unsafe"; }
.bottom-box.class-2 ul li:nth-child(2)>.default:after{ content: "Secure"; }
.bottom-box.class-2 ul li:nth-child(3)>.default:after{ content: "Low Entity Count"; }

.top-box.class-3, .diamond-color.class-3 { background: rgb(var(--class-3)); }
.top-box.class-3 .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/cN2Za4X.png") center/80% no-repeat; mask: url("https://i.imgur.com/cN2Za4X.png") center/80% no-repeat; left: -0.3px;}
.bottom-box.class-3 ul li:nth-child(1)>.default:after{ content: "Unsafe"; }
.bottom-box.class-3 ul li:nth-child(2)>.default:after{ content: "Unsecure"; }
.bottom-box.class-3 ul li:nth-child(3)>.default:after{ content: "Low Entity Count"; }

.top-box.class-4, .diamond-color.class-4 { background: rgb(var(--class-4)); }
.class-4 { --sd-symbol:var(--sd-symbol-secondary);}
.top-box.class-4 .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/z2tuGUo.png") center/80% no-repeat; mask: url("https://i.imgur.com/z2tuGUo.png") center/80% no-repeat; left: -0.3px;}
.bottom-box.class-4 ul li:nth-child(1)>.default:after{ content: "Unsafe"; }
.bottom-box.class-4 ul li:nth-child(2)>.default:after{ content: "Unsecure"; }
.bottom-box.class-4 ul li:nth-child(3)>.default:after{ content: "Medium Entity Count"; }

.top-box.class-5, .diamond-color.class-5 { background: rgb(var(--class-5)); }
.class-5 { --sd-symbol:var(--sd-symbol-secondary);}
.top-box.class-5 .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/4QcwgNt.png") center/80% no-repeat; mask: url("https://i.imgur.com/4QcwgNt.png") center/80% no-repeat; left: -0.3px;}
.bottom-box.class-5 ul li:nth-child(1)>.default:after{ content: "Unsafe"; }
.bottom-box.class-5 ul li:nth-child(2)>.default:after{ content: "Unsecure"; }
.bottom-box.class-5 ul li:nth-child(3)>.default:after{ content: "Entity Infestation"; }

/* class unknown */

.top-box.class-unknown, .diamond-color.class-unknown { background: rgb(var(--class-unknown)); }
.class-unknown { --sd-border:0,0,0; --sd-symbol:255,255,255;}
.top-box.class-unknown .bottom-text p { display: none; }
.top-box.class-unknown .bottom-text:after { content: "Class Undetermined"; }
.top-box.class-unknown:before, .top-box.class-unknown .header-diamond .diamond-pattern{ opacity: 0.5; }
.top-box.class-unknown .gradient-box { background: none; }
.top-box.class-unknown .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/RacLmIk.png") center/80% no-repeat; mask: url("https://i.imgur.com/RacLmIk.png") center/80% no-repeat; left: -0.3px;}
.top-box.class-unknown .header-diamond { filter: grayscale(100%); }
.bottom-box.class-unknown ul li { color: rgb(var(--sd-bullets)); }
.bottom-box.class-unknown ul li:before { background: rgb(var(--sd-bullets)); }
.bottom-box.class-unknown ul li:nth-child(1)>.default:after{ content: "Mysterious Properties"; }
.bottom-box.class-unknown ul li:nth-child(2)>.default:after{ content: "Unknown Information"; }
.bottom-box.class-unknown ul li:nth-child(3)>.default:after{ content: "Undocumented Entities"; }

/* ==== weird classes ==== */

/* habitable */
.top-box.class-habitable .bottom-text p { display: none; }
.top-box.class-habitable .bottom-text:after { content: "Class: Habitable"; }
.top-box.class-habitable, .diamond-color.class-habitable { background: rgb(var(--class-habitable)); }
.class-habitable { --sd-symbol:var(--sd-symbol-secondary);}
.top-box.class-habitable .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/g1wwoaO.png") center/80% no-repeat; mask: url("https://i.imgur.com/g1wwoaO.png") center/80% no-repeat; left: -0.3px; top: -3px; }
.bottom-box.class-habitable ul li:nth-child(1)>.default:after{ content: "Safe"; }
.bottom-box.class-habitable ul li:nth-child(2)>.default:after{ content: "Sustained Communities"; }
.bottom-box.class-habitable ul li:nth-child(3)>.default:after{ content: "Devoid of Harmful Entities"; }

/* deadzone */
.class-deadzone { --sd-border:var(--sd-border-deadzone); --sd-symbol:var(--sd-symbol-secondary);}
.top-box.class-deadzone .bottom-text p { display: none; }
.top-box.class-deadzone .bottom-text:after { content: "Class: Deadzone"; }
.top-box.class-deadzone, .diamond-color.class-deadzone { background: rgb(var(--class-deadzone)); }
.top-box.class-deadzone .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/5uDqU28.png") center/80% no-repeat; mask: url("https://i.imgur.com/5uDqU28.png") center/80% no-repeat; left: -0.3px; top: 5px; }
.bottom-box.class-deadzone ul li:nth-child(1)>.default:after{ content: "Environmental Hazards"; }
.bottom-box.class-deadzone ul li:nth-child(2)>.default:after{ content: "Strictly Uninhabitable"; }
.bottom-box.class-deadzone ul li:nth-child(3)>.default:after{ content: "Potential for Anomalous Entities"; }

/* pending */
.class-pending { --sd-symbol:var(--sd-border) !important; }
.top-box.class-pending .bottom-text p { display: none; }
.top-box.class-pending .bottom-text:after { content: "Pending"; }
.top-box.class-pending, .diamond-color.class-pending { background: rgb(var(--class-pending)); }
.top-box.class-pending .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/jSpbkwK.png") center/80% no-repeat; mask: url("https://i.imgur.com/jSpbkwK.png") center/80% no-repeat; left: -0.3px; }
.bottom-box.class-pending ul li:nth-child(1)>.default:after{ content: "Safety Undetermined"; }
.bottom-box.class-pending ul li:nth-child(2)>.default:after{ content: "Unsecured"; }
.bottom-box.class-pending ul li:nth-child(3)>.default:after{ content: "Presence of Entities Undetermined"; }

/* N/A */
.top-box.class-n\/a .bottom-text p { display: none; }
.top-box.class-n\/a .bottom-text:after { content: "N/A"; }
.class-n\/a { --sd-border:var(--sd-border-secondary); --sd-symbol:var(--sd-symbol-secondary);}
.top-box.class-n\/a .header-diamond, .top-box.class-n\/a .gradient-box { background: none; }
.top-box.class-n\/a .header-diamond:after {
   content:"";
   position: absolute;
   background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 300.9 284.5' style='enable-background:new 0 0 300.9 284.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFC90E;%7D .st1%7Bfill:%23581A19;%7D%0A%3C/style%3E%3Cg%3E%3Cpolygon class='st1' points='73.4,32.6 0,105.4 13.6,105.4 86.4,32.6 '/%3E%3Cpolygon class='st1' points='26.5,105.4 40.1,105.4 112.9,32.6 99.3,32.6 '/%3E%3C/g%3E%3Cpolyline class='st1' points='287.3,105.4 214.5,32.6 227.5,32.6 287.3,91.9 '/%3E%3Cpolygon class='st1' points='274.4,105.4 260.8,105.4 188,32.6 201.6,32.6 '/%3E%3C/svg%3E");
   height: calc(284.5px / 1.13);
   width: calc(300.9px / 1.13);
   filter: grayscale(100%) brightness(0.5);
}
.top-box.class-n\/a, .diamond-color.class-n\/a { background: rgb(var(--class-n-a)); }
.top-box.class-n\/a .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/ejiG3cO.png") center/80% no-repeat; mask: url("https://i.imgur.com/ejiG3cO.png") center/80% no-repeat; left: -0.3px; top: -2px; }
.bottom-box.class-n\/a ul li:nth-child(1)>.default:after{ content: "Non-Existent"; }
.bottom-box.class-n\/a ul li:nth-child(2)>.default:after{ content: "Devoid of Matter"; }
.bottom-box.class-n\/a ul li:nth-child(3)>.default:after{ content: "Unfit for Life"; }

/* amended */
.top-box.class-amended .bottom-text p { display: none; }
.top-box.class-amended .bottom-text:after { content: "Class: Amended"; }
.top-box.class-amended, .diamond-color.class-amended { background: rgb(var(--class-amended)); }
.top-box.class-amended .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/M3iIkNp.png") center/80% no-repeat; mask: url("https://i.imgur.com/M3iIkNp.png") center/80% no-repeat; left: -0.3px; }
.bottom-box.class-amended ul li:nth-child(1)>.default:after{ content: "Unsafe and Unsecure"; }
.bottom-box.class-amended ul li:nth-child(2)>.default:after{ content: "Undocumented Entities"; }
.bottom-box.class-amended ul li:nth-child(3)>.default:after{ content: "Altered Files"; }

/* omega */
.top-box.class-omega .bottom-text p { display: none; }
.top-box.class-omega .bottom-text:after { content: "Omega"; }
.class-omega { --sd-symbol:var(--sd-symbol-secondary);}
.top-box.class-omega, .diamond-color.class-omega { background: rgb(var(--class-omega)); }
.top-box.class-omega .header-diamond .diamond-image { -webkit-mask: url("https://i.imgur.com/ynkGMVa.png") center/80% no-repeat; mask: url("https://i.imgur.com/ynkGMVa.png") center/80% no-repeat; left: -0.3px; top: 5px; }
.bottom-box.class-omega ul li:nth-child(1)>.default:after{ content: "Hidden Documentation"; }
.bottom-box.class-omega ul li:nth-child(2)>.default:after{ content: "Classified Properties"; }
.bottom-box.class-omega ul li:nth-child(3)>.default:after{ content: "Protected Entities"; }

/* custom classes */

.color-\{$color}, .header-diamond .color-\{$color} { background: {$color} !important; }
.top-box.color-\{$color} .header-diamond .diamond-image:not([class*="}"]) { background:  url("{$image}") center/80% no-repeat !important;        -webkit-mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-7.01 0 260.5 250.8' style='enable-background:new 0 0 250.5 250.8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFC90E;%7D .st1%7Bfill:%23581A19;%7D%0A%3C/style%3E%3Cpath class='st0' d='M247,133.9L133.7,247.2c-4.7,4.7-12.3,4.7-17,0L3.5,133.9c-4.7-4.7-4.7-12.3,0-17L116.8,3.6 c4.7-4.7,12.3-4.7,17,0l113.3,113.3C251.7,121.6,251.7,129.2,247,133.9z'/%3E%3C/svg%3E") !important;
   mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-7.01 0 260.5 250.8' style='enable-background:new 0 0 250.5 250.8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFC90E;%7D .st1%7Bfill:%23581A19;%7D%0A%3C/style%3E%3Cpath class='st0' d='M247,133.9L133.7,247.2c-4.7,4.7-12.3,4.7-17,0L3.5,133.9c-4.7-4.7-4.7-12.3,0-17L116.8,3.6 c4.7-4.7,12.3-4.7,17,0l113.3,113.3C251.7,121.6,251.7,129.2,247,133.9z'/%3E%3C/svg%3E") !important;     top: 0;
    left: 0;}

[[/module]]

@@ @@
[[div class="sd-container"]]
[[div class="top-box class-unknow color-{$color}"]]
[[div class="header-diamond"]]
[[div class="bg"]]
[[/div]]
[[div class="diamondy diamond-color class-unknow color-{$color}"]]
[[/div]]
[[div class="diamondy diamond-pattern"]]
[[/div]]
[[div class="diamondy diamond-image class-unknow {$image}"]]
[[/div]]
[[/div]]
[[div class="gradient-box"]]
[[div class="top-text"]]
SURVIVAL DIFFICULTY:
[[/div]]
[[div class="bottom-text"]]
Class unknow
[[/div]]
[[/div]]
[[/div]]
[[div class="bottom-box class-unknow"]]
* [[span class="{$one}"]]{$one}[[/span]][[span class="default"]]@@ @@[[/span]]
* [[span class="{$two}"]]{$two}[[/span]][[span class="default"]]@@ @@[[/span]]
* [[span class="{$three}"]]{$three}[[/span]][[span class="default"]]@@ @@[[/span]]
[[/div]]
[[/div]]
[[iftags +component]]
------

+ How to use:
[[div class="code"]]
@@[[include :backrooms-wiki:component:level-class@@
@@|class=CLASS@@
@@]]@@
[[/div]]

++ Valid parameters include:
[[div class="code"]]
* 0
* 1
* 2
* 3
* 4
* 5
* unknown
* habitable
* deadzone
* pending
* n/a
* amended
* omega
[[/div]]

++ Custom classes:
[[div class="code"]]
@@[[include :backrooms-wiki:component:level-class@@
@@|class=ClassName@@
@@|color=#000000 (Hex code with hashtag.)@@
@@|image=URL (URL to image)@@
@@|one=Put any@@
@@|two=text here@@
@@|three=that you want@@
@@]]@@
[[/div]]

+ Customization with CSS:
These are extra pieces of customization you can do with CSS, either by adding the code into a {{@@[[module css]]@@}} or by adding the code into the page's theme. **Keep the {{@@[[module css]]@@}} outside of the {{@@[[include]]@@}} for this component, put it beneath it or at the top or bottom of the page.**
Add this to your page/theme to edit all the colours, since the {{|color=}} part of the component only controls the background:
[[div class="code"]]
@@[[module css]]@@
.sd-container {

@@/* font */@@
@@--sd-font:Poppins;@@

@@/* borders */@@
@@--sd-border:var(--gray-monochrome); /* for most classes */@@
@@--sd-border-secondary:0,0,0; /* for n/a */@@
@@--sd-border-deadzone:20,0,0; /* for deadzone */@@

@@/* symbols */@@
@@--sd-symbol:var(--sd-border) !important; /* for most symbols */@@
@@--sd-symbol-secondary: 255,255,255; /* white for class 4 and higher */@@

@@/* text */@@
@@--sd-bullets:var(--sd-border) !important; /* the colour of the bullet point text */@@
@@--sd-text:var(--swatch-text-secondary-color); /* the colour of the text in the top box */@@

@@/* class colours */@@
@@--class-0:247,227,117;@@
@@--class-1:247,227,117;@@
@@--class-1:255,201,14;@@
@@--class-2:245,156,0;@@
@@--class-3:249,90,0;@@
@@--class-4:254,23,1;@@
@@--class-5:175,6,6;@@
@@--class-unknown:38,38,38;@@
@@--class-habitable:26,128,111;@@
@@--class-deadzone:44,13,12;@@
@@--class-pending:182,182,182;@@
@@--class-n-a:38,38,38;@@
@@--class-amended:185,135,212;@@
@@--class-omega:25,46,255;@@
}
@@[[/module]]@@
[[/div]]
++ Old colors:
If you want the old red border color back instead of the new themed ones, just add to your page along with the component:
[[div class="code"]]
@@[[module css]]@@
.sd-container {
@@   --sd-border:90,29,27;@@
@@   --sd-image:90,29,27;@@
@@   --sd-symbol:90,29,27;@@
}
@@[[/module]]@@
[[/div]]
[[/iftags]]

In action

link to the implemented solution on a Wikidot site or put a working example here

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License