POOLab18-SlopifyV2/res/template/song.css

61 lines
885 B
CSS
Raw Normal View History

2024-05-08 12:45:20 +00:00
@keyframes shadow-anim {
0% {
box-shadow: 0.0em 0.2em 0.6em #344c34a0;
}
25% {
box-shadow: 0.1em 0.3em 0.8em #344c34a0;
}
50% {
box-shadow: 0.2em 0.4em 1.2em #344c34a0;
}
75% {
box-shadow: 0.1em 0.3em 0.8em #344c34a0;
}
100% {
box-shadow: 0.0em 0.2em 0.6em #344c34a0;
}
}
#song {
display: grid;
animation: shadow-anim 10s infinite alternate;
border-radius: 0.8em;
padding: 0.8em;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr;
grid-template-areas:
"num title duration"
"cover cover cover";
max-height: 20em;
min-width: 50%;
max-width: 30em;
margin: auto;
gap: 0.4em;
align-items: center;
}
#song .number {
grid-area: num;
}
#song .title {
grid-area: title;
}
#song .duration {
grid-area: duration;
}
#song .cover {
grid-area: cover;
object-fit: contain;
background-color: #393939;
width: 8em;
height: 8em;
}