Mafia Closed Circle

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

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

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

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

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


/* --- СТРУКТУРА СПИСКУ --- */
.mcc-heroes-list {


/* --- ОСНОВНА СТРУКТУРА СПИСКУ --- */
.mcc-heroes-list {
     display: flex;
     display: flex;
     flex-wrap: wrap;
     flex-wrap: wrap;
     justify-content: space-between;
     justify-content: space-between;
     list-style: none;
     list-style: none;
     padding: 0;
     padding: 0;
     margin: 20px 0;
     margin: 20px 0;
}
}


.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;
}
}


/* --- СТИЛІ КАРТКИ: БАЗОВИЙ КОНТЕЙНЕР --- */
 
 
/* --- СТИЛІ КАРТКИ: ОСНОВНИЙ КОНТЕЙНЕР --- */
 
 
 
.mcc-hero-card {
.mcc-hero-card {
     height: 242px;
     height: 242px;
     width: 100%;
     width: 100%;
     border-radius: 0px;
     border-radius: 0px;
     overflow: hidden;
     overflow: hidden;
     position: relative;
     position: relative;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     background-color: #333;
     background-color: #333;
     transition: box-shadow 0.3s ease-in-out;
     transition: box-shadow 0.3s ease-in-out;
}
/* ---------------------------------------------------- */
/* КЛАС КАРТКИ ЧЕМПІОНА (З ГРАДІЄНТНОЮ РАМКОЮ) */
/* ---------------------------------------------------- */
.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-hero-card:hover {
 
 
 
 
.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;
     height: 100%;
     height: 100%;
     width: 100%;
     width: 100%;
     position: relative;
     position: relative;
     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;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Найнижчий шар */
    overflow: hidden;
}
.mcc-champion-card .hero-image-wiki {
     position: absolute;
     position: absolute;
     top: 0;
     top: 0;
     left: 0;
     left: 0;
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     z-index: 0;
 
     z-index: 0; /* Найнижчий шар */
 
     overflow: hidden;
     overflow: hidden;
}
}


/* --- ЗОБРАЖЕННЯ IMG: МАСШТАБУВАННЯ ТА ПЛАВНІСТЬ (ЗАГАЛЬНЕ) --- */
 
 
/* 2. IMG елемент: масштабування та ефекти */
 
.mcc-hero-card .hero-image-wiki img {
.mcc-hero-card .hero-image-wiki img {
     width: 100%;
     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-champion-card .hero-image-wiki img {
    width: 100%;
     height: 100%;
     height: 100%;
     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);
}
/* ЕЛЕМЕНТ, ЩО АНІМУЄТЬСЯ (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);
     transform: scale(1.1);
}
}


/* --- ГРАДІЄНТ ПОКРИТТЯ --- */
 
 
 
 
.mcc-hero-link::after {
.mcc-hero-link::after {
     content: '';
     content: '';
     position: absolute;
     position: absolute;
     top: 0;
     top: 0;
     left: 0;
     left: 0;
     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;
     bottom: 10px;
     bottom: 10px;
     width: 100%;
     width: 100%;
     text-align: center;
     text-align: center;
     padding: 0 5px;
     padding: 0 5px;
     box-sizing: border-box;
     box-sizing: border-box;
     z-index: 3;
 
     z-index: 3; /* Найвищий шар */
 
}
}


.mcc-hero-nickname {
.mcc-hero-nickname {
     font-size: 14px;
     font-size: 14px;
     color: white;
     color: white;
     font-weight: bold;
     font-weight: bold;
     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-hero-date {
.mcc-hero-date {
     font-size: 14px;
     font-size: 14px;
     color: yellow;
     color: yellow;
     opacity: 0.9;
     opacity: 0.9;
     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/Спеціальна:Мобільна_різниця_версій/3634