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

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

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

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

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

Admin

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

5494

редагування

@@ Рядок 68: / Рядок 68: @@
 opacity: 1.0!important;
 }
 .mcc-heroes-list {
    display: flex;
-   flex-wrap: wrap; /* Дозволяє переносити картки на новий рядок */
+   flex-wrap: wrap;
-   gap: 20px; /* Відступ між картками */
+   gap: 20px;
-   justify-content: flex-start; /* Вирівнювання карток на початку (зліва) */
+   justify-content: flex-start;
    list-style: none;
    padding: 0;
-   margin: 20px 0; /* Додаємо зовнішній відступ, щоб відокремити від попереднього блоку */
+   margin: 20px 0;
 }
-/* Стилі для окремої картки переможця */
 .mcc-hero-card {
-   width: 184px; /* Задана ширина картки */
+   width: 184px;
-   height: 242px; /* Задана висота картки */
+   height: 242px;
-   border-radius: 12px; /* Заокруглені кути */
+   border-radius: 12px;
-   overflow: hidden; /* Обрізає вміст по заокруглених кутах */
+   overflow: hidden;
-   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Невеликий тінь для 3D ефекту */
+   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
-   background-color: #333; /* Фоновий колір картки (замініть на ваше бажання) */
+   background-color: #333; /* Заглушка кольору, якщо зображення відсутнє/не завантажено */
-   color: white; /* Колір тексту на картці */
+   color: white;
-  display: flex;
+  /* Додаємо градієнт, щоб текст був краще помітний на будь-якому зображенні */
-  flex-direction: column;
-  justify-content: flex-end; /* Вирівнює вміст внизу */
 }
-/* Стилі для зображення/заглушки */
+/* Справжній тег зображення всередині картки */
 .mcc-hero-image {
    width: 100%;
@@ Рядок 102: / Рядок 100: @@
    left: 0;
    object-fit: cover;
-   z-index: 1; /* Зображення має бути під текстом */
+   border-radius: 12px;
+  z-index: 1;
+}
+/* Накладаємо напівпрозорий градієнт поверх зображення для кращої читабельності тексту */
+.mcc-hero-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
+    z-index: 1.5; /* Між зображенням і текстом */
 }
-/* Стилі для блоку з текстом */
 .mcc-hero-info {
    position: absolute;
-   bottom: 20px; /* 20 пікселів від нижнього краю */
+   bottom: 20px;
    width: 100%;
    text-align: center;
    padding: 0 5px;
    box-sizing: border-box;
-   z-index: 2; /* Текст має бути над зображенням */
+   z-index: 2; /* Текст повинен бути нагорі */
 }
-/* Стилі для нікнейму */
 .mcc-hero-nickname {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.9); /* Тінь для тексту для контрасту */
 }
-/* Стилі для дати */
 .mcc-hero-date {
    font-size: 14px;
-   opacity: 0.8;
+   opacity: 0.9;
    line-height: 1.2;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
 }
-/* Стилі для посилання */
 .mcc-hero-info a {
-   color: inherit; /* Посилання буде того ж кольору, що й батьківський блок (white) */
+   color: inherit;
    text-decoration: none;
+  display: block; /* Щоб посилання займало всю область тексту */
 }
@@ Рядок 139: / Рядок 149: @@
    text-decoration: underline;
 }
+/* Спеціальний стиль для відміненої події */
+.mcc-hero-card.cancelled {
+  background-color: #5b0000; /* Темно-червоний фон для відміненої події */
+}
 .minerva-icon--menu-base20, .minerva-icon--menu {