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

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

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

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

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

Admin

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

5494

редагування

@@ Рядок 902: / Рядок 902: @@
 }
-/* --- ЗАСІБ АВАРІЙНОГО ВІДНОВЛЕННЯ --- */
+/* --- СІТКА І ОСНОВА --- */
-/* Цей код додасть фоновий колір до елемента, що відображає зображення,
-   щоб ми бачили, чи він займає простір, навіть якщо зображення не завантажилося. */
-.mcc-hero-card .hero-image-wiki {
-    background-color: #333; /* Тимчасовий темний колір, щоб бачити контейнер */
-}
-.mcc-hero-card .hero-image-wiki span {
-    display: block;
-    height: 100%;
-}
-/* ------------------------------------ */
 .mcc-heroes-list {
      display: flex;
@@ Рядок 929: / Рядок 918: @@
 }
-/* --- ПРИХОВУЄМО MediaWiki <pre> (Якщо вони є) --- */
+/* Приховуємо небажані теги <pre>, якщо MediaWiki їх генерує */
+.mcc-hero-link pre,
 .mcc-hero-card pre {
      display: none !important;
-    visibility: hidden !important;
      height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
-    line-height: 0 !important;
 }
+/* --- КЛІКАБЕЛЬНЕ ПОСИЛАННЯ (Вся картка) --- */
+.mcc-hero-link {
+    display: block;
+    text-decoration: none; /* Прибираємо підкреслення */
+    color: inherit;
+    cursor: pointer;
+    position: relative; /* Необхідно для позиціонування .mcc-hero-card */
+}
+/* --- КОНТЕЙНЕР КАРТКИ --- */
 .mcc-hero-card {
      height: 242px;
@@ Рядок 951: / Рядок 949: @@
 }
-.mcc-hero-card:hover {
+.mcc-hero-link:hover .mcc-hero-card {
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
      transform: translateY(-3px);
 }
-/* --- КОНТЕЙНЕР ЗОБРАЖЕННЯ: Змінено позиціонування --- */
+/* --- ЗОБРАЖЕННЯ: Абсолютне позиціонування --- */
 .mcc-hero-card .hero-image-wiki {
-    /* ЗАЛИШАЄМО position: absolute; для перекриття */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
-     height: 100%; /* Гарантуємо, що він займає всю висоту картки */
+     height: 100%;
      z-index: 0;
      overflow: hidden;
@@ Рядок 969: / Рядок 967: @@
 .mcc-hero-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;
+     transition: transform 0.3s ease-in-out;
 }
-.mcc-hero-card:hover .hero-image-wiki img {
+.mcc-hero-link:hover .hero-image-wiki img {
      transform: scale(1.1);
 }
-/* --- СТИЛІ ТЕКСТУ (КЛІКАБЕЛЬНІСТЬ) --- */
+/* --- ІНФОРМАЦІЙНИЙ БЛОК (ТЕКСТ) --- */
 .mcc-hero-info {
      position: absolute;
@@ Рядок 989: / Рядок 986: @@
      padding: 15px 5px;
      box-sizing: border-box;
-     z-index: 2;
+     z-index: 2; /* Над зображенням */
+    /* Мінімум затемнення для читабельності, без градієнта */
      background-color: rgba(0, 0, 0, 0.4);
 }
-.mcc-hero-text-link {
+/* --- СТИЛІ ТЕКСТУ --- */
-    display: block;
-    text-decoration: none;
-    color: inherit;
-    cursor: pointer;
-}
 .mcc-hero-nickname {
      font-size: 14px;
@@ Рядок 1014: / Рядок 1006: @@
      line-height: 1.2;
      text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 0.8);
-}
-.mcc-champion-card {
-    border: 2px solid yellow;
-    box-shadow: 0 4px 10px rgba(255, 204, 0, 0.5);
 }
@@ Рядок 1030: / Рядок 1017: @@
      .mcc-heroes-list li {
          width: calc(50% - 10px);
-        margin-bottom: 10px;
-    }
-}
-@media (max-width: 576px) {
-    .mcc-heroes-list li {
-        width: 100%;
          margin-bottom: 10px;
      }
 }