Something went wrong. Try again.
an appview-less Bluesky client using Constellation and PDS Queries - https://reddwarf.app/ forked from whey.party/red-dwarf
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Spectral+SC:wght@500&display=swap');@import "tailwindcss";
/* @theme { --color-gray-50: oklch(0.984 0.005 220.000); --color-gray-100: oklch(0.968 0.010 220.000); --color-gray-200: oklch(0.929 0.020 222.000); --color-gray-300: oklch(0.869 0.035 220.000); --color-gray-400: oklch(0.704 0.060 218.000); --color-gray-500: oklch(0.554 0.070 218.000); --color-gray-600: oklch(0.446 0.065 218.000); --color-gray-700: oklch(0.372 0.060 218.000); --color-gray-800: oklch(0.279 0.055 220.000); --color-gray-900: oklch(0.208 0.050 222.000); --color-gray-950: oklch(0.129 0.050 222.000);} */
:root { --safe-hue: var(--tw-gray-hue, 28)}
@theme { --color-gray-50: oklch(0.984 0.012 var(--safe-hue)); --color-gray-100: oklch(0.968 0.017 var(--safe-hue)); --color-gray-200: oklch(0.929 0.025 var(--safe-hue)); --color-gray-300: oklch(0.869 0.035 var(--safe-hue)); --color-gray-400: oklch(0.704 0.05 var(--safe-hue)); --color-gray-500: oklch(0.554 0.06 var(--safe-hue)); --color-gray-600: oklch(0.446 0.058 var(--safe-hue)); --color-gray-700: oklch(0.372 0.058 var(--safe-hue)); --color-gray-800: oklch(0.279 0.055 var(--safe-hue)); --color-gray-900: oklch(0.208 0.055 var(--safe-hue)); --color-gray-950: oklch(0.129 0.055 var(--safe-hue));}
@layer base { html { color-scheme: light dark; }
* { @apply border-gray-200 dark:border-gray-800; }
html, body { @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200; }
.using-mouse * { outline: none !important; }}
.gutter{ scrollbar-gutter: stable both-edges;}
@media (width >= 64rem /* 1024px */) { html:not(:has(.disablegutter)), body:not(:has(.disablegutter)) { scrollbar-gutter: stable both-edges !important; } html:has(.disablescroll), body:has(.disablescroll) { scrollbar-width: none; overflow-y: hidden; }}
.lightbox:has(+.lightbox-sidebar){ opacity: 0;}
.scroll-thin { scrollbar-width: thin; /*scrollbar-gutter: stable both-edges !important;*/}
.scroll-none { scrollbar-width: none;}
.dangerousFediContent { & a[href]{ text-decoration: none; color: rgb(29, 122, 242); word-break: break-all; }}
.font-inter { font-family: "Inter", sans-serif;}.font-roboto { font-family: "Roboto", sans-serif;}
:root { --header-bg-light: color-mix(in srgb, var(--color-white) calc(var(--is-top) * 100%), var(--color-gray-50)); --header-bg-dark: color-mix(in srgb, var(--color-gray-950) calc(var(--is-top) * 100%), var(--color-gray-900));}
:root { --header-bg: var(--header-bg-light);}@media (prefers-color-scheme: dark) { :root { --header-bg: var(--header-bg-dark); }}
:root { --shadow-opacity: calc(1 - var(--is-top)); --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15));}
/* m3 input */:root { --m3input-radius: 6px; --m3input-border-width: .0625rem; --m3input-font-size: 16px; --m3input-transition: 150ms cubic-bezier(.2, .8, .2, 1); /* light theme */ --m3input-bg: var(--color-gray-50); --m3input-border-color: var(--color-gray-400); --m3input-label-color: var(--color-gray-500); --m3input-text-color: var(--color-gray-900); --m3input-focus-color: var(--color-gray-600);}
@media (prefers-color-scheme: dark) { :root { --m3input-bg: var(--color-gray-950); --m3input-border-color: var(--color-gray-700); --m3input-label-color: var(--color-gray-400); --m3input-text-color: var(--color-gray-50); --m3input-focus-color: var(--color-gray-400); }}
/* reset page *//*html,body { background: var(--m3input-bg); margin: 0; padding: 1rem; color: var(--m3input-text-color); font-family: system-ui, sans-serif; font-size: var(--m3input-font-size);}*/
/* base wrapper */.m3input-field.m3input-label.m3input-border { position: relative; display: inline-block; width: 100%; /*max-width: 400px;*/}
/* size variants */.m3input-field.size-sm { --m3input-h: 40px;}
.m3input-field.size-md { --m3input-h: 48px;}
.m3input-field.size-lg { --m3input-h: 56px;}
.m3input-field.size-xl { --m3input-h: 64px;}
.m3input-field.m3input-label.m3input-border:not(.size-sm):not(.size-md):not(.size-lg):not(.size-xl) { --m3input-h: 48px;}
/* outlined input */.m3input-field.m3input-label.m3input-border input { width: 100%; height: var(--m3input-h); border: var(--m3input-border-width) solid var(--m3input-border-color); border-radius: var(--m3input-radius); background: var(--m3input-bg); color: var(--m3input-text-color); font-size: var(--m3input-font-size); padding: 0 12px; box-sizing: border-box; outline: none; transition: border-color var(--m3input-transition), box-shadow var(--m3input-transition);}
/* focus ring */.m3input-field.m3input-label.m3input-border input:focus { border-color: var(--m3input-focus-color); /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/}
/* label */.m3input-field.m3input-label.m3input-border label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: var(--m3input-bg); padding: 0 .25em; color: var(--m3input-label-color); pointer-events: none; transition: all var(--m3input-transition);}
/* float on focus or when filled */.m3input-field.m3input-label.m3input-border input:focus+label,.m3input-field.m3input-label.m3input-border input:not(:placeholder-shown)+label { top: 0; transform: translateY(-50%) scale(.78); left: 0; color: var(--m3input-focus-color);}
/* placeholder trick */.m3input-field.m3input-label.m3input-border input::placeholder { color: transparent;}
/* radix i love you but like cmon man */body[data-scroll-locked]{ margin-left: var(--removed-body-scroll-bar-size) !important;}