Agahnim/agahnim.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mini-player: wip implementation

Browse source
This commit is contained in:
Agahnim 2026-03-20 13:48:15 +01:00
parent 3d12390bfe
commit 15da7cb7d2
7 changed files with 55 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/assets/svgs/pause.svg Normal file
View file

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pause-icon lucide-pause"><rect x="14" y="3" width="5" height="18" rx="1"/><rect x="5" y="3" width="5" height="18" rx="1"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 332 B

2
static/assets/svgs/play.svg Normal file
View file

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play-icon lucide-play"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 327 B

2
static/assets/svgs/skip-back.svg Normal file
View file

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skip-back-icon lucide-skip-back"><path d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z"/><path d="M3 20V4"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 362 B

2
static/assets/svgs/skip-forward.svg Normal file
View file

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skip-forward-icon lucide-skip-forward"><path d="M21 4v16"/><path d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 366 B

2
static/assets/svgs/volume-2.svg Normal file
View file

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-volume2-icon lucide-volume-2"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><path d="M16 9a5 5 0 0 1 0 6"/><path d="M19.364 18.364a9 9 0 0 0 0-12.728"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 496 B

40
static/style.css
View file

@ -7,6 +7,7 @@
--darker-pink: #ff75a7;
--darkerer-pink: #ff4287;
--win-bg-grey: #c0c0c0;
--grey-500: oklch(55.1% 0.027 264.364);
}
body {
@ -44,11 +45,9 @@ crt {
}
&::before {
background: linear-gradient(
to bottom,
transparent 50%,
rgba(0, 0, 0, 0.2) 51%
);
background: linear-gradient(to bottom,
transparent 50%,
rgba(0, 0, 0, 0.2) 51%);
background-size: 100% 4px;
animation: scanlines 1s steps(60) infinite;
}
@ -157,9 +156,38 @@ miniplayer {
left: 0;
z-index: 100;
background-color: var(--win-bg-grey);
border: 2px solid oklch(55.1% 0.027 264.364);
border: 2px solid var(--grey-500);
ominous-message {
font-style: italic;
}
controls {
display: flex;
flex-direction: row;
gap: 5rem;
state {
display: flex;
align-items: center;
gap: 5px;
}
volume {
display: flex;
align-items: center;
gap: 5px;
input {
height: 4px;
width: 5rem;
appearance: none;
background-color: white;
border: 1px solid var(--grey-500);
}
}
}
}