MediaWiki:Citizen.css: различия между версиями
Askell (обсуждение | вклад) Нет описания правки |
Askell (обсуждение | вклад) Нет описания правки |
||
| Строка 924: | Строка 924: | ||
/* Контейнер для группы карточек */ | /* Контейнер для группы карточек */ | ||
/* | |||
.card-group { | .card-group { | ||
display: wrap; /* Располагает карточки в ряд */ | display: wrap; /* Располагает карточки в ряд */ | ||
gap: 10px; /* Отступ между карточками */ | gap: 10px; /* Отступ между карточками */ | ||
flex-wrap: wrap; /* Если не помещаются, переносятся на новую строку */ | |||
justify-content: center; /* Выравнивание по центру */ | justify-content: center; /* Выравнивание по центру */ | ||
} | } | ||
/* | |||
.card { | .card { | ||
position: relative; | position: relative; | ||
| Строка 990: | Строка 991: | ||
transform: scale(1.02); | transform: scale(1.02); | ||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
} | |||
*/ | |||
/* Контейнер для группы карточек */ | |||
.card-group { | |||
display: flex; /* Располагает карточки в строку */ | |||
gap: 10px; /* Отступы между карточками */ | |||
justify-content: center; /* Выравнивание по центру */ | |||
align-items: stretch; /* Карточки одинаковой высоты */ | |||
overflow: hidden; /* Предотвращает выход за границы */ | |||
} | |||
/* Карточка */ | |||
.card { | |||
flex: 1 1 300px; /* Гибкость: растягивается, но не меньше 300px */ | |||
max-width: 350px; /* Ограничение максимальной ширины */ | |||
box-sizing: border-box; /* Учитывает padding и border */ | |||
background: #fff; /* Цвет фона */ | |||
border: 1px solid #ccc; /* Граница */ | |||
border-radius: 8px; /* Скруглённые углы */ | |||
padding: 15px; /* Внутренние отступы */ | |||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Тень */ | |||
transition: transform 0.3s ease-in-out; /* Анимация при наведении */ | |||
} | |||
/* Карточка — эффект при наведении */ | |||
.card:hover { | |||
transform: scale(1.05); /* Лёгкое увеличение */ | |||
} | |||
/* Содержимое карточки */ | |||
.card-body { | |||
text-align: center; /* Центрирование текста */ | |||
word-wrap: break-word; /* Перенос длинных слов */ | |||
overflow-wrap: break-word; /* Совместимость с разными браузерами */ | |||
} | |||
/* Заголовок */ | |||
.card-title { | |||
font-size: 18px; | |||
font-weight: bold; | |||
margin-bottom: 10px; | |||
} | |||
/* Текст карточки */ | |||
.card-text { | |||
font-size: 14px; | |||
color: #555; | |||
line-height: 1.4; /* Увеличение межстрочного интервала */ | |||
word-break: normal; /* Исправляет проблемы с переносом */ | |||
} | } | ||