arimelody.space
home to your local SPACEGIRL 馃挮
arimelody.space
1@import url("/style/prideflag.css");
2@import url("/font/inter/inter.css");
3
4:root {
5 --bg-0: #101010;
6 --bg-1: #181818;
7 --bg-2: #282828;
8 --bg-3: #404040;
9
10 --fg-0: #b0b0b0;
11 --fg-1: #c0c0c0;
12 --fg-2: #d0d0d0;
13 --fg-3: #e0e0e0;
14
15 --col-shadow-0: #0002;
16 --col-shadow-1: #0004;
17 --col-shadow-2: #0006;
18 --col-highlight-0: #ffffff08;
19 --col-highlight-1: #fff1;
20 --col-highlight-2: #fff2;
21
22 --col-new: #b3ee5b;
23 --col-on-new: #1b2013;
24 --col-save: #6fd7ff;
25 --col-on-save: #283f48;
26 --col-delete: #ff7171;
27 --col-on-delete: #371919;
28
29 --col-warn: #ffe86a;
30 --col-on-warn: var(--bg-0);
31 --col-warn-hover: #ffec81;
32
33 --shadow-sm:
34 0 1px 2px var(--col-shadow-2),
35 inset 0 1px 1px var(--col-highlight-2);
36 --shadow-md:
37 0 2px 4px var(--col-shadow-1),
38 inset 0 2px 2px var(--col-highlight-1);
39 --shadow-lg:
40 0 4px 8px var(--col-shadow-0),
41 inset 0 4px 4px var(--col-highlight-0);
42}
43
44@media (prefers-color-scheme: light) {
45 :root {
46 --bg-0: #e8e8e8;
47 --bg-1: #f0f0f0;
48 --bg-2: #f8f8f8;
49 --bg-3: #ffffff;
50
51 --fg-0: #606060;
52 --fg-1: #404040;
53 --fg-2: #303030;
54 --fg-3: #202020;
55
56 --col-shadow-0: #0002;
57 --col-shadow-1: #0004;
58 --col-shadow-2: #0008;
59 --col-highlight-0: #fff2;
60 --col-highlight-1: #fff4;
61 --col-highlight-2: #fff8;
62
63 --col-warn: #ffe86a;
64 --col-on-warn: var(--fg-3);
65 --col-warn-hover: #ffec81;
66 }
67}
68
69@media (prefers-color-scheme: green) {
70 :root {
71 --bg-0: #d0d9c7;
72 --bg-1: #e2e5de;
73 --bg-2: #f1f1f1;
74 --bg-3: #ffffff;
75 --fg-0: #626f54;
76 --fg-1: #505c43;
77 --fg-2: #49523e;
78 --fg-3: #2c3522;
79 }
80}
81
82@media (prefers-color-scheme: purple) {
83 :root {
84 --bg-0: #15121c;
85 --bg-1: #1e1a27;
86 --bg-2: #302a3d;
87 --bg-3: #4a4358;
88 --fg-0: #9e8fbf;
89 --fg-1: #a29bb3;
90 --fg-2: #b9b0cd;
91 --fg-3: #dcd5ec;
92 }
93}
94
95@media (prefers-color-scheme: dark) {
96 img.icon {
97 -webkit-filter: invert(.9);
98 filter: invert(.9);
99 }
100}
101
102body {
103 width: calc(100% - 180px);
104 height: calc(100vh - 1em);
105
106 margin: 0 0 0 180px;
107 padding: 0;
108 display: flex;
109 flex-direction: row;
110
111 font-family: "Inter", sans-serif;
112 font-size: 16px;
113 color: var(--fg-0);
114 background-color: var(--bg-0);
115
116 transition: background .1s ease-out, color .1s ease-out;
117}
118
119h1, h2, h3, h4, h5, h6 {
120 color: var(--fg-3);
121}
122
123header {
124 display: flex;
125 justify-content: space-between;
126 align-items: center;
127}
128nav {
129 position: fixed;
130 top: 0;
131 left: 0;
132 width: 180px;
133 height: calc(100vh - 2em);
134 margin: 0;
135 padding: 1em 0;
136 display: flex;
137 flex-direction: column;
138 justify-content: left;
139
140 background-color: var(--bg-1);
141 box-shadow: var(--shadow-md);
142 transition: background .1s ease-out, color .1s ease-out;
143
144 user-select: none;
145}
146nav .icon {
147 width: fit-content;
148 height: fit-content;
149 padding: 0;
150 margin: 0 auto 1em auto;
151 display: flex;
152
153 border-radius: 100%;
154 box-shadow: var(--shadow-sm);
155 overflow: clip;
156}
157nav .icon img {
158 width: 3em;
159 height: 3em;
160}
161.nav-item {
162 display: flex;
163 color: var(--fg-2);
164 line-height: 2em;
165 font-weight: 500;
166 transition: color .1s ease-out, background-color .1s ease-out;
167}
168.nav-item:hover {
169 color: var(--bg-2);
170 background-color: var(--fg-2);
171 text-decoration: none;
172}
173.nav-item.active {
174 border-left: 4px solid var(--fg-2);
175}
176.nav-item.active a {
177 padding-left: calc(1em - 3.5px);
178}
179nav a {
180 padding: .2em 1em;
181 text-decoration: none;
182 color: inherit;
183 width: 100%;
184}
185nav a.active {
186 border-left: 5px solid var(--fg-0);
187 padding-left: calc(1em - 5px);
188}
189nav hr {
190 width: calc(100% - 2em);
191 margin: .5em auto;
192 border: none;
193 border-bottom: 1px solid var(--fg-0);
194}
195nav .section-label {
196 margin: .6em 0 .1em 1.6em;
197 font-size: .6em;
198 text-transform: uppercase;
199 font-weight: 600;
200}
201#toggle-nav {
202 position: fixed;
203 top: 16px;
204 left: 16px;
205 padding: 8px;
206 width: 48px;
207 height: 48px;
208 display: none;
209 justify-content: center;
210 align-items: center;
211 z-index: 1;
212}
213#toggle-nav img {
214 width: 100%;
215 height: 100%;
216 object-fit: cover;
217 transform: translate(1px, 1px);
218}
219#toggle-nav img:hover {
220 -webkit-filter: invert(.9);
221 filter: invert(.9);
222}
223@media (prefers-color-scheme: dark) {
224 #toggle-nav img {
225 -webkit-filter: invert(.9);
226 filter: invert(.9);
227 }
228 #toggle-nav img:hover {
229 -webkit-filter: none;
230 filter: none;
231 }
232}
233
234main {
235 width: 720px;
236 max-width: calc(100% - 2em);
237 height: fit-content;
238 min-height: calc(100vh - 2em);
239 margin: 0 auto;
240 padding: 1em;
241}
242main.dashboard {
243 width: 100%;
244}
245
246a {
247 color: inherit;
248 text-decoration: none;
249 overflow: hidden;
250 text-overflow: ellipsis;
251 white-space: nowrap;
252 transition: color .1s ease-out, background-color .1s ease-out;
253}
254
255img.icon {
256 height: .8em;
257 transition: filter .1s ease-out;
258}
259
260code {
261 background: #303030;
262 color: #f0f0f0;
263 padding: .23em .3em;
264 border-radius: 4px;
265}
266
267
268
269.cards {
270 width: 100%;
271 height: fit-content;
272 display: flex;
273 gap: 2em;
274 flex-wrap: wrap;
275}
276
277.card {
278 flex-basis: 40em;
279 padding: 1em;
280 background-color: var(--bg-1);
281 border-radius: 16px;
282 box-shadow: var(--shadow-lg);
283
284 transition: background .1s ease-out, color .1s ease-out;
285}
286main:not(.dashboard) .card {
287 margin-bottom: 1em;
288}
289
290.card h2 {
291 margin: 0 0 .5em 0;
292}
293
294.card-header {
295 margin-bottom: 1em;
296 display: flex;
297 gap: 1em;
298 flex-direction: row;
299 align-items: center;
300 justify-content: space-between;
301}
302.card-header h1,
303.card-header h2,
304.card-header h3 {
305 margin: 0;
306}
307.card-header a:hover {
308 text-decoration: underline;
309}
310
311header :is(h1, h2, h3) small,
312.card-header :is(h1, h2, h3) small {
313 display: inline-block;
314 font-size: .6em;
315 transform: translateY(-0.1em);
316 color: var(--fg-0);
317}
318
319.flex-fill {
320 flex-grow: 1;
321}
322
323.artists-group {
324 display: grid;
325 grid-template-columns: repeat(5, 1fr);
326 gap: 1em;
327}
328
329
330
331#message,
332#error {
333 margin: 0 0 1em 0;
334 padding: 1em;
335 border-radius: 8px;
336 color: #101010;
337 background: #ffffff;
338}
339#message {
340 background: #a9dfff;
341}
342#error {
343 background: #ffa9b8;
344}
345
346
347
348a.delete:not(.button) {
349 color: #d22828;
350}
351
352.button, button {
353 padding: .5em .8em;
354 font-family: inherit;
355 font-size: inherit;
356
357 color: inherit;
358 background-color: var(--bg-2);
359 border: none;
360 border-radius: 10em;
361 box-shadow: var(--shadow-sm);
362 font-weight: 500;
363 transition: background .1s ease-out, color .1s ease-out;
364
365 cursor: pointer;
366 user-select: none;
367}
368button:hover, .button:hover {
369 background: #fff;
370}
371button:active, .button:active {
372 background: #d0d0d0;
373}
374
375.button.new, button.new {
376 color: var(--col-on-new);
377 background-color: var(--col-new);
378}
379.button.save, button.save {
380 color: var(--col-on-save);
381 background-color: var(--col-save);
382}
383.button.delete, button.delete {
384 color: var(--col-on-delete);
385 background-color: var(--col-delete);
386}
387.button:hover, button:hover {
388 color: var(--bg-3);
389 background-color: var(--fg-3);
390}
391.button:active, button:active {
392 color: var(--bg-2);
393 background-color: var(--fg-0);
394}
395.button[disabled], button[disabled] {
396 color: var(--fg-0) !important;
397 background-color: var(--bg-3) !important;
398 opacity: .5;
399 cursor: default !important;
400}
401
402
403
404form {
405 width: 100%;
406 display: block;
407 color: var(--fg-0);
408}
409form label {
410 width: 100%;
411 margin: 1rem 0 .5rem 0;
412 display: block;
413}
414form input[type="text"],
415form input[type="password"] {
416 width: 16em;
417 max-width: 100%;
418 margin: .5em 0;
419 padding: .3em .5em;
420 display: block;
421 border-radius: 4px;
422 border: 1px solid #808080;
423 font-size: inherit;
424 font-family: inherit;
425 color: inherit;
426 background-color: var(--bg-0);
427}
428input[disabled] {
429 opacity: .5;
430 cursor: not-allowed;
431}
432
433@media screen and (max-width: 720px) {
434 main {
435 padding-top: 0;
436 }
437
438 body {
439 width: 100%;
440 margin: 0;
441 font-size: 16px;
442 }
443
444 nav {
445 width: 100%;
446 left: -100%;
447 font-size: 24px;
448 z-index: 1;
449 transition: transform .2s cubic-bezier(.2,0,.5,1);
450 }
451 nav.open {
452 transform: translateX(100%);
453 }
454
455 #toggle-nav {
456 display: flex;
457 }
458
459 main > h1:first-of-type {
460 margin-left: 68px;
461 overflow: hidden;
462 white-space: nowrap;
463 text-overflow: ellipsis;
464 }
465 main > header {
466 margin-left: 68px;
467 }
468 main > header h1 {
469 display: flex;
470 flex-direction: column;
471 font-size: 1.5em;
472 }
473
474 .card {
475 flex-basis: 100%;
476 max-width: calc(100vw - 4em);
477 }
478
479 .artists-group {
480 grid-template-columns: repeat(3, 1fr);
481 }
482}