|
|
|
|
@ -34,14 +34,23 @@ type TContainer = { |
|
|
|
|
export const Container = styled.div<TContainer>` |
|
|
|
|
width: 320px; |
|
|
|
|
margin-top: 14px; |
|
|
|
|
padding: 0 10px 0 14px; |
|
|
|
|
padding: 0 18px 0 14px; |
|
|
|
|
max-height: calc(100vh - 130px); |
|
|
|
|
overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')}; |
|
|
|
|
|
|
|
|
|
${customScrollbar} |
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media ${devices.tablet} { |
|
|
|
|
margin-top: 15px; |
|
|
|
|
padding: 0 10px 0 14px; |
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
|
|
display: initial; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
${isMobileDevice |
|
|
|
|
@ -49,10 +58,11 @@ export const Container = styled.div<TContainer>` |
|
|
|
|
padding: 0 5px; |
|
|
|
|
overflow-y: hidden; |
|
|
|
|
max-height: initial; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 750px){ |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media (orientation: landscape){ |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
@ -68,7 +78,6 @@ export const Button = styled.button<ButtonProps>` |
|
|
|
|
border: none; |
|
|
|
|
outline: none; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
@ -109,6 +118,7 @@ export const Button = styled.button<ButtonProps>` |
|
|
|
|
|
|
|
|
|
return active ? css` |
|
|
|
|
background-color: ${bgColor}; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
background-color: ${bgHoverColor}; |
|
|
|
|
} |
|
|
|
|
|