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

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

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

71 байт додано , 22 листопад

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

Admin

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

5494

редагування

@@ Рядок 902: / Рядок 902: @@
 }
-/* --- КАРТКА (БАЗОВА) --- */
+.mcc-heroes-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    list-style: none;
+    padding: 0;
+    margin: 20px 0;
+}
+.mcc-heroes-list li {
+    width: 18.5%;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+}
 .mcc-hero-card {
      height: 242px;
@@ Рядок 908: / Рядок 922: @@
      border-radius: 0px;
      overflow: hidden;
-     position: relative; /* ВАЖЛИВО: забезпечує контекст для дочірніх absolute */
+     position: relative;
-     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
      background-color: #333;
-     transition: box-shadow 0.3s ease-in-out;
+     transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
      border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.mcc-hero-card:hover {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
+    transform: translateY(-3px);
 }
-/* --- КЛІКАБЕЛЬНЕ ПОСИЛАННЯ (ГОЛОВНИЙ ШАР) --- */
 .mcc-hero-link {
      display: block;
      height: 100%;
      width: 100%;
-     position: relative; /* Додаємо position: relative для створення стекового контексту */
+     position: relative;
      text-decoration: none;
      color: white;
-    /* ЗНАЧЕННЯ ГАРАНТІЇ: Завжди має бути клікабельним */
+     z-index: 2;
-     z-index: 2; /* Зменшуємо z-index, щоб дочірні елементи могли бути вище, але залишаємо його, якщо потрібно. */
      overflow: hidden;
-     cursor: pointer; /* Додаємо, щоб підтвердити клікабельність */
+     cursor: pointer;
+}
+.mcc-hero-card .hero-image-wiki {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+}
+.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, opacity 0.3s ease-in-out;
+}
+.mcc-hero-card:hover .hero-image-wiki img {
+    transform: scale(1.1);
 }
-/* --- ГРАДІЄНТНЕ ПОКРИТТЯ --- */
 .mcc-hero-link::after {
      content: '';
@@ Рядок 937: / Рядок 975: @@
      width: 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.8) 0%, rgba(0, 0, 0, 0.0) 50%);
-     z-index: 1; /* Градієнт над зображенням, але під текстом */
+     z-index: 1;
-     pointer-events: none; /* ВИРІШАЛЬНИЙ МОМЕНТ: Дозволяє кліку проходити крізь цей елемент до батьківського <a> */
+     pointer-events: none;
 }
-/* --- ІНФОРМАЦІЙНИЙ БЛОК --- */
 .mcc-hero-info {
      position: absolute;
@@ Рядок 950: / Рядок 987: @@
      padding: 0 5px;
      box-sizing: border-box;
-     z-index: 3; /* Текст над градієнтом */
+     z-index: 3;
-     pointer-events: none; /* ВИРІШАЛЬНИЙ МОМЕНТ: Дозволяє кліку проходити крізь цей елемент до батьківського <a> */
+     pointer-events: none;
+}
+.mcc-hero-nickname {
+    font-size: 14px;
+    color: white;
+    font-weight: bold;
+    line-height: 1.2;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+}
+.mcc-hero-date {
+    font-size: 14px;
+    color: yellow;
+    opacity: 0.9;
+    line-height: 1.2;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+}
+.mcc-champion-card {
+    border: 2px solid yellow;
+    box-shadow: 0 4px 8px rgba(255, 204, 0, 0.4);
 }
-/* --- КОНТЕЙНЕР ЗОБРАЖЕННЯ --- */
+/* Адаптивність: 2 картки в рядку для мобільних */
-.mcc-hero-card .hero-image-wiki {
+@media (max-width: 768px) {
-    position: absolute;
+    .mcc-heroes-list {
-    top: 0;
+        gap: 10px;
-     left: 0;
+        justify-content: center;
-     width: 100%;
+     }
-    height: 100%;
+     .mcc-heroes-list li {
-     z-index: 0; /* Зображення під усім */
+        width: calc(50% - 5px);
-    overflow: hidden;
+        margin-bottom: 10px;
+     }
+}
 }