arimelody.space
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-color: 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-color: 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-color: var(--bg-3);
66 border-color: var(--fg-0);
67}
68
69#title:active,
70#title:focus {
71 background-color: 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-color: 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-color: 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-color: 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-color: 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 overflow: visible;
303}
304#editcredits .credit .delete:hover {
305 text-decoration: underline;
306}
307
308#addcredit ul {
309 padding: 0;
310 list-style: none;
311 background: #f8f8f8;
312}
313
314#addcredit ul li.new-artist {
315 padding: .5em;
316 display: flex;
317 gap: .5em;
318 cursor: pointer;
319 background-color: var(--bg-2);
320}
321
322#addcredit ul li.new-artist:nth-child(even) {
323 background: #f0f0f0;
324 background-color: var(--bg-1);
325}
326
327#addcredit ul li.new-artist:hover {
328 background: #e0e0e0;
329 background-color: var(--bg-2);
330}
331
332#addcredit .new-artist .artist-id {
333 opacity: .5;
334}
335
336/*
337 * RELEASE LINKS
338 */
339
340#links ul {
341 padding: 0;
342 display: flex;
343 gap: .2em;
344}
345
346#links a img.icon {
347 -webkit-filter: none;
348 filter: none;
349}
350
351#links a.button:hover {
352 color: var(--bg-3) !important;
353 background-color: var(--fg-3) !important;
354}
355
356#links a.button[data-name="spotify"] {
357 color: #101010;
358 background-color: #8cff83
359}
360
361#links a.button[data-name="apple music"] {
362 color: #101010;
363 background-color: #8cd9ff
364}
365
366#links a.button[data-name="soundcloud"] {
367 color: #101010;
368 background-color: #fdaa6d
369}
370
371#links a.button[data-name="youtube"] {
372 color: #101010;
373 background-color: #ff6e6e
374}
375
376#editlinks table {
377 width: 100%;
378}
379
380#editlinks tr {
381 display: flex;
382 background-color: var(--bg-1);
383 transition: background-color .1s ease-out;
384}
385
386#editlinks th {
387 padding: 0 .1em;
388 display: flex;
389 align-items: center;
390 text-align: left;
391}
392
393#editlinks tr:nth-child(odd) {
394 background-color: var(--bg-2);
395}
396
397#editlinks tr th,
398#editlinks tr td {
399 height: 2em;
400}
401
402#editlinks tr td {
403 padding: 0;
404}
405
406#editlinks tr.link {
407 transition: transform .2s ease-out, opacity .2s;
408}
409
410#editlinks tr.link.moving {
411 transform: scale(1.05);
412 opacity: .5;
413}
414
415#editlinks tr .grabber {
416 width: 2em;
417 display: flex;
418 justify-content: center;
419 cursor: pointer;
420}
421#editlinks tr .grabber img {
422 width: 1em;
423 pointer-events: none;
424}
425@media (prefers-color-scheme: dark) {
426 #editlinks tr .grabber img {
427 filter: invert();
428 }
429}
430#editlinks tr .link-name {
431 width: 8em;
432}
433#editlinks tr .link-url {
434 flex-grow: 1;
435}
436
437#editlinks td a.delete {
438 display: flex;
439 height: 100%;
440 align-items: center;
441 padding: 0 .5em;
442}
443
444#editlinks td input[type="text"] {
445 width: calc(100% - .6em);
446 height: 100%;
447 margin: 0;
448 padding: 0 .3em;
449 border: none;
450 border-radius: 0;
451 outline: none;
452 cursor: pointer;
453 background: none;
454}
455#editlinks td input[type="text"]:hover {
456 background: #0001;
457}
458#editlinks td input[type="text"]:focus {
459 outline: 1px solid #808080;
460}
461
462#edittracks ul {
463 padding: 0;
464 list-style: none;
465}
466
467#edittracks .track {
468 background-color: var(--bg-2);
469 transition: transform .2s ease-out, opacity .2s;
470}
471
472#edittracks .track.moving {
473 transform: scale(1.05);
474 opacity: .5;
475}
476
477#edittracks .track div {
478 padding: .5em;
479 display: flex;
480 flex-direction: row;
481 justify-content: space-between;
482 align-items: center;
483 cursor: pointer;
484}
485
486#edittracks .track div:active {
487 cursor: move;
488}
489
490#edittracks .track:nth-child(even) {
491 background-color: var(--bg-1);
492}
493
494#edittracks .track-number {
495 min-width: 1em;
496 display: inline-block;
497 opacity: .5;
498}
499
500#edittracks .track-name {
501 margin: 0;
502}
503
504#addtrack ul {
505 padding: 0;
506 list-style: none;
507}
508
509#addtrack ul li.new-track {
510 padding: .5em;
511 display: flex;
512 gap: .5em;
513 background-color: var(--bg-0);
514 cursor: pointer;
515 transition: background-color .1s ease-out, color .1s ease-out;
516}
517
518#addtrack ul li.new-track:nth-child(even) {
519 background: color-mix(in srgb, var(--bg-0) 95%, #fff);
520}
521
522#addtrack ul li.new-track:hover {
523 background: color-mix(in srgb, var(--bg-0) 90%, #fff);
524}
525
526@media only screen and (max-width: 1105px) {
527 #release {
528 flex-direction: column;
529 align-items: center;
530 }
531
532 .release-info {
533 width: auto;
534 }
535}