home to your local SPACEGIRL 馃挮
arimelody.space
1input[type="text"] {
2 font-size: inherit;
3 font-family: inherit;
4 color: inherit;
5}
6
7#release {
8 margin-bottom: 1em;
9 padding: 1.5em;
10 display: flex;
11 flex-direction: row;
12 gap: 1.2em;
13
14 border-radius: 8px;
15 background: var(--bg-2);
16 box-shadow: var(--shadow-md);
17
18 transition: background .1s ease-out, color .1s ease-out;
19}
20
21.release-artwork {
22 width: 200px;
23 text-align: center;
24}
25.release-artwork img {
26 width: 100%;
27 aspect-ratio: 1;
28}
29.release-artwork img:hover {
30 outline: 1px solid #808080;
31 cursor: pointer;
32}
33.release-artwork #remove-artwork {
34 margin-top: .5em;
35 padding: .3em .6em;
36 background: var(--bg-3);
37}
38
39.release-info {
40 width: 0;
41 margin: 0;
42 flex-grow: 1;
43 display: flex;
44 flex-direction: column;
45}
46
47.release-title {
48 margin: 0;
49}
50
51#title {
52 width: 100%;
53 margin: 0 -.2em;
54 padding: 0 .2em;
55 font-weight: bold;
56 border-radius: 4px;
57 border: 1px solid transparent;
58 background: transparent;
59 outline: none;
60 cursor: pointer;
61 transition: background .1s ease-out, border-color .1s ease-out;
62}
63
64#title:hover {
65 background: var(--bg-3);
66 border-color: var(--fg-0);
67}
68
69#title:active,
70#title:focus {
71 background: var(--bg-3);
72}
73
74.release-title small {
75 opacity: .75;
76}
77
78.release-info table {
79 width: 100%;
80 margin: .5em 0;
81 border-collapse: collapse;
82 color: var(--fg-2);
83}
84.release-info table td {
85 padding: .2em;
86 border-bottom: 1px solid color-mix(in srgb, var(--fg-0) 25%, transparent);
87 transition: background .1s ease-out, border-color .1s ease-out;
88}
89.release-info table tr td:first-child {
90 vertical-align: top;
91 opacity: .5;
92}
93.release-info table tr td:not(:first-child) select:hover,
94.release-info table tr td:not(:first-child) input:hover,
95.release-info table tr td:not(:first-child) textarea:hover {
96 background: var(--bg-3);
97 cursor: pointer;
98}
99.release-info table td select,
100.release-info table td input,
101.release-info table td textarea {
102 width: 100%;
103 padding: .2em;
104 font-family: inherit;
105 font-size: inherit;
106 color: inherit;
107 border: none;
108 background: none;
109 outline: none;
110 resize: vertical;
111}
112.release-info table td:has(select),
113.release-info table td:has(input),
114.release-info table td:has(textarea) {
115 padding: 0;
116}
117
118.release-actions {
119 margin-top: auto;
120 display: flex;
121 gap: .5em;
122 flex-direction: row;
123 justify-content: right;
124 color: var(--fg-3);
125}
126
127.release-actions button,
128.release-actions .button {
129 color: var(--fg-2);
130 background: var(--bg-3);
131}
132
133dialog {
134 width: min(720px, calc(100% - 2em));
135 padding: 2em;
136 border: none;
137 border-radius: 16px;
138 color: var(--fg-0);
139 background-color: var(--bg-0);
140 box-shadow: var(--shadow-lg);
141
142 transition: color .1s ease-out, background-color .1s ease-out;
143}
144
145dialog header {
146 margin-bottom: 1em;
147 background: none;
148 display: flex;
149 flex-direction: row;
150 justify-content: space-between;
151}
152
153dialog header h2 {
154 margin: 0;
155}
156
157dialog div.dialog-actions {
158 margin-top: 1em;
159 display: flex;
160 flex-direction: row;
161 justify-content: end;
162 gap: .5em;
163}
164
165.card-header a.button {
166 text-decoration: none;
167}
168
169/*
170 * RELEASE CREDITS
171 */
172
173#credits .credit {
174 margin-bottom: .5em;
175 padding: .5em;
176 display: flex;
177 flex-direction: row;
178 align-items: center;
179 gap: 1em;
180
181 border-radius: 16px;
182 background-color: var(--bg-2);
183 box-shadow: var(--shadow-md);
184
185 cursor: pointer;
186 transition: background .1s ease-out;
187}
188#credits .credit:hover {
189 background-color: var(--bg-1);
190}
191
192#credits .credit p {
193 margin: 0;
194}
195
196#credits .credit .artist-avatar {
197 border-radius: 12px;
198}
199
200#credits .credit .artist-name {
201 color: var(--fg-3);
202 font-weight: bold;
203}
204
205#credits .credit .artist-role small {
206 font-size: inherit;
207 opacity: .66;
208}
209
210#credits .credit .credit-info {
211 overflow: hidden;
212}
213
214#credits .credit .credit-info :is(h3, p) {
215 white-space: nowrap;
216 overflow: hidden;
217 text-overflow: ellipsis;
218}
219
220
221
222#editcredits ul {
223 margin: 0;
224 padding: 0;
225 list-style: none;
226}
227
228#editcredits .credit>div {
229 margin-bottom: .5em;
230 padding: .5em;
231 display: flex;
232 flex-direction: row;
233 align-items: center;
234 gap: 1em;
235
236 border-radius: 8px;
237 background: var(--bg-2);
238 box-shadow: var(--shadow-md);
239}
240
241#editcredits .credit {
242 transition: transform .2s ease-out, opacity .2s;
243}
244
245#editcredits .credit.moving {
246 transform: scale(1.05);
247 opacity: .5;
248}
249
250#editcredits .credit p {
251 margin: 0;
252}
253
254#editcredits .credit .artist-avatar {
255 border-radius: 8px;
256}
257
258#editcredits .credit .credit-info {
259 width: 100%;
260}
261
262#editcredits .credit .credit-info .credit-attribute {
263 width: 100%;
264 display: flex;
265}
266
267#editcredits .credit .credit-info .credit-attribute label {
268 width: auto;
269 margin: 0;
270 display: flex;
271 align-items: center;
272 color: inherit;
273}
274
275#editcredits .credit .credit-info .credit-attribute input[type="text"] {
276 margin: 0 0 0 .25em;
277 padding: .2em .4em;
278 flex-grow: 1;
279 font-family: inherit;
280 border: none;
281 border-radius: 4px;
282 color: var(--fg-2);
283 background: var(--bg-0);
284}
285#editcredits .credit .credit-info .credit-attribute input[type="checkbox"] {
286 margin: 0 .3em;
287}
288
289#editcredits .credit .artist-name {
290 color: var(--fg-2);
291 font-weight: bold;
292}
293
294#editcredits .credit .artist-role small {
295 font-size: inherit;
296 opacity: .66;
297}
298
299#editcredits .credit .delete {
300 margin-right: .5em;
301 cursor: pointer;
302}
303#editcredits .credit .delete:hover {
304 text-decoration: underline;
305}
306
307#addcredit ul {
308 padding: 0;
309 list-style: none;
310 background: #f8f8f8;
311}
312
313#addcredit ul li.new-artist {
314 padding: .5em;
315 display: flex;
316 gap: .5em;
317 cursor: pointer;
318}
319
320#addcredit ul li.new-artist:nth-child(even) {
321 background: #f0f0f0;
322}
323
324#addcredit ul li.new-artist:hover {
325 background: #e0e0e0;
326}
327
328#addcredit .new-artist .artist-id {
329 opacity: .5;
330}
331
332/*
333 * RELEASE LINKS
334 */
335
336#links ul {
337 padding: 0;
338 display: flex;
339 gap: .2em;
340}
341
342#links a img.icon {
343 -webkit-filter: none;
344 filter: none;
345}
346
347#links a.button:hover {
348 color: var(--bg-3) !important;
349 background-color: var(--fg-3) !important;
350}
351
352#links a.button[data-name="spotify"] {
353 color: #101010;
354 background-color: #8cff83
355}
356
357#links a.button[data-name="apple music"] {
358 color: #101010;
359 background-color: #8cd9ff
360}
361
362#links a.button[data-name="soundcloud"] {
363 color: #101010;
364 background-color: #fdaa6d
365}
366
367#links a.button[data-name="youtube"] {
368 color: #101010;
369 background-color: #ff6e6e
370}
371
372#editlinks table {
373 width: 100%;
374}
375
376#editlinks tr {
377 display: flex;
378}
379
380#editlinks th {
381 padding: 0 .1em;
382 display: flex;
383 align-items: center;
384 text-align: left;
385}
386
387#editlinks tr:nth-child(odd) {
388 background: #f8f8f8;
389}
390
391#editlinks tr th,
392#editlinks tr td {
393 height: 2em;
394}
395
396#editlinks tr td {
397 padding: 0;
398}
399
400#editlinks tr.link {
401 transition: transform .2s ease-out, opacity .2s;
402}
403
404#editlinks tr.link.moving {
405 transform: scale(1.05);
406 opacity: .5;
407}
408
409#editlinks tr .grabber {
410 width: 2em;
411 display: flex;
412 justify-content: center;
413 cursor: pointer;
414}
415#editlinks tr .grabber img {
416 width: 1em;
417 pointer-events: none;
418}
419#editlinks tr .link-name {
420 width: 8em;
421}
422#editlinks tr .link-url {
423 flex-grow: 1;
424}
425
426#editlinks td a.delete {
427 display: flex;
428 height: 100%;
429 align-items: center;
430 padding: 0 .5em;
431}
432
433#editlinks td input[type="text"] {
434 width: calc(100% - .6em);
435 height: 100%;
436 margin: 0;
437 padding: 0 .3em;
438 border: none;
439 border-radius: 0;
440 outline: none;
441 cursor: pointer;
442 background: none;
443}
444#editlinks td input[type="text"]:hover {
445 background: #0001;
446}
447#editlinks td input[type="text"]:focus {
448 outline: 1px solid #808080;
449}
450
451#edittracks ul {
452 padding: 0;
453 list-style: none;
454}
455
456#edittracks .track {
457 transition: transform .2s ease-out, opacity .2s;
458}
459
460#edittracks .track.moving {
461 transform: scale(1.05);
462 opacity: .5;
463}
464
465#edittracks .track div {
466 padding: .5em;
467 display: flex;
468 flex-direction: row;
469 justify-content: space-between;
470 align-items: center;
471 cursor: pointer;
472}
473
474#edittracks .track div:active {
475 cursor: move;
476}
477
478#edittracks .track:nth-child(even) {
479 background: #f0f0f0;
480}
481
482#edittracks .track-number {
483 min-width: 1em;
484 display: inline-block;
485 opacity: .5;
486}
487
488#edittracks .track-name {
489 margin: 0;
490}
491
492#addtrack ul {
493 padding: 0;
494 list-style: none;
495 background: #f8f8f8;
496}
497
498#addtrack ul li.new-track {
499 padding: .5em;
500 display: flex;
501 gap: .5em;
502 background-color: var(--bg-0);
503 cursor: pointer;
504 transition: background-color .1s ease-out, color .1s ease-out;
505}
506
507#addtrack ul li.new-track:nth-child(even) {
508 background: color-mix(in srgb, var(--bg-0) 95%, #fff);
509}
510
511#addtrack ul li.new-track:hover {
512 background: color-mix(in srgb, var(--bg-0) 90%, #fff);
513}
514
515@media only screen and (max-width: 1105px) {
516 #release {
517 flex-direction: column;
518 align-items: center;
519 }
520
521 .release-info {
522 width: auto;
523 }
524}