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

/* Главный баннер */
.main-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 40px;
    color: white;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.main-banner h1 {
    font-size: 2.5em;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Карточки серверов */
.server-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 5px solid #667eea;
}

.server-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.server-card.tf2 {
    border-left-color: #e67e22;
    background: linear-gradient(to right, #fff5eb, #ffffff);
}

.server-card.csgo {
    border-left-color: #3498db;
    background: linear-gradient(to right, #ebf5ff, #ffffff);
}

.server-card.css {
    border-left-color: #f39c12;
    background: linear-gradient(to right, #fff8eb, #ffffff);
}

/* Иконки и эмодзи */
.feature-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

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

/* Кнопки */
.btn {
    display: inline-block;
    padding: 12px 25px;
    background: #667eea;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 5px;
    transition: background 0.3s ease;
}

.btn:hover {
    background: #5568d3;
}

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

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

/* =====================================================
   TF2 STYLE — вики «Хаос Тайги»
   ===================================================== */

/* Шрифты — бесплатные аналоги TF2 Secondary / TF2 Build */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Oswald:wght@500;600;700&display=swap');

/* Палитра 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: 'Roboto Condensed', 'TF2 Secondary', 'Arial Narrow', Arial, 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: 'Oswald', 'TF2 Build', 'Roboto Condensed', 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; }   /* светлый BLU */
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: 'Oswald', 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: 'Oswald', 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: 'Oswald', 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); }

/* ---------- ОПЦИОНАЛЬНО: чистый «игровой» вид ----------
   Раскомментируйте, чтобы убрать меню/панели и оставить только статью:

#mw-panel, #p-personal, #p-search, #mw-navigation, #footer, .mw-editsection { display: none !important; }
.mw-body { margin-left: 0 !important; }
*/