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