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

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

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

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

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

Admin

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

5494

редагування

@@ Рядок 903: / Рядок 903: @@
 /* ==================================================== */
-/* СЕКЦІЯ СТИЛІВ КАРТОК ГЕРОЇВ (СТАНДАРТ) */
+/* СЕКЦІЯ СТИЛІВ КАРТОК ГЕРОЇВ (ЧИСТИЙ HTML-ПІДХІД) */
 /* ==================================================== */
-.mcc-heroes-list {
+/* ... (Стилі mcc-heroes-list, li, mcc-hero-card, mcc-hero-link залишаються без змін) ... */
-  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;
-}
-/* Стилі картки - зовнішній контейнер */
+.mcc-heroes-list { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; padding: 0; margin: 20px 0; }
-.mcc-hero-card {
+.mcc-heroes-list li { width: 18.5%; margin-bottom: 20px; }
-  height: 200px; /* Висота картки */
+.mcc-hero-card { height: 200px; width: 100%; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); background-color: #333; transition: box-shadow 0.3s ease-in-out; }
-  width: 100%;
+.mcc-hero-link { display: block; height: 100%; width: 100%; position: relative; text-decoration: none; color: white; z-index: 2; overflow: hidden; }
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 12px;
-  overflow: hidden;
-  position: relative;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  background-color: #333; /* Запасний фон */
-  transition: box-shadow 0.3s ease-in-out;
-}
-/* Стилі для посилання (контейнер) */
-.mcc-hero-link {
-    display: block;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    text-decoration: none;
-    color: white;
-    z-index: 2; /* Посилання повинно бути вище зображення */
-    overflow: hidden;
-}
 /* ---------------------------------------------------- */
-/* ПОЗИЦІОНУВАННЯ ТА АНІМАЦІЯ ЗОБРАЖЕННЯ */
+/* ПОЗИЦІОНУВАННЯ ТА АНІМАЦІЯ ЗОБРАЖЕННЯ (ЧИСТИЙ IMG) */
 /* ---------------------------------------------------- */
-/* 1. SPAN контейнер: позиціонування */
+/* 1. DIV контейнер: позиціонування */
 .mcc-hero-card .hero-image-wiki {
      position: absolute;
@@ Рядок 964: / Рядок 932: @@
      width: 100%;
      height: 100%;
-     object-fit: cover; /* Поводиться як background-size: cover */
+     object-fit: cover;
      transform: scale(1);
-     transition: transform 0.3s ease-in-out; /* Плавна анімація */
+     transition: transform 0.3s ease-in-out;
 }
 /* Анімація при наведенні: збільшення зображення */
 .mcc-hero-card:hover .hero-image-wiki img {
-   transform: scale(1.1); /* Збільшення на 10% */
+   transform: scale(1.1);
 }
-/* Градієнт для читабельності тексту */
+/* Градієнт */
 .mcc-hero-link::after {
      content: '';
@@ Рядок 982: / Рядок 950: @@
      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; /* Над зображенням, під текстом */
+     z-index: 1.5;
 }
@@ Рядок 998: / Рядок 965: @@
 }
-.mcc-hero-nickname {
+.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); }
-  font-size: 14px;
+.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); }
-  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-hero-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); }
-.mcc-hero-card:hover {
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-}