Mafia Closed Circle

MediaWiki:Common.css: відмінності між версіями

Повідомлення Обговорення

MediaWiki:Common.css (переглянути вихідний код)

Версія за 22:57, 21 листопада 2025

615 байтів додано ,  21 листопад
нема опису редагування
Немає опису редагування
Мітка: Скасовано
Немає опису редагування
Мітки: Ручний відкіт Скасовано
Рядок 902: Рядок 902:
}
}


/* --- 1. СТРУКТУРА СПИСКУ --- */
.mcc-heroes-list {
.mcc-heroes-list {
     display: flex;
     display: flex;
Рядок 913: Рядок 912:


.mcc-heroes-list li {
.mcc-heroes-list li {
     width: 18.5%;
     width: 18.5%; /* 5 карток на рядок (5 * 18.5% = 92.5%. Решта - простір між ними) */
     margin-bottom: 20px;
     margin-bottom: 20px;
}
}


/* --- 2. БАЗОВА КАРТКА (.mcc-hero-card) --- */
/* --- СТИЛІ КАРТКИ: ОСНОВНИЙ КОНТЕЙНЕР --- */
 
.mcc-hero-card {
.mcc-hero-card {
     height: 242px;
     height: 242px;
Рядок 927: Рядок 927:
     background-color: #333;
     background-color: #333;
     transition: box-shadow 0.3s ease-in-out;
     transition: box-shadow 0.3s ease-in-out;
    /* Видалено стандартний 'border' для уніфікації */
    border: 1px solid rgba(255, 255, 255, 0.1);
}
}


.mcc-hero-card:hover {
/* ---------------------------------------------------- */
/* КЛАС КАРТКИ ЧЕМПІОНА (З ГРАДІЄНТНОЮ РАМКОЮ) */
/* ---------------------------------------------------- */
 
.mcc-champion-card {
height: 242px;
width: 100%;
border: 1px solid yellow;
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;
}
 
 
.mcc-champion-card:hover {
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
}


/* --- 3. КЛІКАБЕЛЬНЕ ПОСИЛАННЯ (КОНТЕЙНЕР) --- */
/* --- СТИЛІ ПОСИЛАННЯ (Контейнер вмісту) --- */
 
.mcc-hero-link {
.mcc-hero-link {
     display: block;
     display: block;
Рядок 943: Рядок 959:
     text-decoration: none;
     text-decoration: none;
     color: white;
     color: white;
     /* ЗБІЛЬШЕНО Z-INDEX: Гарантує клікабельність, ставлячи посилання над усім */
     z-index: 2; /* Вище зображення, але нижче градієнта/інфо */
    z-index: 10;
     overflow: hidden;
     overflow: hidden;
}
}


/* --- 4. ЗОБРАЖЕННЯ ТА АНІМАЦІЯ (ЗАГАЛЬНЕ) --- */
/* --- ПОЗИЦІОНУВАННЯ ТА АНІМАЦІЯ ЗОБРАЖЕННЯ --- */


/* Контейнер зображення (SPAN) */
/* 1. SPAN контейнер: позиціонування */
.mcc-hero-card .hero-image-wiki {
.mcc-hero-card .hero-image-wiki {
     position: absolute;
     position: absolute;
Рядок 957: Рядок 972:
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
    /* Знижуємо Z-INDEX, щоб він був під посиланням */
     z-index: 0; /* Найнижчий шар */
     z-index: 0;
     overflow: hidden;
     overflow: hidden;
}
}


/* Елемент IMG: плавність та масштабування */
.mcc-champion-card .hero-image-wiki {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Найнижчий шар */
    overflow: hidden;
}
 
/* 2. IMG елемент: масштабування та ефекти */
.mcc-hero-card .hero-image-wiki img {
.mcc-hero-card .hero-image-wiki img {
     width: 100%;
     width: 100%;
Рядок 968: Рядок 992:
     object-fit: cover;
     object-fit: cover;
     transform: scale(1);
     transform: scale(1);
     /* Забезпечення плавності для всіх ефектів (transform, filter, opacity) */
     /* Анімує збільшення, фільтри та прозорість */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
 
.mcc-champion-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;
     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);
}
}


/* --- 5. ГРАДІЄНТНЕ ПОКРИТТЯ (Над зображенням, під текстом) --- */
/* ЕЛЕМЕНТ, ЩО АНІМУЄТЬСЯ (hero-image-wiki img) */
.mcc-champion-card .hero-image-wiki img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1); /* Початковий стан */
   
    /* ДОДАНО: Вказує, що зміна властивості transform має відбуватися плавно протягом 0.3 секунди */
    transition: transform 0.3s ease-in-out;
}
 
/* СТАН ПРИ НАВЕДЕННІ (анімація) */
.mcc-champion-card:hover .hero-image-wiki img {
    /* Ця зміна тепер буде плавною завдяки transition вище */
    transform: scale(1.1);
}
 
 
.mcc-hero-link::after {
.mcc-hero-link::after {
     content: '';
     content: '';
Рядок 985: Рядок 1035:
     width: 100%;
     width: 100%;
     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%);
    /* Встановлюємо нижче, ніж Z-INDEX посилання (10) і тексту (3) */
     z-index: 1.5; /* Над зображенням, під інформацією */
     z-index: 1;
}
}


/* --- 6. ІНФОРМАЦІЙНИЙ БЛОК (Ім'я та Дата) --- */
 
.mcc-hero-info {
.mcc-hero-info {
     position: absolute;
     position: absolute;
Рядок 998: Рядок 1048:
     padding: 0 5px;
     padding: 0 5px;
     box-sizing: border-box;
     box-sizing: border-box;
     /* Найвищий шар, окрім посилання */
     z-index: 3; /* Найвищий шар */
    z-index: 3;
}
}


Рядок 1017: Рядок 1066:
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
}
/* --- 7. КАРТКА ЧЕМПІОНА (СПЕЦИФІЧНІ СТИЛІ) --- */
.mcc-champion-card {
    /* Перезаписуємо звичайний 'border' */
    border: 1px solid yellow;
}
.mcc-champion-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
/* Плавність та масштабування для чемпіона використовується загальний блок 4 */
/* .mcc-champion-card .hero-image-wiki img та :hover - ВИДАЛЕНО як дублювання */
/* Якщо потрібно додати градієнтну рамку чемпіона, використовуйте цей блок: */
/* .mcc-champion-card::before { ... z-index: 0.5; } */
Отримано з https://mafiacc.site/index.php/Спеціальна:Мобільна_різниця_версій/3637