forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1@import "../../styles/diffuse/facet.css";
2
3.connect-list {
4 display: flex;
5 flex-direction: column;
6 gap: var(--space-xs);
7 list-style: none;
8 margin: 0;
9 padding: 0;
10}
11
12.connect-item {
13 align-items: center;
14 display: flex;
15 gap: var(--space-xs);
16 margin-left: 0;
17}
18
19.connect-item__info {
20 display: flex;
21 flex-direction: column;
22 flex: 1;
23 gap: var(--space-3xs);
24 min-width: 0;
25}
26
27.connect-item__name {
28 font-weight: 600;
29 overflow: hidden;
30 text-overflow: ellipsis;
31 white-space: nowrap;
32}
33
34.connect-item__detail {
35 color: oklch(from var(--text-color) l c h / 0.55);
36 font-size: var(--fs-xs);
37 overflow: hidden;
38 text-overflow: ellipsis;
39 white-space: nowrap;
40}
41
42.connect-item__tags {
43 display: flex;
44 flex-shrink: 0;
45 gap: var(--space-3xs);
46}
47
48.connect-item--disabled .connect-item__info {
49 opacity: 0.2;
50}
51
52.dropzone {
53 align-items: center;
54 border: 2px dashed var(--border-color);
55 border-radius: var(--radius-md);
56 color: oklch(from var(--text-color) l c h / 0.55);
57 cursor: pointer;
58 display: flex;
59 flex-direction: column;
60 font-size: var(--fs-sm);
61 gap: var(--space-2xs);
62 justify-content: center;
63 padding: var(--space-md);
64 transition:
65 background-color 150ms,
66 border-color 150ms,
67 color 150ms;
68
69 &.dropzone--active {
70 background-color: var(--form-color);
71 border-color: var(--accent);
72 color: var(--text-color);
73 }
74}