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

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

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

896 байтів вилучено , 21 листопад

нема опису редагування

Admin

Бюрократи, Адміністратори інтерфейсу, Адміністратори

5494

редагування

@@ Рядок 903: / Рядок 903: @@
 /* ==================================================== */
-/* БАЗОВІ СТИЛІ КАРТОК ГЕРОЇВ */
+/* СЕКЦІЯ СТИЛІВ КАРТОК ГЕРОЇВ */
 /* ==================================================== */
@@ Рядок 942: / Рядок 942: @@
      color: white;
      z-index: 2;
-     overflow: hidden; /* Важливо для обрізання зображення при масштабуванні */
+     overflow: hidden;
 }
 /* ---------------------------------------------------- */
-/* СТИЛІ ДЛЯ ВБУДОВАНОГО ЗОБРАЖЕННЯ (IMG) */
+/* ПОЗИЦІОНУВАННЯ ТА АНІМАЦІЯ ЗОБРАЖЕННЯ */
 /* ---------------------------------------------------- */
+/* 1. SPAN контейнер: позиціонування */
 .mcc-hero-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 {
      width: 100%;
      height: 100%;
      object-fit: cover;
-    z-index: 0;
-    /* АНІМАЦІЯ СКЕЙЛА ЗОБРАЖЕННЯ! */
      transform: scale(1);
      transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
@@ Рядок 964: / Рядок 970: @@
 /* Анімація при наведенні: стандартне збільшення зображення */
-.mcc-hero-card:hover .hero-image-wiki {
+.mcc-hero-card:hover .hero-image-wiki img {
    transform: scale(1.1);
 }
-/* Градієнт (Напівпрозорий градієнт для читабельності тексту) */
+/* Градієнт */
 .mcc-hero-link::after {
      content: '';
@@ Рядок 976: / Рядок 982: @@
      width: 100%;
      height: 100%;
-    /* Градієнт: 70% чорного знизу, плавно до прозорого на 50% висоти */
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.0) 50%);
      z-index: 1.5;
@@ Рядок 1008: / Рядок 1013: @@
 }
-/* При наведенні на картку */
 .mcc-hero-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
@@ Рядок 1014: / Рядок 1018: @@
 /* ==================================================== */
-/* СТИЛІ ДЛЯ ШАБЛОНУ HeroCard/БезСторінки (КЛАС .no-page-card) */
+/* СТИЛІ СТАНУ: БЕЗ СТОРІНКИ (.no-page-card) */
 /* ==================================================== */
-.mcc-hero-card.no-page-card .hero-image-wiki {
+.mcc-hero-card.no-page-card .hero-image-wiki img {
-     filter: grayscale(100%); /* Робить зображення чорно-білим */
+     filter: grayscale(100%);
      opacity: 0.7;
 }
 .mcc-hero-card.no-page-card .mcc-hero-link {
-     cursor: default; /* Прибираємо курсор посилання */
+     cursor: default;
 }
-/* Відміна анімації масштабування для неклікабельних карток */
+.mcc-hero-card.no-page-card:hover .hero-image-wiki img {
-.mcc-hero-card.no-page-card:hover .hero-image-wiki {
+     transform: scale(1);
-     transform: scale(1); /* Зображення не збільшується */
 }
 .mcc-hero-card.no-page-card:hover {
-     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Залишаємо базову тінь */
+     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 /* ==================================================== */
-/* СТИЛІ ДЛЯ ШАБЛОНУ HeroCard/Чемпіон (КЛАС .champion-card) */
+/* СТИЛІ СТАНУ: ЧЕМПІОН (.champion-card) */
 /* ==================================================== */
 .mcc-hero-card .champion-card {
-    /* Золота рамка та світіння навколо посилання */
      border: 3px solid #FFD700;
      border-radius: 12px;
@@ Рядок 1046: / Рядок 1048: @@
 }
-/* Посилене масштабування при наведенні для чемпіонів */
+.mcc-hero-card:hover .champion-card .hero-image-wiki img {
-.mcc-hero-card:hover .champion-card .hero-image-wiki {
+     transform: scale(1.15);
-     transform: scale(1.15); /* Більше, ніж стандартне 1.1 */
 }
-/* Посилене світіння при наведенні для чемпіонів */
 .mcc-hero-card:hover .champion-card {
      box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
 }