69 lines
1.1 KiB
CSS
69 lines
1.1 KiB
CSS
.card {
|
|
overflow: visible;
|
|
background: transparent;
|
|
}
|
|
|
|
.cardImage {
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.cardBody {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 15px;
|
|
border-radius: 9px;
|
|
background: linear-gradient(180deg, rgba(73, 75, 79, .42), rgba(39, 40, 43, .82));
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translateY(3px);
|
|
transition: opacity .2s ease, transform .2s ease;
|
|
}
|
|
|
|
.card:hover .cardBody,
|
|
.card:focus-visible .cardBody {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.cardBody > strong {
|
|
margin-bottom: 6px;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.cardBody > small {
|
|
min-height: 0;
|
|
color: rgba(255, 255, 255, .77);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.albumBadge {
|
|
position: static;
|
|
width: fit-content;
|
|
margin-bottom: auto;
|
|
background: rgba(43, 44, 47, .72);
|
|
}
|
|
|
|
.cardFooter {
|
|
border-top-color: rgba(255, 255, 255, .2);
|
|
}
|
|
|
|
.cardFooter em {
|
|
color: rgba(255, 255, 255, .72);
|
|
}
|
|
|
|
.cardFooter b {
|
|
color: #ffd0c1;
|
|
}
|
|
|
|
@media (hover: none) {
|
|
.cardBody {
|
|
opacity: 0;
|
|
transform: none;
|
|
}
|
|
}
|