MediaWiki:Common.css: различия между версиями

/* ================================================================
   МЕДИАВИКИ:COMMON.CSS — ГЛОБАЛЬНЫЕ СТИЛИ ДЛЯ ВИКИ TGMC
   ================================================================
   Этот файл управляет внешним видом всей вики.
   Все изменения здесь применяются ко всем страницам.
   ================================================================ */

/* ================================================================
   1. БАЗОВЫЕ ПЕРЕМЕННЫЕ (ЦВЕТА, ТЕНИ, СКРУГЛЕНИЯ)
   ================================================================ */
:root {
	/* ---------- Основные цвета ---------- */
	--color-primary: #0E1724;        /* Тёмно-синий (фон шапки) */
	--color-second: #1a2636;          /* Тёмно-синий (вторичный фон) */
	--color-white: #ffffff;           /* Белый (текст на тёмном) */
	--color-black: #000000;           /* Чёрный */
	--color-text: #222222;            /* Основной цвет текста (светлая тема) */
	--color-text-semi-translucent: rgba(255, 255, 255, 0.7); /* Полупрозрачный белый */
	--color-border: #999999;          /* Цвет границ */
	--color-bg-hover: rgba(255, 255, 255, 0.1); /* Фон при наведении */

	/* ---------- Цвета урона (для статей) ---------- */
	--color-red: #e74c3c;
	--color-orange: #e67e22;
	--color-blue: #3498db;
	--color-green: #2ecc71;
	--color-purple: #9b59b6;
	--color-teal: #1abc9c;

	/* ---------- Скругления, тени, анимации ---------- */
	--border-radius-small: 4px;
	--border-radius-medium: 8px;
	--border-radius-large: 12px;
	--border-classic: 1px solid #999999;
	--blur-default: blur(8px);
	--transition-time: 0.2s;
	--template-shadow--small: 0 0 0.3em #999;
	--template-shadow--medium: 0 0 0.5em #666;
}

/* ================================================================
   2. ЦВЕТОВАЯ ПАЛИТРА ДЛЯ ДЕПАРТАМЕНТОВ (ИЗ SS220)
   ================================================================
   Используется в шаблонах через классы .colors-XXX
   Пример: <div class="colors-Marine">...</div>
   ================================================================ */

