Тема ПТГ

Тема была создана my name is MX, а также отдельная благодарность Isaac Quedler за помощь!

---

Чтобы вставить эту тему на вашу страницу, впишите где-либо на ней следующий текст:

[[include :backrooms-wiki:theme:itg]]

---

Примеры:

Забубисье.

Горизонтальная линия может быть создана путём написания 5 дефисов подряд "-----" и она будет тянуться на всю страницу (только если не размещена в блоке цитаты). Линии, делящие документ на секции выглядят так:

---

Заголовки могут быть созданы путём постановки от 1 до 6 плюсов подряд "+" в начале строки

+ Заголовки

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвёртого уровня

Заголовок пятого уровня

Заголовок шестого уровня

Вкладка

Это таблица с вкладками. Очень полезно!

ВкладкаДва

Хехе.

Длинный паренёк

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Это длинная вкладка. В ней очень много текста.

Вау. Это было достаточно большое количество текста.

Бла бла бла бла бла бла бла бла бла бла..

воу длинненькая вкладулька

Вкладка для примера

Свет!

Тьма!

ВкладкаТри

3

2

1

Go!

И ещё одна вкладка

воу
Блокализация

И ещё немного

Несколько сразу!

Тоже самое, только в тёмном формате :D

---

Это блочная цитата, созданная путём размещения "> " в начале каждой строки.
Больше текста

---

Это горизонтальная линия

Блок в блоке

В блоке²

В блоке³

---

А это	таблица
Если честно	то я не знаю
как такую сделать

---

В шапке засел шрифт Play.

В заголовках используется шрифт Jura

Основной текст принял обличие шрифта Open Sans

Моноширный шрифт Fantasque Sans Mono

---

Снос¹
Тут есть
Текст
Так что вы
Можете увидеть
Как всё выглядит
В разных
форматах^и
прочих_вещах
Включая ссылки, которых нет
И те, которые есть!

---

[[div class="lightblock"]]

[[/div]]

---

[[div class="darkblock"]]

[[/div]]

---

[[div class="lightstyled-quote"]]

[[/div]]

---

[[div class="darkstyled-quote"]]

[[/div]]

---

[[div class="light-borderblock"]]

[[/div]]

---

[[div class="dark-borderblock"]]

[[/div]]

---

[[div class="logo-block"]]

[[/div]]

---

[[div class="border-logoblock"]]

[[/div]]

---

ВСТАВЬТЕ ТЕКСТ
[[div class="light-titleblock"]]
[[span class="light-titlebox"]]ВСТАВЬТЕ ТЕКСТ[[/span]]

[[/div]]

---

ВСТАВЬТЕ ТЕКСТ
[[div class="dark-titleblock"]]
[[span class="dark-titlebox"]]ВСТАВЬТЕ ТЕКСТ[[/span]]

[[/div]]

---

+ Код Темы

@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 
@media screen and (prefers-reduced-motion: no-preference) {
    #page-title, #breadcrumbs, #page-content > * {
      animation-name: fadeIn;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-timing-function: ease-out;
      animation-fill-mode: backwards;
    }
  }
  #page-title { animation-delay: 0s; }
 
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translate(0,30px);
    }
    to {
      opacity: 1;
      transform: translate(0,0);
    }
  }
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "liminal";
   --theme-name: "Liminal Theme";
 
   --logo-image: url("http://ru-backrooms-sandbox.wikidot.com/local--files/my-name-is-mx-alc-system-itg/ITG");
   --header-title: "База Данных ПТГ";
   --header-subtitle: "Изготавливать, продавать, потреблять.";
 
   --body-font: 'Open Sans';
   --header-font: 'Play', sans-serif;
   --title-font: 'Jura', sans-serif;
   --mono-font: 'Fantasque Sans Mono', monospace;
 
   --darkgray: 189, 189, 189;
   --dimgray: 105, 105, 105;
   --slategray: 112, 128, 144;
   --brown: 107, 75, 52;
   --chestnut: 64, 44, 29;
   --cookie: 99, 76, 41;
   --darkcookie: 138, 110, 67;
   --badcookie: 204, 204, 204;
   --test: 0, 255, 26;
   --darkbadcookie: 140, 136, 126;
   --graycookie: 220, 220, 220;
   --black: 0, 0, 0;
   --lightblack: 71, 71, 71;
 
   --swatch-topmenu-border-color: var(--black);
 
   --background-gradient-distance: 0rem;
 
   --gradient-header: linear-gradient(to top,
      rgba(var(--black)) 0%,
      rgba(var(--brown), 0.90) 100%
   );
 
   /* Primary Theme Colors */
    --swatch-background: var(--graycookie);
    --swatch-primary: var(--black);
    --swatch-primary-darker: var(--chestnut);
    --swatch-primary-darkest: var(--black);
    /* Primary Text Colors */
    --barColour: var(--badcookie);
    --linkColour: var(--dimgray);
  /* Primary Menu Colors */
    --swatch-menubg-color: var(--darkgray);
    --swatch-menubg-light-color: var(--darkgray);
    --swatch-menubg-medium-color: var(--darkbadcookie);
    --swatch-menubg-medium-dark-color: var(--black);
    --swatch-menubg-dark-color: var(--chestnut);
    --swatch-menubg-black-color: var(--black);
    --swatch-menubg-hover-color: var(--cookie);
    --swatch-menutxt-dark-color: var(--black);
    --swatch-menutxt-light-color: var(--badcookie);
    --swatch-border-color: none;
 
    /* Link Colors */
    --link-color: var(--cookie);
    --hover-link-color: var(--darkgray);
    --visited-link-color: 125, 103, 71;
}
 
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }
 
