Browse Source

Add additional card styling properties

master
jeffvli 3 years ago
committed by Jeff
parent
commit
f43898fe13
  1. 2
      src/components/card/Card.tsx
  2. 25
      src/components/card/styled.tsx
  3. 38
      src/components/shared/setDefaultSettings.ts

2
src/components/card/Card.tsx

@ -157,7 +157,7 @@ const Card = ({
return (
<>
<CardPanel bordered shaded cardsize={size} style={rest.style}>
<CardPanel cardsize={size} style={rest.style}>
<Overlay cardsize={size}>
{lazyLoad ? (
<LazyCardImg

25
src/components/card/styled.tsx

@ -19,16 +19,31 @@ interface Card {
}; */
export const CardPanel = styled(Panel)<Card>`
border-radius: ${(props) => props.theme.other.card.borderRadius};
border-radius: 0px;
text-align: center;
width: ${(props) => `${Number(props.cardsize) + 2}px`};
height: ${(props) => `${Number(props.cardsize) + 55}px`};
border: ${(props) => props.theme.other.card.border};
img {
border-top: ${(props) => props.theme.other.card.image.borderTop};
border-right: ${(props) => props.theme.other.card.image.borderRight};
border-bottom: ${(props) => props.theme.other.card.image.borderBottom};
border-left: ${(props) => props.theme.other.card.image.borderLeft};
border-radius: ${(props) => props.theme.other.card.image.borderRadius};
}
&:hover {
border: 1px solid ${(props) => props.theme.colors.primary};
border-color: ${(props) => props.theme.colors.primary} !important;
img {
filter: brightness(70%);
-webkit-filter: brightness(70%);
}
.rs-panel {
border-color: ${(props) => props.theme.colors.primary} !important;
}
}
&:hover .rs-btn {
@ -37,7 +52,13 @@ export const CardPanel = styled(Panel)<Card>`
`;
export const InfoPanel = styled(Panel)<Card>`
border-radius: 0px;
width: ${(props) => `${props.cardsize}px`};
border-radius: ${(props) => props.theme.other.card.info.borderRadius} !important;
border-top: ${(props) => props.theme.other.card.info.borderTop} !important;
border-right: ${(props) => props.theme.other.card.info.borderRight} !important;
border-bottom: ${(props) => props.theme.other.card.info.borderBottom} !important;
border-left: ${(props) => props.theme.other.card.info.borderLeft} !important;
`;
export const InfoSpan = styled.div`

38
src/components/shared/setDefaultSettings.ts

@ -554,7 +554,21 @@ const setDefaultSettings = (force: boolean) => {
},
coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
card: {
borderRadius: '0px',
border: '1px #3c3f43 solid',
image: {
borderTop: 'none',
borderRight: 'none',
borderBottom: 'none',
borderLeft: 'none',
borderRadius: '0px',
},
info: {
borderTop: 'none',
borderRight: 'none',
borderBottom: 'none',
borderLeft: 'none',
borderRadius: '0px',
},
},
input: {
borderRadius: '0px',
@ -603,14 +617,14 @@ const setDefaultSettings = (force: boolean) => {
playerBar: {
color: '#FFFFFF',
colorSecondary: '#888e94',
background: '#161B22',
background: '#212121',
button: {
color: 'rgba(240, 240, 240, 0.8)',
colorHover: '#FFFFFF',
},
},
sideBar: {
background: '#161B22',
background: '#212121',
button: {
color: '#D8D8D8',
colorHover: '#FFFFFF',
@ -618,7 +632,7 @@ const setDefaultSettings = (force: boolean) => {
},
titleBar: {
color: '#FFFFFF',
background: '#161B22',
background: '#212121',
},
},
button: {
@ -697,7 +711,21 @@ const setDefaultSettings = (force: boolean) => {
},
coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
card: {
borderRadius: '0px',
border: '1px #3c3f43 solid',
image: {
borderTop: 'none',
borderRight: 'none',
borderBottom: 'none',
borderLeft: 'none',
borderRadius: '0px',
},
info: {
borderTop: 'none',
borderRight: 'none',
borderBottom: 'none',
borderLeft: 'none',
borderRadius: '0px',
},
},
input: {
borderRadius: '0px',

Loading…
Cancel
Save