Backrooms вики
Advertisement
Файл:C1Icon.png

180px

Сложность Выживания: Класс 1
》Безопасен
》Стабилен
》Очень Мало Сущностей

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

Advertisement