degmods.com/src/styles/cardMod.css
freakoverse e40c900499
All checks were successful
Release to Staging / build_and_release (push) Successful in 43s
Update src/styles/cardMod.css
2024-08-19 08:32:40 +00:00

125 lines
2.2 KiB
CSS

.cardModMain {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
overflow: hidden;
background: linear-gradient(to top right, #262626, #292929, #262626);
}
.cMMPicture {
position: relative;
width: 100%;
padding-top: 56.25%;
background: rgba(0, 0, 0, 0.1);
}
.cMMBody {
padding: 15px;
color: rgba(255, 255, 255, 0.5);
display: flex;
flex-direction: column;
grid-gap: 15px;
flex-grow: 1;
justify-content: space-between;
}
.cMMFoot {
width: 100%;
padding: 10px 25px;
border-top: solid 1px rgba(255, 255, 255, 0.05);
font-size: 14px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.cardModMainWrapperLink {
transition: ease 0.4s;
text-decoration: unset;
color: unset;
transform: scale(1);
border-radius: 12px;
padding: 2px;
box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.05);
cursor: pointer;
}
.cardModMainWrapperLink:hover {
transition: ease 0.4s;
text-decoration: unset;
color: unset;
transform: scale(1.01);
}
.cardModMainWrapperLink:active {
transition: ease 0.1s;
transform: scale(1);
}
.cardModMainWrapperLink::before {
transition: ease 0.4s;
background: linear-gradient(
to top,
#8000ff 0%,
#232323 50%,
rgba(255, 255, 255, 0) 100%
);
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: -1;
border-radius: 12px;
}
.cardModMainWrapperLink:hover::before {
transition: 0.4s ease;
opacity: 1;
}
.cMMBodyTitle {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
font-size: 20px;
line-height: 1.25;
color: rgba(255, 255, 255, 0.75);
font-weight: bold;
}
.cMMBodyText {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
color: rgba(255, 255, 255, 0.5);
font-size: 15px;
line-height: 1.5;
}
.cMMFootReactions {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
grid-gap: 25px;
}
.cMMFootReactionsElement {
display: flex;
flex-direction: row;
grid-gap: 5px;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.25);
}