<style> /* Основной контейнер */ .book-covers-row {
display: flex; gap: var(--space-md); justify-content: center; align-items: flex-start; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: var(--space-md) 0; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-primary) var(--color-surface-2);
}
/* Кастомизация скроллбара для WebKit браузеров */ .book-covers-row::-webkit-scrollbar {
height: 8px;
}
.book-covers-row::-webkit-scrollbar-track {
background: var(--color-surface-2); border-radius: var(--border-radius--small);
}
.book-covers-row::-webkit-scrollbar-thumb {
background: var(--color-primary); border-radius: var(--border-radius--small);
}
.book-covers-row::-webkit-scrollbar-thumb:hover {
background: var(--color-primary--hover);
}
/* Элемент обложки */ .book-cover-item {
flex: 0 0 auto; width: 160px; max-width: 160px; border-radius: var(--border-radius--small); overflow: hidden; box-shadow: var(--box-shadow-card); transition: transform 0.3s ease, box-shadow 0.3s ease; background: var(--color-surface-1);
}
.book-cover-item:hover {
transform: translateY(-4px); box-shadow: var(--box-shadow-dialog);
}
/* Изображения внутри элементов */ .book-cover-item img {
display: block; width: 100%; height: auto; object-fit: cover;
}
/* Адаптация для мобильных устройств */ @media (max-width: 768px) {
.book-covers-row {
justify-content: flex-start;
padding: var(--space-sm) var(--space-sm);
gap: var(--space-sm);
/* Убираем отступы по краям для лучшей прокрутки */
margin-left: calc(-1 * var(--space-sm));
margin-right: calc(-1 * var(--space-sm));
padding-left: var(--space-sm);
padding-right: var(--space-sm);
}
.book-cover-item {
width: 140px;
max-width: 140px;
}
}
/* Для очень маленьких экранов */ @media (max-width: 480px) {
.book-cover-item {
width: 120px;
max-width: 120px;
}
} </style>