40 lines
1.1 KiB
CSS
40 lines
1.1 KiB
CSS
.menu-panel .menu-panel-body {
|
|
background-color: rgba(30, 30, 30, 0.45);
|
|
backdrop-filter: blur(32px) saturate(180%);
|
|
animation: menuIn 0.1s var(--appleEase);
|
|
}
|
|
@keyframes menuIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-10px) translate3d(0, 0, 0);
|
|
background: #1e1e1e;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
background: rgba(30, 30, 30, 0.45);
|
|
}
|
|
}
|
|
.cd-mediaitem-square:not(.mediaitem-card) {
|
|
transition: transform 0.2s var(--appleEase);
|
|
transition-delay: 0.1s;
|
|
padding: 12px;
|
|
height: 250px;
|
|
}
|
|
.cd-mediaitem-square:not(.mediaitem-card) .artwork-container,
|
|
.cd-mediaitem-square:not(.mediaitem-card) .info-rect {
|
|
transition: transform 0.22s var(--appleEase);
|
|
transition-delay: 0.05s;
|
|
}
|
|
.cd-mediaitem-square:not(.mediaitem-card):hover .artwork-container {
|
|
transform: scale(1.1);
|
|
transition: transform 0.1s var(--appleEase);
|
|
transition-delay: 0s;
|
|
transform-origin: center;
|
|
}
|
|
.cd-mediaitem-square:not(.mediaitem-card):hover .info-rect {
|
|
z-index: 1;
|
|
transition: transform 0.1s var(--appleEase);
|
|
transition-delay: 0s;
|
|
transform: translateY(8px) translate3d(0, 0, 0);
|
|
}
|