MediaWiki:Common.css

@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.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 {
  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;
}

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

/* Оформление самих карточек */
.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 ===== */
body {
  background: #060608 !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;
  z-index: 5;
}

/* ===== 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(140, 180, 255, 0.85);
}

#content a:hover {
  color: rgba(180, 210, 255, 1);
}

/* ===== 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;
}

/* ===== 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;
}