Mei Day:

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");

body {
font-family: "Comfortaa", cursive, sans-serif;
}

/* ================== СИСТЕМА ХАОСА: ТАБЫ И БЛОКИ ================== */

/* Контейнер */
.hj-chaos-container {
margin-bottom: 1.5em;
}

/* Ряд вкладок */
.hj-chaos-tabs {
display: flex;
border-radius: 6px 6px 0 0;
overflow: hidden;
}

/* Кнопки-вкладки как большие карточки */
.hj-chaos-tab-button {
flex: 1 1 0;
padding: 10px 14px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
background: #191919;
border: none;
position: relative;
}
.hj-chaos-tab-button:last-child {
border-right: none;
}

/* Заголовок/подзаголовок кнопки */
.hj-chaos-tab-title {
font-weight: bold;
font-size: 1em;
}
.hj-chaos-tab-desc {
font-size: 0.85em;
opacity: 0.9;
}

/* Базовые цвета вкладок (не активные) */
.hj-chaos-tab-button[data-chaos="overview"] {
background: #222833;
}
.hj-chaos-tab-button[data-chaos="calm"] {
background: #1e2b20;
}
.hj-chaos-tab-button[data-chaos="medium"] {
background: #2b2615;
}
.hj-chaos-tab-button[data-chaos="high"] {
background: #2b1818;
}
.hj-chaos-tab-button[data-chaos="storytellers"] {
background: #231e2e;
}

/* Активные цвета (фон) */
.hj-chaos-tab-button.active[data-chaos="overview"] {
background: #2f3b4d;
}
.hj-chaos-tab-button.active[data-chaos="calm"] {
background: #234526;
}
.hj-chaos-tab-button.active[data-chaos="medium"] {
background: #5c4716;
}
.hj-chaos-tab-button.active[data-chaos="high"] {
background: #5c1f1f;
}
.hj-chaos-tab-button.active[data-chaos="storytellers"] {
background: #3d2b5c;
}

/* Глобальный ресет рамок у активной вкладки,
чтобы режимные правила не конфликтовали */
.hj-chaos-tab-button.active {
border: none;
border-bottom: none;
margin-bottom: 0;
}

/* Блок контента — без верхней границы, только бока + низ */
.hj-chaos-block {
display: none;
padding: 16px 18px;
border-style: solid;
border-width: 0 3px 3px; /* top=0, left/right/bottom=3px */
border-color: transparent;
border-radius: 0 0 6px 6px;
background: #111;
}
.hj-chaos-block.active {
display: block;
}

/* ------------------------------------------------------------------
OVERVIEW (СИНИЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-overview .hj-chaos-tabs {
border-bottom: none;
}

/* рамка вокруг активной вкладки */
.hj-chaos-container.chaos-overview
.hj-chaos-tab-button.active[data-chaos="overview"] {
border: 3px solid #4b6284;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -3px; /* вкладка нависает над блоком */
z-index: 2;
}

/* рамка и фон блока */
.hj-chaos-container.chaos-overview .hj-chaos-block[data-chaos="overview"] {
border-color: #4b6284;
background: #2f3b4d;
}

/* нижняя линия у НЕактивных вкладок */
.hj-chaos-container.chaos-overview .hj-chaos-tab-button:not(.active) {
border-bottom: 3px solid #4b6284;
}

/* ------------------------------------------------------------------
CALM (ЗЕЛЁНЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-calm .hj-chaos-tabs {
border-bottom: none;
}

.hj-chaos-container.chaos-calm .hj-chaos-tab-button.active[data-chaos="calm"] {
border: 3px solid #3f7a47;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -3px;
z-index: 2;
}

.hj-chaos-container.chaos-calm .hj-chaos-block[data-chaos="calm"] {
border-color: #3f7a47;
background: #234526;
}

.hj-chaos-container.chaos-calm .hj-chaos-tab-button:not(.active) {
border-bottom: 3px solid #3f7a47;
}

/* ------------------------------------------------------------------
MEDIUM (ЖЁЛТО-КОРИЧНЕВЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-medium .hj-chaos-tabs {
border-bottom: none;
}

.hj-chaos-container.chaos-medium
.hj-chaos-tab-button.active[data-chaos="medium"] {
border: 3px solid #c9982b;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -3px;
z-index: 2;
}

.hj-chaos-container.chaos-medium .hj-chaos-block[data-chaos="medium"] {
border-color: #c9982b;
background: #5c4716;
}

.hj-chaos-container.chaos-medium .hj-chaos-tab-button:not(.active) {
border-bottom: 3px solid #c9982b;
}

/* ------------------------------------------------------------------
HIGH (КРАСНЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-high .hj-chaos-tabs {
border-bottom: none;
}

.hj-chaos-container.chaos-high .hj-chaos-tab-button.active[data-chaos="high"] {
border: 3px solid #c33a3a;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -3px;
z-index: 2;
}

.hj-chaos-container.chaos-high .hj-chaos-block[data-chaos="high"] {
border-color: #c33a3a;
background: #5c1f1f;
}

.hj-chaos-container.chaos-high .hj-chaos-tab-button:not(.active) {
border-bottom: 3px solid #c33a3a;
}

/* ------------------------------------------------------------------
STORYTELLERS (ФИОЛЕТОВЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-storytellers .hj-chaos-tabs {
border-bottom: none;
}

.hj-chaos-container.chaos-storytellers
.hj-chaos-tab-button.active[data-chaos="storytellers"] {
border: 3px solid #7c5cbf;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-bottom: -3px;
z-index: 2;
}

.hj-chaos-container.chaos-storytellers
.hj-chaos-block[data-chaos="storytellers"] {
border-color: #7c5cbf;
background: #3d2b5c;
}

.hj-chaos-container.chaos-storytellers .hj-chaos-tab-button:not(.active) {
border-bottom: 3px solid #7c5cbf;
}

/* ------------------------------------------------------------------ */

