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