add smooth entering transition on tracks
This commit is contained in:
parent
977be69127
commit
d64b384203
|
@ -7,6 +7,20 @@
|
|||
display: flex;
|
||||
margin-right: -1rem;
|
||||
padding: 1rem 0;
|
||||
transform-origin: center;
|
||||
animation: trackIn .3s;
|
||||
}
|
||||
|
||||
@keyframes trackIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(.7, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.track--active::before {
|
||||
|
@ -34,6 +48,7 @@
|
|||
|
||||
.track__title {
|
||||
overflow: hidden;
|
||||
min-height: 1.14em;
|
||||
color: $color-secondary;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
@ -47,8 +62,10 @@
|
|||
|
||||
.track__subtitle {
|
||||
margin-top: .2rem;
|
||||
min-height: 1.5em;
|
||||
color: $color-grey-1;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.track__username {
|
||||
|
|
|
@ -27,8 +27,8 @@
|
|||
|
||||
<div class="queue__section">
|
||||
<div class="queue__sectionTitle">History</div>
|
||||
{#each history as track}
|
||||
<div class="track" class:track--active={track === $current} class:track--playing={!$paused}>
|
||||
{#each history as track, i (track.referer.url)}
|
||||
<div class="track track--history" class:track--active={track === $current} class:track--playing={!$paused}>
|
||||
<div class="track__main" on:click={() => select(track)}>
|
||||
<div class="track__title">{track.media.title}</div>
|
||||
<div class="track__subtitle">
|
||||
|
|
Loading…
Reference in New Issue