/* Оформление самих карточек */
.hj-rule-card {
padding: 14px 16px;
border-radius: 8px;
border: 1px solid #00000055;
background: rgba(
0,
0,
0,
0.22
); /* дефолтный фон, потом JS его подкрашивает */
box-shadow:
inset 0 1px 0 #ffffff10,
0 0 0 1px #00000022;
}

/* Заголовок внутри блока */
.hj-chaos-block h2 {
margin-top: 0;
}

/* Карточки сеткой */
.hj-rule-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 8px;
}
@media (max-width: 980px) {
.hj-rule-cards {
grid-template-columns: 1fr;
}
}

.hj-rule-card h3,
.hj-rule-card h4 {
margin: 0 0 0.4em 0;
}
.hj-rule-card p {
margin: 0 0 0.6em 0;
}
.hj-rule-card ul {
margin: 0.4em 0 0 1.2em;
}

/* Архив (как было) */
.hj-legacy {
margin-top: 20px;
padding: 0;
background: transparent;
border: 0;
}
.hj-legacy .wikitable {
background: #111;
color: inherit;
}

/* Убираем серый фон у всех миниатюр и одиночных картинок */
.thumbinner,
.thumb {
background: none !important;
border: none !important;
}

.inline-img {
background: none !important;
vertical-align: middle;
}

/* ===== Base dark theme overrides ===== */
html {
background: #060608 !important;
}

body {
background: transparent !important;
}

#mw-page-base {
background: none !important;
}

#mw-head-base {
background: none !important;
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#content {
background: none !important;
border: none !important;
color: rgba(255, 255, 255, 0.8);
}

#bodyContent {
position: relative;
/* No z-index here — avoids creating a stacking context
that traps the parallax layers inside it */
}

/* ===== Parallax layers (structure only — visuals applied via JS) ===== */
#orbitalis-parallax-bg,
.orb-parallax-layer,
#orbitalis-vignette {
/* These divs are inserted via mainpage wikitext.
JS in Common.js applies the actual styles.
In case JS hasn't loaded yet, hide them to avoid layout issues. */
display: block;
height: 0;
overflow: hidden;
pointer-events: none;
}

/* ===== Wiki content link colours for dark theme ===== */
#content a,
#content a:visited {
color: rgba(130, 170, 255, 0.85);
}

#content a:hover {
color: rgba(170, 200, 255, 1);
}

/* ===== Main page: override Citizen skin link styles ===== */
/* CSS fallback — JS engine in Common.js also handles this via DOM */
#orb-content a,
#orb-content a:link,
#orb-content a:visited,
#orb-content a:hover,
#orb-content a:active,
#orb-content a:focus {
background: none !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
border-bottom: none !important;
padding: 0 !important;
text-decoration: none !important;
outline: none !important;
}

#orb-content small {
display: block;
margin-top: 3px;
}

[id^="orb-card-"] {
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}

/* ===== Main page: Orbitalis visual design (CSS-first) ===== */

/* Description block */
#orb-desc {
border-left: 2px solid rgba(91, 141, 239, 0.2) !important;
}

