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@layer base {
37 html {
38 color-scheme: light dark;
39 }
40
41 * {
42 @apply border-gray-200 dark:border-gray-800;
43 }
44
45 html,
46 body {
47 @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
48 }
49
50 .using-mouse * {
51 outline: none !important;
52 }
53}
54
55.gutter{
56 scrollbar-gutter: stable both-edges;
57}
58
59@media (width >= 64rem /* 1024px */) {
60 html:not(:has(.disablegutter)),
61 body:not(:has(.disablegutter)) {
62 scrollbar-gutter: stable both-edges !important;
63 }
64 html:has(.disablescroll),
65 body:has(.disablescroll) {
66 scrollbar-width: none;
67 overflow-y: hidden;
68 }
69}
70
71.lightbox:has(+.lightbox-sidebar){
72 opacity: 0;
73}
74
75.scroll-thin {
76 scrollbar-width: thin;
77 /*scrollbar-gutter: stable both-edges !important;*/
78}
79
80.scroll-none {
81 scrollbar-width: none;
82}
83
84.dangerousFediContent {
85 & a[href]{
86 text-decoration: none;
87 color: rgb(29, 122, 242);
88 word-break: break-all;
89 }
90}
91
92.font-inter {
93 font-family: "Inter", sans-serif;
94}
95.font-roboto {
96 font-family: "Roboto", sans-serif;
97}
98
99:root {
100 --header-bg-light: color-mix(in srgb, var(--color-white) calc(var(--is-top) * 100%), var(--color-gray-50));
101 --header-bg-dark: color-mix(in srgb, var(--color-gray-950) calc(var(--is-top) * 100%), var(--color-gray-900));
102}
103
104:root {
105 --header-bg: var(--header-bg-light);
106}
107@media (prefers-color-scheme: dark) {
108 :root {
109 --header-bg: var(--header-bg-dark);
110 }
111}
112
113:root {
114 --shadow-opacity: calc(1 - var(--is-top));
115 --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15));
116}
117
118
119/* m3 input */
120:root {
121 --m3input-radius: 6px;
122 --m3input-border-width: .0625rem;
123 --m3input-font-size: 16px;
124 --m3input-transition: 150ms cubic-bezier(.2, .8, .2, 1);
125 /* light theme */
126 --m3input-bg: var(--color-gray-50);
127 --m3input-border-color: var(--color-gray-400);
128 --m3input-label-color: var(--color-gray-500);
129 --m3input-text-color: var(--color-gray-900);
130 --m3input-focus-color: var(--color-gray-600);
131}
132
133@media (prefers-color-scheme: dark) {
134 :root {
135 --m3input-bg: var(--color-gray-950);
136 --m3input-border-color: var(--color-gray-700);
137 --m3input-label-color: var(--color-gray-400);
138 --m3input-text-color: var(--color-gray-50);
139 --m3input-focus-color: var(--color-gray-400);
140 }
141}
142
143/* reset page *//*
144html,
145body {
146 background: var(--m3input-bg);
147 margin: 0;
148 padding: 1rem;
149 color: var(--m3input-text-color);
150 font-family: system-ui, sans-serif;
151 font-size: var(--m3input-font-size);
152}*/
153
154/* base wrapper */
155.m3input-field.m3input-label.m3input-border {
156 position: relative;
157 display: inline-block;
158 width: 100%;
159 /*max-width: 400px;*/
160}
161
162/* size variants */
163.m3input-field.size-sm {
164 --m3input-h: 40px;
165}
166
167.m3input-field.size-md {
168 --m3input-h: 48px;
169}
170
171.m3input-field.size-lg {
172 --m3input-h: 56px;
173}
174
175.m3input-field.size-xl {
176 --m3input-h: 64px;
177}
178
179.m3input-field.m3input-label.m3input-border:not(.size-sm):not(.size-md):not(.size-lg):not(.size-xl) {
180 --m3input-h: 48px;
181}
182
183/* outlined input */
184.m3input-field.m3input-label.m3input-border input {
185 width: 100%;
186 height: var(--m3input-h);
187 border: var(--m3input-border-width) solid var(--m3input-border-color);
188 border-radius: var(--m3input-radius);
189 background: var(--m3input-bg);
190 color: var(--m3input-text-color);
191 font-size: var(--m3input-font-size);
192 padding: 0 12px;
193 box-sizing: border-box;
194 outline: none;
195 transition: border-color var(--m3input-transition), box-shadow var(--m3input-transition);
196}
197
198/* focus ring */
199.m3input-field.m3input-label.m3input-border input:focus {
200 /*border-color: var(--m3input-focus-color);*/
201 border-color: var(--m3input-focus-color);
202 box-shadow: 0 0 0 1px var(--m3input-focus-color);
203 /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/
204}
205
206/* label */
207.m3input-field.m3input-label.m3input-border label {
208 position: absolute;
209 left: 12px;
210 top: 50%;
211 transform: translateY(-50%);
212 background: var(--m3input-bg);
213 padding: 0 .25em;
214 color: var(--m3input-label-color);
215 pointer-events: none;
216 transition: all var(--m3input-transition);
217}
218
219/* float on focus or when filled */
220.m3input-field.m3input-label.m3input-border input:focus+label,
221.m3input-field.m3input-label.m3input-border input:not(:placeholder-shown)+label {
222 top: 0;
223 transform: translateY(-50%) scale(.78);
224 left: 0;
225 color: var(--m3input-focus-color);
226}
227
228/* placeholder trick */
229.m3input-field.m3input-label.m3input-border input::placeholder {
230 color: transparent;
231}
232
233/* radix i love you but like cmon man */
234body[data-scroll-locked]{
235 margin-left: var(--removed-body-scroll-bar-size) !important;
236}
237
238/* radix tabs */
239
240.m3tab[data-radix-collection-item] {
241 flex: 1;
242 display: flex;
243 padding: 12px 8px;
244 align-items: center;
245 justify-content: center;
246 color: var(--color-gray-500);
247 font-weight: 500;
248 &:hover {
249 background-color: var(--color-gray-100);
250 cursor: pointer;
251 }
252 &[aria-selected="true"] {
253 color: var(--color-gray-950);
254 &::before{
255 content: "";
256 position: absolute;
257 width: min(80px, 80%);
258 border-radius: 99px 99px 0px 0px ;
259 height: 3px;
260 bottom: 0;
261 background-color: var(--color-gray-400);
262 }
263 }
264}
265
266@media (prefers-color-scheme: dark) {
267 .m3tab[data-radix-collection-item] {
268 color: var(--color-gray-400);
269 &:hover {
270 background-color: var(--color-gray-900);
271 cursor: pointer;
272 }
273 &[aria-selected="true"] {
274 color: var(--color-gray-50);
275 &::before{
276 background-color: var(--color-gray-500);
277 }
278 }
279 }
280}