A music player that connects to your cloud/distributed storage.
1body {
2 background-color: var(--bg-color);
3 color: var(--text-color);
4}
5
6main {
7 width: min(var(--container-md), 100vw);
8}
9
10.panel {
11 border: 2px solid var(--form-color);
12 border-radius: var(--radius-md);
13 display: flex;
14 flex-direction: column;
15 gap: var(--space-sm);
16 padding: var(--space-sm);
17}
18
19/**
20 * Buttons
21 */
22
23button,
24.button {
25 background: transparent;
26 border: 2px solid var(--form-color);
27 border-radius: var(--radius-md);
28 color: currentColor;
29 cursor: pointer;
30 display: inline-block;
31 font-size: var(--fs-xs);
32 font-family: inherit;
33 font-weight: 500;
34 letter-spacing: var(--leading-relaxed);
35 line-height: 1;
36 padding: var(--space-xs) var(--space-sm);
37 text-transform: uppercase;
38
39 & * {
40 pointer-events: none;
41 }
42
43 &[disabled] {
44 cursor: not-allowed;
45 opacity: 0.4;
46 }
47
48 &.button--accent {
49 border-color: var(--accent);
50 color: var(--accent);
51 }
52
53 &.button--active {
54 background-color: var(--accent);
55 border-color: var(--accent);
56 color: var(--bg-color);
57 }
58
59 & > .with-icon {
60 padding-top: 1px;
61 }
62}
63
64a.button {
65 text-decoration: none;
66}
67
68.button-row {
69 display: inline-flex;
70 gap: var(--space-2xs);
71}
72
73/**
74 * Forms
75 */
76
77input,
78textarea {
79 background: transparent;
80 border: 2px solid var(--form-color);
81 border-radius: var(--radius-md);
82 color: inherit;
83 font-size: var(--fs-sm);
84 padding: var(--space-2xs);
85 transition-duration: 250ms;
86 transition-property: border-color;
87 width: 100%;
88
89 &:focus {
90 border-color: var(--accent);
91 outline: none;
92 }
93}
94
95textarea {
96 height: var(--container-xs);
97 padding: var(--space-xs);
98 resize: none;
99}
100
101select {
102 appearance: none;
103 background: transparent;
104 border: 2px solid var(--form-color);
105 border-radius: var(--radius-md);
106 color: inherit;
107 font-family: inherit;
108 font-size: var(--fs-sm);
109 padding: var(--space-2xs) var(--space-xs);
110 transition-duration: 250ms;
111 transition-property: border-color;
112 width: 100%;
113
114 &:focus {
115 border-color: var(--accent);
116 outline: none;
117 }
118
119 option,
120 optgroup {
121 color: black;
122 }
123}
124
125/**
126 * Misc
127 */
128
129.with-icon {
130 align-items: center;
131 display: inline-flex;
132 gap: var(--space-2xs);
133}
134
135/**
136 * Separators
137 */
138
139hr,
140.separator {
141 border: 0;
142 border-top: 2px solid var(--form-color);
143}
144
145.row {
146 display: flex;
147 flex-wrap: wrap;
148 gap: var(--space-xs);
149}
150
151/**
152 * Tables
153 */
154
155table {
156 border-collapse: collapse;
157 width: 100%;
158}
159
160th,
161td {
162 border: 2px solid var(--form-color);
163 padding: var(--space-2xs) var(--space-xs);
164 text-align: left;
165}
166
167th {
168 font-weight: 600;
169}