#main-content a {
   padding: 1px 0px;
   transition: ease-in-out 0.35s;
}
 
#main-content a:hover {
   text-decoration: none;
   padding: 1px 3px;
   background: rgb(var(--pale-accent));
   color: rgb(var(--white-monochrome));
}
 
div#page-options-bottom-2 > a, div#page-options-bottom > a {
   border-radius: 0em;
   -moz-border-radius: 0em;
   border: none;
}
 
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
   border: none;
}
 
#page-title {
  font-size: 25px;
  display: inline-flex;
  position: relative;
  bottom: 22px;
  justify-content: center;
  border: none;
}
 
#page-title:before, #page-title:after {
  content:"";
  border-bottom: 1px solid rgb(var(--black));
  display: flex;
  position: relative;
  bottom: 19px;
  width: 160px;
}
 
#page-title:before {
  right: 10px;
}
 
#page-title:after {
  left: 10px;
}
 
@media only screen and (max-width: 599px) {
  #page-title:before, #page-title:after {
    content:"";
    border-bottom: none;
    display: flex;
    position: relative;
    bottom: 0;
    width: 0;
  }
}
 
#skrollr-body {
   background-image:none;
}
 
#side-bar .side-block div a img {
   filter: grayscale(100%);
}
 
#container {
   background-image: none;
}
 
div#page-options-bottom-2 > a, div#page-options-bottom > a {
   border-radius: 0em;
   -moz-border-radius: 0em;
   border: none;
}
 
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
   border: none;
}
 
#header, #top-bar {
   background-attachment: scroll;
}
 
#header {
   background-image: none;
}
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   left: -2rem;
   top: -0.3rem;
   background-image: var(--logo-image);
   background-size: auto 10rem;
   background-position: left;
   background-repeat: no-repeat;
   opacity: 0.7;
}
 
#header h1, #header h1 a {
   position: absolute;
   left: 4.8rem;
   top: 0.8rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: left;
   z-index: 0;
}
 
#header h2, #header h2 span, #header h2 span::before {
   position: absolute;
   left: 3.3rem;
   top: 1.8rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: left;
}
 
#header h1 a::before, #header h2 span::before {
   text-shadow: .063rem 0.1rem 0.1rem #0c0c0c;
}
 
@keyframes tab-disappear {
  0% { max-height: 9999rem; }
  1% { max-height: 100vh; }
  100% { max-height: 0; }
}
@keyframes tab-appear {
  0% { max-height: 0; }
  99% { max-height: 100vh; }
  100% { max-height: 9999rem; }
}
 