/* Section titles */
#orb-title-docs {
color: rgba(91, 141, 239, 0.8) !important;
text-shadow: 0 0 25px rgba(91, 141, 239, 0.2) !important;
}
#orb-title-play {
color: rgba(180, 130, 255, 0.8) !important;
text-shadow: 0 0 25px rgba(180, 130, 255, 0.2) !important;
}
/* Decorative underline bars */
#orb-title-docs::after,
#orb-title-play::after {
content: "";
display: block;
width: 40px;
height: 1px;
margin-top: 10px;
}
#orb-title-docs::after {
background: rgba(91, 141, 239, 0.35);
box-shadow: 0 0 12px rgba(91, 141, 239, 0.12);
}
#orb-title-play::after {
background: rgba(180, 130, 255, 0.35);
box-shadow: 0 0 12px rgba(180, 130, 255, 0.12);
}

/* Doc cards — blue accent */
#orb-card-1 {
border-left: 2px solid rgba(91, 141, 239, 0.3) !important;
background: linear-gradient(
90deg,
rgba(91, 141, 239, 0.04) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-2 {
border-left: 2px solid rgba(91, 141, 239, 0.25) !important;
background: linear-gradient(
90deg,
rgba(91, 141, 239, 0.032) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-3 {
border-left: 2px solid rgba(91, 141, 239, 0.2) !important;
background: linear-gradient(
90deg,
rgba(91, 141, 239, 0.024) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-4 {
border-left: 2px solid rgba(91, 141, 239, 0.15) !important;
background: linear-gradient(
90deg,
rgba(91, 141, 239, 0.016) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}

/* Play cards — purple accent */
#orb-card-5 {
border-left: 2px solid rgba(180, 130, 255, 0.3) !important;
background: linear-gradient(
90deg,
rgba(180, 130, 255, 0.04) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-6 {
border-left: 2px solid rgba(180, 130, 255, 0.25) !important;
background: linear-gradient(
90deg,
rgba(180, 130, 255, 0.032) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-7 {
border-left: 2px solid rgba(180, 130, 255, 0.2) !important;
background: linear-gradient(
90deg,
rgba(180, 130, 255, 0.024) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}
#orb-card-8 {
border-left: 2px solid rgba(180, 130, 255, 0.15) !important;
background: linear-gradient(
90deg,
rgba(180, 130, 255, 0.016) 0%,
transparent 70%
) !important;
border-radius: 0 4px 4px 0 !important;
cursor: pointer;
}

/* Card hover — blue docs */
#orb-card-1:hover,
#orb-card-2:hover,
#orb-card-3:hover,
#orb-card-4:hover {
background: linear-gradient(
90deg,
rgba(91, 141, 239, 0.08) 0%,
rgba(91, 141, 239, 0.02) 60%,
transparent 100%
) !important;
border-left-color: rgba(91, 141, 239, 0.6) !important;
box-shadow:
inset 3px 0 20px -4px rgba(91, 141, 239, 0.15),
0 0 25px rgba(91, 141, 239, 0.04) !important;
}
/* Card hover — purple play */
#orb-card-5:hover,
#orb-card-6:hover,
#orb-card-7:hover,
#orb-card-8:hover {
background: linear-gradient(
90deg,
rgba(180, 130, 255, 0.08) 0%,
rgba(180, 130, 255, 0.02) 60%,
transparent 100%
) !important;
border-left-color: rgba(180, 130, 255, 0.6) !important;
box-shadow:
inset 3px 0 20px -4px rgba(180, 130, 255, 0.15),
0 0 25px rgba(180, 130, 255, 0.04) !important;
}

/* Server block */
#orb-server {
border-left: 2px solid rgba(100, 220, 180, 0.3) !important;
border-radius: 0 4px 4px 0 !important;
}
#orb-online {
color: rgba(100, 220, 180, 0.55);
text-shadow: 0 0 15px rgba(100, 220, 180, 0.15);
}

/* Buttons */
#orb-addr {
border: 1px solid rgba(100, 220, 180, 0.25) !important;
border-radius: 4px !important;
background: rgba(100, 220, 180, 0.06) !important;
color: rgba(100, 220, 180, 0.7) !important;
cursor: pointer !important;
}
#orb-addr:hover {
background: rgba(100, 220, 180, 0.12) !important;
border-color: rgba(100, 220, 180, 0.4) !important;
}
#orb-btn-proxy {
border: 1px solid rgba(100, 220, 180, 0.2) !important;
border-radius: 4px !important;
background: rgba(100, 220, 180, 0.04) !important;
}
#orb-btn-proxy:hover {
background: rgba(100, 220, 180, 0.1) !important;
border-color: rgba(100, 220, 180, 0.35) !important;
}
#orb-btn-byond {
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 4px !important;
background: rgba(255, 255, 255, 0.015) !important;
}

/* Footer */
#orb-footer {
border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* ===== Heading styles ===== */
#content h1,
#content h2,
#content h3,
#content h4 {
color: rgba(255, 255, 255, 0.85);
border-bottom-color: rgba(255, 255, 255, 0.1);
}

