(width, height)
| 4588 | #${TRACK_ID} .cs-prev { visibility: hidden; } |
| 4589 | #${TRACK_ID}.cs-animating .cs-slot { |
| 4590 | transition: transform ${DURATION}ms cubic-bezier(.4,0,.2,1); |
| 4591 | } |
| 4592 | /* Only the two slots taking part are revealed. Showing every slot would |
| 4593 | put the idle third one on screen too, stacked on the outgoing one. |
| 4594 | visibility isn't interpolated, so each appears at its parked position |
| 4595 | \u2014 which is off the panel \u2014 and slides in from there. */ |
| 4596 | #${TRACK_ID}.cs-animating.cs-going-next .cs-current, |
| 4597 | #${TRACK_ID}.cs-animating.cs-going-next .cs-next, |
| 4598 | #${TRACK_ID}.cs-animating.cs-going-prev .cs-current, |
| 4599 | #${TRACK_ID}.cs-animating.cs-going-prev .cs-prev { visibility: visible; } |
| 4600 | #${TRACK_ID}.cs-animating.cs-going-next .cs-current { transform: translateX(calc(var(--cs-travel) * -1)); } |
| 4601 | #${TRACK_ID}.cs-animating.cs-going-next .cs-next { transform: translateX(0); } |
| 4602 | #${TRACK_ID}.cs-animating.cs-going-prev .cs-current { transform: translateX(var(--cs-travel)); } |
| 4603 | #${TRACK_ID}.cs-animating.cs-going-prev .cs-prev { transform: translateX(0); } |
| 4604 | /* Lives inside the current slot's face (see crossfadeToNew), so it takes |
| 4605 | that face's shape and, with the vinyl option on, its rotation \u2014 the |
| 4606 | two pictures cross-fade on one turning disc instead of the overlay |
| 4607 | standing still as a square on top of it. Below the vinyl furniture's |
| 4608 | z-index 3, so the label and grooves stay on top of both. */ |
| 4609 | #${TRACK_ID} .cs-fade-overlay { |
| 4610 | position: absolute; |
| 4611 | inset: 0; |
| 4612 | background-size: cover; |
| 4613 | background-position: center; |
| 4614 | background-repeat: no-repeat; |
| 4615 | border-radius: inherit; |
| 4616 | opacity: 0; |
| 4617 | pointer-events: none; |
| 4618 | z-index: 1; |
no test coverage detected