|
|
|
|
@ -128,8 +128,7 @@ export const LoaderWrapper = styled.div<LoaderWrapperProps>` |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
z-index: 1; |
|
|
|
|
transition: opacity 0.3s ease-in-out; |
|
|
|
|
opacity: ${({ buffering }) => (buffering ? 1 : 0)}; |
|
|
|
|
display: ${({ buffering }) => (buffering ? 'block' : 'none')}; |
|
|
|
|
` |
|
|
|
|
|
|
|
|
|
export const ButtonBase = styled.button` |
|
|
|
|
@ -164,7 +163,7 @@ export const PlayStop = styled(ButtonBase)<PlayStopProps>` |
|
|
|
|
)}; |
|
|
|
|
${({ size = 'sm' }) => ( |
|
|
|
|
css` |
|
|
|
|
width: ${sizes[size]}px; |
|
|
|
|
width: 100%; |
|
|
|
|
height: ${sizes[size]}px; |
|
|
|
|
` |
|
|
|
|
)}; |
|
|
|
|
@ -233,7 +232,7 @@ export const Backward = styled(ButtonBase)<ButtonProps>` |
|
|
|
|
font-weight: normal; |
|
|
|
|
${({ size = 'sm' }) => ( |
|
|
|
|
css` |
|
|
|
|
width: ${rewindButtonSizes.sides[size]}px; |
|
|
|
|
min-width: ${rewindButtonSizes.sides[size]}px; |
|
|
|
|
height: ${rewindButtonSizes.sides[size]}px; |
|
|
|
|
font-size: ${rewindButtonSizes.fontSizes[size]}px; |
|
|
|
|
` |
|
|
|
|
|