5494
редагування
MediaWiki:Common.css: відмінності між версіями
нема опису редагування
Admin (обговорення | внесок) Немає опису редагування |
Admin (обговорення | внесок) Немає опису редагування |
||
| Рядок 904: | Рядок 904: | ||
/* ==================================================== */ | /* ==================================================== */ | ||
/* ОНОВЛЕНІ СТИЛІ ДЛЯ КАРТОК ГЕРОЇВ (ВИКОРИСТОВУЄМО ВБУДОВАНЕ IMG) */ | /* ОНОВЛЕНІ СТИЛІ ДЛЯ КАРТОК ГЕРОЇВ (ВИКОРИСТОВУЄМО ВБУДОВАНЕ IMG) */ | ||
/* ==================================================== */ | |||
/* ==================================================== */ | |||
/* ОНОВЛЕНІ СТИЛІ ДЛЯ КАРТОК ГЕРОЇВ (ЗІ СКЕЙЛОМ ЗОБРАЖЕННЯ ТА ПОКРАЩЕНИМ ГРАДІЄНТОМ) */ | |||
/* ==================================================== */ | /* ==================================================== */ | ||
| Рядок 922: | Рядок 926: | ||
/* Стилі картки - зовнішній контейнер */ | /* Стилі картки - зовнішній контейнер */ | ||
.mcc-hero-card { | .mcc-hero-card { | ||
height: 200px; | height: 200px; /* Ваша нова висота */ | ||
width: 100%; | width: 100%; | ||
border: 1px solid rgba(255,255,255,0.1); | border: 1px solid rgba(255,255,255,0.1); | ||
border-radius: 12px; /* Додаємо border-radius, якщо він був */ | |||
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: | background-color: #333; /* Загальний фон на випадок, якщо зображення не завантажилось */ | ||
transition: | transition: box-shadow 0.3s ease-in-out; /* Анімація тільки тіні для картки */ | ||
} | } | ||
| Рядок 940: | Рядок 945: | ||
text-decoration: none; | text-decoration: none; | ||
color: white; | color: white; | ||
z-index: 2; | z-index: 2; /* Щоб посилання було клікабельним */ | ||
overflow: hidden; /* Важливо для обрізання зображення при масштабуванні */ | |||
} | } | ||
| Рядок 949: | Рядок 955: | ||
/* Цільові елементи, згенеровані MediaWiki для зображення */ | /* Цільові елементи, згенеровані MediaWiki для зображення */ | ||
.mcc-hero-card .hero-image-wiki { | .mcc-hero-card .hero-image-wiki { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
| Рядок 955: | Рядок 960: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
object-fit: cover; | object-fit: cover; | ||
z-index: 0; | |||
/* | /* АНІМАЦІЯ СКЕЙЛА ЗОБРАЖЕННЯ! */ | ||
transform: scale(1); /* Початковий розмір */ | |||
transition: transform 0.3s ease-in-out; /* Анімація масштабування */ | |||
} | |||
/* Анімація при наведенні: збільшення зображення */ | |||
.mcc-hero-card:hover .hero-image-wiki { | |||
transform: scale(1.1); /* Збільшуємо зображення на 10% */ | |||
} | } | ||
/* Градієнт (Напівпрозорий градієнт для читабельності тексту) */ | /* Градієнт (Напівпрозорий градієнт для читабельності тексту) */ | ||
/* Змінено для кращої читабельності та плавного переходу */ | |||
.mcc-hero-link::after { | .mcc-hero-link::after { | ||
content: ''; | content: ''; | ||
| Рядок 971: | Рядок 982: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
background: linear-gradient(to top, rgba(0, 0, 0, 0. | /* Новий градієнт: починається прозорим, переходить у 60% чорний знизу */ | ||
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; /* Над зображенням, але під текстом */ | ||
transition: background 0.3s ease-in-out; /* Анімація градієнта */ | |||
} | } | ||
/* Інформаційний блок */ | /* Інформаційний блок */ | ||
| Рядок 995: | Рядок 1003: | ||
font-size: 14px; | font-size: 14px; | ||
color: white; | color: white; | ||
font-weight: bold; /* Додав bold для більшої читабельності */ | |||
line-height: 1.2; | line-height: 1.2; | ||
text-shadow: | text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Покращив тінь для тексту */ | ||
} | } | ||
| Рядок 1004: | Рядок 1013: | ||
opacity: 0.9; | opacity: 0.9; | ||
line-height: 1.2; | line-height: 1.2; | ||
text-shadow: | text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Покращив тінь для тексту */ | ||
} | |||
/* При наведенні на картку можна змінити тінь, але рамка сама не масштабується */ | |||
.mcc-hero-card:hover { | |||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Більш виражена тінь при наведенні */ | |||
} | } | ||