A music player that connects to your cloud/distributed storage.
1<style>
2 @import "./vendor/@phosphor-icons/web/bold/style.css";
3 @import "./vendor/@phosphor-icons/web/fill/style.css";
4
5 @import "./styles/base.css";
6 @import "./styles/diffuse/facet.css";
7
8 @layer base, diffuse;
9
10 .playlists-list {
11 display: flex;
12 flex-direction: column;
13 gap: var(--space-xs);
14 list-style: none;
15 margin: 0;
16 padding: 0;
17 }
18
19 .playlists-item {
20 align-items: center;
21 display: flex;
22 gap: var(--space-xs);
23 }
24
25 .playlists-item__info {
26 display: flex;
27 flex-direction: column;
28 flex: 1;
29 gap: var(--space-3xs);
30 min-width: 0;
31 }
32
33 .playlists-item__name {
34 font-weight: 600;
35 overflow: hidden;
36 text-overflow: ellipsis;
37 white-space: nowrap;
38 }
39
40 .playlists-item__detail {
41 color: oklch(from var(--text-color) l c h / 0.6);
42 font-size: var(--fs-xs);
43 overflow: hidden;
44 text-overflow: ellipsis;
45 white-space: nowrap;
46 }
47
48 .playlists-category {
49 font-size: var(--fs-xs);
50 font-weight: 600;
51 letter-spacing: var(--tracking-wider);
52 opacity: 0.4;
53 padding-block: var(--space-2xs);
54 text-transform: uppercase;
55 }
56
57 .playlists-category + .playlists-category,
58 .playlists-item + .playlists-category {
59 margin-top: var(--space-xs);
60 }
61
62 .tracks-section {
63 display: flex;
64 flex-direction: column;
65 gap: var(--space-2xs);
66 }
67
68 .tracks-section__heading {
69 font-size: var(--fs-xs);
70 font-weight: 600;
71 letter-spacing: var(--tracking-wider);
72 opacity: 0.4;
73 text-transform: uppercase;
74 }
75
76 .tracks-list {
77 display: flex;
78 flex-direction: column;
79 gap: var(--space-3xs);
80 list-style: none;
81 margin: 0;
82 padding: 0;
83 }
84
85 .tracks-list__name {
86 font-size: var(--fs-sm);
87 font-weight: 600;
88 overflow: hidden;
89 text-overflow: ellipsis;
90 white-space: nowrap;
91 }
92
93 .tracks-list__artist {
94 color: oklch(from var(--text-color) l c h / 0.6);
95 font-size: var(--fs-xs);
96 overflow: hidden;
97 text-overflow: ellipsis;
98 white-space: nowrap;
99 }
100</style>
101
102<dialog id="playlists-dialog"></dialog>
103<dialog id="create-playlist-dialog"></dialog>
104
105<main>
106 <div class="facet__left">
107 <div>
108 <a href="./dashboard/" class="diffuse-logo-container">
109 <svg viewBox="0 0 902 134" width="160">
110 <title>Diffuse</title>
111 <use
112 xlink:href="images/diffuse-current.svg#diffuse"
113 href="images/diffuse-current.svg#diffuse"
114 ></use>
115 </svg>
116 </a>
117 </div>
118 <h1>Playlists</h1>
119 <p>An overview of all playlists and their contents.</p>
120 <p class="button-row" style="margin-top: var(--space-md)">
121 <button id="create-playlist-btn" class="button button--accent">
122 <i class="ph-bold ph-plus"></i>
123 Create playlist
124 </button>
125 </p>
126 </div>
127
128 <div class="facet__right">
129 <ul id="playlists-list" class="playlists-list" hidden></ul>
130 <p id="playlists-empty" class="caption">No playlists yet.</p>
131 </div>
132</main>
133
134<script type="module" src="facets/data/playlists/index.inline.js"></script>