/* ---------- Гражданский ---------- */
.colors-Civilian, .colors-civilian {
	--bg: var(--civilian-light);
	--border: var(--civilian-secondary);
	--th-bg: var(--civilian-primary);
	--th-border: var(--civilian-opaque);
	--td-bg: var(--civilian-transparent);
	--cap-bg: var(--civilian-light);
	--cap-color: var(--color-text);
	--cap-border: var(--civilian-opaque);
}
/* ---------- Медицинский ---------- */
.colors-Medical, .colors-medical {
	--bg: var(--medical-light);
	--border: var(--medical-secondary);
	--th-bg: var(--medical-primary);
	--th-border: var(--medical-opaque);
	--td-bg: var(--medical-transparent);
	--cap-bg: var(--medical-light);
	--cap-color: var(--color-text);
	--cap-border: var(--medical-opaque);
}
/* ---------- Снабжение ---------- */
.colors-Supply, .colors-supply {
	--bg: var(--supply-light);
	--border: var(--supply-secondary);
	--th-bg: var(--supply-primary);
	--th-border: var(--supply-opaque);
	--td-bg: var(--supply-transparent);
	--cap-bg: var(--supply-light);
	--cap-color: var(--color-text);
	--cap-border: var(--supply-opaque);
}
/* ---------- Наука ---------- */
.colors-Science, .colors-science {
	--bg: var(--science-light);
	--border: var(--science-secondary);
	--th-bg: var(--science-primary);
	--th-border: var(--science-opaque);
	--td-bg: var(--science-transparent);
	--cap-bg: var(--science-light);
	--cap-color: var(--color-text);
	--cap-border: var(--science-opaque);
}
/* ---------- Инженерия ---------- */
.colors-Engineering, .colors-engineering {
	--bg: var(--engineer-light);
	--border: var(--engineer-secondary);
	--th-bg: var(--engineer-primary);
	--th-border: var(--engineer-opaque);
	--td-bg: var(--engineer-transparent);
	--cap-bg: var(--engineer-light);
	--cap-color: var(--color-text);
	--cap-border: var(--engineer-opaque);
}
/* ---------- Безопасность ---------- */
.colors-Security, .colors-security {
	--bg: var(--security-light);
	--border: var(--security-secondary);
	--th-bg: var(--security-primary);
	--th-border: var(--security-opaque);
	--td-bg: var(--security-transparent);
	--cap-bg: var(--security-light);
	--cap-color: var(--color-text);
	--cap-border: var(--security-opaque);
}
/* ---------- Антагонисты ---------- */
.colors-Antagonist, .colors-antag {
	--bg: var(--antag-light);
	--border: var(--antag-secondary);
	--th-bg: var(--antag-primary);
	--th-border: var(--antag-opaque);
	--td-bg: var(--antag-transparent);
	--cap-bg: var(--antag-light);
	--cap-color: var(--color-red);
	--cap-border: var(--antag-opaque);
}
/* ---------- Командование ---------- */
.colors-Command, .colors-command {
	--bg: var(--command-light);
	--border: var(--command-secondary);
	--th-bg: var(--command-primary);
	--th-border: var(--command-opaque);
	--td-bg: var(--command-transparent);
	--cap-bg: var(--command-light);
	--cap-color: var(--color-white);
	--cap-border: var(--command-opaque);
}
/* ---------- Синтетики ---------- */
.colors-Synthetic, .colors-synthetic {
	--bg: var(--synthetic-light);
	--border: var(--synthetic-secondary);
	--th-bg: var(--synthetic-primary);
	--th-border: var(--synthetic-opaque);
	--td-bg: var(--synthetic-transparent);
	--cap-bg: var(--synthetic-light);
	--cap-color: var(--color-white);
	--cap-border: var(--synthetic-opaque);
}
/* ---------- ЦентКом ---------- */
.colors-CentCom, .colors-centcom {
	--bg: var(--centcom-light);
	--border: var(--centcom-secondary);
	--th-bg: var(--centcom-primary);
	--th-border: var(--centcom-opaque);
	--td-bg: var(--centcom-transparent);
	--cap-bg: var(--centcom-light);
	--cap-color: var(--color-text);
	--cap-border: var(--centcom-opaque);
}
/* ---------- Специальный ---------- */
.colors-Special, .colors-special {
	--bg: var(--special-light);
	--border: var(--special-secondary);
	--th-bg: var(--special-primary);
	--th-border: var(--special-opaque);
	--td-bg: var(--special-transparent);
	--cap-bg: var(--special-light);
	--cap-color: var(--color-white);
	--cap-border: var(--special-opaque);
}
/* ---------- Ксеноморфы (Marine) ---------- */
.colors-Marine, .colors-marine {
	--bg: var(--centcom-light);
	--border: var(--centcom-secondary);
	--th-bg: var(--centcom-primary);
	--th-border: var(--centcom-opaque);
	--td-bg: var(--centcom-transparent);
	--cap-bg: var(--centcom-light);
	--cap-color: var(--color-text);
	--cap-border: var(--centcom-opaque);
}
/* ---------- Ксеноморфы (Xenomorph) ---------- */
.colors-Xenomorph, .colors-xenomorph {
	--bg: var(--special-light);
	--border: var(--special-secondary);
	--th-bg: var(--special-primary);
	--th-border: var(--special-opaque);
	--td-bg: var(--special-transparent);
	--cap-bg: var(--special-light);
	--cap-color: var(--color-white);
	--cap-border: var(--special-opaque);
}
/* ---------- Культисты ---------- */
.colors-Cultist, .colors-cult {
	--bg: var(--cult-light);
	--border: var(--cult-secondary);
	--th-bg: var(--cult-primary);
	--th-border: var(--cult-opaque);
	--td-bg: var(--cult-transparent);
	--cap-bg: var(--cult-light);
	--cap-color: var(--color-red);
	--cap-border: var(--cult-opaque);
}
/* ---------- Ратвар ---------- */
.colors-Ratvar, .colors-ratvar {
	--bg: var(--ratvar-light);
	--border: var(--ratvar-secondary);
	--th-bg: var(--ratvar-primary);
	--th-border: var(--ratvar-opaque);
	--td-bg: var(--ratvar-transparent);
	--cap-bg: var(--ratvar-light);
	--cap-color: var(--color-white);
	--cap-border: var(--ratvar-opaque);
}
/* ---------- Волшебники ---------- */
.colors-Wizard, .colors-wizard {
	--bg: var(--wizard-light);
	--border: var(--wizard-secondary);
	--th-bg: var(--wizard-primary);
	--th-border: var(--wizard-opaque);
	--td-bg: var(--wizard-transparent);
	--cap-bg: var(--wizard-light);
	--cap-color: var(--color-text);
	--cap-border: var(--wizard-opaque);
}
/* ---------- Похитители ---------- */
.colors-Abductor, .colors-abductor {
	--bg: var(--gray-light);
	--border: var(--gray-secondary);
	--th-bg: var(--gray-primary);
	--th-border: var(--gray-opaque);
	--td-bg: var(--gray-transparent);
	--cap-bg: var(--gray-light);
	--cap-color: var(--color-text);
	--cap-border: var(--gray-opaque);
}

/* ================================================================
   3. СТИЛИ ДЛЯ ТАБЛИЦ (из SS220)
   ================================================================ */
