180px
module CSS
.top-box {
background: #FFC90E;
width: 100%;
height: 5.25rem;
box-sizing: border-box;
border: 0.65rem solid #581A19;
border-left: 0.3125rem solid #581A19;
border-right: 0.3125rem solid #581A19;
position: relative;
}
.top-box .gradient-box div {
display: grid;
}
.top-box .top-text p{
font: 2.14rem Franklin Gothic Medium;
font-weight: bold;
color: white;
position: relative;
margin: 0 0.08rem;
line-height: 2.16rem;
}
.top-box .bottom-text p, .top-box .bottom-text:after{
font: 1.25rem Verdana;
color: white;
position: relative;
margin: 0 0.08rem;
line-height: 2rem;
}
.top-box .gradient-box{
background: linear-gradient(90deg, rgba(88,26,25,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("https://cdn.discordapp.com/attachments/719285094107578401/783566679467884584/Untitled-12tileable.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;
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);
top: -29.5px;
right: -13px;
transition: opacity 0.5s;
}
.header-diamond div {
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: #FFC90E;
}
.header-diamond .diamond-pattern {
background: url("https://cdn.discordapp.com/attachments/719285094107578401/783566679467884584/Untitled-12tileable.png");
mix-blend-mode: luminosity;
opacity: 0.15;
}
.header-diamond .diamond-image {
background: url("https://i.imgur.com/DSS66uH.png") center/95% no-repeat;
}
/* bottom stuff */
.bottom-box {
margin: 1.5rem 0 3rem 0;
}
.bottom-box ul li {
font: 1.5rem Poppins;
font-weight: bold;
color: #5c1d24;
margin: 0.2rem 0 0.2rem 0.6rem;
line-height: 1rem;
list-style: none;
}
.bottom-box ul li:before {
content: "";
background: #5c1d24;
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;
}
/* class 0 to 5 */
.top-box.class-0, .diamond-color.class-0 { background: #F7E375; }
.top-box.class-0 .header-diamond .diamond-image { background: url("https://i.imgur.com/ZIkCKZe.png") center/78% no-repeat; }
.bottom-box.class-0 ul li:nth-child(1):after{ content: "Безопасен"; }
.bottom-box.class-0 ul li:nth-child(2):after{ content: "Стабилен"; }
.bottom-box.class-0 ul li:nth-child(3):after{ content: "Нет сущностей"; }
.top-box.class-1, .diamond-color.class-1 { background: #FFC90E; }
.top-box.class-1 .header-diamond .diamond-image { background: url("https://i.imgur.com/ycnoxKk.png") center/78% no-repeat; }
.bottom-box.class-1 ul li:nth-child(1):after{ content: "Безопасен"; }
.bottom-box.class-1 ul li:nth-child(2):after{ content: "Стабилен"; }
.bottom-box.class-1 ul li:nth-child(3):after{ content: "Очень мало сущностей"; }
.top-box.class-2, .diamond-color.class-2 { background: #F59C00; }
.top-box.class-2 .header-diamond .diamond-image { background: url("https://i.imgur.com/SDaAj5i.png") center/78% no-repeat; }
.bottom-box.class-2 ul li:nth-child(1):after{ content: "Небезопасен"; }
.bottom-box.class-2 ul li:nth-child(2):after{ content: "Стабилен"; }
.bottom-box.class-2 ul li:nth-child(3):after{ content: "Мало сущностей"; }
.top-box.class-3, .diamond-color.class-3 { background: #F95A00; }
.top-box.class-3 .header-diamond .diamond-image { background: url("https://i.imgur.com/cN2Za4X.png") center/78% no-repeat; }
.bottom-box.class-3 ul li:nth-child(1):after{ content: "Небезопасен"; }
.bottom-box.class-3 ul li:nth-child(2):after{ content: "Нестабилен"; }
.bottom-box.class-3 ul li:nth-child(3):after{ content: "Мало сущностей"; }
.top-box.class-4, .diamond-color.class-4 { background: #FE1701; }
.top-box.class-4 .header-diamond .diamond-image { background: url("https://i.imgur.com/z2tuGUo.png") center/78% no-repeat; }
.bottom-box.class-4 ul li:nth-child(1):after{ content: "Небезопасен"; }
.bottom-box.class-4 ul li:nth-child(2):after{ content: "Нестабилен"; }
.bottom-box.class-4 ul li:nth-child(3):after{ content: "Среднее количество сущностей"; }
.top-box.class-5, .diamond-color.class-5 { background: #AF0606; }
.top-box.class-5 .header-diamond .diamond-image { background: url("https://i.imgur.com/4QcwgNt.png") center/78% no-repeat; }
.bottom-box.class-5 ul li:nth-child(1):after{ content: "Небезопасен"; }
.bottom-box.class-5 ul li:nth-child(2):after{ content: "Нестабилен"; }
.bottom-box.class-5 ul li:nth-child(3):after{ content: "Много сущностей"; }
/* class unknown */
.top-box.class-unknown, .diamond-color.class-unknown { background: #282828; }
.top-box.class-unknown { border-color: rgba(255,255,255,0.05); }
.top-box.class-unknown .bottom-text p { display: none; }
.top-box.class-unknown .bottom-text:after { content: "Класс X"; }
.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 { background: url("https://i.imgur.com/RacLmIk.png") center/78% no-repeat; }
.top-box.class-unknown .header-diamond { filter: grayscale(100%); }
.bottom-box.class-unknown ul li { color: #282828; }
.bottom-box.class-unknown ul li:before { background: #282828; }
.bottom-box.class-unknown ul li:nth-child(1):after{ content: "Неизвестные свойства"; }
.bottom-box.class-unknown ul li:nth-child(2):after{ content: "Отсутствует информация"; }
.bottom-box.class-unknown ul li:nth-child(3):after{ content: "Нет сведений о сущностях"; }
/* ==== weird classes ==== */
/* habitable */
.top-box.class-habitable .bottom-text p { display: none; }
.top-box.class-habitable .bottom-text:after { content: "Класс: Обитаемый"; }
.top-box.class-habitable, .diamond-color.class-habitable { background: #1A806F; }
.top-box.class-habitable .header-diamond .diamond-image { background: url("https://i.imgur.com/g1wwoaO.png") center/78% no-repeat; }
.bottom-box.class-habitable ul li:nth-child(1):after{ content: "Безопасен"; }
.bottom-box.class-habitable ul li:nth-child(2):after{ content: "Стабильные колонии"; }
.bottom-box.class-habitable ul li:nth-child(3):after{ content: "Нет опасных сущностей"; }
/* deadzone */
.top-box.class-deadzone .bottom-text p { display: none; }
.top-box.class-deadzone .bottom-text:after { content: "Класс: Мёртвая зона"; }
.top-box.class-deadzone, .diamond-color.class-deadzone { background: #2C0D0C; }
.top-box.class-deadzone .header-diamond .diamond-image { background: url("https://i.imgur.com/5uDqU28.png") center/78% no-repeat; }
.bottom-box.class-deadzone ul li:nth-child(1):after{ content: "Окружающая среда опасна"; }
.bottom-box.class-deadzone ul li:nth-child(2):after{ content: "Непригодный для выживания"; }
.bottom-box.class-deadzone ul li:nth-child(3):after{ content: "Возможность появления аномальных сущностей"; }
/* pending */
.top-box.class-pending .bottom-text p { display: none; }
.top-box.class-pending .bottom-text:after { content: "Не определена"; }
.top-box.class-pending, .diamond-color.class-pending { background: #B6B6B6; }
.top-box.class-pending .header-diamond .diamond-image { background: url("https://i.imgur.com/jSpbkwK.png") center/78% no-repeat; }
.bottom-box.class-pending ul li:nth-child(1):after{ content: "Безопасность не определена"; }
.bottom-box.class-pending ul li:nth-child(2):after{ content: "Нестабилен"; }
.bottom-box.class-pending ul li:nth-child(3):after{ content: "Наличие сущностей не определено"; }
/* N/A */
.top-box.class-n\/a .bottom-text p { display: none; }
.top-box.class-n\/a .bottom-text:after { content: "N/A"; }
.top-box.class-n\/a { border-color: rgba(0,0,0,0.5); }
.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: #262626; }
.top-box.class-n\/a .header-diamond .diamond-image { background: url("https://i.imgur.com/ejiG3cO.png") center/78% no-repeat; }
.bottom-box.class-n\/a ul li:nth-child(1):after{ content: "Не существует"; }
.bottom-box.class-n\/a ul li:nth-child(2):after{ content: "Отсутствие материи"; }
.bottom-box.class-n\/a ul li:nth-child(3):after{ content: "Непригоден для жизни"; }
/* amended */
.top-box.class-amended .bottom-text p { display: none; }
.top-box.class-amended .bottom-text:after { content: "Класс: Изменённый"; }
.top-box.class-amended, .diamond-color.class-amended { background: #B987D4; }
.top-box.class-amended .header-diamond .diamond-image { background: url("https://i.imgur.com/M3iIkNp.png") center/78% no-repeat; }
.bottom-box.class-amended ul li:nth-child(1):after{ content: "Небезопасен и нестабилен"; }
.bottom-box.class-amended ul li:nth-child(2):after{ content: "Недокументированные сущности"; }
.bottom-box.class-amended ul li:nth-child(3):after{ content: "Изменённые файлы"; }
/* omega */
.top-box.class-omega .bottom-text p { display: none; }
.top-box.class-omega .bottom-text:after { content: "Омега"; }
.top-box.class-omega, .diamond-color.class-omega { background: #192EFF; }
.top-box.class-omega .header-diamond .diamond-image { background: url("https://i.imgur.com/ynkGMVa.png") center/78% no-repeat; }
.bottom-box.class-omega ul li:nth-child(1):after{ content: "Скрытая документация"; }
.bottom-box.class-omega ul li:nth-child(2):after{ content: "Классифицированные свойства"; }
.bottom-box.class-omega ul li:nth-child(3):after{ content: "Защищённые сущности"; }
/* 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/78% no-repeat !important; }
/module
@@ @@
[[div class="top-box class-{$class} color-{$color}"]]
div class="header-diamond"
[[div class="diamond-color class-{$class} color-{$color}"]]
/div
div class="diamond-pattern"
/div
[[div class="diamond-image class-{$class} {$image}"]]
/div
/div
div class="gradient-box"
div class="top-text"
СЛОЖНОСТЬ ВЫЖИВАНИЯ:
/div
div class="bottom-text"
Класс {$class}
/div
/div
/div
[[div class="bottom-box class-{$class}"]]
- [[span class="{$one}"]]{$one}/span
- [[span class="{$two}"]]{$two}/span
- [[span class="{$three}"]]{$three}/span
/div
iftags +_component
Как использовать:
code
[[include :ru-backrooms-wiki:component:level-class
|class=CLASS
]]
/code
Допустимые параметры классов:
- 0
- 1
- 2
- 3
- 4
- 5
- unknown
- habitable
- deadzone
- pending
- n/a
- amended
- omega
Пользовательские классы:
code
[[include :ru-backrooms-wiki:component:level-class
|class=ИмяКласса
|color=#000000 (Шестнадцатеричный код с хештегом.)
|image=URL (ссылка на картинку)
|one=Напиши
|two=Любой
|three=Текст
]]
/code
/iftags