#firstHeading {
color: rgba(255, 255, 255, 0.9);
}

/* ===== Navigation / sidebar dark overrides ===== */
#mw-panel .portal h3 {
color: rgba(255, 255, 255, 0.5) !important;
}

#mw-panel .portal .body a {
color: rgba(200, 200, 200, 0.7) !important;
}

#mw-panel .portal .body a:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Top navigation bar ===== */
#mw-head a {
color: rgba(200, 200, 200, 0.7) !important;
}

#mw-head a:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Page action tabs (Edit, View source, History, etc.) ===== */
/* Vector skin */
.vector-menu-tabs li a,
.vector-menu-tabs li a:visited,
#p-views li a,
#p-cactions li a,
#p-namespaces li a {
color: rgba(200, 200, 200, 0.7) !important;
}

.vector-menu-tabs li a:hover,
#p-views li a:hover,
#p-cactions li a:hover,
#p-namespaces li a:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

.vector-menu-tabs li.selected a,
#p-views li.selected a,
#p-namespaces li.selected a {
color: rgba(255, 255, 255, 0.9) !important;
}

/* Vector tab underline/border */
.vector-menu-tabs li {
background: none !important;
}

.vector-menu-tabs li.selected {
background: none !important;
border-bottom-color: rgba(140, 180, 255, 0.6) !important;
}

/* Citizen skin page actions */
.citizen-header,
.citizen-page-header {
background: transparent !important;
}

.page-actions a,
.page-actions button,
.citizen-page-heading__actions a,
.citizen-page-heading__actions button {
color: rgba(200, 200, 200, 0.7) !important;
}

.page-actions a:hover,
.page-actions button:hover,
.citizen-page-heading__actions a:hover,
.citizen-page-heading__actions button:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Section edit links [edit] ===== */
.mw-editsection,
.mw-editsection a,
.mw-editsection-bracket {
color: rgba(140, 180, 255, 0.5) !important;
}

.mw-editsection a:hover {
color: rgba(180, 210, 255, 0.9) !important;
}

