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

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

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

1440 байтів додано , 22 листопад

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

Admin

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

5494

редагування

@@ Рядок 901: / Рядок 901: @@
      color: black !important;
 }
+/* ---------------------------------------------------- */
+/* 1. ВИПРАВЛЕННЯ СІТКИ (БЕЗ ЗМІН)                       */
+/* ---------------------------------------------------- */
 .mcc-heroes-list {
@@ Рядок 916: / Рядок 920: @@
      box-sizing: border-box;
 }
+/* ---------------------------------------------------- */
+/* 2. ПРИХОВАННЯ ЗГЕНЕРОВАНИХ ТЕГІВ <pre> (КЛЮЧОВЕ)     */
+/* ---------------------------------------------------- */
+/* Приховуємо будь-які теги <pre>, які MediaWiki могла вставити
+   всередині або навколо елементів картки, щоб вони не ламали сітку. */
+.mcc-hero-card pre {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    line-height: 0 !important;
+}
+/* ---------------------------------------------------- */
+/* 3. ОСНОВНІ СТИЛІ КАРТКИ (БЕЗ ГРАДІЄНТА)                */
+/* ---------------------------------------------------- */
 .mcc-hero-card {
@@ Рядок 935: / Рядок 958: @@
 /* --- КОНТЕЙНЕР ЗОБРАЖЕННЯ (НЕМАЄ ГРАДІЄНТА) --- */
+/* Встановлюємо правильне позиціонування зображення */
 .mcc-hero-card .hero-image-wiki {
      position: absolute;
@@ Рядок 950: / Рядок 974: @@
      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;
 }
@@ Рядок 957: / Рядок 981: @@
 }
-/* --- ІНФОРМАЦІЙНИЙ БЛОК (КОНТЕЙНЕР ДЛЯ ПОСИЛАННЯ) --- */
+/* ---------------------------------------------------- */
+/* 4. СТИЛІ ТЕКСТУ (КЛІКАБЕЛЬНІСТЬ ТЕКСТУ)              */
+/* ---------------------------------------------------- */
 .mcc-hero-info {
      position: absolute;
@@ Рядок 963: / Рядок 990: @@
      width: 100%;
      text-align: center;
-     padding: 15px 5px; /* Забезпечуємо відступи для тексту */
+     padding: 15px 5px;
      box-sizing: border-box;
      z-index: 2;
+    /* Можна додати фон для кращої читабельності: */
+    background-color: rgba(0, 0, 0, 0.4);
 }
-/* --- ПОСИЛАННЯ (НІКНЕЙМ ТА ДАТА) --- */
 .mcc-hero-text-link {
-     display: block; /* Посилання повинно бути блоковим, щоб вміщувати текст */
+     display: block;
-     text-decoration: none; /* Прибираємо підкреслення */
+     text-decoration: none;
      color: inherit;
      cursor: pointer;
 }
-/* --- СТИЛІ ТЕКСТУ --- */
 .mcc-hero-nickname {
      font-size: 14px;
-     color: white!important; /* Перезаписуємо колір, якщо він успадковується від a:visited */
+     color: white !important;
      font-weight: bold;
      line-height: 1.2;
@@ Рядок 987: / Рядок 1014: @@
 .mcc-hero-date {
      font-size: 14px;
-     color: yellow!important; /* Перезаписуємо колір */
+     color: yellow !important;
      opacity: 0.9;
      line-height: 1.2;
@@ Рядок 995: / Рядок 1022: @@
 .mcc-hero-text-link:hover .mcc-hero-nickname,
 .mcc-hero-text-link:hover .mcc-hero-date {
-    /* Додаємо невеликий ефект наведення на текст */
      text-decoration: underline;
+}
+.mcc-champion-card {
+    border: 2px solid yellow;
+    box-shadow: 0 4px 10px rgba(255, 204, 0, 0.5);
+}
+/* ---------------------------------------------------- */
+/* 5. АДАПТИВНІСТЬ                                     */
+/* ---------------------------------------------------- */
+@media (max-width: 992px) {
+    .mcc-heroes-list li {
+        width: calc(33.333% - 13.333px);
+    }
+}
+@media (max-width: 768px) {
+    .mcc-heroes-list li {
+        width: calc(50% - 10px);
+        margin-bottom: 10px;
+    }
+}
+@media (max-width: 576px) {
+    .mcc-heroes-list li {
+        width: 100%;
+        margin-bottom: 10px;
+    }
 }