|
|
|
|
|
.scroll-section { |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
@media (orientation: landscape) { |
|
|
.scroll-section { |
|
|
margin-left: 25px; |
|
|
margin-right: 25px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.scroll-section { |
|
|
margin-left: 10px; |
|
|
margin-right: 10px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
.scroll-title-section { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.scroll-section-controls { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
text-align: center; |
|
|
justify-content: space-between; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.scroll-controls button { |
|
|
color: var(--gray-text-color); |
|
|
margin-left: 10px; |
|
|
margin-right: 10px; |
|
|
border-radius: 50%; |
|
|
width: auto; |
|
|
height: auto; |
|
|
min-width: 50px; |
|
|
padding: 9px; |
|
|
border: 1px solid; |
|
|
transition: background-color 0.3s ease, border 0.5s ease, color 1s ease; |
|
|
} |
|
|
|
|
|
.scroll-controls button:hover { |
|
|
background-color: var(--bg-secondary); |
|
|
border: 1px solid var(--primary-special-color); |
|
|
} |
|
|
|
|
|
.scroll-controls button:disabled { |
|
|
color: #797979; |
|
|
} |
|
|
|
|
|
.scroll-section h2 { |
|
|
font-size: 1.8rem; |
|
|
color: var(--gray-text-color); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.scroll-section h2 { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
} |
|
|
|
|
|
.items-grid { |
|
|
display: flex; |
|
|
overflow-x: auto; |
|
|
padding: 10px 0; |
|
|
gap: 5px; |
|
|
flex-direction: row; |
|
|
} |
|
|
|
|
|
.items-grid::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.items-grid::-webkit-scrollbar-thumb { |
|
|
background-color: var(--primary-special-color); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.items-grid::-webkit-scrollbar-track { |
|
|
background-color: var(--bg-primary); |
|
|
} |
|
|
|
