5494
редагування
MediaWiki:Common.css: відмінності між версіями
нема опису редагування
Admin (обговорення | внесок) Немає опису редагування |
Admin (обговорення | внесок) Немає опису редагування |
||
| Рядок 902: | Рядок 902: | ||
} | } | ||
/* --- | /* --- ОСНОВНИЙ КОНТЕЙНЕР СПИСКУ --- */ | ||
.mcc-heroes-list { | .mcc-heroes-list { | ||
display: flex; | display: flex; | ||
| Рядок 917: | Рядок 917: | ||
} | } | ||
/* --- | /* --- КАРТКА (БАЗОВА) --- */ | ||
.mcc-hero-card { | .mcc-hero-card { | ||
height: 242px; | height: 242px; | ||
| Рядок 934: | Рядок 934: | ||
} | } | ||
/* --- | /* --- КЛІКАБЕЛЬНЕ ПОСИЛАННЯ (ГОЛОВНИЙ ШАР) --- */ | ||
.mcc-hero-link { | .mcc-hero-link { | ||
display: block; | display: block; | ||
| Рядок 942: | Рядок 942: | ||
text-decoration: none; | text-decoration: none; | ||
color: white; | color: white; | ||
/* | /* ГАРАНТІЯ КЛІКАБЕЛЬНОСТІ: Високе значення Z-index */ | ||
z-index: | z-index: 100; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
/* --- | /* --- КОНТЕЙНЕР ЗОБРАЖЕННЯ (SPAN/Елемент вікі) --- */ | ||
/* Цей блок стилізує елемент, який створює вікі-розмітка */ | |||
/* | |||
.mcc-hero-card .hero-image-wiki { | .mcc-hero-card .hero-image-wiki { | ||
position: absolute; | position: absolute; | ||
| Рядок 956: | Рядок 955: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
/* | /* Z-index 0 */ | ||
z-index: 0; | z-index: 0; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
/* | /* --- ЗОБРАЖЕННЯ IMG: ПЛАВНІСТЬ ТА МАСШТАБУВАННЯ --- */ | ||
.mcc-hero-card .hero-image-wiki img { | .mcc-hero-card .hero-image-wiki img { | ||
width: 100%; | width: 100%; | ||
| Рядок 967: | Рядок 966: | ||
object-fit: cover; | object-fit: cover; | ||
transform: scale(1); | transform: scale(1); | ||
transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out; | 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 { | .mcc-hero-card:hover .hero-image-wiki img { | ||
transform: scale(1.1); | transform: scale(1.1); | ||
} | } | ||
/* --- | /* --- ГРАДІЄНТНЕ ПОКРИТТЯ --- */ | ||
.mcc-hero-link::after { | .mcc-hero-link::after { | ||
content: ''; | content: ''; | ||
| Рядок 985: | Рядок 982: | ||
height: 100%; | height: 100%; | ||
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.0) 50%); | background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.0) 50%); | ||
/* | /* Нижче, ніж посилання (100) та текст (3) */ | ||
z-index: 1; | z-index: 1; | ||
} | } | ||
/* --- | /* --- ІНФОРМАЦІЙНИЙ БЛОК --- */ | ||
.mcc-hero-info { | .mcc-hero-info { | ||
position: absolute; | position: absolute; | ||
| Рядок 997: | Рядок 994: | ||
padding: 0 5px; | padding: 0 5px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
/* Над градієнтом | /* Над градієнтом */ | ||
z-index: 3; | z-index: 3; | ||
} | } | ||
| Рядок 1017: | Рядок 1014: | ||
} | } | ||
/* --- | /* --- КАРТКА ЧЕМПІОНА --- */ | ||
.mcc-champion-card { | .mcc-champion-card { | ||
border: 1px solid yellow; | border: 1px solid yellow; | ||
} | } | ||