an appview-less Bluesky client using Constellation and PDS Queries
reddwarf.app
whey.party
frontend
spa
bluesky
reddwarf
microcosm
1@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');
2@import "tailwindcss";
3
4/* @theme {
5 --color-gray-50: oklch(0.984 0.005 220.000);
6 --color-gray-100: oklch(0.968 0.010 220.000);
7 --color-gray-200: oklch(0.929 0.020 222.000);
8 --color-gray-300: oklch(0.869 0.035 220.000);
9 --color-gray-400: oklch(0.704 0.060 218.000);
10 --color-gray-500: oklch(0.554 0.070 218.000);
11 --color-gray-600: oklch(0.446 0.065 218.000);
12 --color-gray-700: oklch(0.372 0.060 218.000);
13 --color-gray-800: oklch(0.279 0.055 220.000);
14 --color-gray-900: oklch(0.208 0.050 222.000);
15 --color-gray-950: oklch(0.129 0.050 222.000);
16} */
17
18:root {
19 --safe-hue: var(--tw-gray-hue, 28)
20}
21
22@theme {
23 --color-gray-50: oklch(0.984 0.012 var(--safe-hue));
24 --color-gray-100: oklch(0.968 0.017 var(--safe-hue));
25 --color-gray-200: oklch(0.929 0.025 var(--safe-hue));
26 --color-gray-300: oklch(0.869 0.035 var(--safe-hue));
27 --color-gray-400: oklch(0.704 0.05 var(--safe-hue));
28 --color-gray-500: oklch(0.554 0.06 var(--safe-hue));
29 --color-gray-600: oklch(0.446 0.058 var(--safe-hue));
30 --color-gray-700: oklch(0.372 0.058 var(--safe-hue));
31 --color-gray-800: oklch(0.279 0.055 var(--safe-hue));
32 --color-gray-900: oklch(0.208 0.055 var(--safe-hue));
33 --color-gray-950: oklch(0.129 0.055 var(--safe-hue));
34}
35
36:root {
37 --link-text-color: oklch(0.5962 0.1987 var(--safe-hue));
38 /* max chroma!!! use fallback*/
39 /*--link-text-color: oklch(0.6 0.37 var(--safe-hue));*/
40}
41
42@layer base {
43 html {
44 color-scheme: light dark;
45 }
46
47 * {
48 @apply border-gray-200 dark:border-gray-800;
49 }
50
51 html,
52 body {
53 @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
54 }
55
56 .using-mouse * {
57 outline: none !important;
58 }
59}
60
61.gutter{
62 scrollbar-gutter: stable both-edges;
63}
64
65@media (width >= 64rem /* 1024px */) {
66 html:not(:has(.disablegutter)),
67 body:not(:has(.disablegutter)) {
68 scrollbar-gutter: stable both-edges !important;
69 }
70 html:has(.disablescroll),
71 body:has(.disablescroll) {
72 scrollbar-width: none;
73 overflow-y: hidden;
74 }
75}
76
77.lightbox:has(+.lightbox-sidebar){
78 opacity: 0;
79}
80
81.scroll-thin {
82 scrollbar-width: thin;
83 /*scrollbar-gutter: stable both-edges !important;*/
84}
85
86.scroll-none {
87 scrollbar-width: none;
88}
89
90.dangerousFediContent {
91 & a[href]{
92 text-decoration: none;
93 color: var(--link-text-color);
94 word-break: break-all;
95 }
96}
97
98.font-inter {
99 font-family: "Inter", sans-serif;
100}
101.font-roboto {
102 font-family: "Roboto", sans-serif;
103}
104
105:root {
106 --header-bg-light: color-mix(in srgb, var(--color-white) calc(var(--is-top) * 100%), var(--color-gray-50));
107 --header-bg-dark: color-mix(in srgb, var(--color-gray-950) calc(var(--is-top) * 100%), var(--color-gray-900));
108}
109
110:root {
111 --header-bg: var(--header-bg-light);
112}
113@media (prefers-color-scheme: dark) {
114 :root {
115 --header-bg: var(--header-bg-dark);
116 }
117}
118
119:root {
120 --shadow-opacity: calc(1 - var(--is-top));
121 --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15));
122}
123
124
125/* m3 input */
126:root {
127 --m3input-radius: 6px;
128 --m3input-border-width: .0625rem;
129 --m3input-font-size: 16px;
130 --m3input-transition: 150ms cubic-bezier(.2, .8, .2, 1);
131 /* light theme */
132 --m3input-bg: var(--color-gray-50);
133 --m3input-border-color: var(--color-gray-400);
134 --m3input-label-color: var(--color-gray-500);
135 --m3input-text-color: var(--color-gray-900);
136 --m3input-focus-color: var(--color-gray-600);
137}
138
139@media (prefers-color-scheme: dark) {
140 :root {
141 --m3input-bg: var(--color-gray-950);
142 --m3input-border-color: var(--color-gray-700);
143 --m3input-label-color: var(--color-gray-400);
144 --m3input-text-color: var(--color-gray-50);
145 --m3input-focus-color: var(--color-gray-400);
146 }
147}
148
149/* reset page *//*
150html,
151body {
152 background: var(--m3input-bg);
153 margin: 0;
154 padding: 1rem;
155 color: var(--m3input-text-color);
156 font-family: system-ui, sans-serif;
157 font-size: var(--m3input-font-size);
158}*/
159
160/* base wrapper */
161.m3input-field.m3input-label.m3input-border {
162 position: relative;
163 display: inline-block;
164 width: 100%;
165 /*max-width: 400px;*/
166}
167
168/* size variants */
169.m3input-field.size-sm {
170 --m3input-h: 40px;
171}
172
173.m3input-field.size-md {
174 --m3input-h: 48px;
175}
176
177.m3input-field.size-lg {
178 --m3input-h: 56px;
179}
180
181.m3input-field.size-xl {
182 --m3input-h: 64px;
183}
184
185.m3input-field.m3input-label.m3input-border:not(.size-sm):not(.size-md):not(.size-lg):not(.size-xl) {
186 --m3input-h: 48px;
187}
188
189/* outlined input */
190.m3input-field.m3input-label.m3input-border input {
191 width: 100%;
192 height: var(--m3input-h);
193 border: var(--m3input-border-width) solid var(--m3input-border-color);
194 border-radius: var(--m3input-radius);
195 background: var(--m3input-bg);
196 color: var(--m3input-text-color);
197 font-size: var(--m3input-font-size);
198 padding: 0 12px;
199 box-sizing: border-box;
200 outline: none;
201 transition: border-color var(--m3input-transition), box-shadow var(--m3input-transition);
202}
203
204/* focus ring */
205.m3input-field.m3input-label.m3input-border input:focus {
206 /*border-color: var(--m3input-focus-color);*/
207 border-color: var(--m3input-focus-color);
208 box-shadow: 0 0 0 1px var(--m3input-focus-color);
209 /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/
210}
211
212/* label */
213.m3input-field.m3input-label.m3input-border label {
214 position: absolute;
215 left: 12px;
216 top: 50%;
217 transform: translateY(-50%);
218 background: var(--m3input-bg);
219 padding: 0 .25em;
220 color: var(--m3input-label-color);
221 pointer-events: none;
222 transition: all var(--m3input-transition);
223}
224
225/* float on focus or when filled */
226.m3input-field.m3input-label.m3input-border input:focus+label,
227.m3input-field.m3input-label.m3input-border input:not(:placeholder-shown)+label {
228 top: 0;
229 transform: translateY(-50%) scale(.78);
230 left: 0;
231 color: var(--m3input-focus-color);
232}
233
234/* placeholder trick */
235.m3input-field.m3input-label.m3input-border input::placeholder {
236 color: transparent;
237}
238
239/* radix i love you but like cmon man */
240body[data-scroll-locked]{
241 margin-left: var(--removed-body-scroll-bar-size) !important;
242}
243
244/* radix tabs */
245
246.m3tab[data-radix-collection-item] {
247 flex: 1;
248 display: flex;
249 padding: 12px 8px;
250 align-items: center;
251 justify-content: center;
252 color: var(--color-gray-500);
253 font-weight: 500;
254 &:hover {
255 background-color: var(--color-gray-100);
256 cursor: pointer;
257 }
258 &[aria-selected="true"] {
259 color: var(--color-gray-950);
260 &::before{
261 content: "";
262 position: absolute;
263 width: min(80px, 80%);
264 border-radius: 99px 99px 0px 0px ;
265 height: 3px;
266 bottom: 0;
267 background-color: var(--color-gray-400);
268 }
269 }
270}
271
272@media (prefers-color-scheme: dark) {
273 .m3tab[data-radix-collection-item] {
274 color: var(--color-gray-400);
275 &:hover {
276 background-color: var(--color-gray-900);
277 cursor: pointer;
278 }
279 &[aria-selected="true"] {
280 color: var(--color-gray-50);
281 &::before{
282 background-color: var(--color-gray-500);
283 }
284 }
285 }
286}
287
288:root{
289--thumb-size: 2rem;
290--root-size: 3.25rem;
291
292--switch-off-border: var(--color-gray-400);
293--switch-off-bg: var(--color-gray-200);
294--switch-off-thumb: var(--color-gray-400);
295
296
297--switch-on-bg: var(--color-gray-500);
298--switch-on-thumb: var(--color-gray-50);
299
300}
301@media (prefers-color-scheme: dark) {
302 :root {
303 --switch-off-border: var(--color-gray-500);
304 --switch-off-bg: var(--color-gray-800);
305 --switch-off-thumb: var(--color-gray-500);
306
307
308 --switch-on-bg: var(--color-gray-400);
309 --switch-on-thumb: var(--color-gray-700);
310 }
311}
312
313.m3switch.root{
314 /*w-10 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-gray-500 transition-colors*/
315 /*width: 40px;
316 height: 24px;*/
317
318 inline-size: var(--root-size);
319 block-size: 2rem;
320 border-radius: 99999px;
321
322 transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
323 transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
324 transition-duration: var(--default-transition-duration); /* 150ms */
325
326 .m3switch.thumb{
327 /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/
328
329 height: var(--thumb-size);
330 width: var(--thumb-size);
331 display: inline-block;
332 border-radius: 9999px;
333
334 transform-origin: center;
335
336 transition-property: transform, translate, scale, rotate;
337 transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
338 transition-duration: var(--default-transition-duration); /* 150ms */
339
340 }
341
342 &[aria-checked="true"] {
343 box-shadow: inset 0px 0px 0px 1.8px transparent;
344 background-color: var(--switch-on-bg);
345
346 .m3switch.thumb{
347 /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/
348
349 background-color: var(--switch-on-thumb);
350 transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.72);
351 &:active {
352 transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88);
353 }
354
355 }
356 &:active .m3switch.thumb{
357 transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88);
358 }
359 }
360
361 &[aria-checked="false"] {
362 box-shadow: inset 0px 0px 0px 1.8px var(--switch-off-border);
363 background-color: var(--switch-off-bg);
364 .m3switch.thumb{
365 /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/
366
367 background-color: var(--switch-off-thumb);
368 transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.5);
369 &:active {
370 transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88);
371 }
372 }
373 &:active .m3switch.thumb{
374 transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88);
375 }
376 }
377}