5494
редагування
MediaWiki:Common.css: відмінності між версіями
нема опису редагування
Admin (обговорення | внесок) Немає опису редагування Мітка: Ручний відкіт |
Admin (обговорення | внесок) Немає опису редагування |
||
| Рядок 902: | Рядок 902: | ||
} | } | ||
.mcc-heroes-list { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; padding: 0; margin: 20px 0; } .mcc-heroes-list li { width: 18.5%; margin-bottom: 20px; } /* | /* --- 1. СТРУКТУРА СПИСКУ --- */ | ||
.mcc-heroes-list { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
list-style: none; | |||
padding: 0; | |||
margin: 20px 0; | |||
} | |||
.mcc-heroes-list li { | |||
width: 18.5%; | |||
margin-bottom: 20px; | |||
} | |||
/* --- 2. БАЗОВА КАРТКА (.mcc-hero-card) --- */ | |||
.mcc-hero-card { | |||
height: 242px; | |||
width: 100%; | |||
border-radius: 0px; | |||
overflow: hidden; | |||
position: relative; | |||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | |||
background-color: #333; | |||
transition: box-shadow 0.3s ease-in-out; | |||
border: 1px solid rgba(255, 255, 255, 0.1); | |||
} | |||
.mcc-hero-card:hover { | |||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); | |||
} | |||
/* --- 3. КЛІКАБЕЛЬНЕ ПОСИЛАННЯ (КОНТЕЙНЕР) --- */ | |||
.mcc-hero-link { | |||
display: block; | |||
height: 100%; | |||
width: 100%; | |||
position: relative; | |||
text-decoration: none; | |||
color: white; | |||
/* ВИСОКИЙ Z-INDEX: Гарантує клікабельність, ставлячи посилання над усім */ | |||
z-index: 10; | |||
overflow: hidden; | |||
} | |||
/* --- 4. ЗОБРАЖЕННЯ ТА АНІМАЦІЯ (ЗАГАЛЬНЕ) --- */ | |||
/* Контейнер зображення (SPAN) */ | |||
.mcc-hero-card .hero-image-wiki { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
/* ЗНИЖЕНО Z-INDEX */ | |||
z-index: 0; | |||
overflow: hidden; | |||
} | |||
/* Елемент IMG: плавність та масштабування */ | |||
.mcc-hero-card .hero-image-wiki img { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
transform: scale(1); | |||
/* ЄДИНИЙ БЛОК ДЛЯ ПЛАВНОСТІ */ | |||
transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out; | |||
} | |||
/* Анімація при наведенні (загальна) */ | |||
.mcc-hero-card:hover .hero-image-wiki img { | |||
transform: scale(1.1); | |||
} | |||
/* --- 5. ГРАДІЄНТНЕ ПОКРИТТЯ (Над зображенням, під текстом) --- */ | |||
.mcc-hero-link::after { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.0) 50%); | |||
/* Встановлюємо нижче, ніж посилання (10) та текст (3) */ | |||
z-index: 1; | |||
} | |||
/* --- 6. ІНФОРМАЦІЙНИЙ БЛОК (Ім'я та Дата) --- */ | |||
.mcc-hero-info { | |||
position: absolute; | |||
bottom: 10px; | |||
width: 100%; | |||
text-align: center; | |||
padding: 0 5px; | |||
box-sizing: border-box; | |||
/* Над градієнтом, але під посиланням */ | |||
z-index: 3; | |||
} | |||
.mcc-hero-nickname { | |||
font-size: 14px; | |||
color: white; | |||
font-weight: bold; | |||
line-height: 1.2; | |||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); | |||
} | |||
.mcc-hero-date { | |||
font-size: 14px; | |||
color: yellow; | |||
opacity: 0.9; | |||
line-height: 1.2; | |||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); | |||
} | |||
/* --- 7. КАРТКА ЧЕМПІОНА (СПЕЦИФІЧНІ СТИЛІ) --- */ | |||
/* Наслідує всі загальні стилі, змінює тільки рамку/тінь */ | |||
.mcc-champion-card { | |||
border: 1px solid yellow; | |||
} | |||
.mcc-champion-card:hover { | |||
/* Додано золоте світіння, щоб виділити чемпіона при наведенні */ | |||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 215, 0, 0.7); | |||
} | |||