2b2dcc8096
- replaced Inter with Pretendard - starting overhaul for redmond style - moved search bar to the title bar - added cast button to bottom chrome - moved mini player button to title bar - moved playback progress above controls - artwork is now spaced out from the bottom corner - seperated artist and album text - made mediaitems overall smaller to show more content - media items now resize based on window size - changed color of volume knob - made default appearance slightly lighter - made content area darker - increase size of action buttons
132 lines
No EOL
3 KiB
Text
132 lines
No EOL
3 KiB
Text
@panelColorsFallback: rgb(30 30 30);
|
|
@panelColors : rgb(30 30 30 / 45%);
|
|
|
|
.menu-panel {
|
|
.menu-panel-body {
|
|
background-color: @panelColors;
|
|
backdrop-filter : blur(32px) saturate(180%);
|
|
|
|
&.menu-panel-body-down {
|
|
animation: menuInDown .10s var(--appleEase);
|
|
}
|
|
|
|
&.menu-panel-body-up {
|
|
animation: menuInUp .10s var(--appleEase);
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes menuInUp {
|
|
0% {
|
|
opacity : 0;
|
|
transform : translateY(-10px) translate3d(0,0,0);
|
|
background: @panelColorsFallback;
|
|
}
|
|
|
|
100% {
|
|
opacity : 1;
|
|
transform : translateY(0);
|
|
background: @panelColors;
|
|
}
|
|
}
|
|
|
|
@keyframes menuInDown {
|
|
0% {
|
|
opacity : 0;
|
|
transform : translateY(10px) translate3d(0,0,0);
|
|
background: @panelColorsFallback;
|
|
}
|
|
|
|
100% {
|
|
opacity : 1;
|
|
transform : translateY(0);
|
|
background: @panelColors;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.cd-mediaitem-square {
|
|
--transition: width 1s, height 1s;
|
|
transition: var(--transition);
|
|
.artwork {
|
|
transition: var(--transition);
|
|
}
|
|
}
|
|
|
|
.cd-mediaitem-square:not(.mediaitem-card) {
|
|
transition : transform .2s var(--appleEase);
|
|
transition-delay: .1s;
|
|
padding : 12px;
|
|
|
|
// background-color: red;
|
|
height: 220px;
|
|
|
|
|
|
.artwork-container {}
|
|
|
|
.info-rect {}
|
|
|
|
.artwork-container,
|
|
.info-rect {
|
|
transition : transform .22s var(--appleEase);
|
|
transition-delay: .05s;
|
|
}
|
|
|
|
&:hover {
|
|
.artwork-container {
|
|
transform : scale(1.1);
|
|
transition : transform .1s var(--appleEase);
|
|
transition-delay: 0s;
|
|
transform-origin: center;
|
|
}
|
|
|
|
|
|
.info-rect {
|
|
z-index : 1;
|
|
transition : transform .1s var(--appleEase);
|
|
transition-delay: 0s;
|
|
transform : translateY(8px) translate3d(0,0,0);
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
|
|
}
|
|
}
|
|
|
|
.wpfade_transform-enter-active,
|
|
.wpfade_transform-leave-active {
|
|
--transitionTime: 0.2s;
|
|
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
.wpfade_transform-enter {
|
|
opacity: 0;
|
|
transform: translateX(50%) translate3d(0,0,0);
|
|
will-change: opacity, transform;
|
|
}
|
|
.wpfade_transform-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translate3d(0,0,0);
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
|
|
.wpfade_transform_backwards-enter-active,
|
|
.wpfade_transform_backwards-leave-active {
|
|
--transitionTime: 0.2s;
|
|
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
|
|
}
|
|
|
|
.wpfade_transform_backwards-enter {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translate3d(0,0,0);
|
|
will-change: opacity, transform;
|
|
}
|
|
.wpfade_transform_backwards-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(50%) translate3d(0,0,0);
|
|
will-change: opacity, transform;
|
|
} |