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/ProfileCard/styled.tsx

77 lines
1.5 KiB

import styled from 'styled-components/macro'
import { ProfileTypes } from 'config'
export const Wrapper = styled.div`
display: flex;
margin-left: 70px;
margin-bottom: 50px;
`
export const Name = styled.h1`
margin-bottom: 10px;
line-height: 40px;
font-size: 36px;
font-weight: bold;
letter-spacing: 0.02em;
color: #fff;
`
export const Logo = styled.img<{ profileType: number }>`
width: 88px;
height: 88px;
margin-right: 15px;
border-radius: ${({ profileType }) => (
profileType === ProfileTypes.PLAYERS ? '50%' : '0'
)};
`
export const Details = styled.div``
export const Bottom = styled.div`
display: flex;
`
export const AddToFavButton = styled.button`
display: flex;
align-items: center;
height: 32px;
padding: 0 16px;
border-radius: 2px;
font-size: 14px;
color: #fff;
background:
linear-gradient(
180deg, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 0.01%,
rgba(0, 0, 0, 0.1) 99.99%
),
#0033CC;
box-shadow: 0px 1px 0px rgba(0, 4, 41, 0.3);
border-style: none;
outline: none;
cursor: pointer;
svg {
margin-right: 10px;
width: 18px;
height: 18px;
}
`
export const InFavorites = styled(AddToFavButton)`
color: #EACB6F;
border: 1px solid currentColor;
background-color: transparent;
`
export const InfoItems = styled.div`
margin-left: 20px;
`
export const InfoItem = styled.div`
line-height: 18px;
font-size: 16px;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.5);
`