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