forked from
jollywhoppers.com/witchsky.app
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 width: 16px;
286 vertical-align: bottom;
287 -webkit-appearance: none;
288 appearance: none;
289 background: transparent;
290 cursor: pointer;
291}
292
293input[type='range'][orient='vertical']::-webkit-slider-runnable-track {
294 background: white;
295 height: 100%;
296 width: 4px;
297 border-radius: 4px;
298}
299
300input[type='range'][orient='vertical']::-moz-range-track {
301 background: white;
302 height: 100%;
303 width: 4px;
304 border-radius: 4px;
305}
306
307input[type='range']::-webkit-slider-thumb {
308 -webkit-appearance: none;
309 appearance: none;
310 border-radius: 50%;
311 background-color: white;
312 height: 16px;
313 width: 16px;
314 margin-left: -6px;
315}
316
317input[type='range'][orient='vertical']::-moz-range-thumb {
318 border: none;
319 border-radius: 50%;
320 background-color: white;
321 height: 16px;
322 width: 16px;
323 margin-left: -6px;
324}
325
326/*
327 * EmojiReactionPicker dropdown elements, within Radix components
328 */
329.EmojiReactionPicker__Pressable {
330 cursor: pointer;
331 border: 1px solid transparent;
332}
333.EmojiReactionPicker__Pressable:focus {
334 outline: none;
335 border-color: var(--text);
336}
337.EmojiReactionPicker__Pressable:hover {
338 outline: none;
339 transform: scale(1.1);
340 border-color: transparent;
341}
342.EmojiReactionPicker__Pressable:not(.__selected).__disabled {
343 transform: scale(1) !important;
344 border-color: transparent !important;
345 opacity: 0.7;
346}
347.EmojiReactionPicker__Pressable ~ button {
348 cursor: pointer;
349 border: 1px solid transparent;
350}
351.EmojiReactionPicker__Pressable ~ button:focus {
352 outline: none;
353 border-color: var(--text);
354}
355.EmojiReactionPicker__Pressable ~ button:hover {
356 outline: none;
357 background-color: var(--backgroundLight);
358 border-color: transparent;
359}
360
361/* #/components/Select/index.web.tsx */
362.radix-select-content {
363 box-shadow:
364 0px 6px 24px -10px rgba(22, 23, 24, 0.25),
365 0px 6px 12px -12px rgba(22, 23, 24, 0.15);
366 min-width: var(--radix-select-trigger-width);
367 max-height: var(--radix-select-content-available-height);
368}
369
370/*
371 * #/components/Tooltip/index.web.tsx
372 */
373.radix-popover-content {
374 animation-duration: 300ms;
375 animation-timing-function: cubic-bezier(0.17, 0.73, 0.14, 1);
376}
377.radix-popover-content[data-state='open'] {
378 will-change: transform, opacity;
379}
380.radix-popover-content[data-state='open'][data-side='top'] {
381 animation-name: radixPopoverSlideUpAndFade;
382}
383.radix-popover-content[data-state='open'][data-side='bottom'] {
384 animation-name: radixPopoverSlideDownAndFade;
385}
386@keyframes radixPopoverSlideUpAndFade {
387 from {
388 opacity: 0;
389 transform: translateY(2px);
390 }
391 to {
392 opacity: 1;
393 transform: translateY(0);
394 }
395}
396@keyframes radixPopoverSlideDownAndFade {
397 from {
398 opacity: 0;
399 transform: translateY(-2px);
400 }
401 to {
402 opacity: 1;
403 transform: translateY(0);
404 }
405}
406
407/*
408 * #/components/Toast/index.web.tsx
409 */
410@keyframes toastFadeIn {
411 from {
412 opacity: 0;
413 }
414 to {
415 opacity: 1;
416 }
417}
418@keyframes toastFadeOut {
419 from {
420 opacity: 1;
421 }
422 to {
423 opacity: 0;
424 }
425}