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