Mafia Closed Circle

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

Повідомлення Обговорення

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

Версія за 00:27, 20 листопада 2025

1408 байтів додано ,  20 листопад
нема опису редагування
Немає опису редагування
Немає опису редагування
Рядок 490: Рядок 490:




/* ---------------------------------------------------- */
/* Глобальні стилі для списку та Flexbox для 5 карток */
/* ---------------------------------------------------- */
.mcc-heroes-list {
.mcc-heroes-list {
   display: flex;
   display: flex;
   flex-wrap: wrap;  
   flex-wrap: wrap;  
   gap: 20px;  
   /* gap: 20px; - Замінюємо gap на margin та justify-content для контролю */
   justify-content: flex-start;
   justify-content: space-between; /* Розподіляє вільний простір рівномірно між елементами */
   list-style: none;
   list-style: none;
   padding: 0;
   padding: 0;
Рядок 500: Рядок 504:
}
}


.mcc-heroes-list li {
  /* width: calc((100% - 4 * gap_size) / 5); де gap_size = (free space)/4 */
  /* Розрахунок: 100% ширини мінус 4 проміжки. Ділимо на 5, щоб отримати ширину картки. */
  /* Примітка: для 5 елементів у ряді використовуємо 18% або 19% для гарантії, що поміститься 5. */
  width: 18.5%;
  /* Забезпечуємо, що елементи займають рівну частку простору */
}
/* ---------------------------------------------------- */
/* Стилі для картки з фоновим зображенням */
/* ---------------------------------------------------- */
.mcc-hero-card {
.mcc-hero-card {
   width: 184px;  
   height: 242px; /* Фіксована висота */
   height: 242px;  
   width: 100%; /* Картка займає 100% ширини свого <li> контейнера */
   border-radius: 12px;  
   border-radius: 12px;  
   overflow: hidden;  
   overflow: hidden;  
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  
   position: relative;
   position: relative;
   background-color: #333; /* Заглушка кольору, якщо зображення відсутнє/не завантажено */
 
  /* ВАЖЛИВО: Налаштування фонового зображення через CSS */
   background-color: #333; /* Колір, якщо зображення не завантажиться */
  background-size: cover; /* Зображення заповнює весь блок */
  background-position: center center; /* Центруємо зображення */
  background-repeat: no-repeat;
 
   color: white;  
   color: white;  
  /* Додаємо градієнт, щоб текст був краще помітний на будь-якому зображенні */
}
}


/* Справжній тег зображення всередині картки */
/* Напівпрозорий градієнт (без змін) */
.mcc-hero-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  border-radius: 12px;
  z-index: 1;
}
 
/* Накладаємо напівпрозорий градієнт поверх зображення для кращої читабельності тексту */
.mcc-hero-card::after {
.mcc-hero-card::after {
     content: '';
     content: '';
Рядок 532: Рядок 540:
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
     z-index: 1.5; /* Між зображенням і текстом */
     z-index: 1.5;  
}
}


.mcc-hero-info {
.mcc-hero-info {
   position: absolute;
   position: absolute;
   bottom: 20px;  
   bottom: 10px;  
   width: 100%;
   width: 100%;
   text-align: center;
   text-align: center;
   padding: 0 5px;
   padding: 0 5px;
   box-sizing: border-box;
   box-sizing: border-box;
   z-index: 2; /* Текст повинен бути нагорі */
   z-index: 2;  
}
 
/* ... інші стилі тексту без змін ... */
 
.mcc-hero-info a {
  color: inherit;
  text-decoration: none;
  display: block;
}
}


Рядок 550: Рядок 566:
   font-weight: bold;
   font-weight: bold;
   line-height: 1.2;
   line-height: 1.2;
   text-shadow: 0 0 5px rgba(0, 0, 0, 0.9); /* Тінь для тексту для контрасту */
   text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}
}


Рядок 560: Рядок 576:
}
}


.mcc-hero-info a {
.mcc-hero-card.cancelled {
   color: inherit;
   background-color: #5b0000;
  text-decoration: none;
  display: block; /* Щоб посилання займало всю область тексту */
}
}


.mcc-hero-info a:hover {
/* ---------------------------------------------------- */
  text-decoration: underline;
/* ІНДИВІДУАЛЬНІ ЗОБРАЖЕННЯ (додаємо тут) */
/* ---------------------------------------------------- */
.card-Анастезія {
    background-image: url("https://mafiacc.site/images/6/6e/Hero_anastasia.png"); /* ЗМІНИТИ НА ПРАВИЛЬНЕ ПОСИЛАННЯ */
}
}
 
.card-Ноунейм {
/* Спеціальний стиль для відміненої події */
    background-image: url("https://mafiacc.site/images/6/6e/Hero_noname.png"); /* ЗМІНИТИ НА ПРАВИЛЬНЕ ПОСИЛАННЯ */
.mcc-hero-card.cancelled {
}
  background-color: #5b0000; /* Темно-червоний фон для відміненої події */
.card-Берлін {
    background-image: url("https://mafiacc.site/images/6/6e/Hero_berlin.png"); /* Ваше посилання */
}
}
/* ... і так для всіх 40 карток ... */
Отримано з https://mafiacc.site/index.php/Спеціальна:Мобільна_різниця_версій/3544