|
|
| Строка 1: |
Строка 1: |
| /* =====================================================
| |
| 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 { | | .main-banner { |
| background: linear-gradient(180deg, #4a4436 0%, #3b372f 60%, #322e27 100%);
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| border: 2px solid #171512;
| | border-radius: 15px; |
| border-bottom: 4px solid #cf6a32;
| | padding: 40px; |
| border-radius: 6px;
| | color: white; |
| padding: 40px;
| | text-align: center; |
| color: #f0e6d2;
| | margin-bottom: 30px; |
| text-align: center;
| | box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
| 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 { | | .main-banner h1 { |
| font-family: Impact, 'Arial Black', sans-serif;
| | font-size: 2.5em; |
| text-transform: uppercase;
| | margin-bottom: 15px; |
| letter-spacing: 2px;
| | text-shadow: 2px 2px 4px rgba(0,0,0,0.3); |
| font-size: 2.5em;
| |
| margin-bottom: 15px;
| |
| color: #f0e6d2;
| |
| text-shadow: 0 3px 0 rgba(0,0,0,.6);
| |
| position: relative;
| |
| } | | } |
|
| |
|
| /* Карточки серверов */ | | /* Карточки серверов */ |
| .server-card { | | .server-card { |
| background: #3b372f;
| | background: white; |
| border: 2px solid #171512;
| | border-radius: 10px; |
| border-radius: 6px;
| | padding: 20px; |
| padding: 20px;
| | margin: 15px 0; |
| margin: 15px 0;
| | box-shadow: 0 4px 15px rgba(0,0,0,0.1); |
| box-shadow: 0 4px 12px rgba(0,0,0,.45);
| | transition: transform 0.3s ease, box-shadow 0.3s ease; |
| transition: transform .2s ease, box-shadow .2s ease;
| | border-left: 5px solid #667eea; |
| border-left: 6px solid #cf6a32;
| |
| color: #e8e0d0;
| |
| } | | } |
|
| |
|
| .server-card:hover { | | .server-card:hover { |
| transform: translateY(-4px);
| | transform: translateY(-5px); |
| box-shadow: 0 8px 22px rgba(0,0,0,.6), 0 0 0 1px rgba(207,106,50,.35);
| | box-shadow: 0 8px 25px rgba(0,0,0,0.15); |
| } | | } |
|
| |
|
| .server-card.tf2 { | | .server-card.tf2 { |
| border-left-color: #cf6a32;
| | border-left-color: #e67e22; |
| background: linear-gradient(to right, #46392c, #3b372f 45%);
| | background: linear-gradient(to right, #fff5eb, #ffffff); |
| } | | } |
|
| |
|
| .server-card.csgo { | | .server-card.csgo { |
| border-left-color: #4a90d9;
| | border-left-color: #3498db; |
| background: linear-gradient(to right, #2e3a46, #3b372f 45%);
| | background: linear-gradient(to right, #ebf5ff, #ffffff); |
| } | | } |
|
| |
|
| .server-card.css { | | .server-card.css { |
| border-left-color: #d9a441;
| | border-left-color: #f39c12; |
| background: linear-gradient(to right, #46402c, #3b372f 45%);
| | background: linear-gradient(to right, #fff8eb, #ffffff); |
| } | | } |
|
| |
|
| /* Заголовки внутри карточек */ | | /* Иконки и эмодзи */ |
| .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 { | | .feature-item { |
| padding: 10px 0;
| | padding: 10px 0; |
| border-bottom: 1px solid #2a2620;
| | border-bottom: 1px solid #eee; |
| color: #cfb894;
| |
| } | | } |
|
| |
|
| .feature-item:last-child { | | .feature-item:last-child { |
| border-bottom: none;
| | border-bottom: none; |
| } | | } |
|
| |
|
| /* Кнопки в стиле меню TF2 */ | | /* Кнопки */ |
| .btn { | | .btn { |
| display: inline-block;
| | display: inline-block; |
| padding: 10px 24px;
| | padding: 12px 25px; |
| background: linear-gradient(180deg, #4a4436, #3b372f);
| | background: #667eea; |
| border: 2px solid #171512;
| | color: white; |
| border-radius: 4px;
| | text-decoration: none; |
| color: #cfb894;
| | border-radius: 5px; |
| font-family: Impact, 'Arial Black', sans-serif;
| | margin: 5px; |
| text-transform: uppercase;
| | transition: background 0.3s ease; |
| 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 { | | .btn:hover { |
| background: linear-gradient(180deg, #cf6a32, #a5521f);
| | background: #5568d3; |
| color: #fff;
| |
| }
| |
| | |
| .btn:active {
| |
| transform: translateY(1px);
| |
| } | | } |
|
| |
|
| /* Анимация появления */ | | /* Анимация */ |
| @keyframes fadeIn { | | @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); }
| | from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); }
| | to { opacity: 1; transform: translateY(0); } |
| } | | } |
|
| |
|
| .main-content > div { | | .main-content > div { |
| animation: fadeIn 0.6s ease-out;
| | animation: fadeIn 0.6s ease-out; |
| } | | } |
/* Главный баннер */
.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;
}