jollywhoppers.com
Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
shi.gg
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/* animating radix dropdowns requires knowing the data attributes */
236.dropdown-menu-transform-origin > * {
237 transform-origin: var(--radix-dropdown-menu-content-transform-origin);
238}
239.dropdown-menu-constrain-size > * {
240 max-height: var(--radix-dropdown-menu-content-available-height);
241}
242
243.force-no-clicks > *,
244.force-no-clicks * {
245 pointer-events: none !important;
246}
247
248input[type='range'][orient='vertical'] {
249 writing-mode: vertical-lr;
250 direction: rtl;
251 appearance: slider-vertical;
252 width: 16px;
253 vertical-align: bottom;
254 -webkit-appearance: none;
255 appearance: none;
256 background: transparent;
257 cursor: pointer;
258}
259
260input[type='range'][orient='vertical']::-webkit-slider-runnable-track {
261 background: white;
262 height: 100%;
263 width: 4px;
264 border-radius: 4px;
265}
266
267input[type='range'][orient='vertical']::-moz-range-track {
268 background: white;
269 height: 100%;
270 width: 4px;
271 border-radius: 4px;
272}
273
274input[type='range']::-webkit-slider-thumb {
275 -webkit-appearance: none;
276 appearance: none;
277 border-radius: 50%;
278 background-color: white;
279 height: 16px;
280 width: 16px;
281 margin-left: -6px;
282}
283
284input[type='range'][orient='vertical']::-moz-range-thumb {
285 border: none;
286 border-radius: 50%;
287 background-color: white;
288 height: 16px;
289 width: 16px;
290 margin-left: -6px;
291}
292
293/*
294 * EmojiReactionPicker dropdown elements, within Radix components
295 */
296.EmojiReactionPicker__Pressable {
297 cursor: pointer;
298 border: 1px solid transparent;
299}
300.EmojiReactionPicker__Pressable:focus {
301 outline: none;
302 border-color: var(--text);
303}
304.EmojiReactionPicker__Pressable:hover {
305 outline: none;
306 transform: scale(1.1);
307 border-color: transparent;
308}
309.EmojiReactionPicker__Pressable:not(.__selected).__disabled {
310 transform: scale(1) !important;
311 border-color: transparent !important;
312 opacity: 0.7;
313}
314.EmojiReactionPicker__Pressable ~ button {
315 cursor: pointer;
316 border: 1px solid transparent;
317}
318.EmojiReactionPicker__Pressable ~ button:focus {
319 outline: none;
320 border-color: var(--text);
321}
322.EmojiReactionPicker__Pressable ~ button:hover {
323 outline: none;
324 background-color: var(--backgroundLight);
325 border-color: transparent;
326}
327
328/* #/components/Select/index.web.tsx */
329.radix-select-content {
330 box-shadow:
331 0px 6px 24px -10px rgba(22, 23, 24, 0.25),
332 0px 6px 12px -12px rgba(22, 23, 24, 0.15);
333 min-width: var(--radix-select-trigger-width);
334 max-height: var(--radix-select-content-available-height);
335}
336
337/*
338 * #/components/Tooltip/index.web.tsx
339 */
340.radix-popover-content {
341 animation-duration: 300ms;
342 animation-timing-function: cubic-bezier(0.17, 0.73, 0.14, 1);
343 will-change: transform, opacity;
344}
345.radix-popover-content[data-state='open'][data-side='top'] {
346 animation-name: radixPopoverSlideUpAndFade;
347}
348.radix-popover-content[data-state='open'][data-side='bottom'] {
349 animation-name: radixPopoverSlideDownAndFade;
350}
351@keyframes radixPopoverSlideUpAndFade {
352 from {
353 opacity: 0;
354 transform: translateY(2px);
355 }
356 to {
357 opacity: 1;
358 transform: translateY(0);
359 }
360}
361@keyframes radixPopoverSlideDownAndFade {
362 from {
363 opacity: 0;
364 transform: translateY(-2px);
365 }
366 to {
367 opacity: 1;
368 transform: translateY(0);
369 }
370}
371
372/*
373 * #/components/Toast/index.web.tsx
374 */
375@keyframes toastFadeIn {
376 from {
377 opacity: 0;
378 }
379 to {
380 opacity: 1;
381 }
382}
383@keyframes toastFadeOut {
384 from {
385 opacity: 1;
386 }
387 to {
388 opacity: 0;
389 }
390}