.yui-navset .yui-content > div {
  padding: 0.25em 0.5em;
  display: block;
  top: 0;
  overflow: hidden;
  transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div > * {
  transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div[style*="none"] {
  display: block !important;
  flex: 0;
  max-height: 0;
  padding: 0 0.5em;
  border-width: 0;
  transition: padding 0s linear 0.5s,
        border-width 0s linear 0.5s,
        flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s;
  animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
 
#page-content .yui-navset .yui-content > div[style*="block"] {
  display: block !important;
  flex: 1;
  max-height: 9999rem;
  transition: padding 0s linear 0.5s,
        border-width 0s linear 0.5s,
        flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s;
  animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
.yui-navset .yui-content {
     background-color: rgba(var(--darkgray));
     border: solid 3px rgb(var(--darkgray));
     box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: rgb(var(--black));
    color:rgb(var(--badcookie));
}
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected {
    background-color: rgb(var(--chestnut));
}
 
.yui-navset .yui-nav {
     box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.scp-image-block {
   border: 3px solid rgb(var(--darkgray));
}
 
div.blockquote, blockquote {
    background-color: rgb(var(--black), 0.14);
border-color: rgb(var(--black));
color: rgb(var(--black));
}
 
table.wiki-content-table th {
        background-color: rgb(var(--chestnut));
        color: rgb(var(--badcookie));
}
 
.footnote{ 
    color: rgb(var(--black));
    background: rgb(var(--darkgray));
}
 
#side-bar .side-block {
    background: rgb(0,0,0,0) !important;
    color: rgb(var(--white));
}
#side-bar:hover {
background:  rgb(var(--darkgray));
}
 
blockquote {
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(90, 20, 20,.25);
}
 
.styled-quote {
   background-color:rgb(var(--darkgray));
   border-left: 0.5rem solid rgba(var(--chestnut));
   color:rgb(0, 0, 0);
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.lightstyled-quote {
   background-color:rgb(var(--darkgray));
   color:rgb(0, 0, 0);
   border-left: 0.5rem solid rgba(var(--chestnut));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.darkstyled-quote {
   background-color:rgb(var(--lightblack));
   border-left: 0.5rem solid rgba(var(--chestnut));
   color:rgb(var(--badcookie));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.darkstyled-quote a{
color: rgb(var(--swatch-menubg-medium-color));
}
 
.lightblock {
   background-color:rgb(var(--darkgray));
color:rgb(0, 0, 0);
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.darkblock {
   background-color:rgb(var(--lightblack));
   color:rgb(var(--badcookie));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.darkblock a {
color: rgb(var(--swatch-menubg-medium-color));
}
 
.dark-borderblock {
    background-color:rgb(var(--lightblack));
    color:rgb(var(--badcookie));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--chestnut));
    border-left: 0.5rem solid rgba(var(--chestnut));
 }
 
.dark-borderblock a {
color: rgb(var(--swatch-menubg-medium-color));
}
 
 .light-borderblock {
    background-color:rgb(var(--darkgray));
    color:rgb(0, 0, 0);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--chestnut));
    border-left: 0.5rem solid rgba(var(--chestnut));
 }
 .border-logoblock{
    padding: 0.01rem 1rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    color:rgb(var(--badcookie));
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--lightblack));
    border: solid 0.3rem rgb(var(--chestnut));
    border-left: 0.5rem solid rgba(var(--chestnut));
    }
 
    .border-logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(http://ru-backrooms-sandbox.wikidot.com/local--files/my-name-is-mx-alc-system-itg/ITG) center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    }
 
    .border-logoblock a {
    color: rgb(var(--swatch-menubg-medium-color));
    }
 
    .logoblock{
    padding: 0.01rem 1rem;
    color:rgb(var(--badcookie));
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--lightblack));
    }
 
    .logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(http://ru-backrooms-sandbox.wikidot.com/local--files/my-name-is-mx-alc-system-itg/ITG) center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    }
 
    .logoblock a {
    color: rgb(var(--swatch-menubg-medium-color));
    }
 
.light-titleblock {
   background-color: rgb(var(--darkgray));
   padding: 0.5rem 1rem 0.10rem;
   margin: 1.5rem 0rem 0.5rem 0rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border-top: solid rgb(var(--chestnut)) 0.3rem;
}
 
.dark-titleblock {
   background-color: rgb(var(--lightblack));
   color:rgb(var(--badcookie));
   padding: 0.5rem 1rem 0.10rem;
   margin: 1.5rem 0rem 0.5rem 0rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border-top: solid rgb(var(--chestnut)) 0.3rem;
}
 
.dark-titleblock a {
color: rgb(var(--swatch-menubg-medium-color));
}
 
.light-titlebox{
  position: relative;
  top: -1.6rem;
  left: -0.5rem;
  background-color: rgb(var(--lightblack));
  color: rgb(var(--badcookie));
  padding: 0.25rem 1rem;
  line-height: 0.1rem;
}
 
.dark-titlebox{
  position: relative;
  top: -1.6rem;
  left: -0.5rem;
  background-color: rgb(var(--darkgray));
  color: rgb(0, 0, 0);
  padding: 0.25rem 1rem;
  line-height: 0.1rem;
}
 
.borderblock {
    background-color:rgb(var(--darkgray));
    color:rgb(0, 0, 0);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--chestnut));
    border-left: 0.5rem solid rgba(var(--chestnut));
 }
}

Footnotes

1. ка