alice.mosphere.at
this repo has no description
1/* Can't use this yet because custom-media doesn't propagate to other CSS files yet, in Vite */
2@custom-media --viewport-medium (min-width: 40em);
3
4:root {
5 interpolate-size: allow-keywords;
6
7 --sai-top: env(safe-area-inset-top);
8 --sai-right: env(safe-area-inset-right);
9 --sai-bottom: env(safe-area-inset-bottom);
10 --sai-left: env(safe-area-inset-left);
11
12 --sai-inline-start: var(--sai-left);
13 &:dir(rtl) {
14 --sai-inline-start: var(--sai-right);
15 }
16 --sai-inline-end: var(--sai-right);
17 &:dir(rtl) {
18 --sai-inline-end: var(--sai-left);
19 }
20
21 --text-size: 16px;
22 --main-width: 40em;
23 text-size-adjust: none;
24 --hairline-width: 1px;
25 --monospace-font:
26 ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
27 monospace;
28
29 --blue-color: royalblue;
30 --purple-color: blueviolet;
31 --purple-fg-color: color-mix(
32 in srgb-linear,
33 var(--purple-color) 60%,
34 var(--text-color) 40%
35 );
36 --purple-bg-color: color-mix(in srgb, var(--purple-color) 10%, transparent);
37 --green-color: darkgreen;
38 --orange-color: darkorange;
39 --orange-light-bg-color: color-mix(
40 in srgb,
41 var(--orange-color) 20%,
42 transparent
43 );
44 --orange-fg-color: color-mix(
45 in srgb-linear,
46 var(--orange-color) 60%,
47 var(--text-color) 40%
48 );
49 --orange-bg-color: color-mix(in srgb, var(--orange-color) 10%, transparent);
50 --red-color: orangered;
51 --red-text-color: color-mix(
52 in srgb-linear,
53 var(--red-color) 60%,
54 var(--text-color) 40%
55 );
56 --red-bg-color: color-mix(in lch, var(--red-color) 40%, transparent);
57 --bg-color: #fff;
58 --bg-faded-color: #f0f2f5;
59 --bg-blur-color: #fff9;
60 --bg-faded-blur-color: #f0f2f599;
61 --text-color: #1c1e21;
62 --text-insignificant-color: #1c1e2199;
63 --link-color: var(--blue-color);
64 --link-bg-color: #4169e122;
65 --link-light-color: #4169e199;
66 --link-faded-color: #4169e155;
67 --link-bg-hover-color: #f0f2f599;
68 --link-visited-color: mediumslateblue;
69 --link-text-color: color-mix(
70 in lch,
71 var(--link-color) 60%,
72 var(--text-color) 40%
73 );
74 --focus-ring-color: var(--link-color);
75 --button-bg-color: var(--blue-color);
76 --button-bg-blur-color: #4169e1aa;
77 --button-text-color: white;
78 --button-plain-bg-hover-color: rgba(128, 128, 128, 0.1);
79 --reblog-color: var(--purple-color);
80 --reblog-faded-color: #892be220;
81 --group-color: var(--green-color);
82 --group-faded-color: #00640020;
83 --reply-to-color: var(--orange-color);
84 --reply-to-text-color: #b36200;
85 --favourite-color: var(--red-color);
86 --reply-to-faded-color: #ffa60020;
87 --hashtag-color: LightSeaGreen;
88 --hashtag-faded-color: color-mix(
89 in srgb,
90 var(--hashtag-color) 15%,
91 transparent
92 );
93 --hashtag-text-color: color-mix(
94 in lch,
95 var(--hashtag-color) 40%,
96 var(--text-color) 60%
97 );
98 --outline-color: rgba(128, 128, 128, 0.2);
99 --outline-stronger-color: rgba(128, 128, 128, 0.4);
100 --outline-hover-color: rgba(128, 128, 128, 0.7);
101 --divider-color: rgba(0, 0, 0, 0.1);
102 --backdrop-color: rgba(0, 0, 0, 0.1);
103 --backdrop-solid-color: var(--bg-faded-color);
104 --backdrop-theme-color: #e5e5e5;
105 --backdrop-darker-color: rgba(0, 0, 0, 0.25);
106 --img-bg-color: rgba(128, 128, 128, 0.2);
107 --loader-color: #1c1e2199;
108 --comment-line-color: #e5e5e5;
109 --drop-shadow-color: rgba(0, 0, 0, 0.15);
110 --close-button-bg-color: rgba(0, 0, 0, 0.1);
111 --close-button-bg-active-color: rgba(0, 0, 0, 0.2);
112 --close-button-color: rgba(0, 0, 0, 0.5);
113 --close-button-hover-color: rgba(0, 0, 0, 1);
114 --private-note-text-color: var(--text-color);
115 --private-note-bg-color: color-mix(in srgb, yellow 20%, var(--bg-color));
116 --private-note-border-color: rgba(0, 0, 0, 0.2);
117
118 /* Media colors won't change based on color scheme */
119 --media-fg-color: #f0f2f5;
120 --media-bg-color: #242526;
121 --media-outline-color: color-mix(in lch, var(--media-fg-color), transparent);
122
123 --timing-function: cubic-bezier(0.3, 0.5, 0, 1);
124 --spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);
125
126 --min-dimension: 88px;
127
128 --forward: right;
129 --backward: left;
130 --to-forward: to right;
131 --to-backward: to left;
132 &:dir(rtl) {
133 --forward: left;
134 --backward: right;
135 --to-forward: to left;
136 --to-backward: to right;
137 }
138}
139
140@media (min-resolution: 2dppx) {
141 :root {
142 --hairline-width: 0.5px;
143 }
144}
145
146@media (prefers-color-scheme: dark) {
147 :root {
148 --blue-color: CornflowerBlue;
149 --purple-color: #b190f1;
150 --green-color: lightgreen;
151 --orange-color: orange;
152 --bg-color: #242526;
153 --bg-faded-color: #18191a;
154 --bg-blur-color: #0009;
155 --bg-faded-blur-color: #18191a99;
156 --text-color: #f0f2f5;
157 --text-insignificant-color: #f0f2f599;
158 --link-light-color: #6494ed99;
159 --link-faded-color: #6494ed88;
160 --link-bg-hover-color: #34353799;
161 --link-visited-color: color-mix(
162 in lch,
163 mediumslateblue 70%,
164 var(--text-color) 30%
165 );
166 --button-bg-color: color-mix(
167 in srgb,
168 var(--blue-color) 80%,
169 var(--bg-color) 20%
170 );
171 --reblog-faded-color: #b190f141;
172 --reply-to-text-color: var(--reply-to-color);
173 --reply-to-faded-color: #ffa60017;
174 --divider-color: rgba(255, 255, 255, 0.1);
175 --bg-blur-color: #24252699;
176 --backdrop-color: rgba(0, 0, 0, 0.5);
177 --backdrop-solid-color: color-mix(in srgb, var(--bg-color) 50%, #000 50%);
178 --backdrop-theme-color: #121213; /* same as backdrop-solid-color but without color-mix, to be used for meta[theme-color] */
179 --loader-color: #f0f2f599;
180 --comment-line-color: #565656;
181 --drop-shadow-color: rgba(0, 0, 0, 0.5);
182 --close-button-bg-color: rgba(255, 255, 255, 0.2);
183 --close-button-bg-active-color: rgba(255, 255, 255, 0.15);
184 --close-button-color: rgba(255, 255, 255, 0.5);
185 --close-button-hover-color: rgba(255, 255, 255, 1);
186 --private-note-border-color: rgba(255, 255, 255, 0.2);
187 }
188}
189
190*,
191*::before,
192*::after {
193 box-sizing: border-box;
194}
195
196[dir] {
197 text-align: start;
198}
199
200html {
201 text-size-adjust: 100%;
202}
203
204body {
205 font-family:
206 ui-rounded,
207 -apple-system,
208 BlinkMacSystemFont,
209 Segoe UI,
210 Roboto,
211 Ubuntu,
212 Cantarell,
213 Noto Sans,
214 sans-serif;
215 font-size: var(--text-size);
216 word-wrap: break-word;
217 overflow-wrap: break-word;
218}
219
220/* Prevent pull-to-refresh on Chrome PWA */
221@media (display-mode: standalone) {
222 html,
223 body {
224 overscroll-behavior-y: none;
225 }
226}
227
228a {
229 color: var(--link-color);
230 text-decoration-color: var(--link-faded-color);
231 text-decoration-thickness: 2px;
232 text-underline-offset: 2px;
233 overflow-wrap: anywhere;
234}
235a:is(:hover, :focus) {
236 text-decoration-color: var(--link-color);
237}
238
239img {
240 max-width: 100%;
241}
242
243hr {
244 height: 2px;
245 border: 0;
246 padding: 0;
247 margin: 16px 0;
248 background-image: linear-gradient(
249 to right,
250 transparent,
251 var(--divider-color),
252 transparent
253 );
254}
255
256button,
257input,
258select,
259textarea {
260 font-family: inherit;
261 font-size: inherit;
262 line-height: inherit;
263 max-width: 100%;
264}
265
266button,
267.button {
268 display: inline-block;
269 padding: 8px 12px;
270 border-radius: 2.5em;
271 border: 0;
272 background-color: var(--button-bg-color);
273 color: var(--button-text-color);
274 line-height: 1;
275 vertical-align: middle;
276 text-decoration: none;
277 user-select: none;
278}
279button[hidden] {
280 display: none;
281}
282:is(button, .button) > * {
283 vertical-align: middle;
284 pointer-events: none;
285}
286:is(button, .button):not(:disabled, .disabled):is(:hover, :focus) {
287 cursor: pointer;
288 filter: brightness(1.05);
289}
290:is(button, .button):not(:disabled, .disabled):active {
291 filter: brightness(0.8);
292}
293:is(button:disabled, .button.disabled) {
294 opacity: 0.5;
295}
296
297:is(button, .button).plain {
298 background-color: transparent;
299 color: var(--link-color);
300 backdrop-filter: blur(12px);
301}
302:is(button, .button).plain2 {
303 background-color: transparent;
304 color: var(--link-color);
305 backdrop-filter: blur(12px) invert(0.1);
306}
307:is(button, .button).plain3 {
308 background-color: transparent;
309 color: var(--button-text-color);
310 backdrop-filter: blur(12px) invert(0.25);
311}
312:is(button, .button).plain4 {
313 background-color: transparent;
314 color: var(--text-insignificant-color);
315}
316:is(button, .button).plain4:not(:disabled, .disabled):is(:hover, :focus) {
317 color: var(--text-color);
318}
319:is(button, .button).plain5 {
320 background-color: transparent;
321 color: var(--link-color);
322 text-decoration: underline;
323 text-decoration-color: var(--link-faded-color);
324}
325:is(button, .button).plain5:not(:disabled, .disabled):is(:hover, :focus) {
326 text-decoration: underline;
327}
328:is(button, .button).plain6 {
329 background-color: var(--bg-blur-color);
330 color: var(--link-color);
331 border: 1px solid var(--link-color);
332}
333:is(button, .button).plain6:not(:disabled, .disabled):is(:hover, :focus) {
334 background-color: var(--link-bg-color);
335}
336:is(button, .button).light {
337 background-color: var(--bg-faded-color);
338 color: var(--text-color);
339 border: 1px solid var(--outline-color);
340}
341:is(button, .button).light:not(:disabled, .disabled):is(:hover, :focus) {
342 border-color: var(--outline-hover-color);
343}
344:is(button, .button).light.danger:not(:disabled, .disabled) {
345 color: var(--red-color);
346}
347
348:is(button, .button).block {
349 display: block;
350 width: 100%;
351 padding: 12px;
352}
353
354:is(button, .button).textual {
355 padding: 0;
356 margin: 0;
357 vertical-align: baseline;
358 color: var(--link-color);
359 background-color: transparent;
360 border-radius: 0;
361}
362
363:is(button, .button).swap {
364 display: grid;
365 /* 1 column, 1 row */
366 grid-template-columns: 1fr;
367 grid-template-rows: 1fr;
368}
369:is(button, .button).swap > * {
370 grid-column: 1;
371 grid-row: 1;
372 transition: opacity 0.3s;
373}
374:is(button, .button).swap > *:nth-child(2) {
375 opacity: 0;
376}
377:is(button, .button).swap:is(:hover, :focus) > *:nth-child(2) {
378 opacity: 1;
379}
380:is(button, .button).swap[data-swap-state='danger']:is(:hover, :focus) {
381 color: var(--red-color);
382 border-color: var(--red-color);
383}
384:is(button, .button).swap:is(:hover, :focus) > *:nth-child(1) {
385 opacity: 0;
386}
387
388input[type='text'],
389input[type='search'],
390input[type='datetime-local'],
391textarea,
392select {
393 color: var(--text-color);
394 background-color: var(--bg-color);
395 border: 2px solid var(--divider-color);
396 padding: 8px;
397 border-radius: 4px;
398}
399input[type='text']:focus,
400input[type='search']:focus,
401input[type='datetime-local']:focus,
402textarea:focus,
403select:focus {
404 border-color: var(--outline-color);
405}
406input[type='text'].large,
407textarea.large,
408select.large,
409button.large {
410 font-size: 125%;
411 padding: 12px;
412}
413textarea:disabled {
414 background-color: var(--bg-faded-color);
415}
416
417:is(input[type='text'], input[type='search'], textarea, select).block {
418 display: block;
419 width: 100%;
420}
421
422:is(button, .button, select).small {
423 font-size: 90%;
424 padding: 4px 8px;
425}
426
427.button.centered {
428 display: inline-flex;
429 justify-content: center;
430 align-items: center;
431}
432
433select.plain {
434 border: 0;
435 background-color: transparent;
436}
437
438pre {
439 tab-size: 2;
440}
441pre code,
442code,
443kbd {
444 font-size: 90%;
445 font-family: var(--monospace-font);
446}
447
448@media (prefers-color-scheme: dark) {
449 :is(button, .button).plain2 {
450 backdrop-filter: blur(12px) brightness(0.5);
451 }
452}
453
454[tabindex='-1'] {
455 outline: 0;
456}
457
458:not([tabindex='-1']):focus-visible {
459 outline: 2px solid var(--focus-ring-color);
460}
461
462/* UTILS */
463
464.ib {
465 display: inline-block;
466}
467
468.spacer {
469 flex-grow: 1;
470}
471
472.insignificant {
473 color: var(--text-insignificant-color);
474}
475.more-insignificant {
476 opacity: 0.5;
477}
478
479.hide-until-focus-visible {
480 display: none;
481}
482:has(:focus-visible) .hide-until-focus-visible {
483 display: initial;
484}
485
486.bidi-isolate {
487 direction: initial;
488 unicode-bidi: isolate;
489}
490
491/* KEYFRAMES */
492
493@keyframes appear {
494 from {
495 opacity: 0;
496 }
497 to {
498 opacity: 1;
499 }
500}
501
502@keyframes appear-smooth {
503 from {
504 opacity: 0;
505 transform: scale(0.98);
506 }
507 to {
508 opacity: 1;
509 transform: scale(1);
510 }
511}
512
513@keyframes fade-in {
514 from {
515 opacity: 0;
516 transform: translateY(10px);
517 }
518 to {
519 opacity: 1;
520 transform: translateY(0);
521 }
522}
523
524@keyframes slide-up {
525 0% {
526 transform: translateY(100%);
527 }
528 100% {
529 transform: translateY(0);
530 }
531}
532
533@keyframes slide-up-smooth {
534 0% {
535 opacity: 0;
536 transform: translateY(100%);
537 }
538 100% {
539 opacity: 1;
540 transform: translateY(0);
541 }
542}
543
544@keyframes position-object {
545 0% {
546 object-position: 50% 50%;
547 }
548 25% {
549 object-position: 0% 0%;
550 }
551 75% {
552 object-position: 100% 100%;
553 }
554 100% {
555 object-position: 50% 50%;
556 }
557}
558
559@keyframes shazam {
560 0% {
561 grid-template-rows: 0fr;
562 }
563 100% {
564 grid-template-rows: 1fr;
565 }
566}
567.shazam-container {
568 display: grid;
569 grid-template-rows: 1fr;
570 transition: grid-template-rows 0.5s ease-in-out;
571}
572.shazam-container:not(.no-animation) {
573 animation: shazam 0.5s ease-in-out both !important;
574}
575.shazam-container[hidden] {
576 grid-template-rows: 0fr;
577}
578.shazam-container-inner {
579 overflow: hidden;
580}
581
582@keyframes shazam-horizontal {
583 0% {
584 grid-template-columns: 0fr;
585 }
586 100% {
587 grid-template-columns: 1fr;
588 }
589}
590.shazam-container-horizontal {
591 display: grid;
592 grid-template-columns: 1fr;
593 transition: grid-template-columns 0.5s ease-in-out;
594 white-space: nowrap;
595}
596.shazam-container-horizontal:not(.no-animation) {
597 animation: shazam-horizontal 0.5s ease-in-out both !important;
598}
599.shazam-container-horizontal[hidden] {
600 grid-template-columns: 0fr;
601}
602
603.shazam {
604 transition: all 0.3s ease-out allow-discrete;
605 @starting-style {
606 display: none;
607 opacity: 0;
608 height: 0;
609 overflow: clip;
610 }
611}
612
613@keyframes spin {
614 to {
615 transform: rotate(360deg);
616 }
617}