Mafia Closed Circle

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

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

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

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

711 байтів вилучено ,  21 листопад
нема опису редагування
Немає опису редагування
Мітка: Скасовано
Немає опису редагування
Мітка: Скасовано
Рядок 904: Рядок 904:
/* --- СТРУКТУРА СПИСКУ --- */
/* --- СТРУКТУРА СПИСКУ --- */


/* --- ОСНОВНА СТРУКТУРА СПИСКУ --- */
.mcc-heroes-list {
.mcc-heroes-list {
     display: flex;
     display: flex;
Рядок 914: Рядок 915:


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


/* --- СТИЛІ КАРТКИ: ОСНОВНИЙ КОНТЕЙНЕР --- */
/* --- СТИЛІ КАРТКИ: БАЗОВИЙ КОНТЕЙНЕР --- */
 
.mcc-hero-card {
.mcc-hero-card {
     height: 242px;
     height: 242px;
Рядок 931: Рядок 931:
}
}


/* ---------------------------------------------------- */
.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);
}
}


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


/* --- ПОЗИЦІОНУВАННЯ ТА АНІМАЦІЯ ЗОБРАЖЕННЯ --- */
/* --- ПОЗИЦІОНУВАННЯ ЗОБРАЖЕННЯ (ЗАГАЛЬНЕ) --- */
 
/* 1. SPAN контейнер: позиціонування */
.mcc-hero-card .hero-image-wiki {
.mcc-hero-card .hero-image-wiki {
     position: absolute;
     position: absolute;
Рядок 974: Рядок 954:
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     z-index: 0; /* Найнижчий шар */
     z-index: 0;
     overflow: hidden;
     overflow: hidden;
}
}


.mcc-champion-card .hero-image-wiki {
/* --- ЗОБРАЖЕННЯ IMG: МАСШТАБУВАННЯ ТА ПЛАВНІСТЬ (ЗАГАЛЬНЕ) --- */
    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%;
Рядок 994: Рядок 964:
     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-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;
}
 
/* Анімація при наведенні: стандартне збільшення зображення */
.mcc-hero-card:hover .hero-image-wiki img {
.mcc-hero-card:hover .hero-image-wiki img {
     transform: scale(1.1);
     transform: scale(1.1);
}
}


/* ЕЛЕМЕНТ, ЩО АНІМУЄТЬСЯ (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: '';
Рядок 1037: Рядок 981:
     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: 1.5; /* Над зображенням, під інформацією */
     z-index: 1.5;
}
}


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


Рядок 1067: Рядок 1010:
     line-height: 1.2;
     line-height: 1.2;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
/* ==================================================== */
/* СТИЛІ КАРТКИ ЧЕМПІОНА (З ГРАДІЄНТНОЮ РАМКОЮ) */
/* ==================================================== */
.mcc-champion-card {
    /* Наслідує всі властивості від .mcc-hero-card, але змінює деякі */
    border: none; /* Замінюємо border: 1px solid yellow; на градієнт */
}
/* Створюємо градієнтну рамку через псевдоелемент */
.mcc-champion-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    border-radius: 2px; /* Трохи більше за .mcc-hero-card (0px) для видимості рамки */
    background: linear-gradient(
        45deg,
        #FFD700 0%,
        #FFFFE0 30%,
        #FFD700 70%,
        #B8860B 100%
    );
}
/* Більш виражена тінь/світіння при наведенні на картку чемпіона */
.mcc-champion-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 215, 0, 0.7);
}
}
Отримано з https://mafiacc.site/index.php/Спеціальна:Мобільна_різниця_версій/3633