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