|
|
| Строка 7: |
Строка 7: |
| <div class="book-cover-item">[[File:Book-cover-card.jpg|715x1020px]]</div> | | <div class="book-cover-item">[[File:Book-cover-card.jpg|715x1020px]]</div> |
| </div> | | </div> |
|
| |
| <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>
| |
