Bluesky app fork with some witchin' additions 馃挮
1/**
2 * IMPORTANT
3 *
4 * Some of these styles are duplicated in the `web/index.html` and
5 * `bskyweb/templates/base.html` files. Depending on what you're updating, you
6 * may need to touch all three. Ask Eric if you aren't sure.
7 */
8
9/**
10 * BEGIN STYLES
11 *
12 * HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html`
13 */
14:root {
15 --text: black;
16 --background: #fefbfb;
17 --backgroundLight: #fefbfb;
18}
19@media (prefers-color-scheme: dark) {
20 :root {
21 color-scheme: dark;
22 --text: white;
23 --background: #222020;
24 --backgroundLight: #222020;
25 }
26}
27
28html.theme--light {
29 --text: black;
30 --background: #fefbfb;
31 --backgroundLight: #fefbfb;
32 background-color: #fefbfb;
33}
34html.theme--dark {
35 color-scheme: dark;
36 background-color: #000000;
37 --text: white;
38 --background: #000000;
39 --backgroundLight: #000000;
40}
41html.theme--dim {
42 color-scheme: dark;
43 background-color: #222020;
44 --text: white;
45 --background: #222020;
46 --backgroundLight: #222020;
47}
48/* Buttons and inputs have a font set by UA, so we'll have to reset that */
49button,
50input,
51textarea {
52 font: inherit;
53 line-height: inherit;
54}
55
56/* Remove autofill styles on Webkit */
57input:autofill,
58input:-webkit-autofill,
59input:-webkit-autofill:hover,
60input:-webkit-autofill:focus,
61input:-webkit-autofill:active {
62 -webkit-background-clip: text;
63 -webkit-text-fill-color: var(--text);
64 transition: background-color 5000s ease-in-out 0s;
65 box-shadow: inset 0 0 20px 20px var(--background);
66 background: var(--background);
67 color: var(--text);
68}
69/* Force left-align date/time inputs on iOS mobile */
70input::-webkit-date-and-time-value {
71 text-align: left;
72}
73
74/* Remove default link styling */
75a {
76 color: inherit;
77}
78a[role='link']:hover {
79 text-decoration: underline;
80}
81a[role='link'][data-no-underline='1']:hover {
82 text-decoration: none;
83}
84
85/* Styling hacks */
86*[data-word-wrap] {
87 word-break: break-word;
88}
89*[data-stable-gutters] {
90 scrollbar-gutter: stable both-edges;
91}
92
93/* ProseMirror */
94.ProseMirror {
95 min-height: inherit;
96}
97.ProseMirror-dark {
98 color: white;
99}
100.ProseMirror p {
101 margin: 0;
102}
103.ProseMirror p.is-editor-empty:first-child::before {
104 color: #8d8e96;
105 content: attr(data-placeholder);
106 float: left;
107 height: 0;
108 pointer-events: none;
109}
110.ProseMirror .mention {
111 color: var(--mention-color, #ed5345);
112}
113.ProseMirror a,
114.ProseMirror .autolink {
115 color: var(--mention-color, #ed5345);
116}
117/* OLLIE: TODO -- this is not accessible */
118/* Remove focus state on inputs */
119.ProseMirror-focused {
120 outline: 0;
121}
122textarea:focus,
123input:focus {
124 outline: 0;
125}
126.tippy-content .items {
127 width: fit-content;
128}
129
130/* Tooltips */
131[data-tooltip] {
132 position: relative;
133 z-index: 10;
134}
135[data-tooltip]::after {
136 content: attr(data-tooltip);
137 display: none;
138 position: absolute;
139 bottom: 0;
140 left: 50%;
141 transform: translateY(100%) translateY(8px) translateX(-50%);
142 padding: 4px 10px;
143 border-radius: 10px;
144 background: var(--backgroundLight);
145 color: var(--text);
146 text-align: center;
147 white-space: nowrap;
148 font-size: 12px;
149 z-index: 10;
150}
151[data-tooltip]::before {
152 content: '';
153 display: none;
154 position: absolute;
155 border-bottom: 6px solid var(--backgroundLight);
156 border-left: 6px solid transparent;
157 border-right: 6px solid transparent;
158 bottom: 0;
159 left: 50%;
160 transform: translateY(100%) translateY(2px) translateX(-50%);
161 z-index: 10;
162}
163[data-tooltip]:hover::after,
164[data-tooltip]:hover::before {
165 display: block;
166}
167
168/* NativeDropdown component */
169.radix-dropdown-item:focus,
170.nativeDropdown-item:focus {
171 outline: none;
172}
173
174/* Spinner component */
175@keyframes rotate {
176 0% {
177 transform: rotate(0deg);
178 }
179 100% {
180 transform: rotate(360deg);
181 }
182}
183.rotate-500ms {
184 position: absolute;
185 inset: 0;
186 animation: rotate 500ms linear infinite;
187}
188
189/* animations for atoms */
190@keyframes fadeIn {
191 from {
192 opacity: 0;
193 }
194 to {
195 opacity: 1;
196 }
197}
198
199@keyframes fadeOut {
200 from {
201 opacity: 1;
202 }
203 to {
204 opacity: 0;
205 }
206}
207
208@keyframes zoomIn {
209 from {
210 transform: scale(0.95);
211 }
212 to {
213 transform: scale(1);
214 }
215}
216
217@keyframes slideInLeft {
218 from {
219 transform: translateX(-100%);
220 }
221 to {
222 transform: translateX(0);
223 }
224}
225
226@keyframes slideOutLeft {
227 from {
228 transform: translateX(0);
229 }
230 to {
231 transform: translateX(-100%);
232 }
233}
234
235@keyframes slideUp {
236 from {
237 transform: translateY(100%);
238 }
239 to {
240 transform: translateY(0);
241 }
242}
243
244@keyframes slideDown {
245 from {
246 transform: translateY(0);
247 }
248 to {
249 transform: translateY(100%);
250 }
251}
252
253/* suppress native touch gestures on PWA bottom bar and dialogs */
254@media (pointer: coarse) {
255 [role='navigation'],
256 [role='navigation'] * {
257 -webkit-touch-callout: none !important;
258 -webkit-user-select: none !important;
259 user-select: none !important;
260 }
261 [role='dialog'],
262 [role='dialog'] * {
263 -webkit-touch-callout: none !important;
264 -webkit-user-select: none !important;
265 user-select: none !important;
266 }
267}
268
269/* animating radix dropdowns requires knowing the data attributes */
270.dropdown-menu-transform-origin > * {
271 transform-origin: var(--radix-dropdown-menu-content-transform-origin);
272}
273.dropdown-menu-constrain-size > * {
274 max-height: var(--radix-dropdown-menu-content-available-height);
275}
276
277.force-no-clicks > *,
278.force-no-clicks * {
279 pointer-events: none !important;
280}
281
282input[type='range'][orient='vertical'] {
283 writing-mode: vertical-lr;
284 direction: rtl;
285 appearance: slider-vertical;
286 width: 16px;
287 vertical-align: bottom;
288 -webkit-appearance: none;
289 appearance: none;
290 background: transparent;
291 cursor: pointer;
292}
293
294input[type='range'][orient='vertical']::-webkit-slider-runnable-track {
295 background: white;
296 height: 100%;
297 width: 4px;
298 border-radius: 4px;
299}
300
301input[type='range'][orient='vertical']::-moz-range-track {
302 background: white;
303 height: 100%;
304 width: 4px;
305 border-radius: 4px;
306}
307
308input[type='range']::-webkit-slider-thumb {
309 -webkit-appearance: none;
310 appearance: none;
311 border-radius: 50%;
312 background-color: white;
313 height: 16px;
314 width: 16px;
315 margin-left: -6px;
316}
317
318input[type='range'][orient='vertical']::-moz-range-thumb {
319 border: none;
320 border-radius: 50%;
321 background-color: white;
322 height: 16px;
323 width: 16px;
324 margin-left: -6px;
325}
326
327/*
328 * EmojiReactionPicker dropdown elements, within Radix components
329 */
330.EmojiReactionPicker__Pressable {
331 cursor: pointer;
332 border: 1px solid transparent;
333}
334.EmojiReactionPicker__Pressable:focus {
335 outline: none;
336 border-color: var(--text);
337}
338.EmojiReactionPicker__Pressable:hover {
339 outline: none;
340 transform: scale(1.1);
341 border-color: transparent;
342}
343.EmojiReactionPicker__Pressable:not(.__selected).__disabled {
344 transform: scale(1) !important;
345 border-color: transparent !important;
346 opacity: 0.7;
347}
348.EmojiReactionPicker__Pressable ~ button {
349 cursor: pointer;
350 border: 1px solid transparent;
351}
352.EmojiReactionPicker__Pressable ~ button:focus {
353 outline: none;
354 border-color: var(--text);
355}
356.EmojiReactionPicker__Pressable ~ button:hover {
357 outline: none;
358 background-color: var(--backgroundLight);
359 border-color: transparent;
360}
361
362/* #/components/Select/index.web.tsx */
363.radix-select-content {
364 box-shadow:
365 0px 6px 24px -10px rgba(22, 23, 24, 0.25),
366 0px 6px 12px -12px rgba(22, 23, 24, 0.15);
367 min-width: var(--radix-select-trigger-width);
368 max-height: var(--radix-select-content-available-height);
369}
370
371/*
372 * #/components/Tooltip/index.web.tsx
373 */
374.radix-popover-content {
375 animation-duration: 300ms;
376 animation-timing-function: cubic-bezier(0.17, 0.73, 0.14, 1);
377 will-change: transform, opacity;
378}
379.radix-popover-content[data-state='open'][data-side='top'] {
380 animation-name: radixPopoverSlideUpAndFade;
381}
382.radix-popover-content[data-state='open'][data-side='bottom'] {
383 animation-name: radixPopoverSlideDownAndFade;
384}
385@keyframes radixPopoverSlideUpAndFade {
386 from {
387 opacity: 0;
388 transform: translateY(2px);
389 }
390 to {
391 opacity: 1;
392 transform: translateY(0);
393 }
394}
395@keyframes radixPopoverSlideDownAndFade {
396 from {
397 opacity: 0;
398 transform: translateY(-2px);
399 }
400 to {
401 opacity: 1;
402 transform: translateY(0);
403 }
404}
405
406/*
407 * #/components/Toast/index.web.tsx
408 */
409@keyframes toastFadeIn {
410 from {
411 opacity: 0;
412 }
413 to {
414 opacity: 1;
415 }
416}
417@keyframes toastFadeOut {
418 from {
419 opacity: 1;
420 }
421 to {
422 opacity: 0;
423 }
424}