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.
159 lines
2.7 KiB
159 lines
2.7 KiB
import styled, { css } from 'styled-components/macro'
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
import { customScrollbar } from 'features/Common'
|
|
|
|
export const ScMatchesWrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: white;
|
|
min-width: 360px;
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
margin-top: 20px;
|
|
align-items: center;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const ScTitle = styled.span`
|
|
font-weight: 700;
|
|
font-size: 34px;
|
|
line-height: 40px;
|
|
margin-bottom: 75px;
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
text-align: center;
|
|
font-size: 13px;
|
|
line-height: 150%;
|
|
margin-bottom: 20px;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const ScMatchesList = styled.div`
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
|
|
${customScrollbar}
|
|
|
|
.matchesHighlights__Checkbox {
|
|
|
|
& label {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const ScLabel = styled.div`
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
margin: auto 0;
|
|
`
|
|
|
|
export const ScDate = styled.span`
|
|
font-weight: 400;
|
|
`
|
|
|
|
export const ScTournament = styled.div`
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
display: flex;
|
|
align-items: center;
|
|
/* height: 16px; */
|
|
`
|
|
|
|
export const ScTournamentName = styled.span`
|
|
margin-left: 5px;
|
|
`
|
|
|
|
export const ScCountryFlag = styled.img`
|
|
width: 0.71rem;
|
|
height: 0.75rem;
|
|
margin-left: 0.567rem;
|
|
object-fit: contain;
|
|
object-position: bottom;
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
width: 12px;
|
|
height: 8px;
|
|
margin-left: 3.5px;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const ScFakeDate = styled.div`
|
|
background: #4E4E4E;
|
|
border-radius: 4px;
|
|
width: 218px;
|
|
height: 10px;
|
|
margin-bottom: 7px;
|
|
`
|
|
|
|
export const ScFakeTournamentName = styled.div`
|
|
background: rgba(78, 78, 78, 0.6);
|
|
border-radius: 4px;
|
|
width: 92px;
|
|
height: 10px;
|
|
`
|
|
|
|
export const ScFakeTournament = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
`
|
|
|
|
export const ScFakeCheckbox = styled.div`
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
background: #4E4E4E;
|
|
border-radius: 4px;
|
|
margin-right: 20px;
|
|
`
|
|
|
|
export const ScFakeWrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 14px;
|
|
position: relative;
|
|
|
|
.skeleton {
|
|
animation: skeleton-loading 1s linear infinite alternate;
|
|
}
|
|
|
|
@keyframes skeleton-loading {
|
|
0% {
|
|
background-color: rgba(78, 78, 78, 0.4);
|
|
}
|
|
100% {
|
|
background-color: rgba(78, 78, 78, 1);
|
|
}
|
|
}
|
|
`
|
|
|
|
export const ScLoaderWrapper = styled.div`
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 75%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`
|
|
|
|
export const ScCountMatches = styled.span`
|
|
font-weight: 400;
|
|
`
|
|
|