.items-table {
	width: 100%;
	border: var(--border-classic);
	border-radius: var(--border-radius-medium);
	background-color: var(--color-second-fill);
}
.items-table th {
	border: 0.2em double var(--color-border);
	border-radius: var(--border-radius-small);
	background-color: var(--color-second);
	color: var(--color-text);
	padding: 0.2em;
}
.items-table td {
	background-color: var(--color-second);
	color: var(--color-text);
	padding: 0.2em;
}
.items-table:not(.regular) td:not(.regular):first-of-type,
td.capital {
	background-color: var(--color-second);
	font-weight: bold;
	color: var(--color-text);
	border: var(--border-classic);
	border-radius: var(--border-radius-small);
	text-align: center;
}

/* ---------- Стили для таблиц оружия и брони ---------- */
.weapon-table td,
.armor-table {
	text-align: center;
	font-weight: bold;
}
.weapon-table td:last-of-type,
.armor-table td:last-of-type {
	text-align: left;
	font-weight: unset;
}

/* ================================================================
   4. СТИЛИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ (из SS220)
   ================================================================ */
.wiki-mainpage {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}
.wiki-mainpage-column {
	display: flex;
	flex-direction: column;
	flex: 1 1 20rem;
	gap: 0.75em;
}

/* ---------- Стили для сплеша (шапки) ---------- */
.paradise-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 900px;
	background-color: var(--color-second);
	border: var(--border-classic);
	border-radius: var(--border-radius-large);
	backdrop-filter: var(--blur-default);
}
.paradise-logo a img {
	width: 100%;
	height: auto;
}
.paradise-welcome {
	display: inline-flex;
	text-align: center;
	font-weight: bold;
	padding: 0 1em;
	margin: -1.5em 0.5em 0.5em 0.5em;
	background-color: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--border-radius-large);
}
.paradise-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.paradise-info-string {
	overflow: hidden;
	display: flex;
	max-width: 90%;
	margin-bottom: 0.25em;
	background-color: var(--color-second);
	border: var(--border-classic);
	border-top: 0;
	border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
	box-shadow: inset 0px 5px 5px -5px rgba(0, 0, 0, 0.2);
	backdrop-filter: var(--blur-default);
}
.paradise-info-string span:not([class]) {
	padding: 0.5em 0.75em;
	border-right: var(--border-classic);
	border-left: var(--border-classic);
}
@media (max-width: 719px) {
	.paradise-info-string span:not([class]) {
		display: none;
	}
}
.paradise-info-string .paradise-info-link {
	min-width: 3em;
}
@media (max-width: 719px) {
	.paradise-info-string .paradise-info-link {
		min-width: 10em;
		height: 2.5em;
	}
}
.paradise-info-string .paradise-info-link:first-of-type {
	border-right: var(--border-classic);
}
.paradise-info-string .paradise-info-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-text-semi-translucent) !important;
	transition: color var(--transition-time), background-color var(--transition-time);
}
.paradise-info-string .paradise-info-link a:hover {
	background-color: var(--color-bg-hover);
	color: var(--color-text) !important;
}
.paradise-info-string .paradise-info-link a:after {
	content: "";
	font: unset;
}
@media (min-width: 720px) {
	.paradise-info-string .paradise-info-link a:after {
		display: none;
	}
}
.paradise-info-string .paradise-info-link:first-of-type a:after {
	content: "Discord";
	margin-left: 1em;
}
.paradise-info-string .paradise-info-link:last-of-type a:before {
	content: "GitHub";
	margin-right: 1em;
}
.paradise-info-string .paradise-info-link a i {
	font-size: 1.25em;
}

/* ================================================================
   5. СТИЛИ ДЛЯ ТИПОВ УРОНА (из SS220)
   ================================================================ */
.brute { color: var(--color-red); font-weight: bold; }
.burn { color: var(--color-orange); font-weight: bold; }
.oxygen { color: var(--color-blue); font-weight: bold; }
.toxic { color: var(--color-green); font-weight: bold; }
.gene { color: var(--color-purple); font-weight: bold; }
.electric { color: var(--color-teal); font-weight: bold; }

/* ================================================================
   6. СТИЛИ ДЛЯ JS-ССЫЛОК (из SS220)
   ================================================================ */
.jslink {
	cursor: pointer;
	user-select: none;
	font-size: 0.66em;
	padding: 0.25em 0.5em;
	margin-left: 0.5em;
	background-color: var(--color-primary);
	color: var(--color-white) !important;
	border-radius: var(--border-radius-small);
	transition: background-color var(--transition-time);
}
.jslink:hover {
	background-color: var(--color-primary-light);
}

/* ================================================================
   7. УТИЛИТЫ (из SS220)
   ================================================================ */
.client-js *.noscript,
.invisible {
	display: none;
}