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

/* =====================================================
   TF2 STYLE — ВИКИ «ХАОС ТАЙГИ»
   Полный файл: MediaWiki:Common.css
   ===================================================== */

/* ---------- ПАЛИТРА TF2 ---------- */
:root {
	--tf2-bg:      #26221c;
	--tf2-panel:   #3b372f;
	--tf2-panel2:  #4a4436;
	--tf2-border:  #171512;
	--tf2-text:    #e8e0d0;
	--tf2-head:    #f0e6d2;
	--tf2-orange:  #cf6a32;
	--tf2-red:     #b8383b;
	--tf2-blu:     #5885a2;
	--tf2-tan:     #cfb894;
}

/* ---------- ФОН И БАЗА ---------- */
html, body {
	background: var(--tf2-bg) !important;
	background-image: radial-gradient(ellipse at center, #35302a 0%, #26221c 75%) !important;
	color: var(--tf2-text) !important;
	font-family: 'Arial Narrow', Tahoma, Geneva, sans-serif !important;
	font-size: 15px !important;
}

/* ---------- ПАНЕЛЬ КОНТЕНТА (как окно loadout в TF2) ---------- */
.mw-body, #content, .mw-page-container {
	background: var(--tf2-panel) !important;
	border: 2px solid var(--tf2-border) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.55) !important;
	color: var(--tf2-text) !important;
}

/* ---------- ЗАГОЛОВКИ ---------- */
h1, h2, h3, h4, #firstHeading {
	font-family: Impact, 'Arial Black', 'Arial Narrow', sans-serif !important;
	color: var(--tf2-head) !important;
	text-shadow: 0 2px 0 rgba(0,0,0,.6) !important;
	letter-spacing: .5px;
}

#firstHeading {
	border-bottom: 3px solid var(--tf2-orange) !important;
	padding-bottom: 6px !important;
	text-transform: uppercase;
}

h2 {
	border-bottom: 2px solid var(--tf2-panel2) !important;
	background: linear-gradient(180deg, var(--tf2-panel2), var(--tf2-panel)) !important;
	padding: 6px 10px !important;
	margin-top: 24px !important;
}

/* ---------- ССЫЛКИ ---------- */
a          { color: #9fc3e9 !important; }
a:visited  { color: #7fa8c9 !important; }
a.new      { color: #e07a7a !important; }
.mw-parser-output a.external { color: var(--tf2-orange) !important; }

/* ---------- ВКЛАДКИ И КНОПКИ (как меню TF2) ---------- */
div.vectorTabs ul li, #p-cactions li {
	background: var(--tf2-panel2) !important;
	border: 1px solid var(--tf2-border) !important;
}

div.vectorTabs ul li a, #p-cactions li a {
	color: var(--tf2-tan) !important;
	font-family: Impact, 'Arial Black', sans-serif !important;
	text-transform: uppercase;
}

div.vectorTabs ul li:hover, #p-cactions li:hover { background: var(--tf2-orange) !important; }
div.vectorTabs ul li:hover a, #p-cactions li:hover a { color: #fff !important; }

/* ---------- ПОИСК ---------- */
#searchInput {
	background: #221e19 !important;
	border: 1px solid var(--tf2-border) !important;
	color: var(--tf2-text) !important;
}

/* ---------- ИНФОБОКС (карточка босса справа) ---------- */
.infobox, table.infobox {
	background: var(--tf2-panel2) !important;
	border: 2px solid var(--tf2-border) !important;
	box-shadow: 0 3px 10px rgba(0,0,0,.5) !important;
	color: var(--tf2-text) !important;
}

