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(130, 170, 255, 0.85);
}

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

/* ===== Main page: kill ALL link backgrounds/boxes ===== */
body.page-Заглавная_страница #bodyContent a,
body.page-Заглавная_страница #bodyContent a:visited,
body.page-Заглавная_страница #bodyContent a:hover,
body.page-Заглавная_страница #bodyContent a:active,
body.page-Заглавная_страница #mw-content-text a,
body.page-Заглавная_страница #mw-content-text a:visited,
body.page-Заглавная_страница #mw-content-text a:hover,
body.page-Заглавная_страница .mw-parser-output a,
body.page-Заглавная_страница .mw-parser-output a:visited,
body.page-Заглавная_страница .mw-parser-output a:hover {
  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;
}

/* Also try without body class in case MediaWiki uses different page class */
.mainpage #bodyContent a,
.mainpage #mw-content-text a,
.mainpage .mw-parser-output a,
#bodyContent .mw-parser-output a {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !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;
}