121 lines
2.1 KiB
CSS
121 lines
2.1 KiB
CSS
|
:root {
|
||
|
|
--sp-1: 1px;
|
||
|
|
--sp-2: 2px;
|
||
|
|
--sp-3: 4px;
|
||
|
|
--sp-4: 8px;
|
||
|
|
--sp-5: 16px;
|
||
|
|
|
||
|
|
--col-fg: #ffffff;
|
||
|
|
|
||
|
|
--smooth: cubic-bezier(.1, 1, .5, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
font-family: Inter, sans-serif;
|
||
|
|
font-feature-settings: 'liga' 1, 'calt' 1;
|
||
|
|
|
||
|
|
color: var(--col-fg);
|
||
|
|
background-color: transparent;
|
||
|
|
|
||
|
|
text-shadow:
|
||
|
|
var(--sp-1) var(--sp-1) var(--sp-4) #000,
|
||
|
|
var(--sp-1) var(--sp-2) #0008;
|
||
|
|
}
|
||
|
|
@supports (font-variation-settings: normal) {
|
||
|
|
body { font-family: InterVariable, sans-serif; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-col {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-row {
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
|
||
|
|
.justify-center {
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gap-1 { gap: var(--sp-1); }
|
||
|
|
.gap-2 { gap: var(--sp-2); }
|
||
|
|
.gap-3 { gap: var(--sp-3); }
|
||
|
|
.gap-4 { gap: var(--sp-4); }
|
||
|
|
.gap-5 { gap: var(--sp-5); }
|
||
|
|
|
||
|
|
.text-ellipses {
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow-x: clip;
|
||
|
|
text-wrap: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#music {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: min-content;
|
||
|
|
padding: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nowplaying {
|
||
|
|
margin-bottom: var(--sp-3);
|
||
|
|
text-transform: uppercase;
|
||
|
|
opacity: .5;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.artwork {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
border-radius: var(--sp-3);
|
||
|
|
background: #0008;
|
||
|
|
box-shadow:
|
||
|
|
0 0 var(--sp-5) #000c,
|
||
|
|
var(--sp-1) var(--sp-1) var(--sp-2) #0004;
|
||
|
|
transition: transform .5s var(--smooth), opacity .5s, filter .5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-artist {
|
||
|
|
max-width: calc(100vw - 2em - 80px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
padding: 0 var(--sp-5);
|
||
|
|
font-size: 2em;
|
||
|
|
font-weight: 800;
|
||
|
|
transition: transform .5s var(--smooth), opacity .1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.artist {
|
||
|
|
padding: 0 var(--sp-5);
|
||
|
|
margin-top: calc(0px - var(--sp-3));
|
||
|
|
font-size: 1.5em;
|
||
|
|
font-weight: 600;
|
||
|
|
transition: transform .5s var(--smooth), opacity .1s;
|
||
|
|
transition-delay: .05s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#music.paused, #music.switching {
|
||
|
|
.artwork {
|
||
|
|
transform: scale(0.8);
|
||
|
|
opacity: .5;
|
||
|
|
filter: grayscale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.title, .artist {
|
||
|
|
transform: translateX(-16px);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|