Mafia Closed Circle

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

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

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

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

346 байтів додано ,  19 листопад
нема опису редагування
Немає опису редагування
Мітка: Скасовано
Немає опису редагування
Мітка: Скасовано
Рядок 70: Рядок 70:




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


.mcc-heroes-list li {
.mcc-heroes-list li {
   /* width: calc((100% - 4 * gap_size) / 5); де gap_size = (free space)/4 */
   /* Встановлює ширину так, щоб 5 елементів помістилися в рядок із проміжками */
  /* Розрахунок: 100% ширини мінус 4 проміжки. Ділимо на 5, щоб отримати ширину картки. */
  /* Примітка: для 5 елементів у ряді використовуємо 18% або 19% для гарантії, що поміститься 5. */
   width: 18.5%;  
   width: 18.5%;  
   /* Забезпечуємо, що елементи займають рівну частку простору */
   margin-bottom: 20px; /* Вертикальний відступ між рядами */
}
}


Рядок 96: Рядок 94:
/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
.mcc-hero-card {
.mcc-hero-card {
   height: 242px; /* Фіксована висота */
   height: 242px;  
   width: 100%; /* Картка займає 100% ширини свого <li> контейнера */
   width: 100%;  
   border-radius: 12px;  
   border-radius: 12px;  
   overflow: hidden;  
   overflow: hidden;  
Рядок 103: Рядок 101:
   position: relative;
   position: relative;
    
    
   /* ВАЖЛИВО: Налаштування фонового зображення через CSS */
   /* Налаштування фонового зображення через CSS */
   background-color: #333; /* Колір, якщо зображення не завантажиться */
   background-color: #333;  
   background-size: cover; /* Зображення заповнює весь блок */
   background-size: cover;  
   background-position: center center; /* Центруємо зображення */
   background-position: center center;  
   background-repeat: no-repeat;
   background-repeat: no-repeat;
    
    
Рядок 112: Рядок 110:
}
}


/* Напівпрозорий градієнт (без змін) */
/* Напівпрозорий градієнт для читабельності тексту */
.mcc-hero-card::after {
.mcc-hero-card::after {
     content: '';
     content: '';
Рядок 132: Рядок 130:
   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;
}
}


Рядок 154: Рядок 144:
   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);
}
.mcc-hero-info a {
  color: inherit;
  text-decoration: none;
  display: block;
}
}


Рядок 161: Рядок 157:


/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
/* ІНДИВІДУАЛЬНІ ЗОБРАЖЕННЯ (додаємо тут) */
/* ІНДИВІДУАЛЬНІ ЗОБРАЖЕННЯ (ПЛЕЙСХОЛДЕРИ) */
/* ---------------------------------------------------- */
/* ВАЖЛИВО: Вам потрібно створити ці 40 класів
  та вставити у них правильні шляхи до зображень.
  Наприклад:
  .card-Анастезія { background-image: url("ШЛЯХ_ДО_ЗОБРАЖЕННЯ_АНАСТЕЗІЇ"); }
*/
.card-Анастезія, .card-Ноунейм, .card-Берлін, .card-Містер-Тен, .card-Оттерія,
.card-Тігарбо, .card-Космос, .card-Містер-Тен-2, .card-Відмінений, .card-ЕХС,
.card-Механік, .card-Механік-2, .card-Расм, .card-Механік-3, .card-Емесай,
.card-Індиго, .card-Артерія, .card-Кексік, .card-Кузя, .card-Ніколетта,
.card-Ніколетта-2, .card-Індиго-2, .card-Мальвінка, .card-Аріель, .card-ВВ,
.card-Назавжди, .card-Кексік-2, .card-Назавжди-2, .card-Кексік-Містер-Тен, .card-Назавжди-3,
.card-Кексік-3, .card-Назавжди-4, .card-Сімон, .card-Малена, .card-Боб,
.card-Містер-Тен-3, .card-Оттерія-2, .card-Справа, .card-Привіт-киця, .card-Ніколетта-3 {
    /* ЦЕ ПОСИЛАННЯ ТИМЧАСОВЕ, ЗАМІНІТЬ ЙОГО В КОЖНОМУ ІНДИВІДУАЛЬНОМУ КЛАСІ ЗВЕРХУ */
    background-image: url("https://mafiacc.site/images/6/6e/Hero_berlin.png");
}
 
/* Приклад, як це має виглядати для окремого зображення: */
/*
.card-Анастезія {
.card-Анастезія {
     background-image: url("https://mafiacc.site/images/6/6e/Hero_anastasia.png"); /* ЗМІНИТИ НА ПРАВИЛЬНЕ ПОСИЛАННЯ */
     background-image: url("https://mafiacc.site/images/1/1a/Hero_anastasiya.png");  
}
.card-Ноунейм {
    background-image: url("https://mafiacc.site/images/6/6e/Hero_noname.png"); /* ЗМІНИТИ НА ПРАВИЛЬНЕ ПОСИЛАННЯ */
}
.card-Берлін {
    background-image: url("https://mafiacc.site/images/6/6e/Hero_berlin.png"); /* Ваше посилання */
}
}
/* ... і так для всіх 40 карток ... */
*/


</style>




Отримано з https://mafiacc.site/index.php/Спеціальна:Мобільна_різниця_версій/3517