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.dropzone {
49 align-items: center;
50 border: 2px dashed var(--border-color);
51 border-radius: var(--radius-md);
52 color: oklch(from var(--text-color) l c h / 0.55);
53 cursor: pointer;
54 display: flex;
55 flex-direction: column;
56 font-size: var(--fs-sm);
57 gap: var(--space-2xs);
58 justify-content: center;
59 padding: var(--space-md);
60 transition:
61 background-color 150ms,
62 border-color 150ms,
63 color 150ms;
64
65 &.dropzone--active {
66 background-color: var(--form-color);
67 border-color: var(--accent);
68 color: var(--text-color);
69 }
70}