Участник:Alivepillow/common.css: различия между версиями

.boxplate {
    font-family: sans-serif;
    display: flex;
    flex-flow: row wrap;
    background-color: rgb(102, 102, 102);
    justify-content: space-around;
    align-items: center;
    width: 100%;
    min-height: 500px; /* Изменено на min-height, чтобы контейнер растягивался при переносе строк */
    align-content: space-around;
    gap: 20px 20px; /* Сделали отступы равномерными */
    box-sizing: border-box;
    padding: 20px;
}

.cellbox__title {
    position: relative;
    display: flex;
    width: 100%; /* Чтобы заголовок занимал всю ширину и не ломал сетку флексов */
    min-height: 32px;
    padding: 2px 8px;
    color: #fff;
}

.cellbox {
    display: flex;
    flex-direction: column; /* Элементы внутри (картинка и текст) идут друг за другом сверху вниз */
    align-items: center; /* Центрирование по горизонтали */
    justify-content: center; /* Центрирование по вертикали */
    text-align: center;
    padding: 15px;
    border-radius: 15px;
    background-color: rgb(56, 56, 56);
    flex: 0 0 calc((100% - (4 * 20px)) / 5); /* Корректный расчет для 5 элементов в ряд с учетом gap */
    min-width: 120px; /* Чтобы карточки не сжимались слишком сильно */
    text-decoration: none; /* Убирает синее подчеркивание ссылки */
    color: white; /* Цвет текста внутри карточки-ссылки */
    transition: background-color 0.2s ease; /* Плавный эффект при наведении */
}

/* Эффект при наведении на карточку */
.cellbox:hover {
    background-color: rgb(75, 75, 75);
    cursor: pointer;
}

/* Контейнер для картинки */
.cellbox__img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 10px; /* Отступ между картинкой и текстом */
}

.cellbox__img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cellbox__text {
    font-size: 14px;
    word-break: break-word;
}