home to your local SPACEGIRL 💫
arimelody.space
more dashboard css fixes
+47
-27
+9
-1
admin/static/admin.css
+9
-1
admin/static/admin.css
···
66
66
}
67
67
}
68
68
69
+
@media (prefers-color-scheme: dark) {
70
+
img.icon {
71
+
-webkit-filter: invert(1);
72
+
filter: invert(1);
73
+
}
74
+
}
75
+
69
76
body {
70
77
width: calc(100% - 180px);
71
78
height: calc(100vh - 1em);
···
184
191
}
185
192
*/
186
193
187
-
a img.icon {
194
+
img.icon {
188
195
height: .8em;
196
+
transition: filter .1s ease-out;
189
197
}
190
198
191
199
code {
+1
-1
admin/static/edit-artist.js
+1
-1
admin/static/edit-artist.js
···
81
81
});
82
82
83
83
document.addEventListener('readystatechange', () => {
84
-
document.querySelectorAll('.card#releases .credit').forEach(el => {
84
+
document.querySelectorAll('#releases .credit').forEach(el => {
85
85
hijackClickEvent(el, el.querySelector('.credit-name a'));
86
86
});
87
87
});
+34
-23
admin/static/edit-release.css
+34
-23
admin/static/edit-release.css
···
14
14
border-radius: 8px;
15
15
background: var(--bg-2);
16
16
box-shadow: var(--shadow-md);
17
+
18
+
transition: background .1s ease-out, color .1s ease-out;
17
19
}
18
20
19
21
.release-artwork {
···
31
33
.release-artwork #remove-artwork {
32
34
margin-top: .5em;
33
35
padding: .3em .6em;
36
+
background: var(--bg-3);
34
37
}
35
38
36
39
.release-info {
···
118
121
gap: .5em;
119
122
flex-direction: row;
120
123
justify-content: right;
124
+
color: var(--fg-3);
121
125
}
122
126
123
127
.release-actions button,
···
163
167
* RELEASE CREDITS
164
168
*/
165
169
166
-
.card#credits .credit {
170
+
#credits .credit {
167
171
margin-bottom: .5em;
168
172
padding: .5em;
169
173
display: flex;
···
178
182
cursor: pointer;
179
183
transition: background .1s ease-out;
180
184
}
181
-
.card#credits .credit:hover {
185
+
#credits .credit:hover {
182
186
background-color: var(--bg-1);
183
187
}
184
188
185
-
.card#credits .credit p {
189
+
#credits .credit p {
186
190
margin: 0;
187
191
}
188
192
189
-
.card#credits .credit .artist-avatar {
193
+
#credits .credit .artist-avatar {
190
194
border-radius: 12px;
191
195
}
192
196
193
-
.card#credits .credit .artist-name {
197
+
#credits .credit .artist-name {
194
198
color: var(--fg-3);
195
199
font-weight: bold;
196
200
}
197
201
198
-
.card#credits .credit .artist-role small {
202
+
#credits .credit .artist-role small {
199
203
font-size: inherit;
200
204
opacity: .66;
201
205
}
···
314
318
* RELEASE LINKS
315
319
*/
316
320
317
-
.card#links ul {
321
+
#links ul {
318
322
padding: 0;
319
323
display: flex;
320
324
gap: .2em;
321
325
}
322
326
323
-
.card#links a.button:hover {
327
+
#links a img.icon {
328
+
-webkit-filter: none;
329
+
filter: none;
330
+
}
331
+
332
+
#links a.button:hover {
324
333
color: var(--bg-3) !important;
325
334
background-color: var(--fg-3) !important;
326
335
}
327
336
328
-
.card#links a.button[data-name="spotify"] {
337
+
#links a.button[data-name="spotify"] {
329
338
color: #101010;
330
339
background-color: #8cff83
331
340
}
332
341
333
-
.card#links a.button[data-name="apple music"] {
342
+
#links a.button[data-name="apple music"] {
334
343
color: #101010;
335
344
background-color: #8cd9ff
336
345
}
337
346
338
-
.card#links a.button[data-name="soundcloud"] {
347
+
#links a.button[data-name="soundcloud"] {
339
348
color: #101010;
340
349
background-color: #fdaa6d
341
350
}
342
351
343
-
.card#links a.button[data-name="youtube"] {
352
+
#links a.button[data-name="youtube"] {
344
353
color: #101010;
345
354
background-color: #ff6e6e
346
355
}
···
428
437
* RELEASE TRACKS
429
438
*/
430
439
431
-
.card#tracks .track {
440
+
#tracks .track {
432
441
margin-bottom: 1em;
433
442
padding: 1em;
434
443
display: flex;
···
438
447
border-radius: 16px;
439
448
background: var(--bg-2);
440
449
box-shadow: var(--shadow-md);
450
+
451
+
transition: background .1s ease-out, color .1s ease-out;
441
452
}
442
453
443
-
.card#tracks .track h3,
444
-
.card#tracks .track p {
454
+
#tracks .track h3,
455
+
#tracks .track p {
445
456
margin: 0;
446
457
}
447
458
448
-
.card#tracks h2.track-title {
459
+
#tracks h2.track-title {
449
460
margin: 0;
450
461
display: flex;
451
462
gap: .5em;
452
463
}
453
464
454
-
.card#tracks h2.track-title .track-number {
465
+
#tracks h2.track-title .track-number {
455
466
opacity: .5;
456
467
}
457
468
458
-
.card#tracks a:hover {
469
+
#tracks a:hover {
459
470
text-decoration: underline;
460
471
}
461
472
462
-
.card#tracks .track-album {
473
+
#tracks .track-album {
463
474
margin-left: auto;
464
475
font-style: italic;
465
476
font-size: .75em;
466
477
opacity: .5;
467
478
}
468
479
469
-
.card#tracks .track-album.empty {
480
+
#tracks .track-album.empty {
470
481
color: #ff2020;
471
482
opacity: 1;
472
483
}
473
484
474
-
.card#tracks .track-description {
485
+
#tracks .track-description {
475
486
font-style: italic;
476
487
}
477
488
478
-
.card#tracks .track-lyrics {
489
+
#tracks .track-lyrics {
479
490
max-height: 10em;
480
491
overflow-y: scroll;
481
492
}
482
493
483
-
.card#tracks .track .empty {
494
+
#tracks .track .empty {
484
495
opacity: 0.75;
485
496
}
486
497
+1
-1
admin/static/edit-release.js
+1
-1
admin/static/edit-release.js
···
100
100
});
101
101
102
102
document.addEventListener("readystatechange", () => {
103
-
document.querySelectorAll(".card#credits .credit").forEach(el => {
103
+
document.querySelectorAll("#credits .credit").forEach(el => {
104
104
hijackClickEvent(el, el.querySelector(".artist-name a"));
105
105
});
106
106
});
+1
admin/static/release-list-item.css
+1
admin/static/release-list-item.css
+1
-1
admin/templates/html/edit-release.html
+1
-1
admin/templates/html/edit-release.html
···
99
99
100
100
<div class="card" id="credits">
101
101
<div class="card-header">
102
-
<h2>Credits ({{len .Release.Credits}})</h2>
102
+
<h2>Credits <small>({{len .Release.Credits}} total)</small></h2>
103
103
<a class="button edit"
104
104
href="/admin/release/{{.Release.ID}}/editcredits"
105
105
hx-get="/admin/release/{{.Release.ID}}/editcredits"