denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edited styling of media player component

Browse Source
This commit is contained in:
denizk0461
2026-04-19 21:02:39 +02:00
parent 46cd759a5e
commit c92da6d766
1 changed files with 58 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/lib/media/player.svelte
View File

@@ -61,12 +61,12 @@
onclick={() => paused = !paused}
>
{#if paused}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<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>
{:else}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9v6m-4.5 0V9M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
{/if}
@@ -114,26 +114,21 @@
<div class="track-list">
{#each tracks as t, index}
<div class="track-container">
<button class="icon" aria-label="play" onclick={() => {
playTrack(index);
}}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<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>
</button>
<button class="track-play" aria-label="play" onclick={() => {
playTrack(index);
}}>
<svg class="track-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<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>
</button>
<div class="spacer"></div>
<a class="icon" href={t.link} aria-label="download">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</a>
</div>
<a class="track-icon track-download-icon" href={t.link} aria-label="download">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</a>
{/each}
</div>
</div>
@@ -147,14 +142,15 @@
}
.icon:hover {
cursor: pointer;
color: var(--color-highlight-alt);
/* color: var(--color-highlight-alt); */
}
.media-player {
width: 100%;
border-radius: var(--border-radius);
background-color: var(--color-background-highlight-alt);
padding: 8px 12px;
padding: 16px 0 16px;
overflow: hidden;
}
.media-player p, .media-player a {
@@ -165,12 +161,17 @@
display: grid;
grid-template-columns: min-content auto min-content;
gap: 4px;
margin: 0 16px;
}
.now-playing-button {
align-self: center;
width: 32px;
height: 32px;
width: 40px;
height: 40px;
}
/* not sure why the svg target is required only for the latter here but it won't work without it */
.now-playing-button:hover, .track-download-icon:hover svg {
color: var(--color-highlight-alt);
}
.now-playing-hint, .now-playing-duration {
@@ -193,7 +194,7 @@
.progress-container {
display: flex;
align-items: center;
margin: 4px 0;
margin: 4px 12px;
}
.slider {
@@ -202,6 +203,8 @@
background: var(--color-background-highlight-alt);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
margin: 4px 0;
}
.progress-bar {
@@ -211,19 +214,45 @@
transition: width var(--duration-animation) var(--anim-curve);
}
.track-list {
display: grid;
grid-template-columns: auto min-content;
align-items: center;
}
.track-title {
margin: 0 4px !important;
line-height: 1.0rem;
font-size: 1.0rem;
}
.track-container {
.track-play {
display: flex;
flex-direction: row;
align-items: center;
margin: 8px 0;
width: 100%;
padding: 4px 0 4px 16px;
height: fit-content;
cursor: pointer;
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
transition: background-color var(--duration-animation) var(--anim-curve);
}
.track-play:hover {
background-color: var(--color-background-highlight-hover-alt);
}
.spacer {
margin: 0 auto;
.track-icon {
width: 24px;
color: var(--color-text);
}
.track-download-icon {
padding: 0 12px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--duration-animation) var(--anim-curve);
}
</style>