added track numbers to media player

This commit is contained in:
2026-04-19 21:50:08 +02:00
parent bdc38cef4e
commit c0901a63aa
3 changed files with 18 additions and 7 deletions

View File

@@ -133,7 +133,10 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" />
</svg>
<p class="track-title">{t.title}</p>
<div class="track-text-container">
<span class="track-title-index">{index + 1}.</span>
<p class="track-title">{t.title}</p>
</div>
</button>
<a class="track-icon track-download-icon" href={t.link} aria-label="download">
@@ -235,6 +238,18 @@
align-items: center;
}
.track-text-container {
display: flex;
flex-direction: row;
}
.track-title-index {
font-size: 0.8rem;
margin: 0 1px 0 5px;
align-self: flex-end !important;
line-height: 0.8rem;
}
.track-title {
margin: 0 4px !important;
line-height: 1.0rem;
@@ -256,10 +271,10 @@
.track-play:hover {
background-color: var(--color-player);
}
.track-title, .track-icon {
.track-title-index, .track-title, .track-icon {
transition: color var(--duration-animation) var(--anim-curve);
}
.track-play:hover .track-title, .track-play:hover .track-icon {
.track-play:hover .track-title-index, .track-play:hover .track-title, .track-play:hover .track-icon {
color: var(--color-player-text-hover);
}

View File

@@ -6,8 +6,6 @@
This EP, to me, represents the start of a deviation in tone, production quality, and musical style from my previous works. While it was only a start, I am quite proud of the works I produced.
The EP is available for download on [my copyparty instance](https://files.natconf.dev/public/my_tracks/A%20New%20Beginning/).
<Player
tracks={[
{

View File

@@ -10,8 +10,6 @@ The cover for **Dreamworld** is an edited picture of the Wallanlagen in Bremen,
I own a vinyl record of this album, produced as a one-off by [beevinyl](https://beevinyl.com/). It features the [A New Beginning EP](../anewbeginning) as bonus tracks.
The album is available for download on [my copyparty instance](https://files.natconf.dev/public/my_tracks/Dreamworld/).
<Player
tracks={[
{