Участник:alivepillow/common.css

Вернуться

Строка 1: Строка 1:
/*** Шаблон: Cellimage ***/
.boxplate {
.boxplate {
     font-family: sans-serif;
     font-family: sans-serif;
Строка 7: Строка 8:
     align-items: center;
     align-items: center;
     width: 100%;
     width: 100%;
     min-height: 500px; /* Изменено на min-height, чтобы контейнер растягивался при переносе строк */
     min-height: 500px;
     align-content: space-around;
     align-content: space-around;
     gap: 20px 20px; /* Сделали отступы равномерными */
     gap: 20px 20px;
     box-sizing: border-box;
     box-sizing: border-box;
     padding: 20px;
     padding: 20px;
}
}


.cellbox__title {
.boxplate .cellbox__title {
     position: relative;
     position: relative;
     display: flex;
     display: flex;
     width: 100%; /* Чтобы заголовок занимал всю ширину и не ломал сетку флексов */
    justify-content: center;
     min-height: 32px;
    align-items: center;
     padding: 2px 8px;
     width: 100%;
     color: #fff;
     min-height: 38px;
     padding: 6px 15px;
    background-color: #0b1524;  
     color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 2px solid #b30000;
    margin-bottom: 25px;
}
 
.boxplate a,
.boxplate a:hover,
.boxplate a:visited {
    text-decoration: none;
}
}


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


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


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


.cellbox__img-wrapper img {
.boxplate .cellbox__img-wrapper a,
.boxplate .cellbox__img-wrapper img {
    display: block;
     max-width: 100%;
     max-width: 100%;
     max-height: 100%;
     max-height: 100%;
     object-fit: contain;
     object-fit: contain;
    margin: 0 auto;
}
}


.cellbox__text {
.boxplate .cellbox__text {
    display: block;
     font-size: 14px;
     font-size: 14px;
     word-break: break-word;
     word-break: break-word;
    color: #ffffff;
}
}