bravo68web-portfolio-nextjs/components/discord-activity.style.jsx

75 lines
1.4 KiB
JavaScript

import styled from "styled-components";
export const DicordActivityStyle = styled.div`
border-color: #ffffff;
border-style: solid;
border-width: 2px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
width: 450px;
height: 120px;
min-height: 75px;
background: rgb(131, 58, 180);
background: linear-gradient(
90deg,
rgba(131, 58, 180, 1) 0%,
rgba(253, 29, 29, 1) 50%,
rgba(252, 176, 69, 1) 100%
);
border-radius: 6px;
padding: 0.3em 0.8em;
.discord-icons {
display: flex;
/* margin-right: 2em; */
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
/* position: absolute; */
position: relative;
.discord-large-icon {
width: 80px;
height: 80px;
/* background-color: #61c626; */
img {
max-width: 100%;
object-fit: contain;
border-radius: 6px;
}
}
.discord-small-icon {
width: 25px;
height: 25px;
box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
border-radius: 50px;
position: absolute;
bottom: 6px;
right: 1px;
img {
max-width: 100%;
object-fit: contain;
border-radius: 50px;
}
}
}
.discord-messageBox {
display: flex;
flex-direction: column;
margin-left: 1em;
font-size: 0.9em;
}
.discord-message-application {
font-size: 1.4em;
}
.discord-message-activity {
font-size: 1.1em;
}
.discord-message-files {
font-size: 1.0rem;
}
`;