[READ-ONLY] Mirror of https://github.com/probablykasper/ferrum. Music library app for Mac, Linux and Windows
ferrum.kasper.space
electron
linux
macos
music
music-library
music-player
napi
windows
Slight redesign of header & search
+7
-20
+1
CHANGELOG.md
+1
CHANGELOG.md
···
8
8
- Add queue panel slide-out transition
9
9
- Add `Ctrl+Tab` and `Ctrl+Shift+Tab` to select next/previous playlist
10
10
- Make time & volume sliders look ok
11
+
- Small design updates to tracklist header & filter textbox
11
12
- Fix dragging tracks to up next/autoplay queue boundary
12
13
- Fix button edge not clickable due to zoom
13
14
- Fix rearranging queue items not working when dragging the cover artwork
+3
-3
src/components/Filter.svelte
+3
-3
src/components/Filter.svelte
···
16
16
on:keydown
17
17
bind:this={filterInput}
18
18
type="text"
19
-
class="search text-[13px] leading-none"
19
+
class="search rounded-[5px] text-[13px] leading-none"
20
20
class:on={$filter}
21
21
bind:value={$filter}
22
22
placeholder="Filter"
···
28
28
width: calc(100% - 15px*2)
29
29
margin: auto
30
30
font-family: inherit
31
-
padding: 5px 12px
31
+
padding: 5px 10px
32
32
box-sizing: border-box
33
33
color: inherit
34
34
background-color: hsla(var(--hue), 68%, 90%, 0.08)
35
35
outline: none
36
-
border: 1px solid rgba(255, 255, 255, 0.15)
36
+
border: 1px solid rgba(255, 255, 255, 0.1)
37
37
&:focus
38
38
background-color: hsla(var(--hue), 65%, 60%, 0.2)
39
39
outline: 2px solid var(--accent-1)
+3
-17
src/components/TrackList.svelte
+3
-17
src/components/TrackList.svelte
···
214
214
on:dragleave={() => (dragToIndex = null)}
215
215
class:no-selection={$selection.count === 0}
216
216
>
217
-
<div class="header">
217
+
<div class="relative pt-4 px-5 pb-5">
218
218
<div class:dragbar={$modalCount === 0 && isMac} class:queue-visible={$queueVisible} />
219
219
<h3 class="title pb-0.5 text-[19px] leading-none">
220
220
{#if $page.tracklist.id === 'root'}
···
223
223
{$page.tracklist.name}
224
224
{/if}
225
225
</h3>
226
-
<div class="info leading-none">{$page.length} songs</div>
226
+
<div class="text-[13px] leading-4 opacity-70">{$page.length} songs</div>
227
227
{#if 'description' in $page.tracklist && $page.tracklist.description !== ''}
228
-
<div class="description">{$page.tracklist.description}</div>
228
+
<div class="mt-2.5 text-sm text-[13px] opacity-70">{$page.tracklist.description}</div>
229
229
{/if}
230
230
</div>
231
231
<div class="row table-header" class:desc={$page.sortDesc} role="row">
···
413
413
.selected
414
414
background-color: hsla(var(--hue), 70%, 46%, 1)
415
415
416
-
.header
417
-
padding-left: 20px
418
-
padding-right: 20px
419
-
padding-top: 15px
420
-
margin-bottom: 20px
421
-
position: relative
422
416
.dragbar
423
417
-webkit-app-region: drag
424
418
position: absolute
···
431
425
.title
432
426
margin: 0px
433
427
font-weight: 500
434
-
.info
435
-
font-size: 13px
436
-
opacity: 0.7
437
-
.description
438
-
margin-top: 10px
439
-
font-size: 14px
440
-
opacity: 0.7
441
-
442
428
.tracklist
443
429
display: flex
444
430
flex-direction: column