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.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371@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);*/ border-color: var(--m3input-focus-color); box-shadow: 0 0 0 1px 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;}
/* radix tabs */
.m3tab[data-radix-collection-item] { flex: 1; display: flex; padding: 12px 8px; align-items: center; justify-content: center; color: var(--color-gray-500); font-weight: 500; &:hover { background-color: var(--color-gray-100); cursor: pointer; } &[aria-selected="true"] { color: var(--color-gray-950); &::before{ content: ""; position: absolute; width: min(80px, 80%); border-radius: 99px 99px 0px 0px ; height: 3px; bottom: 0; background-color: var(--color-gray-400); } }}
@media (prefers-color-scheme: dark) { .m3tab[data-radix-collection-item] { color: var(--color-gray-400); &:hover { background-color: var(--color-gray-900); cursor: pointer; } &[aria-selected="true"] { color: var(--color-gray-50); &::before{ background-color: var(--color-gray-500); } } }}
:root{--thumb-size: 2rem;--root-size: 3.25rem;
--switch-off-border: var(--color-gray-400);--switch-off-bg: var(--color-gray-200);--switch-off-thumb: var(--color-gray-400);
--switch-on-bg: var(--color-gray-500);--switch-on-thumb: var(--color-gray-50);
}@media (prefers-color-scheme: dark) { :root { --switch-off-border: var(--color-gray-500); --switch-off-bg: var(--color-gray-800); --switch-off-thumb: var(--color-gray-500);
--switch-on-bg: var(--color-gray-400); --switch-on-thumb: var(--color-gray-700); }}
.m3switch.root{ /*w-10 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-gray-500 transition-colors*/ /*width: 40px; height: 24px;*/
inline-size: var(--root-size); block-size: 2rem; border-radius: 99999px;
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */
.m3switch.thumb{ /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ height: var(--thumb-size); width: var(--thumb-size); display: inline-block; border-radius: 9999px;
transform-origin: center;
transition-property: transform, translate, scale, rotate; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ }
&[aria-checked="true"] { box-shadow: inset 0px 0px 0px 1.8px transparent; background-color: var(--switch-on-bg);
.m3switch.thumb{ /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/
background-color: var(--switch-on-thumb); transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.72); &:active { transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88); }
} &:active .m3switch.thumb{ transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88); } }
&[aria-checked="false"] { box-shadow: inset 0px 0px 0px 1.8px var(--switch-off-border); background-color: var(--switch-off-bg); .m3switch.thumb{ /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/ background-color: var(--switch-off-thumb); transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.5); &:active { transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88); } } &:active .m3switch.thumb{ transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88); } }}