.infobox th, .infobox caption, .infobox .infobox-title {
	background: linear-gradient(180deg, var(--tf2-orange), #a5521f) !important;
	color: #fff !important;
	font-family: Impact, 'Arial Black', sans-serif !important;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.infobox td, .infobox th { border-color: var(--tf2-border) !important; }

/* ---------- ТАБЛИЦЫ ---------- */
table.wikitable {
	background: var(--tf2-panel) !important;
	border: 2px solid var(--tf2-border) !important;
	color: var(--tf2-text) !important;
}

table.wikitable th {
	background: var(--tf2-panel2) !important;
	color: var(--tf2-head) !important;
	font-family: Impact, 'Arial Black', sans-serif !important;
	text-transform: uppercase;
}

table.wikitable td { border-color: #2a2620 !important; }
table.wikitable tr:nth-child(even) td { background: rgba(0,0,0,.15) !important; }

/* ---------- СПИСКИ, ЦИТАТЫ, КОД ---------- */
.mw-parser-output ul li::marker { color: var(--tf2-orange); }

blockquote {
	border-left: 4px solid var(--tf2-orange) !important;
	background: rgba(0,0,0,.25) !important;
	color: var(--tf2-tan) !important;
}

code, pre {
	background: #221e19 !important;
	border: 1px solid var(--tf2-border) !important;
	color: #b5d99c !important;
}

/* ---------- СКРОЛЛБАР В СТИЛЕ TF2 (важно для окна MOTD) ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #221e19; }
::-webkit-scrollbar-thumb {
	background: var(--tf2-panel2);
	border: 2px solid #221e19;
	border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--tf2-orange); }

/* ---------- ИГРОВОЙ ВИД В MOTD: скрыть лишние панели ---------- */
#mw-panel, #p-personal, #p-search, #mw-navigation, #footer, .mw-editsection, #catlinks, #toc { display: none !important; }
#content, .mw-body { margin-left: 0 !important; }
#bodyContent { padding: 20px !important; }


/* =====================================================
   ГЛАВНАЯ СТРАНИЦА: баннер и карточки серверов
   ===================================================== */

/* Главный баннер */
.main-banner {
	background: linear-gradient(180deg, #4a4436 0%, #3b372f 60%, #322e27 100%);
	border: 2px solid #171512;
	border-bottom: 4px solid #cf6a32;
	border-radius: 6px;
	padding: 40px;
	color: #f0e6d2;
	text-align: center;
	margin-bottom: 30px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.55);
	position: relative;
	overflow: hidden;
}

/* Диагональные полосы как на фоне loadout-экрана TF2 */
.main-banner::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: repeating-linear-gradient(45deg, rgba(207,106,50,.06) 0 12px, transparent 12px 24px);
	pointer-events: none;
}

.main-banner h1 {
	font-family: Impact, 'Arial Black', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 2.5em;
	margin-bottom: 15px;
	color: #f0e6d2;
	text-shadow: 0 3px 0 rgba(0,0,0,.6);
	position: relative;
}

/* Карточки серверов */
.server-card {
	background: #3b372f;
	border: 2px solid #171512;
	border-radius: 6px;
	padding: 20px;
	margin: 15px 0;
	box-shadow: 0 4px 12px rgba(0,0,0,.45);
	transition: transform .2s ease, box-shadow .2s ease;
	border-left: 6px solid #cf6a32;
	color: #e8e0d0;
}

.server-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 22px rgba(0,0,0,.6), 0 0 0 1px rgba(207,106,50,.35);
}

.server-card.tf2 {
	border-left-color: #cf6a32;
	background: linear-gradient(to right, #46392c, #3b372f 45%);
}

.server-card.csgo {
	border-left-color: #4a90d9;
	background: linear-gradient(to right, #2e3a46, #3b372f 45%);
}

.server-card.css {
	border-left-color: #d9a441;
	background: linear-gradient(to right, #46402c, #3b372f 45%);
}

/* Заголовки внутри карточек */
.server-card h2, .server-card h3 {
	font-family: Impact, 'Arial Black', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #f0e6d2;
	border-bottom: 2px solid #4a4436;
	padding-bottom: 6px;
}

/* Список фич */
.feature-item {
	padding: 10px 0;
	border-bottom: 1px solid #2a2620;
	color: #cfb894;
}

.feature-item:last-child {
	border-bottom: none;
}

/* Кнопки в стиле меню TF2 */
.btn {
	display: inline-block;
	padding: 10px 24px;
	background: linear-gradient(180deg, #4a4436, #3b372f);
	border: 2px solid #171512;
	border-radius: 4px;
	color: #cfb894;
	font-family: Impact, 'Arial Black', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	margin: 5px;
	transition: background .2s ease, color .2s ease, transform .1s ease;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.btn:hover {
	background: linear-gradient(180deg, #cf6a32, #a5521f);
	color: #fff;
}

.btn:active {
	transform: translateY(1px);
}

/* Анимация появления */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.main-content > div {
	animation: fadeIn 0.6s ease-out;
}