madoka.systems
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.ProseMirror .format-delimiter {
118 opacity: 0.35;
119}
120.ProseMirror .format-bold {
121 font-weight: 700;
122}
123.ProseMirror .format-italic {
124 font-style: italic;
125}
126.ProseMirror .format-underline {
127 text-decoration: underline;
128}
129.ProseMirror .format-italic + .format-delimiter {
130 padding-left: 2px;
131}
132/* OLLIE: TODO -- this is not accessible */
133/* Remove focus state on inputs */
134.ProseMirror-focused {
135 outline: 0;
136}
137textarea:focus,
138input:focus {
139 outline: 0;
140}
141.tippy-content .items {
142 width: fit-content;
143}
144
145/* Tooltips */
146[data-tooltip] {
147 position: relative;
148 z-index: 10;
149}
150[data-tooltip]::after {
151 content: attr(data-tooltip);
152 display: none;
153 position: absolute;
154 bottom: 0;
155 left: 50%;
156 transform: translateY(100%) translateY(8px) translateX(-50%);
157 padding: 4px 10px;
158 border-radius: 10px;
159 background: var(--backgroundLight);
160 color: var(--text);
161 text-align: center;
162 white-space: nowrap;
163 font-size: 12px;
164 z-index: 10;
165}
166[data-tooltip]::before {
167 content: '';
168 display: none;
169 position: absolute;
170 border-bottom: 6px solid var(--backgroundLight);
171 border-left: 6px solid transparent;
172 border-right: 6px solid transparent;
173 bottom: 0;
174 left: 50%;
175 transform: translateY(100%) translateY(2px) translateX(-50%);
176 z-index: 10;
177}
178[data-tooltip]:hover::after,
179[data-tooltip]:hover::before {
180 display: block;
181}
182
183/* NativeDropdown component */
184.radix-dropdown-item:focus,
185.nativeDropdown-item:focus {
186 outline: none;
187}
188
189/* Spinner component */
190@keyframes rotate {
191 0% {
192 transform: rotate(0deg);
193 }
194 100% {
195 transform: rotate(360deg);
196 }
197}
198.rotate-500ms {
199 position: absolute;
200 inset: 0;
201 animation: rotate 500ms linear infinite;
202}
203
204/* animations for atoms */
205@keyframes fadeIn {
206 from {
207 opacity: 0;
208 }
209 to {
210 opacity: 1;
211 }
212}
213
214@keyframes fadeOut {
215 from {
216 opacity: 1;
217 }
218 to {
219 opacity: 0;
220 }
221}
222
223@keyframes zoomIn {
224 from {
225 transform: scale(0.95);
226 }
227 to {
228 transform: scale(1);
229 }
230}
231
232@keyframes slideInLeft {
233 from {
234 transform: translateX(-100%);
235 }
236 to {
237 transform: translateX(0);
238 }
239}
240
241@keyframes slideOutLeft {
242 from {
243 transform: translateX(0);
244 }
245 to {
246 transform: translateX(-100%);
247 }
248}
249
250/* animating radix dropdowns requires knowing the data attributes */
251.dropdown-menu-transform-origin > * {
252 transform-origin: var(--radix-dropdown-menu-content-transform-origin);
253}
254.dropdown-menu-constrain-size > * {
255 max-height: var(--radix-dropdown-menu-content-available-height);
256}
257
258.force-no-clicks > *,
259.force-no-clicks * {
260 pointer-events: none !important;
261}
262
263input[type='range'][orient='vertical'] {
264 writing-mode: vertical-lr;
265 direction: rtl;
266 appearance: slider-vertical;
267 width: 16px;
268 vertical-align: bottom;
269 -webkit-appearance: none;
270 appearance: none;
271 background: transparent;
272 cursor: pointer;
273}
274
275input[type='range'][orient='vertical']::-webkit-slider-runnable-track {
276 background: white;
277 height: 100%;
278 width: 4px;
279 border-radius: 4px;
280}
281
282input[type='range'][orient='vertical']::-moz-range-track {
283 background: white;
284 height: 100%;
285 width: 4px;
286 border-radius: 4px;
287}
288
289input[type='range']::-webkit-slider-thumb {
290 -webkit-appearance: none;
291 appearance: none;
292 border-radius: 50%;
293 background-color: white;
294 height: 16px;
295 width: 16px;
296 margin-left: -6px;
297}
298
299input[type='range'][orient='vertical']::-moz-range-thumb {
300 border: none;
301 border-radius: 50%;
302 background-color: white;
303 height: 16px;
304 width: 16px;
305 margin-left: -6px;
306}
307
308/*
309 * EmojiReactionPicker dropdown elements, within Radix components
310 */
311.EmojiReactionPicker__Pressable {
312 cursor: pointer;
313 border: 1px solid transparent;
314}
315.EmojiReactionPicker__Pressable:focus {
316 outline: none;
317 border-color: var(--text);
318}
319.EmojiReactionPicker__Pressable:hover {
320 outline: none;
321 transform: scale(1.1);
322 border-color: transparent;
323}
324.EmojiReactionPicker__Pressable:not(.__selected).__disabled {
325 transform: scale(1) !important;
326 border-color: transparent !important;
327 opacity: 0.7;
328}
329.EmojiReactionPicker__Pressable ~ button {
330 cursor: pointer;
331 border: 1px solid transparent;
332}
333.EmojiReactionPicker__Pressable ~ button:focus {
334 outline: none;
335 border-color: var(--text);
336}
337.EmojiReactionPicker__Pressable ~ button:hover {
338 outline: none;
339 background-color: var(--backgroundLight);
340 border-color: transparent;
341}
342
343/* #/components/Select/index.web.tsx */
344.radix-select-content {
345 box-shadow:
346 0px 6px 24px -10px rgba(22, 23, 24, 0.25),
347 0px 6px 12px -12px rgba(22, 23, 24, 0.15);
348 min-width: var(--radix-select-trigger-width);
349 max-height: var(--radix-select-content-available-height);
350}
351
352/*
353 * #/components/Tooltip/index.web.tsx
354 */
355.radix-popover-content {
356 animation-duration: 300ms;
357 animation-timing-function: cubic-bezier(0.17, 0.73, 0.14, 1);
358 will-change: transform, opacity;
359}
360.radix-popover-content[data-state='open'][data-side='top'] {
361 animation-name: radixPopoverSlideUpAndFade;
362}
363.radix-popover-content[data-state='open'][data-side='bottom'] {
364 animation-name: radixPopoverSlideDownAndFade;
365}
366@keyframes radixPopoverSlideUpAndFade {
367 from {
368 opacity: 0;
369 transform: translateY(2px);
370 }
371 to {
372 opacity: 1;
373 transform: translateY(0);
374 }
375}
376@keyframes radixPopoverSlideDownAndFade {
377 from {
378 opacity: 0;
379 transform: translateY(-2px);
380 }
381 to {
382 opacity: 1;
383 transform: translateY(0);
384 }
385}
386
387/*
388 * #/components/Toast/index.web.tsx
389 */
390@keyframes toastFadeIn {
391 from {
392 opacity: 0;
393 }
394 to {
395 opacity: 1;
396 }
397}
398@keyframes toastFadeOut {
399 from {
400 opacity: 1;
401 }
402 to {
403 opacity: 0;
404 }
405}