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

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

@@ -61,12 +61,12 @@
onclick={() => paused = !paused} onclick={() => paused = !paused}
> >
{#if 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="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" /> <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> </svg>
{:else} {: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" /> <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> </svg>
{/if} {/if}
@@ -114,26 +114,21 @@
<div class="track-list"> <div class="track-list">
{#each tracks as t, index} {#each tracks as t, index}
<div class="track-container"> <button class="track-play" aria-label="play" onclick={() => {
<button class="icon" aria-label="play" onclick={() => {
playTrack(index); 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"> <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="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" /> <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> </svg>
<p class="track-title">{t.title}</p>
</button> </button>
<p class="track-title">{t.title}</p> <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">
<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" /> <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> </svg>
</a> </a>
</div>
{/each} {/each}
</div> </div>
</div> </div>
@@ -147,14 +142,15 @@
} }
.icon:hover { .icon:hover {
cursor: pointer; cursor: pointer;
color: var(--color-highlight-alt); /* color: var(--color-highlight-alt); */
} }
.media-player { .media-player {
width: 100%; width: 100%;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color-background-highlight-alt); background-color: var(--color-background-highlight-alt);
padding: 8px 12px; padding: 16px 0 16px;
overflow: hidden;
} }
.media-player p, .media-player a { .media-player p, .media-player a {
@@ -165,12 +161,17 @@
display: grid; display: grid;
grid-template-columns: min-content auto min-content; grid-template-columns: min-content auto min-content;
gap: 4px; gap: 4px;
margin: 0 16px;
} }
.now-playing-button { .now-playing-button {
align-self: center; align-self: center;
width: 32px; width: 40px;
height: 32px; 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 { .now-playing-hint, .now-playing-duration {
@@ -193,7 +194,7 @@
.progress-container { .progress-container {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 4px 0; margin: 4px 12px;
} }
.slider { .slider {
@@ -202,6 +203,8 @@
background: var(--color-background-highlight-alt); background: var(--color-background-highlight-alt);
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
cursor: pointer;
margin: 4px 0;
} }
.progress-bar { .progress-bar {
@@ -211,19 +214,45 @@
transition: width var(--duration-animation) var(--anim-curve); transition: width var(--duration-animation) var(--anim-curve);
} }
.track-list {
display: grid;
grid-template-columns: auto min-content;
align-items: center;
}
.track-title { .track-title {
margin: 0 4px !important; margin: 0 4px !important;
line-height: 1.0rem; line-height: 1.0rem;
font-size: 1.0rem;
} }
.track-container { .track-play {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; 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 { .track-icon {
margin: 0 auto; 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> </style>