Level :)
This page has been deleted, most likely because it does not belong on the snippets wiki.
View Source | Edit Page
Creator: Mainfop
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
page revision: 1, last edited: 17 Jan 2023 18:48
Comments
? ? what is this?
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?