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 .sources-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 .sources-scheme {
18 font-size: var(--fs-2xs);
19 font-weight: 600;
20 letter-spacing: var(--tracking-wider);
21 margin-top: var(--space-lg);
22 opacity: 0.4;
23 text-transform: uppercase;
24
25 &:first-child {
26 margin-top: 0;
27 }
28 }
29
30 .sources-item {
31 align-items: center;
32 display: flex;
33 gap: var(--space-xs);
34 }
35
36 .sources-item--disabled .sources-item__info {
37 opacity: 0.2;
38 }
39
40 .sources-item__info {
41 display: flex;
42 flex-direction: column;
43 flex: 1;
44 gap: var(--space-3xs);
45 min-width: 0;
46 }
47
48 .sources-item__name {
49 font-weight: 600;
50 overflow: hidden;
51 text-overflow: ellipsis;
52 white-space: nowrap;
53 }
54
55 .sources-item__detail {
56 align-items: center;
57 color: oklch(from var(--text-color) l c h / 0.6);
58 display: flex;
59 font-size: var(--fs-xs);
60 gap: var(--space-3xs);
61 overflow: hidden;
62 text-overflow: ellipsis;
63 white-space: nowrap;
64 }
65
66 .sources-item__status {
67 border-radius: 50%;
68 flex-shrink: 0;
69 height: 6px;
70 width: 6px;
71 }
72
73 .sources-item__status--online {
74 background-color: var(--accent);
75 }
76
77 .sources-item__status--offline {
78 background-color: var(--accent-twist-4);
79 }
80
81 .sources-item__status--unknown {
82 background-color: oklch(from var(--text-color) l c h / 0.2);
83 }
84</style>
85
86<main>
87 <div class="facet__left">
88 <div>
89 <a href="./dashboard/" class="diffuse-logo-container">
90 <svg viewBox="0 0 902 134" width="160">
91 <title>Diffuse</title>
92 <use
93 xlink:href="images/diffuse-current.svg#diffuse"
94 href="images/diffuse-current.svg#diffuse"
95 ></use>
96 </svg>
97 </a>
98 </div>
99 <h1>Sources</h1>
100 <p>
101 An overview of all your audio inputs. Remember that these need to be processed into tracks
102 before they become useful. This should happen automatically when you have that feature enabled
103 (on by default), otherwise click the button below.
104 </p>
105 <p class="button-row" style="margin-top: var(--space-md)">
106 <a href="./l/?path=facets/connect/index.html" class="button button--accent">
107 <i class="ph-fill ph-plugs"></i>
108 Add a source
109 </a>
110 <button id="process-btn">
111 <i id="process-icon" class="ph-fill ph-arrows-clockwise"></i>
112 <span id="process-label">Process</span>
113 </button>
114 </p>
115 </div>
116
117 <div class="facet__right">
118 <ul id="sources-list" class="sources-list" hidden></ul>
119 <p id="sources-empty" class="caption">No sources configured yet.</p>
120 </div>
121</main>
122
123<script type="module" src="facets/data/sources/index.inline.js"></script>