You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
spa_instat_tv/src/features/TournamentsPopup/styled.tsx

85 lines
1.7 KiB

import styled, { css } from 'styled-components/macro'
import { isMobileDevice } from 'config/userAgent'
import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal'
import { TournamentInfo } from 'features/PreferencesPopup/components/TournamentInfo'
import { ProfileLink } from 'features/ProfileLink'
import { customScrollbar } from 'features/Common'
import { HeaderTitle } from 'features/PreferencesPopup/styled'
export const ScModalContainer = styled(BaseModal)`
${ModalWindow} {
width: 616px;
max-height: 95vh;
overflow-y: auto;
${customScrollbar}
${isMobileDevice
? css`
width: 95vw;
`
: ''
};
}
}
`
export const ScBody = styled.div`
padding: 25px 40px 0 42px;
display: flex;
${isMobileDevice
? css`
@media (max-width: 650px) {
padding: 13px 25px 0;
flex-direction: column;
align-items: center;
}
@media (orientation: landscape) {
padding: 22px 23px 0 29px;
}
`
: ''};
`
export const ScHeaderTitle = styled(HeaderTitle)`
margin: 15px;
${isMobileDevice
? css`
display: flex;
align-self: center;
`
: ''};
`
export const ScTournamentList = styled.div`
width: 50%;
margin-bottom: 20px;
`
export const ScList = styled.div`
max-width: 212px;
margin-top: 20px;
overflow-y: scroll;
`
export const StyledLink = styled(ProfileLink)`
margin: 5px;
display: flex;
align-items: flex-start;
color: white;
padding: 10px;
&:hover {
text-decoration: underline;
background-color: #2d323d;
border-radius: 2px;
}
`
export const ScItem = styled(TournamentInfo)``