/* ===== Dropdown menus / portlets (More, Tools, etc.) ===== */
.vector-menu-content,
.vector-menu-content ul,
#p-cactions .vector-menu-content,
.mw-portlet .mw-portlet-body {
background: #14141a !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}

.vector-menu-content li a,
.mw-portlet .mw-portlet-body a {
color: rgba(200, 200, 200, 0.7) !important;
}

.vector-menu-content li a:hover,
.mw-portlet .mw-portlet-body a:hover {
color: rgba(255, 255, 255, 0.95) !important;
background: rgba(255, 255, 255, 0.06) !important;
}

/* ===== Citizen skin sidebar ===== */
.citizen-drawer,
.citizen-drawer__content,
.citizen-menu__card {
background: #14141a !important;
color: rgba(255, 255, 255, 0.7) !important;
}

.citizen-menu__card a {
color: rgba(200, 200, 200, 0.7) !important;
}

.citizen-menu__card a:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

/* Citizen top header bar */
.citizen-header__logo,
.citizen-header__inner {
color: rgba(255, 255, 255, 0.7) !important;
}

/* ===== Notifications / user menu ===== */
#pt-notifications-alert a,
#pt-notifications-notice a,
#p-personal li a,
.mw-header-notifications a {
color: rgba(200, 200, 200, 0.7) !important;
}

#p-personal li a:hover,
.mw-header-notifications a:hover {
color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Edit page / form elements ===== */
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
select {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
color: rgba(255, 255, 255, 0.85) !important;
}

/* Edit toolbar */
.oo-ui-toolbar-bar {
background: #14141a !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}

.oo-ui-toolbar-bar .oo-ui-buttonElement-button {
color: rgba(200, 200, 200, 0.7) !important;
}

/* ===== Diff / special pages ===== */
.diff-context {
background: rgba(255, 255, 255, 0.03) !important;
color: rgba(255, 255, 255, 0.7) !important;
}

.diff-addedline {
background: rgba(50, 120, 50, 0.15) !important;
}

.diff-deletedline {
background: rgba(120, 50, 50, 0.15) !important;
}

/* ===== Tables (wikitable) ===== */
.wikitable {
background: rgba(255, 255, 255, 0.03) !important;
color: rgba(255, 255, 255, 0.8) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}

.wikitable th {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
color: rgba(255, 255, 255, 0.85) !important;
}

.wikitable td {
border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===== Infobox / messagebox ===== */
.mbox-small,
.ambox,
.tmbox,
.ombox,
.cmbox,
.fmbox {
background: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: rgba(255, 255, 255, 0.7) !important;
}

/* ===== Search box ===== */
#simpleSearch {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}

#searchInput {
color: rgba(255, 255, 255, 0.8) !important;
}

/* ===== Footer ===== */
#footer {
color: rgba(255, 255, 255, 0.3);
border-top-color: rgba(255, 255, 255, 0.08) !important;
}

#footer a {
color: rgba(140, 180, 255, 0.6) !important;
}

/* ===== Category links ===== */
#catlinks {
background: rgba(255, 255, 255, 0.03) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===== Table of Contents ===== */
#toc,
.toc {
background: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}

2026-03-06T06:05:09Z

Mei Day:

Правила и рассказчики

2026-03-06T06:04:43Z

Mei Day:

Правила и рассказчики

2026-03-05T18:04:14Z

Mei Day:

Шаблон:Pagegen

2026-03-03T14:43:58Z

Mei Day:

<div id="orb-content" style="max-width: 1060px; margin: 0 auto; padding: 0 16px; color: rgba(255,255,255,0.85); position: relative; z-index: 5;">

<div id="orb-desc" style="padding: 14px 0 14px 20px; margin-bottom: 44px;">
<span style="font-family: 'Comfortaa',sans-serif; font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.45); line-height: 1.8;">Живая станция в глубоком космосе. Ролевой сервер SS13 без ограничений на контент - здесь ваш персонаж проживает настоящую историю, а не следует скрипту.</span>
</div>

<div id="orb-grid" style="display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 44px;">

<div id="orb-col-docs" style="flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 0;">
<div id="orb-title-docs" style="font-family: 'Century Gothic','Bahnschrift',sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 8px; text-transform: uppercase; padding-left: 4px; margin-bottom: 20px;">Документация</div>
<div id="orb-card-1" style="padding: 16px 22px;">[[Правила | <span style="font-family: 'Comfortaa',sans-serif; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.9);">Правила</span>]]<br/><small style="font-family: 'Comfortaa',sans-serif; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.35);">Основные правила поведения и игры</small></div>
<div id="orb-card-2" style="padding: 16px 22px;">[[Лор | <span style="font-family: 'Comfortaa',sans-serif; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.9);">Лор</span>]]<br/><small style="font-family: 'Comfortaa',sans-serif; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.35);">Вселенная, фракции и история мира</small></div>
<div id="orb-card-3" style="padding: 16px 22px;">[[Корпоративный закон | <span style="font-family: 'Comfortaa',sans-serif; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.9);">Корпоративный закон</span>]]<br/><small style="font-family: 'Comfortaa',sans-serif; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.35);">Законодательство корпорации NanoTrasen</small></div>
<div id="orb-card-4" style="padding: 16px 22px;">[[Нормы Рабочих Процедур | <span style="font-family: 'Comfortaa',sans-serif; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.9);">НРП</span>]]<br/><small style="font-family: 'Comfortaa',sans-serif; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.35);">Стандартные рабочие процедуры по отделам</small></div>
</div>

<div id="orb-col-play" style="flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 0;">
<div id="orb-title-play" style="font-family: 'Century Gothic','Bahnschrift',sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 8px; text-transform: uppercase; padding-left: 4px; margin-bottom: 20px;">Игрокам</div>
<div id="orb-card-5" style="padding: 16px 22px;">[[Руководство для новичка | <span style="font-family: 'Comfortaa',sans-serif; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.9);">Новичкам</span>]]<br/><small style="font-family: 'Comfortaa',sans-serif; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.35);">С чего начать и как разобраться</small></div>
<div id="orb-card-6" style="padding: 16px 22px;">[[Гайды | <span style="font-family: 'Comfortaa',sans-serif; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.9);">Гайды</span>]]<br/><small style="font-family: 'Comfortaa',sans-serif; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.35);">Справочники по механикам и отделам</small></div>
<div id="orb-card-7" style="padding: 16px 22px;">[https://discord.gg/uj8HN4GB7s <span style="font-family: 'Comfortaa',sans-serif; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.9);">Discord</span>]<br/><small style="font-family: 'Comfortaa',sans-serif; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.35);">Общение, новости и поддержка</small></div>
<div id="orb-card-8" style="padding: 16px 22px;">[https://boosty.to/orbitalis <span style="font-family: 'Comfortaa',sans-serif; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.9);">Boosty</span>]<br/><small style="font-family: 'Comfortaa',sans-serif; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.35);">Поддержать проект</small></div>
</div>

</div>

<div id="orb-server" style="padding: 18px 24px; margin-bottom: 28px;">
<div id="orb-info" style="display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 14px; font-family: 'Comfortaa',sans-serif; font-size: 13px; font-weight: 300;">
<span id="orb-online" style="letter-spacing: 1px;">⨉ онлайн</span>
<span id="orb-sep1" style="color: rgba(255,255,255,0.1);">│</span>
<span id="orb-map" style="color: rgba(255,255,255,0.3);">Карта: <span id="orb-map-val">—</span></span>
<span id="orb-sep2" style="color: rgba(255,255,255,0.1);">│</span>
<span id="orb-st" style="color: rgba(255,255,255,0.3);">Сторителлер: <span id="orb-st-val">—</span></span>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center;">
<span id="orb-addr" style="display: inline-block; padding: 7px 18px; font-family: 'Comfortaa',sans-serif; font-size: 12px; letter-spacing: 0.5px;">Подключиться</span>
<span id="orb-btn-proxy" style="display: inline-block; padding: 7px 18px; font-family: 'Comfortaa',sans-serif; font-size: 12px; letter-spacing: 0.5px;">[https://prx.hornyjail.space/ <span style="color: rgba(255,255,255,0.45);">Через прокси</span>]</span>
<span id="orb-btn-byond" style="display: inline-block; padding: 7px 18px; font-family: 'Comfortaa',sans-serif; font-size: 10px; letter-spacing: 0.5px;">[https://www.byond.com/download/build/516/ <span style="color: rgba(255,255,255,0.3);">BYOND 516</span>]</span>
</div>
</div>

<div id="orb-footer" style="display: flex; justify-content: center; gap: 8px; padding-top: 14px;">
<span style="padding: 5px 12px;">[{{fullurl:Заглавная страница|action=edit}} <span style="font-family: 'Comfortaa',sans-serif; font-size: 10px; font-weight: 300; color: rgba(255,255,255,0.18);">✎ Править</span>]</span>
<span style="padding: 5px 12px;">[[Служебная:Все страницы | <span style="font-family: 'Comfortaa',sans-serif; font-size: 10px; font-weight: 300; color: rgba(255,255,255,0.15);">Все страницы</span>]]</span>
<span style="padding: 5px 12px;">[[Служебная:Свежие правки | <span style="font-family: 'Comfortaa',sans-serif; font-size: 10px; font-weight: 300; color: rgba(255,255,255,0.15);">Свежие правки</span>]]</span>
</div>

</div>

MediaWiki:Common.js

2026-03-03T14:37:52Z

Mei Day:

/* MediaWiki:Common.js — Orbitalis Wiki
* This code runs on every wiki page.
* Paste this into MediaWiki:Common.js on the wiki (requires admin rights).
*
* Parallax space background that follows the mouse cursor,
* matching the in-game lobby style.
*/
(function () {
"use strict";

// Only activate on the main page (or everywhere — your choice)
var parallaxBg = document.getElementById("orbitalis-parallax-bg");
if (!parallaxBg) return; // no parallax container on this page

var nebulaEl = document.getElementById("parallax-nebula");
var starsSmallEl = document.getElementById("parallax-stars-small");
var starsBigEl = document.getElementById("parallax-stars-big");

// ---- Apply styles to the parallax elements ----------------------------
// We do it from JS because MediaWiki strips complex inline styles

// Background container
parallaxBg.style.cssText =
"position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden;background:#060608;";

// Shared layer base
var layerBase =
"position:fixed;top:-50px;left:-50px;width:calc(100% + 100px);height:calc(100% + 100px);pointer-events:none;";

// Nebula
if (nebulaEl) {
nebulaEl.style.cssText =
layerBase +
"background:" +
"radial-gradient(ellipse at 70% 40%, rgba(30,50,80,0.4) 0%, transparent 50%)," +
"radial-gradient(ellipse at 85% 60%, rgba(50,30,60,0.3) 0%, transparent 45%)," +
"radial-gradient(ellipse at 60% 70%, rgba(20,40,70,0.35) 0%, transparent 55%);" +
"opacity:0.7;z-index:0;";
}

// Small stars
if (starsSmallEl) {
starsSmallEl.style.cssText =
layerBase +
"background-image:" +
"radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8), transparent)," +
"radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.6), transparent)," +
"radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,0.7), transparent)," +
"radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.5), transparent)," +
"radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.8), transparent)," +
"radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.6), transparent)," +
"radial-gradient(1px 1px at 15% 60%, rgba(255,255,255,0.7), transparent)," +
"radial-gradient(1px 1px at 30% 75%, rgba(255,255,255,0.5), transparent)," +
"radial-gradient(1px 1px at 45% 85%, rgba(255,255,255,0.8), transparent)," +
"radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.6), transparent)," +
"radial-gradient(1px 1px at 75% 90%, rgba(255,255,255,0.7), transparent)," +
"radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,0.5), transparent)," +
"radial-gradient(1px 1px at 5% 40%, rgba(255,255,255,0.6), transparent)," +
"radial-gradient(1px 1px at 20% 95%, rgba(255,255,255,0.7), transparent)," +
"radial-gradient(1px 1px at 35% 50%, rgba(255,255,255,0.5), transparent)," +
"radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.8), transparent)," +
"radial-gradient(1px 1px at 65% 5%, rgba(255,255,255,0.6), transparent)," +
"radial-gradient(1px 1px at 80% 65%, rgba(255,255,255,0.7), transparent)," +
"radial-gradient(1px 1px at 95% 80%, rgba(255,255,255,0.5), transparent)," +
"radial-gradient(1px 1px at 12% 88%, rgba(255,255,255,0.6), transparent);" +
"background-size:200px 200px;opacity:0.8;z-index:1;";
}

// Big stars
if (starsBigEl) {
starsBigEl.style.cssText =
layerBase +
"background-image:" +
"radial-gradient(2px 2px at 8% 15%, rgba(200,220,255,0.9), transparent)," +
"radial-gradient(2px 2px at 22% 42%, rgba(255,240,220,0.8), transparent)," +
"radial-gradient(2px 2px at 38% 8%, rgba(220,255,255,0.7), transparent)," +
"radial-gradient(2px 2px at 52% 68%, rgba(255,255,220,0.8), transparent)," +
"radial-gradient(2px 2px at 68% 32%, rgba(200,200,255,0.9), transparent)," +
"radial-gradient(2px 2px at 82% 78%, rgba(255,220,200,0.7), transparent)," +
"radial-gradient(2px 2px at 18% 55%, rgba(220,255,220,0.8), transparent)," +
"radial-gradient(2px 2px at 48% 92%, rgba(255,200,255,0.7), transparent)," +
"radial-gradient(2px 2px at 72% 18%, rgba(200,255,255,0.8), transparent)," +
"radial-gradient(2px 2px at 92% 45%, rgba(255,255,200,0.7), transparent);" +
"background-size:300px 300px;opacity:0.6;z-index:2;";
}

// Vignette overlay
var vignetteEl = document.getElementById("orbitalis-vignette");
if (vignetteEl) {
vignetteEl.style.cssText =
"position:fixed;top:0;left:0;width:100%;height:100%;z-index:3;pointer-events:none;" +
"background:radial-gradient(ellipse at center, rgba(6,6,8,0) 30%, rgba(6,6,8,0.6) 70%, #060608 100%);";
}

// ---- Override MediaWiki default backgrounds ----------------------------
document.body.style.background = "#060608";

var ids = ["mw-page-base", "mw-head-base"];
for (var i = 0; i < ids.length; i++) {
var el = document.getElementById(ids[i]);
if (el) el.style.background = "none";
}

var content = document.getElementById("content");
if (content) {
content.style.background = "none";
content.style.border = "none";
}

var bodyContent = document.getElementById("bodyContent");
if (bodyContent) {
bodyContent.style.position = "relative";
bodyContent.style.zIndex = "5";
}

// ---- Mouse-tracking parallax animation --------------------------------
var targetX = 0,
targetY = 0;
var currentX = 0,
currentY = 0;

document.addEventListener("mousemove", function (e) {
var w = window.innerWidth || document.documentElement.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight;
targetX = (e.clientX / w - 0.5) * 2;
targetY = (e.clientY / h - 0.5) * 2;
});

function animate() {
currentX += (targetX - currentX) * 0.06;
currentY += (targetY - currentY) * 0.06;

if (nebulaEl) {
nebulaEl.style.left = currentX * 12 - 50 + "px";
nebulaEl.style.top = currentY * 12 - 50 + "px";
}
if (starsSmallEl) {
starsSmallEl.style.left = currentX * 25 - 50 + "px";
starsSmallEl.style.top = currentY * 25 - 50 + "px";
}
if (starsBigEl) {
starsBigEl.style.left = currentX * 40 - 50 + "px";
starsBigEl.style.top = currentY * 40 - 50 + "px";
}

requestAnimationFrame(animate);
}

animate();
})();

/* ---- Server online status + info ---- */
/* Queries /api/status.php on the same wiki host — which sends a UDP BYOND
* topic to localhost:41060 and returns JSON { players, map_name, chaos_level, ... }.
* No proxy needed: wiki and game server share the same machine.
*/
(function () {
"use strict";
var elOnline = document.getElementById("orb-online");
var elMap = document.getElementById("orb-map-val");
var elST = document.getElementById("orb-st-val");
if (!elOnline) return;

var STATUS_URL = "/api/status.json";
var REFRESH_MS = 30000;

function update() {
fetch(STATUS_URL)
.then(function (r) {
console.log("[Orbitalis Status] HTTP", r.status, r.url);
if (!r.ok) throw new Error("HTTP " + r.status);
return r.json();
})
.then(function (data) {
console.log("[Orbitalis Status] Data:", data);
var count = parseInt(data.players, 10);
if (isNaN(count)) throw new Error("bad data: players=" + data.players);

elOnline.textContent = count + " онлайн";
elOnline.style.color =
count > 0
? "rgba(100,220,180,0.75)"
: "rgba(100,220,180,0.35)";
elOnline.style.textShadow =
count > 0
? "0 0 15px rgba(100,220,180,0.2)"
: "none";

if (elMap && data.map_name) {
elMap.textContent = data.map_name;
elMap.style.color = "rgba(255,255,255,0.55)";
}
if (elST && data.chaos_level) {
elST.textContent = data.chaos_level;
elST.style.color = "rgba(255,255,255,0.55)";
}
})
.catch(function (err) {
console.error("[Orbitalis Status] Fetch failed:", err);
elOnline.textContent = "оффлайн";
elOnline.style.color = "rgba(255,120,120,0.5)";
elOnline.style.textShadow = "none";
if (elMap) elMap.textContent = "—";
if (elST) elST.textContent = "—";
});
}

update();
setInterval(update, REFRESH_MS);
})();

/* ---- Main page: interactive engine ---- */
/* All visual styling is in Common.css (CSS-first approach).
JS handles: nuclear strip for <a> tags, click handlers.
Safe to re-run on Citizen DOM updates. */
(function () {
"use strict";

function run() {
var orb = document.getElementById("orb-content");
if (!orb) return;

/* Nuclear strip: clear Citizen-applied backgrounds on <a> tags only */
var links = orb.querySelectorAll("a");
for (var i = 0; i < links.length; i++) {
var a = links[i];
a.style.setProperty("background", "none", "important");
a.style.setProperty("background-color", "transparent", "important");
a.style.setProperty("background-image", "none", "important");
a.style.setProperty("box-shadow", "none", "important");
a.style.setProperty("border", "none", "important");
a.style.setProperty("padding", "0", "important");
a.style.setProperty("text-decoration", "none", "important");
}

/* Connect button — byond:// link */
var addr = document.getElementById("orb-addr");
if (addr && !addr._orbClick) {
addr._orbClick = true;
addr.addEventListener("click", function () {
window.location.href = "byond://45.141.208.222:41060";
});
}

/* Make entire card area clickable */
var cardIds = [
"orb-card-1", "orb-card-2", "orb-card-3", "orb-card-4",
"orb-card-5", "orb-card-6", "orb-card-7", "orb-card-8"
];
for (var j = 0; j < cardIds.length; j++) {
var card = document.getElementById(cardIds[j]);
if (card && !card._orbClick) {
card._orbClick = true;
(function (c) {
var link = c.querySelector("a");
if (link) {
c.addEventListener("click", function (ev) {
if (ev.target.tagName !== "A" &&
(!ev.target.parentNode || ev.target.parentNode.tagName !== "A")) {
link.click();
}
});
}
})(card);
}
}
}

/* Hook into multiple events — retry for Citizen's late DOM updates */
if (typeof mw !== "undefined" && mw.hook) {
mw.hook("wikipage.content").add(run);
}
document.addEventListener("DOMContentLoaded", run);
window.addEventListener("load", function () {
setTimeout(run, 50);
setTimeout(run, 500);
});
})();

// Переключение вкладок и классов "chaos-*".
mw.hook("wikipage.content").add(function ($root) {
$root.find(".hj-chaos-container").each(function () {
var $container = $(this);
var $buttons = $container.find(".hj-chaos-tab-button");
var $blocks = $container.find(".hj-chaos-block");

if (!$buttons.length || !$blocks.length) return;

var CHAOS_CLASSES = "chaos-overview chaos-calm chaos-medium chaos-high";

function activate(key, $btn) {
// активная кнопка
$buttons.removeClass("active");
$btn.addClass("active");

// активный блок
$blocks.removeClass("active").hide();
$blocks
.filter('[data-chaos="' + key + '"]')
.addClass("active")
.show();

// класс на контейнере для раскраски рамок/фона
$container.removeClass(CHAOS_CLASSES).addClass("chaos-" + key);
}

// Инициализация
var $activeBtn = $buttons.filter(".active").first();
if ($activeBtn.length) {
activate($activeBtn.data("chaos"), $activeBtn);
} else {
var $first = $buttons.first();
activate($first.data("chaos"), $first);
}

// Клики
$buttons.off("click.hjChaos").on("click.hjChaos", function () {
var $btn = $(this);
activate($btn.data("chaos"), $btn);
});
});
});