MediaWiki:Timeless.css: различия между версиями
Материал из Игровой проект Хаос Тайги
Elite (обсуждение | вклад) Новая страница: «→=== КАСТОМНЫЙ ДИЗАЙН ГЛАВНОЙ СТРАНИЦЫ ДЛЯ TIMELESS ===: →Главный баннер-приветствие: .hero-banner { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #ffffff; padding: 40px 20px; border-radius: 12px; text-align: center; margin-bottom: 30px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); } .hero-banner h1 { font-size: 2.2em; margin: 0 0 10px 0;...» |
Elite (обсуждение | вклад) Нет описания правки |
||
| (не показано 12 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
/* === | /* === Стили для главной страницы === */ | ||
/* | /* Баннер */ | ||
.hero-banner { | .hero-banner { | ||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | ||
color: | color: white; | ||
padding: | padding: 30px; | ||
border-radius: | border-radius: 10px; | ||
text-align: center; | text-align: center; | ||
margin-bottom: | margin-bottom: 25px; | ||
} | } | ||
.hero-banner h1 { | .hero-banner h1 { | ||
margin: 0 0 10px 0; | margin: 0 0 10px 0; | ||
font- | font-size: 2em; | ||
} | } | ||
.hero-banner p { | .hero-banner p { | ||
margin: 0; | |||
font-size: 1.1em; | font-size: 1.1em; | ||
opacity: 0.9; | opacity: 0.9; | ||
} | } | ||
/* | /* Таблица карточек */ | ||
.server- | .server-table { | ||
width: 100%; | |||
border: none; | |||
border-spacing: 15px; | |||
margin-bottom: | margin-bottom: 25px; | ||
} | |||
.server-table td { | |||
padding: 0; | |||
vertical-align: top; | |||
width: 50%; | |||
} | } | ||
/* | /* Карточка сервера */ | ||
.server-card { | .server-card { | ||
background: #f8f9fa; | |||
background: # | |||
border-radius: 10px; | border-radius: 10px; | ||
padding: | padding: 20px; | ||
border-left: 5px solid #ccc; | |||
border-top: 5px solid #ccc; | border-top: 5px solid #ccc; | ||
transition: transform 0.2s ease, box-shadow 0.2s ease; | transition: transform 0.2s ease, box-shadow 0.2s ease; | ||
min-height: 180px; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-between; | |||
} | } | ||
.server-card:hover { | .server-card:hover { | ||
transform: translateY(- | transform: translateY(-4px); | ||
box-shadow: 0 8px | box-shadow: 0 8px 20px rgba(0,0,0,0.12); | ||
} | |||
/* Цветовые акценты */ | |||
.server-card.tf2-vsh { | |||
border-left-color: #e67e22; | |||
border-top-color: #e67e22; | |||
} | } | ||
.server-card.tf2-mm { | |||
.server-card.tf2 { border- | border-left-color: #d35400; | ||
border-top-color: #d35400; | |||
} | |||
.server-card | .server-card.csgo { | ||
border-left-color: #3498db; | |||
border-top-color: #3498db; | |||
} | } | ||
.server-card.css { | |||
.server-card | border-left-color: #f1c40f; | ||
border-top-color: #f1c40f; | |||
} | } | ||
.server-card | |||
margin | .server-card h3 { | ||
margin: 0 0 10px 0; | |||
font-size: 1.2em; | |||
} | } | ||
.server-card | |||
.server-card p { | |||
margin: 0 0 15px 0; | |||
color: #555; | |||
font-size: 0.95em; | |||
} | } | ||
.server-card | |||
.server-card a { | |||
text-decoration: none; | text-decoration: none; | ||
color: | color: inherit; | ||
display: block; | |||
} | } | ||
.server-card | |||
color: #e67e22; | .server-card .go-link { | ||
color: #e67e22; | |||
font-weight: bold; | |||
font-size: 0.9em; | |||
} | } | ||
/* Блок быстрых ссылок | /* Блок быстрых ссылок */ | ||
.quick-links { | .quick-links-box { | ||
background: #f8f9fa; | background: #f8f9fa; | ||
padding: 20px; | padding: 20px; | ||
border-radius: 8px; | |||
text-align: center; | text-align: center; | ||
margin-top: 25px; | |||
} | } | ||
.quick-links a { | |||
.quick-links-box a { | |||
display: inline-block; | display: inline-block; | ||
margin: 5px | margin: 5px 8px; | ||
padding: 8px 16px; | padding: 8px 16px; | ||
background: #2a2a2a; | background: #2a2a2a; | ||
color: | color: #ffffff; | ||
border-radius: 6px; | border-radius: 6px; | ||
text-decoration: none; | text-decoration: none; | ||
font-weight: 600; | font-weight: 600; | ||
} | } | ||
.quick-links a:hover { | |||
.quick-links-box a:hover { | |||
background: #e67e22; | background: #e67e22; | ||
} | } | ||
Текущая версия от 13:27, 4 ноября 2026
/* === Стили для главной страницы === */
/* Баннер */
.hero-banner {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
margin-bottom: 25px;
}
.hero-banner h1 {
margin: 0 0 10px 0;
font-size: 2em;
}
.hero-banner p {
margin: 0;
font-size: 1.1em;
opacity: 0.9;
}
/* Таблица карточек */
.server-table {
width: 100%;
border: none;
border-spacing: 15px;
margin-bottom: 25px;
}
.server-table td {
padding: 0;
vertical-align: top;
width: 50%;
}
/* Карточка сервера */
.server-card {
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
border-left: 5px solid #ccc;
border-top: 5px solid #ccc;
transition: transform 0.2s ease, box-shadow 0.2s ease;
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.server-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
/* Цветовые акценты */
.server-card.tf2-vsh {
border-left-color: #e67e22;
border-top-color: #e67e22;
}
.server-card.tf2-mm {
border-left-color: #d35400;
border-top-color: #d35400;
}
.server-card.csgo {
border-left-color: #3498db;
border-top-color: #3498db;
}
.server-card.css {
border-left-color: #f1c40f;
border-top-color: #f1c40f;
}
.server-card h3 {
margin: 0 0 10px 0;
font-size: 1.2em;
}
.server-card p {
margin: 0 0 15px 0;
color: #555;
font-size: 0.95em;
}
.server-card a {
text-decoration: none;
color: inherit;
display: block;
}
.server-card .go-link {
color: #e67e22;
font-weight: bold;
font-size: 0.9em;
}
/* Блок быстрых ссылок */
.quick-links-box {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
text-align: center;
margin-top: 25px;
}
.quick-links-box a {
display: inline-block;
margin: 5px 8px;
padding: 8px 16px;
background: #2a2a2a;
color: #ffffff;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
}
.quick-links-box a:hover {
background: #e67e22;
}